/**
 * CartNexa Product Gallery — v2
 * Rebuilt to match the mobile-app style reference design:
 * left thumbnail rail with "+N MORE" overlay tile, rounded main
 * stage with floating red sale pill, circular zoom/nav buttons,
 * and a dot + counter capsule pagination footer.
 */

.cn-product-gallery-wrapper {
	display: flex;
	gap: 14px;
	position: relative;
	width: 100%;
	user-select: none;
}

/* ==========================================================================
   LAYOUT POSITIONS
   ========================================================================== */

.cn-gallery-thumb-pos-left {
	flex-direction: row;
}

.cn-gallery-thumb-pos-right {
	flex-direction: row-reverse;
}

.cn-gallery-thumb-pos-bottom {
	flex-direction: column-reverse;
}

.cn-gallery-thumb-pos-bottom .cn-gallery-thumbnails-col {
	flex-direction: row;
	width: 100%;
}

.cn-gallery-thumb-pos-bottom .cn-gallery-thumbnails-track {
	flex-direction: row;
}

.cn-gallery-thumb-pos-none .cn-gallery-thumbnails-col {
	display: none;
}

/* ==========================================================================
   THUMBNAILS COLUMN
   ========================================================================== */

.cn-gallery-thumbnails-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: clamp(64px, 7vw, 84px);
	flex-shrink: 0;
}

.cn-product-gallery-wrapper .cn-thumb-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: 20px;
	padding: 0;
	margin: 0;
	border: none;
	background: transparent;
	color: var(--cn-body, #98A2B3);
	cursor: pointer;
	flex-shrink: 0;
	transition: var(--cn-transition, all 0.25s ease);
}

