/* =========================================================================
   Kukinas — Product Catalog widget
   ========================================================================= */

/* --- Contenedor principal ------------------------------------------------ */
.kk-pc {
	width: 100%;
	padding: 0;
	box-sizing: border-box;
	scroll-margin-top: 96px;
}

/* --- Barra de filtros ----------------------------------------------------- */
.kk-pc__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 32px;
}

.kk-pc__chip {
	display: inline-flex;
	align-items: center;
	padding: 8px 20px;
	border: none;
	border-radius: 999px;
	background-color: #F5F5F5;
	color: #171717;
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
	user-select: none;
	line-height: 1;
}

.kk-pc__chip:hover:not(.is-active) {
	background-color: #EBEBEB;
}

.kk-pc__chip:active {
	transform: scale(0.96);
}

.kk-pc__chip.is-active {
	background-color: #C91F28;
	color: #FFFFFF;
}

/* --- Grilla de productos -------------------------------------------------- */
.kk-pc__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--kk-cols, 4), 1fr);
	gap: 24px;
}

/* --- Card ----------------------------------------------------------------- */
.kk-pc__card {
	background-color: #FFFFFF;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
	display: flex;
	flex-direction: column;
	transform-origin: center center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.kk-pc__card:hover {
	transform: scale(var(--kk-hover-scale, 1.03));
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
}

/* Ocultar/mostrar con animación al filtrar */
.kk-pc__card.is-hidden {
	display: none;
}

/* --- Imagen --------------------------------------------------------------- */
.kk-pc__card-image {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	padding: 20px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Colores de fondo por categoría (fallback; Elementor puede sobreescribir) */
.kk-pc__card-image[data-category="avena"]         { background-color: #F7F3EC; }
.kk-pc__card-image[data-category="bajo-gramaje"]  { background-color: #EEF4FB; }
.kk-pc__card-image[data-category="rellenas"]      { background-color: #F8EFF5; }
.kk-pc__card-image[data-category="bolsas"]        { background-color: #FFF1EC; }
.kk-pc__card-image[data-category="mayor-gramaje"] { background-color: #FBF6EE; }
.kk-pc__card-image[data-category="alfajores"]     { background-color: #F5EEEA; }

.kk-pc__card-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
	display: block;
}

/* Placeholder cuando no hay imagen asignada */
.kk-pc__card-image-placeholder {
	width: 100%;
	height: 100%;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.45);
}

/* --- Badge de categoría -------------------------------------------------- */
.kk-pc__card-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	background-color: #FFFFFF;
	color: #171717;
	font-family: 'Montserrat', sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
	z-index: 1;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Badge — colores por categoría (fallback; Elementor puede sobreescribir) */
.kk-pc__card-badge[data-category="avena"]         { background-color: #FFFFFF; color: #A63A26; }
.kk-pc__card-badge[data-category="bajo-gramaje"]  { background-color: #FFFFFF; color: #123A74; }
.kk-pc__card-badge[data-category="rellenas"]      { background-color: #FFFFFF; color: #7B1E76; }
.kk-pc__card-badge[data-category="bolsas"]        { background-color: #FFFFFF; color: #E52B2F; }
.kk-pc__card-badge[data-category="mayor-gramaje"] { background-color: #FFFFFF; color: #C4A35A; }
.kk-pc__card-badge[data-category="alfajores"]     { background-color: #FFFFFF; color: #4A2A22; }

/* --- Info ----------------------------------------------------------------- */
.kk-pc__card-info {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
	background-color: #FFFFFF;
}

.kk-pc__card-name {
	margin: 0;
	font-family: 'Montserrat', sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: #171717;
	line-height: 1.3;
}

.kk-pc__card-weight {
	margin: 0;
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	font-weight: 400;
	color: #6B6B6B;
	line-height: 1.4;
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1024px) {
	.kk-pc__grid {
		grid-template-columns: repeat(var(--kk-cols-t, 2), 1fr);
	}
}

@media (max-width: 767px) {
	.kk-pc__grid {
		grid-template-columns: repeat(var(--kk-cols-m, 1), 1fr);
	}

	.kk-pc__filters {
		gap: 8px;
		margin-bottom: 24px;
	}

	.kk-pc__chip {
		padding: 7px 16px;
	}
}

/* =========================================================================
   Animación de entrada de cards al filtrar
   ========================================================================= */
@keyframes kk-pc-fade-in {
	from {
		opacity: 0;
		transform: scale(0.97);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.kk-pc__card.kk-pc-anim-in {
	animation: kk-pc-fade-in 0.22s ease both;
}