/* ==============================================
   CP Gallery Widget — Chillypills v1.1
   ============================================== */

.cpg-wrap {
	display: flex;
	width: 100%;
	box-sizing: border-box;
	align-items: flex-start;
}

.cpg-pos-left   { flex-direction: row; }
.cpg-pos-right  { flex-direction: row-reverse; }
.cpg-pos-top    { flex-direction: column; }
.cpg-pos-bottom { flex-direction: column-reverse; }

/* ---- Columna/fila de miniaturas ---- */
.cpg-thumbs-col {
	flex-shrink: 0;
	width: 130px;
}

.cpg-pos-left .cpg-thumbs-col,
.cpg-pos-right .cpg-thumbs-col {
	overflow-y: auto;
	overflow-x: hidden;
	max-height: 700px;
	scrollbar-width: thin;
	scrollbar-color: #ccc transparent;
}
.cpg-pos-left .cpg-thumbs-col::-webkit-scrollbar,
.cpg-pos-right .cpg-thumbs-col::-webkit-scrollbar { width: 3px; }
.cpg-pos-left .cpg-thumbs-col::-webkit-scrollbar-thumb,
.cpg-pos-right .cpg-thumbs-col::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

.cpg-pos-top .cpg-thumbs-col,
.cpg-pos-bottom .cpg-thumbs-col {
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	height: 100px;
	scrollbar-width: thin;
}

.cpg-thumbs {
	display: flex;
	flex-direction: column;
}

.cpg-pos-top .cpg-thumbs,
.cpg-pos-bottom .cpg-thumbs {
	flex-direction: row;
	height: 100%;
}

/* ---- Miniatura individual ---- */
.cpg-thumb-item {
	cursor: pointer;
	overflow: hidden;
	flex-shrink: 0;
	background-color: #f5f5f5;
	border-radius: 8px;
	outline: 2px solid transparent;
	outline-offset: 0px;
	opacity: 0.65;
	transition: opacity .2s, outline-color .2s;
}

.cpg-pos-left .cpg-thumb-item,
.cpg-pos-right .cpg-thumb-item {
	width: 100%;
}

.cpg-pos-top .cpg-thumb-item,
.cpg-pos-bottom .cpg-thumb-item {
	height: 100%;
	aspect-ratio: 1/1;
}

.cpg-thumb-item:hover { opacity: .9; }

.cpg-thumb-item.is-active {
	opacity: 1;
	outline-color: #111;
	outline-width: 2px;
	outline-style: solid;
}

.cpg-thumb-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	aspect-ratio: 1/1;
	transition: transform .25s;
}

.cpg-thumb-item:hover img { transform: scale(1.04); }

/* ---- Imagen principal ---- */
.cpg-main-wrap {
	flex: 1;
	min-width: 0;
}

.cpg-main-img {
	width: 100%;
	background-color: #f5f5f5;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 1/1; /* sobreescrito por Elementor según opción elegida */
}

.cpg-main-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain; /* sobreescrito por selector de Elementor */
	transition: opacity .25s ease;
}

/* Modo alto automático */
.cpg-main-img.cpg-height-auto {
	height: auto;
	aspect-ratio: unset;
}
.cpg-main-img.cpg-height-auto img {
	height: auto;
}

.cpg-main-img img.cpg-fade {
	opacity: 0;
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
	.cpg-pos-left,
	.cpg-pos-right {
		flex-direction: column !important;
	}
	.cpg-pos-left .cpg-thumbs-col,
	.cpg-pos-right .cpg-thumbs-col {
		width: 100% !important;
		height: 80px !important;
		overflow-x: auto;
		overflow-y: hidden;
		max-height: none;
	}
	.cpg-pos-left .cpg-thumbs,
	.cpg-pos-right .cpg-thumbs {
		flex-direction: row !important;
	}
}