/**
 * Advanced Filterable Gallery — public styles.
 *
 * Pure CSS, no framework. Themed through custom properties:
 * --afg-primary, --afg-secondary, --afg-speed, --afg-font (set from settings)
 * --afg-cols, --afg-gap, --afg-radius, --afg-img-h, --afg-fit (set per gallery)
 */

/* ---------------------------------- Base ---------------------------------- */

.afg-gallery {
	--afg-primary-l: color-mix(in srgb, var(--afg-primary, #3858e9) 12%, transparent);
	--afg-overlay-bg: color-mix(in srgb, var(--afg-secondary, #1e1e2a) 72%, transparent);
	--afg-text: #1e1e2a;
	--afg-muted: #6b7080;
	--afg-surface: #ffffff;
	--afg-line: rgba(30, 30, 42, 0.1);
	font-family: var(--afg-font, inherit);
	color: var(--afg-text);
}

.afg-gallery *,
.afg-gallery *::before,
.afg-gallery *::after {
	box-sizing: border-box;
}

.afg-notice {
	padding: 12px 16px;
	border: 1px dashed rgba(30, 30, 42, 0.25);
	border-radius: 8px;
	color: #6b7080;
	font-size: 14px;
}

/* -------------------------------- Toolbar --------------------------------- */

.afg-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin: 0 0 24px;
}

.afg-align-left .afg-filters { justify-content: flex-start; }
.afg-align-center { justify-content: center; }
.afg-align-center .afg-filters { justify-content: center; }
.afg-align-right { justify-content: flex-end; }
.afg-align-right .afg-filters { justify-content: flex-end; }

.afg-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	flex: 1 1 auto;
}

.afg-filter-btn {
	appearance: none;
	border: 1px solid transparent;
	background: var(--afg-primary-l);
	color: var(--afg-text);
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	padding: 10px 18px;
	border-radius: 999px;
	cursor: pointer;
	transition:
		background-color var(--afg-speed, 400ms) ease,
		color var(--afg-speed, 400ms) ease,
		border-color var(--afg-speed, 400ms) ease,
		box-shadow var(--afg-speed, 400ms) ease,
		transform 160ms ease;
}

.afg-filter-btn:hover { transform: translateY(-1px); }
.afg-filter-btn:focus-visible {
	outline: 2px solid var(--afg-primary, #3858e9);
	outline-offset: 2px;
}

.afg-filter-btn.is-active {
	background: var(--afg-primary, #3858e9);
	color: #fff;
	box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--afg-primary, #3858e9) 65%, transparent);
}

.afg-count {
	display: inline-block;
	margin-left: 7px;
	padding: 2px 7px;
	font-size: 11px;
	font-weight: 600;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.55);
	color: inherit;
	vertical-align: 1px;
}

.afg-filter-btn.is-active .afg-count { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* Filter bar variants */
.afg-filter-underline .afg-filter-btn {
	background: transparent;
	border-radius: 0;
	padding: 10px 4px;
	border-bottom: 2px solid transparent;
}
.afg-filter-underline .afg-filter-btn.is-active {
	background: transparent;
	color: var(--afg-primary, #3858e9);
	border-bottom-color: var(--afg-primary, #3858e9);
	box-shadow: none;
}
.afg-filter-outline .afg-filter-btn {
	background: transparent;
	border-color: var(--afg-line);
}
.afg-filter-outline .afg-filter-btn.is-active {
	background: var(--afg-primary, #3858e9);
	border-color: var(--afg-primary, #3858e9);
	color: #fff;
}
.afg-filter-glass .afg-filter-btn {
	background: rgba(255, 255, 255, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 4px 14px -8px rgba(30, 30, 42, 0.35);
}
.afg-filter-glass .afg-filter-btn.is-active {
	background: var(--afg-primary, #3858e9);
	border-color: transparent;
	color: #fff;
}

/* Search box */
.afg-search {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 14px;
	border: 1px solid var(--afg-line);
	border-radius: 999px;
	background: var(--afg-surface);
	color: var(--afg-muted);
}
.afg-search-input {
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 14px;
	padding: 10px 0;
	min-width: 170px;
	color: var(--afg-text);
}
.afg-search-input:focus { outline: none; }
.afg-search:focus-within {
	border-color: var(--afg-primary, #3858e9);
	box-shadow: 0 0 0 3px var(--afg-primary-l);
}

/* ---------------------------------- Grid ---------------------------------- */

.afg-grid {
	display: grid;
	grid-template-columns: repeat(var(--afg-cols, 4), minmax(0, 1fr));
	gap: var(--afg-gap, 16px);
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
}

/* Defensive resets: some themes and Elementor add margins, floats, max-width
   or list styling to figure/img/a inside content, which breaks the grid.
   Neutralize those within our gallery only. */
.afg-gallery .afg-item,
.afg-gallery figure {
	float: none;
	max-width: none;
	margin: 0;
	padding: 0;
	margin-bottom: 15px!important;
}
.afg-gallery .afg-img {
	max-width: 100%;
	margin: 0;
	float: none;
}

.afg-item {
	margin: 0;
	position: relative;
	transition:
		opacity var(--afg-speed, 400ms) ease,
		transform var(--afg-speed, 400ms) ease;
}

.afg-item.afg-hidden { display: none; }

.afg-item.afg-filter-out {
	opacity: 0;
	transform: scale(0.85);
	pointer-events: none;
}

.afg-link {
	display: block;
	text-decoration: none;
	color: inherit;
}
.afg-link:focus-visible {
	outline: 2px solid var(--afg-primary, #3858e9);
	outline-offset: 3px;
	border-radius: var(--afg-radius, 12px);
}

.afg-media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--afg-radius, 12px);
	background: var(--afg-line);
}

.afg-img {
	display: block;
	width: 100%;
	height: var(--afg-img-h, 260px);
	object-fit: var(--afg-fit, cover);
	transition:
		transform var(--afg-speed, 400ms) cubic-bezier(0.22, 1, 0.36, 1),
		filter var(--afg-speed, 400ms) ease,
		opacity var(--afg-speed, 400ms) ease;
}

/* Hover overlay content */
.afg-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 16px;
	text-align: center;
	background: var(--afg-overlay-bg);
	color: #fff;
	opacity: 0;
	transition: opacity var(--afg-speed, 400ms) ease;
}
.afg-overlay-icon {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transform: translateY(8px);
	transition: transform var(--afg-speed, 400ms) ease;
}
.afg-overlay-title {
	font-weight: 600;
	font-size: 15px;
	transform: translateY(8px);
	transition: transform var(--afg-speed, 400ms) ease 40ms;
}
.afg-overlay-cats {
	font-size: 12px;
	opacity: 0.85;
	transform: translateY(8px);
	transition: transform var(--afg-speed, 400ms) ease 80ms;
}

/* Below-image caption */
.afg-caption {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 4px 0;
}
.afg-title { font-weight: 600; font-size: 15px; }
.afg-cats { font-size: 12px; color: var(--afg-muted); }
.afg-desc { font-size: 13px; color: var(--afg-muted); line-height: 1.5; }
.afg-item-button {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	border-radius: 8px;
	text-decoration: none;
	color: #fff;
	background: var(--afg-primary, #3858e9);
	transition: filter 160ms ease, transform 160ms ease;
}
.afg-item-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.afg-item-button:focus-visible { outline: 2px solid var(--afg-secondary, #1e1e2a); outline-offset: 2px; }

.afg-empty {
	text-align: center;
	color: var(--afg-muted);
	padding: 32px 0;
}

/* -------------------------------- Layouts --------------------------------- */

/* 1. Basic Grid — defaults above. */

/* 2. Masonry (CSS columns) */
.afg-layout-masonry .afg-grid {
	display: block;
	columns: var(--afg-cols, 4);
	column-gap: var(--afg-gap, 16px);
}
.afg-layout-masonry .afg-item {
	break-inside: avoid;
	margin-bottom:15px!important;
}
.afg-layout-masonry .afg-img { height: auto; }

/* 3. Modern Cards */
.afg-layout-cards .afg-item {
	background: var(--afg-surface);
	border-radius: calc(var(--afg-radius, 12px) + 4px);
	box-shadow: 0 10px 30px -18px rgba(30, 30, 42, 0.45);
	overflow: hidden;
	transition: transform var(--afg-speed, 400ms) ease, box-shadow var(--afg-speed, 400ms) ease, opacity var(--afg-speed, 400ms) ease;
}
.afg-layout-cards .afg-item:hover {
	transform: translateY(-6px);
	box-shadow: 0 22px 45px -20px rgba(30, 30, 42, 0.55);
}
.afg-layout-cards .afg-media { border-radius: 0; }
.afg-layout-cards .afg-caption { padding: 14px 16px 18px; }

/* 4. Metro Grid — featured / every 5th item spans 2x2 */
.afg-layout-metro .afg-grid { grid-auto-flow: dense; }
.afg-layout-metro .afg-media { padding-top: 100%; height: 0; }
.afg-layout-metro .afg-img { height: 100%; position: absolute; inset: 0; }
.afg-layout-metro .afg-item-wide { grid-column: span 2; grid-row: span 2; }
.afg-layout-metro .afg-caption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 40px 16px 14px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent);
	color: #fff;
	border-radius: 0 0 var(--afg-radius, 12px) var(--afg-radius, 12px);
	pointer-events: none;
}
.afg-layout-metro .afg-title { color: #fff; }
.afg-layout-metro .afg-cats,
.afg-layout-metro .afg-desc { color: rgba(255, 255, 255, 0.8); }
.afg-layout-metro .afg-item-button { pointer-events: auto; }

/* 5. Portfolio Style */
.afg-layout-portfolio .afg-img { height: var(--afg-img-h, 340px); filter: saturate(0.92); }
.afg-layout-portfolio .afg-caption {
	padding: 14px 0 16px;
	border-bottom: 1px solid var(--afg-line);
}
.afg-layout-portfolio .afg-cats {
	order: -1;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 11px;
	color: var(--afg-primary, #3858e9);
}

/* 6. Minimal Gallery */
.afg-layout-minimal .afg-media { border-radius: 0; }
.afg-layout-minimal .afg-overlay { background: rgba(255, 255, 255, 0.35); }
.afg-layout-minimal .afg-overlay-icon { background: rgba(30, 30, 42, 0.55); }
.afg-layout-minimal .afg-overlay-title,
.afg-layout-minimal .afg-overlay-cats { color: var(--afg-secondary, #1e1e2a); }

/* 7. Hover Zoom */
.afg-layout-hoverzoom .afg-img { height: var(--afg-img-h, 300px); }
.afg-layout-hoverzoom .afg-item:hover .afg-img,
.afg-layout-hoverzoom .afg-link:focus-visible .afg-img { transform: scale(1.12); }

/* 8. Image Overlay — always-visible gradient caption */
.afg-layout-overlay .afg-overlay {
	opacity: 1;
	justify-content: flex-end;
	align-items: flex-start;
	text-align: left;
	background: linear-gradient(to top, var(--afg-overlay-bg), transparent 60%);
}
.afg-layout-overlay .afg-overlay-icon { display: none; }
.afg-layout-overlay .afg-overlay-title,
.afg-layout-overlay .afg-overlay-cats { transform: none; }
.afg-layout-overlay .afg-caption { display: none; }

/* 9. Rounded Cards */
.afg-layout-rounded .afg-media {
	border-radius: max(var(--afg-radius, 12px), 24px);
	box-shadow: 0 14px 34px -20px rgba(30, 30, 42, 0.5);
}
.afg-layout-rounded .afg-img { height: var(--afg-img-h, 280px); }

/* 10. Premium Animated Grid */
.afg-layout-animated .afg-media {
	box-shadow: 0 12px 32px -18px rgba(30, 30, 42, 0.5);
	transition: box-shadow var(--afg-speed, 400ms) ease, transform var(--afg-speed, 400ms) ease;
}
.afg-layout-animated .afg-item:hover .afg-media {
	transform: translateY(-6px) scale(1.015);
	box-shadow: 0 26px 50px -22px color-mix(in srgb, var(--afg-primary, #3858e9) 45%, rgba(30, 30, 42, 0.5));
}
.afg-layout-animated .afg-media::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 2px solid transparent;
	transition: border-color var(--afg-speed, 400ms) ease;
	pointer-events: none;
}
.afg-layout-animated .afg-item:hover .afg-media::after {
	border-color: color-mix(in srgb, var(--afg-primary, #3858e9) 60%, transparent);
}

/* ------------------------------ Hover styles ------------------------------ */

.afg-hover-none .afg-overlay { display: none; }

.afg-hover-zoom .afg-item:hover .afg-img,
.afg-hover-zoom .afg-link:focus-visible .afg-img { transform: scale(1.08); }
.afg-hover-zoom .afg-item:hover .afg-overlay { opacity: 1; }

.afg-hover-rotate .afg-item:hover .afg-img,
.afg-hover-rotate .afg-link:focus-visible .afg-img { transform: scale(1.12) rotate(2.5deg); }
.afg-hover-rotate .afg-item:hover .afg-overlay { opacity: 1; }

.afg-hover-fade .afg-item:hover .afg-img,
.afg-hover-fade .afg-link:focus-visible .afg-img { opacity: 0.55; }
.afg-hover-fade .afg-overlay { background: transparent; color: var(--afg-text); }
.afg-hover-fade .afg-item:hover .afg-overlay { opacity: 1; }
.afg-hover-fade .afg-overlay-icon { background: var(--afg-primary, #3858e9); color: #fff; }

.afg-hover-overlay .afg-item:hover .afg-overlay { opacity: 1; }

.afg-hover-slide .afg-overlay {
	justify-content: flex-end;
	align-items: flex-start;
	text-align: left;
	transform: translateY(100%);
	transition:
		transform var(--afg-speed, 400ms) cubic-bezier(0.22, 1, 0.36, 1),
		opacity var(--afg-speed, 400ms) ease;
	background: linear-gradient(to top, var(--afg-overlay-bg), transparent 75%);
}
.afg-hover-slide .afg-item:hover .afg-overlay { transform: translateY(0); opacity: 1; }
.afg-hover-slide .afg-overlay-icon { display: none; }

.afg-hover-blur .afg-item:hover .afg-img { filter: blur(4px) brightness(0.8); transform: scale(1.04); }
.afg-hover-blur .afg-item:hover .afg-overlay { opacity: 1; background: transparent; }

.afg-hover-icon .afg-overlay-title,
.afg-hover-icon .afg-overlay-cats { display: none; }
.afg-hover-icon .afg-item:hover .afg-overlay { opacity: 1; }
.afg-hover-icon .afg-overlay { background: color-mix(in srgb, var(--afg-primary, #3858e9) 55%, transparent); }

.afg-hover-title .afg-overlay-icon { display: none; }
.afg-hover-title .afg-overlay { align-items: center; justify-content: center; }
.afg-hover-title .afg-item:hover .afg-overlay { opacity: 1; }

.afg-hover-border .afg-media::before {
	content: "";
	position: absolute;
	inset: 10px;
	z-index: 1;
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: calc(var(--afg-radius, 12px) / 1.6);
	opacity: 0;
	transform: scale(1.08);
	transition: opacity var(--afg-speed, 400ms) ease, transform var(--afg-speed, 400ms) ease;
	pointer-events: none;
}
.afg-hover-border .afg-item:hover .afg-media::before { opacity: 1; transform: scale(1); }
.afg-hover-border .afg-item:hover .afg-overlay { opacity: 1; }

/* Shared: reveal overlay content on hover */
.afg-item:hover .afg-overlay-icon,
.afg-item:hover .afg-overlay-title,
.afg-item:hover .afg-overlay-cats { transform: translateY(0); }

/* --------------------------- Entrance animations -------------------------- */

/* Scoped under .afg-js (added by the script) so content is never
   hidden when JavaScript is unavailable. */
/* Entrance animations run as self-completing CSS keyframe animations. Content
   is NEVER left hidden waiting on JavaScript: even if the script is blocked,
   deferred, or errors, each item animates to full visibility on its own. The
   .afg-in class (added by the reveal observer) is treated as an optional
   accelerator, not a requirement. */
.afg-js .afg-anim-fade .afg-item,
.afg-js .afg-anim-zoom .afg-item,
.afg-js .afg-anim-scale .afg-item,
.afg-js .afg-anim-slide .afg-item,
.afg-js .afg-anim-flip .afg-item,
.afg-js .afg-anim-rotate .afg-item {
	opacity: 0;
	animation: afg-enter var(--afg-speed, 400ms) ease forwards;
	animation-delay: calc(var(--afg-i, 0) * 45ms);
}

.afg-js .afg-anim-zoom .afg-item { animation-name: afg-enter-zoom; }
.afg-js .afg-anim-scale .afg-item { animation-name: afg-enter-scale; }
.afg-js .afg-anim-slide .afg-item { animation-name: afg-enter-slide; }
.afg-js .afg-anim-flip .afg-item { animation-name: afg-enter-flip; }
.afg-js .afg-anim-rotate .afg-item { animation-name: afg-enter-rotate; }

/* When the observer reveals an item early, snap it to visible immediately. */
.afg-js .afg-gallery .afg-item.afg-in,
.afg-js .afg-gallery.afg-reveal-all .afg-item {
	opacity: 1;
	animation: none;
	transform: none;
}

@keyframes afg-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes afg-enter-zoom { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: none; } }
@keyframes afg-enter-scale { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: none; } }
@keyframes afg-enter-slide { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes afg-enter-flip { from { opacity: 0; transform: perspective(900px) rotateY(-16deg); } to { opacity: 1; transform: none; } }
@keyframes afg-enter-rotate { from { opacity: 0; transform: rotate(-3.5deg) scale(0.94); } to { opacity: 1; transform: none; } }

/* ------------------------------- Load more -------------------------------- */

.afg-more-wrap { text-align: center; margin-top: 28px; }

.afg-load-more {
	appearance: none;
	border: 0;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background: var(--afg-primary, #3858e9);
	padding: 13px 34px;
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--afg-primary, #3858e9) 70%, transparent);
	transition: transform 160ms ease, filter 160ms ease;
}
.afg-load-more:hover { transform: translateY(-2px); filter: brightness(1.06); }
.afg-load-more:focus-visible { outline: 2px solid var(--afg-secondary, #1e1e2a); outline-offset: 3px; }
.afg-load-more[disabled] { opacity: 0.65; cursor: default; transform: none; }

.afg-spinner {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	display: none;
	animation: afg-spin 700ms linear infinite;
}
.afg-load-more.is-loading .afg-spinner { display: inline-block; }

@keyframes afg-spin { to { transform: rotate(360deg); } }

/* -------------------------------- Lightbox -------------------------------- */

.afg-lb {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	background: color-mix(in srgb, var(--afg-secondary, #1e1e2a) 88%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	opacity: 0;
	transition: opacity var(--afg-speed, 400ms) ease;
}
.afg-lb.is-open { opacity: 1; }

/* The lightbox is toggled via the [hidden] attribute in JS. Because .afg-lb sets
   display:flex, the attribute alone would be ignored and the full-screen overlay
   (carrying the zoom cursor and catching clicks) would stay in the layout after
   closing. These rules make [hidden] authoritative and disable interaction while
   the lightbox is not open. */
.afg-lb[hidden] {
	display: none !important;
}
.afg-lb:not(.is-open) {
	pointer-events: none;
}
.afg-lb.is-open {
	pointer-events: auto;
}

.afg-lb-topbar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 14px 16px;
	color: #fff;
}
.afg-lb-counter {
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	opacity: 0.85;
	margin-right: auto;
}

.afg-lb-btn {
	appearance: none;
	border: 0;
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}

.afg-lb-btn:hover {
	background: rgba(255,255,255,.22);
	transform: scale(1.05);
}

.afg-lb-btn svg{
	width:20px;
	height:20px;
	display:block;
	fill:currentColor;
	stroke:currentColor;
	flex-shrink:0;
}

.afg-lb-btn path{
	fill:currentColor;
	stroke:currentColor;
}

.afg-lb-btn:focus-visible{
	outline:2px solid #fff;
	outline-offset:2px;
}

.afg-lb-stage {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	overflow: hidden;
	touch-action: pan-y;
}

.afg-lb-img {
	max-width: min(92vw, 1400px);
	max-height: calc(100vh - 170px);
	width: auto;
	height: auto;
	border-radius: 10px;
	box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
	user-select: none;
	-webkit-user-drag: none;
	transition: transform var(--afg-speed, 400ms) ease, opacity 250ms ease;
	cursor: zoom-in;
}
.afg-lb.is-zoomed .afg-lb-img { transform: scale(2); cursor: zoom-out; }
.afg-lb-img.is-switching { opacity: 0; }

.afg-lb-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}
.afg-lb-prev { left: 18px; }
.afg-lb-next { right: 18px; }

.afg-lb-caption {
	padding: 14px 20px 20px;
	text-align: center;
	color: #fff;
}
.afg-lb-caption-title { font-weight: 600; font-size: 15px; }
.afg-lb-caption-desc { font-size: 13px; opacity: 0.8; margin-top: 3px; }

.afg-lb-toast {
	position: absolute;
	left: 50%;
	bottom: 90px;
	transform: translate(-50%, 8px);
	background: rgba(255, 255, 255, 0.95);
	color: var(--afg-secondary, #1e1e2a);
	font-size: 13px;
	font-weight: 600;
	padding: 9px 16px;
	border-radius: 999px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 250ms ease, transform 250ms ease;
}
.afg-lb-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

body.afg-lb-lock { overflow: hidden; }

/* ------------------------------- Responsive ------------------------------- */

@media (max-width: 1024px) {
	.afg-grid { grid-template-columns: repeat(var(--afg-cols-t, min(var(--afg-cols, 4), 3)), minmax(0, 1fr)); }
	.afg-layout-masonry .afg-grid { columns: var(--afg-cols-t, min(var(--afg-cols, 4), 3)); }
}

@media (max-width: 767px) {
	.afg-grid { grid-template-columns: repeat(var(--afg-cols-m, 2), minmax(0, 1fr)); }
	.afg-layout-masonry .afg-grid { columns: var(--afg-cols-m, 2); }
	.afg-layout-metro .afg-item-wide { grid-column: span 2; grid-row: span 1; }
	.afg-img { height: var(--afg-img-h, 200px); }
	.afg-toolbar { justify-content: center; }
	.afg-search { width: 100%; }
	.afg-search-input { flex: 1; }
	.afg-lb-nav { display: none; } /* Swipe instead */
}

@media (max-width: 480px) {
	.afg-grid { grid-template-columns: repeat(var(--afg-cols-m, 1), minmax(0, 1fr)); }
	.afg-layout-masonry .afg-grid { columns: var(--afg-cols-m, 1); }
}

/* -------------------------------- Dark mode ------------------------------- */

@media (prefers-color-scheme: dark) {
	.afg-gallery {
		--afg-text: #eceef4;
		--afg-muted: #9aa0b0;
		--afg-surface: #23242e;
		--afg-line: rgba(255, 255, 255, 0.12);
	}
	.afg-filter-glass .afg-filter-btn {
		background: rgba(255, 255, 255, 0.08);
		border-color: rgba(255, 255, 255, 0.14);
	}
	.afg-count { background: rgba(255, 255, 255, 0.14); }
	.afg-layout-cards .afg-item { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.8); }
}

/* ----------------------------- Reduced motion ----------------------------- */

@media (prefers-reduced-motion: reduce) {
	.afg-gallery *,
	.afg-lb,
	.afg-lb * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		transition-delay: 0ms !important;
	}
	.afg-gallery .afg-item { opacity: 1; transform: none; }
}

/* --------------------------------- Print ---------------------------------- */

@media print {
	.afg-toolbar, .afg-more-wrap, .afg-lb { display: none !important; }
	.afg-item { opacity: 1 !important; transform: none !important; }
}