.jig-gallery {
	/* Inherits the site's own brand color (Porto's customizer setting) so the gallery matches
	   jiyyo.com's actual theme instead of a hardcoded guess; falls back to this navy if the
	   variable isn't defined (e.g. a different theme). */
	--jig-accent: var(--porto-primary-color, #1c3651);
	--jig-accent-soft: color-mix(in srgb, var(--jig-accent) 14%, transparent);
	max-width: 1600px;
	margin: 0 auto;
	padding: 52px 32px 64px;
	box-sizing: border-box;
	font-family: inherit;
}
.jig-gallery *,
.jig-gallery *::before,
.jig-gallery *::after {
	box-sizing: border-box;
}

.jig-header {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 44px;
}
.jig-heading {
	/* Font size/weight/color intentionally left unset — an <h2> already inherits the theme's
	   own heading style (Porto sets this globally), so this reads as part of the site rather
	   than a custom size we picked. */
	margin: 0 0 14px;
	position: relative;
	display: inline-block;
}
.jig-heading::after {
	/* Small accent underline so the heading reads as "this gallery" rather than a generic <h2> —
	   purely decorative, sized off the heading's own text rather than the full header width. */
	content: "";
	position: absolute;
	left: 50%;
	bottom: -10px;
	transform: translateX(-50%);
	width: 56px;
	height: 3px;
	border-radius: 999px;
	background: var(--jig-accent);
}
.jig-subheading {
	margin: 18px 0 0;
	font-size: 16px;
	line-height: 1.6;
	opacity: .7;
}

/* Small uppercase kicker above a heading (intro and featured story). */
.jig-eyebrow {
	display: block;
	margin-bottom: 10px;
	color: var(--jig-accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.jig-section-title {
	margin: 0 0 22px;
	text-align: center;
	font-size: 22px;
}

/* ── Figures strip ─────────────────────────────────────────────────────────────── */
.jig-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	max-width: 960px;
	margin: 0 auto 64px;
	border: 1px solid #e3e8ee;
	border-radius: 16px;
	background: linear-gradient(180deg, #fff, #f7f9fb);
	box-shadow: 0 10px 30px rgba(16, 24, 32, .06);
	overflow: hidden;
}
.jig-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 26px 16px 24px;
	text-align: center;
}
.jig-stat + .jig-stat {
	border-left: 1px solid #e3e8ee;
}
.jig-stat-icon {
	width: 30px;
	height: 30px;
	margin-bottom: 6px;
	padding: 6px;
	border-radius: 10px;
	background: var(--jig-accent-soft);
	fill: none;
	stroke: var(--jig-accent);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	box-sizing: content-box;
}
.jig-stat-num {
	font-size: 34px;
	font-weight: 700;
	line-height: 1.1;
	color: #16283a;
	font-variant-numeric: tabular-nums;
}
.jig-stat-label {
	font-size: 13px;
	color: #6b7785;
}

/* ── "What you're watching" steps ──────────────────────────────────────────────── */
.jig-steps {
	max-width: 1100px;
	margin: 0 auto 72px;
}
.jig-steps-list {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}
.jig-step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 24px 22px 22px;
	border-radius: 14px;
	background: #f5f8fb;
	border: 1px solid #e6ecf2;
	margin: 0;
}
.jig-step::marker {
	content: none;
}
.jig-step-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-bottom: 8px;
	border-radius: 50%;
	background: var(--jig-accent);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	box-shadow: 0 6px 14px var(--jig-accent-soft);
}
.jig-step-title {
	font-weight: 700;
	font-size: 16px;
	line-height: 1.35;
	color: #16283a;
}
.jig-step-text {
	font-size: 14px;
	line-height: 1.55;
	color: #5b6876;
}
@media (min-width: 900px) {
	/* Arrow between steps on wide screens so they read as a sequence, not three random cards. */
	.jig-step:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 42px;
		right: -19px;
		width: 14px;
		height: 14px;
		border-top: 2px solid #b9c6d3;
		border-right: 2px solid #b9c6d3;
		transform: rotate(45deg);
	}
}