.cn-thumb-nav:hover {
	color: var(--cn-primary, #25C4C8);
}

.cn-gallery-thumbnails-track {
	display: flex;
	flex-direction: column;
	gap: 10px;
	overflow: hidden;
	scroll-behavior: smooth;
	width: 100%;
}

.cn-gallery-thumb-item {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	padding: 0;
	border: 1.5px solid var(--cn-border, #E6EEF2);
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
	cursor: pointer;
	flex-shrink: 0;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.cn-gallery-thumb-item[hidden] {
	display: none;
}

.cn-gallery-thumb-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cn-gallery-thumb-item:hover {
	transform: translateY(-1px);
	border-color: var(--cn-primary, #25C4C8);
}

.cn-gallery-thumb-item.active {
	border-color: var(--cn-dark, #233547);
	box-shadow: 0 0 0 2px rgba(35, 53, 71, 0.08);
}

/* Thumb card style variants */
.cn-gallery-thumb-style-flat .cn-gallery-thumb-item {
	border-radius: 8px;
}

.cn-gallery-thumb-style-soft .cn-gallery-thumb-item {
	border-radius: 12px;
	box-shadow: none;
}

.cn-gallery-thumb-style-cards .cn-gallery-thumb-item {
	box-shadow: 0 2px 6px rgba(35, 53, 71, 0.06);
}

.cn-thumb-active-indicator {
	display: none;
}

/* "+N MORE" overflow tile */
.cn-gallery-thumb-more {
	color: #fff;
}

.cn-gallery-thumb-more img {
	filter: brightness(0.45) saturate(0.9);
}

.cn-thumb-more-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	background: rgba(20, 30, 32, 0.55);
}

.cn-thumb-more-count {
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
}

.cn-thumb-more-label {
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.6px;
	color: #fff;
	opacity: 0.9;
}

/* ==========================================================================
   MAIN STAGE
   ========================================================================== */

.cn-gallery-main-col {
	flex: 1;
	min-width: 0;
}

.cn-gallery-main-stage {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #F4F4F5;
	border-radius: 20px;
	box-shadow: var(--cn-shadow-md, 0 8px 24px rgba(35, 53, 71, 0.08));
}

/* Aspect ratio variants */
.cn-gallery-ratio-1-1 .cn-gallery-main-stage {
	aspect-ratio: 1 / 1;
}

.cn-gallery-ratio-4-5 .cn-gallery-main-stage {
	aspect-ratio: 4 / 5;
}

.cn-gallery-ratio-3-4 .cn-gallery-main-stage {
	aspect-ratio: 3 / 4;
}

.cn-gallery-ratio-auto .cn-gallery-main-stage {
	aspect-ratio: auto;
}

.cn-gallery-skeleton {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #ECECEE 25%, #F6F6F7 37%, #ECECEE 63%);
	background-size: 400% 100%;
	animation: cn-gallery-shimmer 1.4s ease infinite;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
	z-index: 1;
}

.cn-gallery-main-stage.loading .cn-gallery-skeleton {
	opacity: 1;
}

@keyframes cn-gallery-shimmer {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

.cn-gallery-main-image {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	object-fit: contain;
	cursor: zoom-in;
	transition: opacity 0.25s ease, transform 0.35s ease;
	will-change: transform;
	padding: 6%;
	box-sizing: border-box;
}

.cn-gallery-zoom-lens {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}

/* ==========================================================================
   BADGES
   ========================================================================== */

.cn-gallery-badges-stack {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 5;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cn-gallery-badge {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.cn-badge-featured {
	background-color: var(--cn-dark, #233547);
}

/* ==========================================================================
   FLOATING ACTION TOOLBAR (Zoom / Fullscreen)
   ========================================================================== */

.cn-gallery-actions-toolbar {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 5;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cn-product-gallery-wrapper .cn-gallery-action-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	min-width: 40px;
	max-width: 40px;
	padding: 0;
	margin: 0;
	line-height: 1;
	border: none;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.95);
	color: var(--cn-dark, #233547);
	box-shadow: 0 4px 12px rgba(35, 53, 71, 0.14);
	cursor: pointer;
	transition: var(--cn-transition, all 0.25s ease);
}

.cn-gallery-action-btn:hover {
	background-color: var(--cn-primary, #25C4C8);
	color: #fff;
	transform: translateY(-1px);
}

.cn-gallery-tooltip {
	position: absolute;
	top: 50%;
	right: calc(100% + 10px);
	transform: translateY(-50%) translateX(4px);
	background: var(--cn-dark, #233547);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	padding: 7px 12px;
	border-radius: 8px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.cn-gallery-tooltip::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 100%;
	transform: translateY(-50%);
	border: 5px solid transparent;
	border-left-color: var(--cn-dark, #233547);
}

.cn-gallery-action-btn:hover .cn-gallery-tooltip,
.cn-gallery-action-btn:focus-visible .cn-gallery-tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) translateX(0);
}

/* ==========================================================================
   NAVIGATION ARROWS
   ========================================================================== */

.cn-product-gallery-wrapper .cn-gallery-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	min-width: 40px;
	max-width: 40px;
	padding: 0;
	margin: 0;
	line-height: 1;
	border: none;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.95);
	color: var(--cn-dark, #233547);
	box-shadow: 0 4px 12px rgba(35, 53, 71, 0.14);
	cursor: pointer;
	transition: var(--cn-transition, all 0.25s ease);
}

.cn-gallery-arrow:hover {
	background-color: var(--cn-primary, #25C4C8);
	color: #fff;
	transform: translateY(-50%) scale(1.06);
}

.cn-gallery-arrow.disabled {
	opacity: 0.35;
	pointer-events: none;
}

.cn-gallery-prev {
	left: 14px;
}

.cn-gallery-next {
	right: 14px;
}

/* Navigation style variants */
.cn-gallery-nav-style-solid .cn-gallery-arrow,
.cn-gallery-nav-style-solid .cn-gallery-action-btn {
	background-color: #fff;
	box-shadow: 0 3px 10px rgba(35, 53, 71, 0.18);
}

.cn-gallery-nav-style-minimal .cn-gallery-arrow,
.cn-gallery-nav-style-minimal .cn-gallery-action-btn {
	background-color: transparent;
	box-shadow: none;
	color: #fff;
	backdrop-filter: blur(2px);
}

.cn-gallery-nav-style-minimal .cn-gallery-arrow:hover,
.cn-gallery-nav-style-minimal .cn-gallery-action-btn:hover {
	background-color: rgba(255, 255, 255, 0.18);
	color: #fff;
}

/* ==========================================================================
   BOTTOM PROGRESS — DOTS + COUNTER CAPSULE
   ========================================================================== */

.cn-gallery-progress {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.cn-gallery-dots {
	display: flex;
	align-items: center;
	gap: 5px;
}

.cn-gallery-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: rgba(35, 53, 71, 0.22);
	transition: var(--cn-transition, all 0.25s ease);
}

.cn-gallery-dot.active {
	width: 16px;
	border-radius: 4px;
	background-color: var(--cn-dark, #233547);
}

.cn-gallery-counter-capsule {
	display: flex;
	align-items: center;
	gap: 3px;
	padding: 5px 14px;
	background-color: rgba(255, 255, 255, 0.95);
	border-radius: 50px;
	box-shadow: 0 3px 10px rgba(35, 53, 71, 0.14);
	font-size: 12px;
	font-weight: 600;
	color: var(--cn-dark, #233547);
}

.cn-gallery-counter-sep {
	color: var(--cn-body, #98A2B3);
}

/* ==========================================================================
   LIGHTBOX MODAL
   ========================================================================== */

.cn-gallery-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.cn-gallery-lightbox.active {
	opacity: 1;
	visibility: visible;
}

.cn-lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 20, 22, 0.96);
}

.cn-lightbox-header {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 22px;
	color: #fff;
}

.cn-lightbox-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cn-lightbox-counter-text {
	font-size: 12px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.6);
}

.cn-lightbox-title {
	font-size: 15px;
	font-weight: 600;
}

.cn-lightbox-controls {
	display: flex;
	align-items: center;
	gap: 8px;
}

.cn-product-gallery-wrapper .cn-lb-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 38px;
	height: 38px;
	min-width: 38px;
	padding: 0;
	margin: 0;
	line-height: 1;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	cursor: pointer;
	transition: var(--cn-transition, all 0.25s ease);
}

.cn-lb-btn:hover {
	background: var(--cn-primary, #25C4C8);
}

.cn-lightbox-container {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	padding: 0 60px;
}

.cn-lightbox-stage {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.cn-lightbox-image {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transition: transform 0.25s ease;
}

.cn-product-gallery-wrapper .cn-lightbox-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 46px;
	height: 46px;
	min-width: 46px;
	padding: 0;
	margin: 0;
	line-height: 1;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	cursor: pointer;
	transition: var(--cn-transition, all 0.25s ease);
}

.cn-lightbox-arrow:hover {
	background: var(--cn-primary, #25C4C8);
}

.cn-lightbox-prev {
	left: 12px;
}

.cn-lightbox-next {
	right: 12px;
}

.cn-lightbox-footer {
	position: relative;
	z-index: 2;
	padding: 14px 22px 22px;
}

.cn-lightbox-thumbs-track {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	justify-content: center;
	scrollbar-width: none;
}

.cn-lightbox-thumbs-track::-webkit-scrollbar {
	display: none;
}

.cn-lb-thumb-item {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	opacity: 0.5;
	transition: var(--cn-transition, all 0.25s ease);
}

.cn-lb-thumb-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cn-lb-thumb-item.active,
.cn-lb-thumb-item:hover {
	opacity: 1;
	border-color: var(--cn-primary, #25C4C8);
}

/* ==========================================================================
   RESPONSIVE — TABLET (768px – 1024px)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1024px) {
	.cn-product-gallery-wrapper {
		gap: 12px;
	}

	.cn-gallery-thumbnails-col {
		width: clamp(72px, 9vw, 96px);
		gap: 8px;
	}

	.cn-gallery-thumbnails-track {
		gap: 12px;
	}

	.cn-gallery-thumb-item {
		border-radius: 12px;
	}

	.cn-gallery-main-stage {
		border-radius: 16px;
	}

	.cn-product-gallery-wrapper .cn-gallery-action-btn,
	.cn-product-gallery-wrapper .cn-gallery-arrow {
		width: 44px;
		height: 44px;
		min-width: 44px;
		max-width: 44px;
	}
}

/* ==========================================================================
   RESPONSIVE — MOBILE
   ========================================================================== */

@media (max-width: 767px) {
	.cn-product-gallery-wrapper {
		flex-direction: column-reverse;
		gap: 12px;
	}

	.cn-gallery-thumbnails-col {
		flex-direction: row;
		width: 100%;
	}

	.cn-gallery-thumbnails-track {
		flex-direction: row;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding: 2px;
	}

	.cn-gallery-thumb-item {
		width: 56px;
		height: 56px;
		flex-shrink: 0;
		scroll-snap-align: start;
	}

	.cn-product-gallery-wrapper .cn-thumb-nav {
		display: none;
	}

	.cn-lightbox-container {
		padding: 0 12px;
	}

	.cn-product-gallery-wrapper .cn-lightbox-arrow {
		width: 38px;
		height: 38px;
	}
}
/* Icon mask definitions — data-URI based, never rely on inline <svg> markup
   so they survive HTML sanitizers/minifiers that strip <svg> tags. */
.cn-icon {
	display: inline-block;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	flex-shrink: 0;
}

.cn-icon-zoom { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%278%27%2F%3E%3Cline%20x1%3D%2721%27%20y1%3D%2721%27%20x2%3D%2716.65%27%20y2%3D%2716.65%27%2F%3E%3Cline%20x1%3D%2711%27%20y1%3D%278%27%20x2%3D%2711%27%20y2%3D%2714%27%2F%3E%3Cline%20x1%3D%278%27%20y1%3D%2711%27%20x2%3D%2714%27%20y2%3D%2711%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%278%27%2F%3E%3Cline%20x1%3D%2721%27%20y1%3D%2721%27%20x2%3D%2716.65%27%20y2%3D%2716.65%27%2F%3E%3Cline%20x1%3D%2711%27%20y1%3D%278%27%20x2%3D%2711%27%20y2%3D%2714%27%2F%3E%3Cline%20x1%3D%278%27%20y1%3D%2711%27%20x2%3D%2714%27%20y2%3D%2711%27%2F%3E%3C%2Fsvg%3E"); }
.cn-icon-fullscreen { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%2715%203%2021%203%2021%209%27%2F%3E%3Cpolyline%20points%3D%279%2021%203%2021%203%2015%27%2F%3E%3Cline%20x1%3D%2721%27%20y1%3D%273%27%20x2%3D%2714%27%20y2%3D%2710%27%2F%3E%3Cline%20x1%3D%273%27%20y1%3D%2721%27%20x2%3D%2710%27%20y2%3D%2714%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%2715%203%2021%203%2021%209%27%2F%3E%3Cpolyline%20points%3D%279%2021%203%2021%203%2015%27%2F%3E%3Cline%20x1%3D%2721%27%20y1%3D%273%27%20x2%3D%2714%27%20y2%3D%2710%27%2F%3E%3Cline%20x1%3D%273%27%20y1%3D%2721%27%20x2%3D%2710%27%20y2%3D%2714%27%2F%3E%3C%2Fsvg%3E"); }
.cn-icon-chevron-left { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%2715%2018%209%2012%2015%206%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%2715%2018%209%2012%2015%206%27%2F%3E%3C%2Fsvg%3E"); }
.cn-icon-chevron-right { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%279%2018%2015%2012%209%206%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%279%2018%2015%2012%209%206%27%2F%3E%3C%2Fsvg%3E"); }
.cn-icon-chevron-up { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%2718%2015%2012%209%206%2015%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%2718%2015%2012%209%206%2015%27%2F%3E%3C%2Fsvg%3E"); }
.cn-icon-chevron-down { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%276%209%2012%2015%2018%209%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%276%209%2012%2015%2018%209%27%2F%3E%3C%2Fsvg%3E"); }
.cn-icon-zoom-in { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%278%27%2F%3E%3Cline%20x1%3D%2721%27%20y1%3D%2721%27%20x2%3D%2716.65%27%20y2%3D%2716.65%27%2F%3E%3Cline%20x1%3D%2711%27%20y1%3D%278%27%20x2%3D%2711%27%20y2%3D%2714%27%2F%3E%3Cline%20x1%3D%278%27%20y1%3D%2711%27%20x2%3D%2714%27%20y2%3D%2711%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%278%27%2F%3E%3Cline%20x1%3D%2721%27%20y1%3D%2721%27%20x2%3D%2716.65%27%20y2%3D%2716.65%27%2F%3E%3Cline%20x1%3D%2711%27%20y1%3D%278%27%20x2%3D%2711%27%20y2%3D%2714%27%2F%3E%3Cline%20x1%3D%278%27%20y1%3D%2711%27%20x2%3D%2714%27%20y2%3D%2711%27%2F%3E%3C%2Fsvg%3E"); }
.cn-icon-zoom-out { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%278%27%2F%3E%3Cline%20x1%3D%2721%27%20y1%3D%2721%27%20x2%3D%2716.65%27%20y2%3D%2716.65%27%2F%3E%3Cline%20x1%3D%278%27%20y1%3D%2711%27%20x2%3D%2714%27%20y2%3D%2711%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%278%27%2F%3E%3Cline%20x1%3D%2721%27%20y1%3D%2721%27%20x2%3D%2716.65%27%20y2%3D%2716.65%27%2F%3E%3Cline%20x1%3D%278%27%20y1%3D%2711%27%20x2%3D%2714%27%20y2%3D%2711%27%2F%3E%3C%2Fsvg%3E"); }
.cn-icon-rotate { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21.5%202v6h-6M21.34%2015.57a10%2010%200%201%201-.57-8.38l5.67-5.67%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21.5%202v6h-6M21.34%2015.57a10%2010%200%201%201-.57-8.38l5.67-5.67%27%2F%3E%3C%2Fsvg%3E"); }
.cn-icon-lb-fullscreen { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M8%203H5a2%202%200%200%200-2%202v3m18%200V5a2%202%200%200%200-2-2h-3m0%2018h3a2%202%200%200%200%202-2v-3M3%2016v3a2%202%200%200%200%202%202h3%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M8%203H5a2%202%200%200%200-2%202v3m18%200V5a2%202%200%200%200-2-2h-3m0%2018h3a2%202%200%200%200%202-2v-3M3%2016v3a2%202%200%200%200%202%202h3%27%2F%3E%3C%2Fsvg%3E"); }
.cn-icon-close { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cline%20x1%3D%2718%27%20y1%3D%276%27%20x2%3D%276%27%20y2%3D%2718%27%2F%3E%3Cline%20x1%3D%276%27%20y1%3D%276%27%20x2%3D%2718%27%20y2%3D%2718%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cline%20x1%3D%2718%27%20y1%3D%276%27%20x2%3D%276%27%20y2%3D%2718%27%2F%3E%3Cline%20x1%3D%276%27%20y1%3D%276%27%20x2%3D%2718%27%20y2%3D%2718%27%2F%3E%3C%2Fsvg%3E"); }

.cn-icon-lg { width: 24px; height: 24px; }