/* ── Featured story ────────────────────────────────────────────────────────────── */
.jig-spotlight {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 36px;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto 80px;
	padding: 22px;
	border-radius: 20px;
	background: #0f2233;
	color: #fff;
	box-shadow: 0 24px 50px rgba(15, 34, 51, .22);
}
.jig-spotlight-media {
	min-height: 340px;
	aspect-ratio: 16 / 10;
}
.jig-spotlight-media .jig-tile-overlay,
.jig-spotlight-media .jig-tile-chip {
	display: none; /* title and label sit in the text column instead */
}
.jig-spotlight-media .jig-play-icon {
	width: 72px;
	height: 72px;
	margin: -36px 0 0 -36px;
}
.jig-spotlight-media .jig-play-icon::after {
	border-width: 12px 0 12px 20px;
}
.jig-spotlight-body {
	padding: 8px 18px 8px 0;
}
.jig-spotlight .jig-eyebrow {
	color: #7cc4ec;
}
.jig-spotlight-chip {
	display: inline-block;
	margin-bottom: 12px;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.jig-spotlight-title {
	margin: 0 0 6px;
	color: #fff;
	font-size: 26px;
	line-height: 1.25;
}
.jig-spotlight-subtitle {
	margin: 0 0 14px;
	color: #9fc2dd;
	font-weight: 500;
}
.jig-spotlight-desc {
	margin: 0 0 14px;
	color: #c9d5e0;
	font-size: 15px;
	line-height: 1.65;
}
.jig-spotlight-meta {
	margin: 0 0 22px;
	color: #8ea3b6;
	font-size: 13px;
}
.jig-spotlight-btn,
.jig-spotlight-btn:visited,
.jig-spotlight-btn:hover,
.jig-spotlight-btn:focus {
	color: #0f2233;
	text-decoration: none;
}
.jig-spotlight-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: 999px;
	background: #fff;
	font-weight: 600;
	font-size: 15px;
	transition: transform .18s ease, box-shadow .18s ease;
}
.jig-spotlight-btn svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}
.jig-spotlight-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
}

/* ── Browse header (title + filters + explanation) ────────────────────────────── */
.jig-browse {
	margin-bottom: 36px;
}
.jig-browse .jig-filter-bar {
	margin-bottom: 14px;
}
.jig-filter-count {
	display: inline-block;
	min-width: 22px;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 999px;
	background: #eef2f6;
	color: #52606d;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
}
.jig-filter-btn.is-active .jig-filter-count {
	background: rgba(255, 255, 255, .22);
	color: #fff;
}
.jig-filter-desc {
	max-width: 620px;
	margin: 0 auto;
	text-align: center;
	color: #6b7785;
	font-size: 14px;
	line-height: 1.55;
	min-height: 1.55em;
}
.jig-filter-desc[hidden] {
	display: none;
}

/* ── Closing call to action ────────────────────────────────────────────────────── */
.jig-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
	max-width: 1200px;
	margin: 80px auto 0;
	padding: 40px 44px;
	border-radius: 20px;
	background: linear-gradient(120deg, var(--jig-accent), #0f2233);
	color: #fff;
}
.jig-cta-text {
	flex: 1 1 380px;
}
.jig-cta-heading {
	margin: 0 0 8px;
	color: #fff;
	font-size: 26px;
	line-height: 1.25;
}
.jig-cta-text p {
	margin: 0;
	color: rgba(255, 255, 255, .85);
	font-size: 15px;
	line-height: 1.6;
}
.jig-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.jig-cta-btn,
.jig-cta-btn:visited,
.jig-cta-btn:hover,
.jig-cta-btn:focus {
	text-decoration: none;
}
.jig-cta-btn {
	display: inline-block;
	padding: 12px 24px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 15px;
	transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.jig-cta-btn-primary,
.jig-cta-btn-primary:visited,
.jig-cta-btn-primary:hover {
	background: #fff;
	color: #0f2233;
}
.jig-cta-btn-ghost,
.jig-cta-btn-ghost:visited,
.jig-cta-btn-ghost:hover {
	border: 1px solid rgba(255, 255, 255, .6);
	color: #fff;
}
.jig-cta-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}
.jig-cta-btn-ghost:hover {
	background: rgba(255, 255, 255, .12);
}

.jig-filter-bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: 44px;
}
.jig-filter-btn {
	padding: 9px 20px;
	border-radius: 999px;
	border: 1px solid #d7dde3;
	background: #fff;
	color: #33414f;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.jig-filter-btn:hover {
	border-color: var(--jig-accent);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .1);
	transform: translateY(-1px);
}
.jig-filter-btn:active {
	transform: translateY(0);
}
.jig-filter-btn.is-active {
	background: var(--jig-accent);
	border-color: var(--jig-accent);
	color: #fff;
	box-shadow: 0 6px 16px var(--jig-accent-soft);
}

.jig-rows {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.jig-row-mosaic {
	display: flex;
	gap: 20px;
}
.jig-row-mosaic.align-left {
	flex-direction: row-reverse;
}
.jig-mosaic-big {
	flex: 1 1 60%;
	min-height: 320px;
}
.jig-mosaic-small-col {
	flex: 1 1 38%;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.jig-mosaic-small {
	flex: 1 1 0;
	min-height: 153px;
}

.jig-row-grid3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.jig-grid3-tile {
	min-height: 220px;
}

/* Scroll-reveal: rows start slightly lowered/faded and settle into place as they enter the
   viewport (see IntersectionObserver in the JS). Tiles appended later via "Load More"/filtering
   are marked already-visible by the JS so they don't replay the animation on every DOM insert.
   prefers-reduced-motion users skip straight to the settled state. */
.jig-row {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .5s ease, transform .5s ease;
}
.jig-row.jig-in-view {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.jig-row {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.jig-tile,
.jig-tile:visited,
.jig-tile:hover,
.jig-tile:active,
.jig-tile:focus {
	/* Tiles are real <a> elements (SEO — see render_tile()/buildTile()), so explicitly override
	   the browser's default link styling (underline, visited-purple) rather than relying on
	   specificity to sort it out. */
	color: #fff;
	text-decoration: none;
}
.jig-tile {
	position: relative;
	display: block;
	border-radius: 14px;
	overflow: hidden;
	cursor: pointer;
	outline-offset: 2px;
	box-shadow: 0 1px 3px rgba(16, 24, 32, .12);
	transition: box-shadow .25s ease, transform .25s ease;
}
.jig-tile::before {
	/* Soft accent-colored ring that fades in on hover, sitting above the image but below the
	   text/chip layer — gives the hover state some color instead of just a lift + shadow. */
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 2px var(--jig-accent);
	opacity: 0;
	transition: opacity .25s ease;
	pointer-events: none;
	z-index: 1;
}
.jig-tile:hover,
.jig-tile:focus-visible {
	box-shadow: 0 14px 30px rgba(16, 24, 32, .26);
	transform: translateY(-4px);
}
.jig-tile:hover::before,
.jig-tile:focus-visible::before {
	opacity: .55;
}
.jig-tile:focus-visible {
	outline: 2px solid var(--jig-accent);
}
.jig-tile-empty {
	cursor: default;
	opacity: .35;
	box-shadow: none;
}
.jig-tile-empty:hover {
	box-shadow: none;
	transform: none;
}
.jig-tile-empty::before {
	display: none;
}
.jig-tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .45s ease;
}
.jig-tile:hover img {
	transform: scale(1.08);
}
.jig-tile-chip {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .5);
	backdrop-filter: blur(2px);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.jig-tile-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 38px 18px 16px;
	background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,0));
}
.jig-tile-title {
	display: -webkit-box;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.jig-tile-subtitle {
	display: -webkit-box;
	margin-top: 3px;
	font-size: 12.5px;
	color: rgba(255, 255, 255, .78);
	line-height: 1.35;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.jig-play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: 52px;
	height: 52px;
	margin: -26px 0 0 -26px;
	border-radius: 50%;
	background: rgba(255,255,255,.92);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
	transition: transform .25s ease, background .25s ease;
}
.jig-tile:hover .jig-play-icon {
	transform: scale(1.1);
	background: #fff;
}
.jig-play-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	width: 0;
	height: 0;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent var(--jig-accent);
}
.jig-duration-badge {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 2;
	padding: 3px 8px;
	border-radius: 4px;
	background: rgba(0,0,0,.65);
	font-size: 12px;
}

.jig-state {
	padding: 40px 16px;
	text-align: center;
	color: #6b7785;
	background: #f5f7f9;
	border-radius: 10px;
}
.jig-state-loading {
	display: block;
	min-height: 0;
	padding: 0;
	background: none;
}

/* Skeleton grid shown while a category switch is loading, instead of a bare spinner — reads as
   "content is on its way" rather than a blank pause, and roughly previews the grid3 layout the
   real rows will settle into. */
.jig-skeleton-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.jig-skeleton-tile {
	min-height: 220px;
	border-radius: 14px;
	background: linear-gradient(100deg, #eceff2 30%, #f6f8fa 50%, #eceff2 70%);
	background-size: 220% 100%;
	animation: jig-shimmer 1.3s ease-in-out infinite;
}
@keyframes jig-shimmer {
	0% { background-position: 120% 0; }
	100% { background-position: -20% 0; }
}
@media (prefers-reduced-motion: reduce) {
	.jig-skeleton-tile { animation: none; }
}

.jig-spinner {
	width: 32px;
	height: 32px;
	border: 3px solid #d7dde3;
	border-top-color: var(--jig-accent);
	border-radius: 50%;
	animation: jig-spin .7s linear infinite;
}
@keyframes jig-spin {
	to { transform: rotate(360deg); }
}

.jig-load-more-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-top: 40px;
}
.jig-progress {
	margin: 0;
	color: #6b7785;
	font-size: 14px;
}
.jig-progress[hidden] {
	display: none;
}
.jig-load-more-btn {
	padding: 11px 30px;
	border-radius: 999px;
	border: 1px solid var(--jig-accent);
	background: #fff;
	color: var(--jig-accent);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.jig-load-more-btn:hover {
	background: var(--jig-accent);
	color: #fff;
	box-shadow: 0 8px 20px var(--jig-accent-soft);
	transform: translateY(-1px);
}
.jig-load-more-btn:disabled {
	opacity: .6;
	cursor: default;
	transform: none;
	box-shadow: none;
}
.jig-load-more-btn[hidden] {
	display: none;
}

.jig-lightbox-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(8, 12, 16, .92);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	animation: jig-fade-in .18s ease;
}
.jig-lightbox-backdrop[hidden] {
	display: none;
}
@keyframes jig-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
.jig-lightbox-content {
	position: relative;
	max-width: 1140px;
	width: 100%;
	max-height: 90vh;
	background: #12181f;
	border-radius: 14px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
	overflow: hidden;
	animation: jig-pop-in .22s cubic-bezier(.2, .8, .3, 1);
}
@keyframes jig-pop-in {
	from { opacity: 0; transform: scale(.97) translateY(8px); }
	to { opacity: 1; transform: scale(1) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.jig-lightbox-backdrop,
	.jig-lightbox-content {
		animation: none;
	}
}
.jig-lightbox-close {
	/* Positioned relative to the (fixed, viewport-filling) backdrop rather than the content box,
	   so it always floats clear of the video/details panel instead of overlapping either one
	   regardless of layout. */
	position: absolute;
	top: 20px;
	right: 24px;
	z-index: 1;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .12);
	border: none;
	border-radius: 50%;
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.jig-lightbox-close:hover {
	background: rgba(255, 255, 255, .24);
	transform: rotate(90deg);
}
.jig-lightbox-body {
	display: flex;
	flex-direction: column;
	max-height: 90vh;
	overflow-y: auto;
}
.jig-lightbox-media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	flex-shrink: 0;
}
.jig-lightbox-media img,
.jig-lightbox-media video,
.jig-lightbox-media iframe {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border: 0;
	display: block;
	background: #000;
}
.jig-lightbox-text {
	color: #fff;
	padding: 20px 24px 24px;
	overflow-y: auto;
}
.jig-lightbox-text::-webkit-scrollbar {
	width: 6px;
}
.jig-lightbox-text::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, .18);
	border-radius: 999px;
}
.jig-lightbox-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}
.jig-lightbox-meta:empty {
	display: none;
}
.jig-lightbox-chip {
	padding: 3px 11px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	color: var(--jig-accent, #7fb8e0);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.jig-lightbox-views {
	font-size: 12.5px;
	color: #8c9aab;
}
.jig-lightbox-title {
	margin: 0 0 6px;
	font-size: 19px;
	line-height: 1.3;
}
.jig-lightbox-subtitle {
	margin: 0 0 10px;
	color: #9fb3c8;
	font-size: 14px;
	font-weight: 500;
}
.jig-lightbox-subtitle[hidden],
.jig-lightbox-description[hidden] {
	display: none;
}
.jig-lightbox-description {
	margin: 0 0 20px;
	color: #c4cdd6;
	font-size: 14px;
	line-height: 1.6;
	white-space: pre-line;
}

/* Share row: a small "Share" label followed by circular icon buttons. Each button tints toward
   its platform's brand color on hover so the row reads as distinct actions rather than one
   uniform button group; base state stays neutral to match the rest of the lightbox chrome. */
.jig-lightbox-share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding-top: 16px;
	margin-top: auto;
	border-top: 1px solid rgba(255, 255, 255, .1);
}
.jig-share-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: #8c9aab;
	margin-right: 2px;
}
.jig-share-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, .1);
	color: #e7ecf1;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, transform .18s ease;
}
.jig-share-btn svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}
.jig-share-btn:hover {
	transform: translateY(-2px);
	color: #fff;
}
.jig-share-btn[data-platform="facebook"]:hover { background: #1877f2; }
.jig-share-btn[data-platform="twitter"]:hover { background: #000; }
.jig-share-btn[data-platform="whatsapp"]:hover { background: #25d366; }
.jig-share-btn[data-platform="linkedin"]:hover { background: #0a66c2; }
.jig-share-btn[data-platform="copy"]:hover { background: var(--jig-accent); }
.jig-share-btn[data-copied]::after {
	content: "Link copied";
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 8px;
	padding: 4px 9px;
	border-radius: 6px;
	background: #fff;
	color: #12181f;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	pointer-events: none;
	animation: jig-toast-pop 1.6s ease forwards;
}
@keyframes jig-toast-pop {
	0% { opacity: 0; transform: translate(-50%, 4px); }
	12% { opacity: 1; transform: translate(-50%, 0); }
	82% { opacity: 1; }
	100% { opacity: 0; }
}

@media (min-width: 800px) {
	.jig-lightbox-content {
		max-height: 80vh;
	}
	.jig-lightbox-body {
		flex-direction: row;
		max-height: 80vh;
	}
	.jig-lightbox-media {
		width: 66%;
		flex-shrink: 0;
	}
	.jig-lightbox-text {
		width: 34%;
		flex-shrink: 0;
		padding: 26px 26px 26px 22px;
		display: flex;
		flex-direction: column;
	}
}

@media (max-width: 768px) {
	.jig-gallery {
		padding-left: 18px;
		padding-right: 18px;
	}
	.jig-row-mosaic {
		flex-direction: column;
	}
	.jig-row-mosaic.align-left {
		flex-direction: column;
	}
	.jig-mosaic-small-col {
		flex-direction: row;
	}
	.jig-row-grid3 {
		grid-template-columns: repeat(2, 1fr);
	}
	.jig-skeleton-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.jig-stats {
		grid-template-columns: repeat(2, 1fr);
		margin-bottom: 44px;
	}
	.jig-stat + .jig-stat {
		border-left: 0;
	}
	.jig-stat:nth-child(even) {
		border-left: 1px solid #e3e8ee;
	}
	.jig-stat:nth-child(n+3) {
		border-top: 1px solid #e3e8ee;
	}
	.jig-stat-num {
		font-size: 28px;
	}
	.jig-steps {
		margin-bottom: 48px;
	}
	.jig-spotlight {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 14px;
		margin-bottom: 56px;
	}
	.jig-spotlight-media {
		min-height: 200px;
	}
	.jig-spotlight-body {
		padding: 0 8px 10px;
	}
	.jig-spotlight-title,
	.jig-cta-heading {
		font-size: 22px;
	}
	.jig-cta {
		padding: 30px 24px;
		margin-top: 56px;
	}
}