/* ============================================================
   IMPRENTA BUIN
   CATÁLOGO REUTILIZABLE
   ============================================================ */

.ib-product-catalog {
	--ibpc-black: #181a1f;
	--ibpc-muted: #727a85;
	--ibpc-line: #e2e5e8;
	--ibpc-soft: #f6f7f8;
	--ibpc-red: #e4003a;

	width: 100vw;
	margin-left: calc(50% - 50vw);

	padding: 56px 24px 62px;

	background: #f7f8f9;

	color: var(--ibpc-black);
}


.ib-product-catalog *,
.ib-product-catalog *::before,
.ib-product-catalog *::after {
	box-sizing: border-box;
}


.ib-product-catalog__wrap {
	width: min(1300px, 100%);
	margin-inline: auto;
}



/* ============================================================
   CABECERA
   ============================================================ */

.ib-product-catalog__header {
	display: flex;

	align-items: flex-end;
	justify-content: space-between;

	gap: 40px;

	margin-bottom: 25px;
}


.ib-product-catalog__heading {
	max-width: 600px;
}


.ib-product-catalog__header h2 {
	margin: 0;

	color: var(--ibpc-black) !important;

	font-size: clamp(26px, 2.6vw, 34px) !important;
	line-height: 1.08;

	font-weight: 800;

	letter-spacing: -0.035em;
}


.ib-product-catalog__intro {
	margin: 8px 0 0;

	color: var(--ibpc-muted) !important;

	font-size: 13px !important;
	line-height: 1.5;
}


.ib-product-catalog__all {
	display: inline-flex;

	align-items: center;

	gap: 8px;

	flex: 0 0 auto;

	color: var(--ibpc-black) !important;

	font-size: 12px;
	line-height: 1;

	font-weight: 800;

	text-decoration: none !important;

	transition:
		color .18s ease,
		gap .18s ease;
}



/* ============================================================
   GRID
   ============================================================ */

.ib-product-catalog__grid {
	display: grid;

	grid-template-columns:
		repeat(4, minmax(0, 1fr));

	gap: 14px;

	align-items: stretch;
}



/* ============================================================
   TARJETA
   ============================================================ */

.ib-product-item {
	min-width: 0;

	border: 1px solid var(--ibpc-line);

	border-radius: 14px;

	overflow: hidden;

	background: #ffffff;

	animation:
		ibProductIn
		.30s
		ease
		both;

	transition:
		transform .2s ease,
		border-color .2s ease,
		box-shadow .2s ease;
}


@keyframes ibProductIn {

	from {
		opacity: 0;
		transform: translateY(7px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}

}


.ib-product-item__link {
	display: flex;

	flex-direction: column;

	height: 100%;

	color: inherit !important;

	text-decoration: none !important;
}



/* ============================================================
   IMAGEN
   ============================================================ */

.ib-product-item__media {
	width: 100%;

	aspect-ratio: 1.35 / 1;

	margin: 0;

	overflow: hidden;

	background: var(--ibpc-soft);
}


.ib-product-item__media img {
	display: block;

	width: 100% !important;
	height: 100% !important;

	object-fit: cover;

	transition:
		transform .3s ease;
}



/* ============================================================
   CONTENIDO
   ============================================================ */

.ib-product-item__content {
	flex: 1;

	padding:
		14px
		14px
		13px;
}


.ib-product-item__category {
	display: block;

	margin-bottom: 7px;

	color: #858d98;

	font-size: 9px;
	line-height: 1.2;

	font-weight: 800;

	letter-spacing: .085em;

	text-transform: uppercase;
}


.ib-product-item__content h3 {
	margin: 0;

	color: var(--ibpc-black) !important;

	font-size: 16px !important;
	line-height: 1.25;

	font-weight: 700;

	letter-spacing: -.015em;
}



/* ============================================================
   FOOTER
   ============================================================ */

.ib-product-item__footer {
	min-height: 38px;

	display: flex;

	align-items: center;
	justify-content: space-between;

	gap: 10px;

	padding:
		0
		14px;

	border-top:
		1px solid
		#edf0f2;

	color: #525b66;

	font-size: 10.5px;
	line-height: 1;

	font-weight: 800;

	transition:
		color .18s ease,
		background-color .18s ease;
}


.ib-product-item__footer > span:last-child {
	font-size: 15px;

	transition:
		transform .18s ease;
}



/* ============================================================
   CARGAR MÁS
   ============================================================ */

.ib-product-catalog__load {
	display: flex;

	flex-direction: column;

	align-items: center;

	margin-top: 32px;
}


.ib-product-catalog__load-button {
	min-width: 215px;
	min-height: 48px;

	display: inline-flex;

	align-items: center;
	justify-content: center;

	gap: 14px;

	padding:
		0
		22px;

	border:
		1px solid
		var(--ibpc-red);

	border-radius: 9px;

	background:
		var(--ibpc-red);

	color: #ffffff !important;

	font-family: inherit;

	font-size: 12px;
	line-height: 1;

	font-weight: 800;

	cursor: pointer;

	appearance: none;

	-webkit-appearance: none;

	transition:
		transform .18s ease,
		background-color .18s ease,
		border-color .18s ease,
		box-shadow .18s ease,
		opacity .18s ease;
}


.ib-product-catalog__load-button.is-loading {
	pointer-events: none;

	opacity: .70;
}


.ib-product-catalog__load-button[hidden] {
	display: none !important;
}


.ib-product-catalog__load-arrow {
	font-size: 16px;
	line-height: 1;
}


.ib-product-catalog__load-button.is-loading
.ib-product-catalog__load-arrow {
	animation:
		ibLoadArrow
		.7s
		ease
		infinite;
}


@keyframes ibLoadArrow {

	0%,
	100% {
		transform: translateY(-2px);
	}

	50% {
		transform: translateY(3px);
	}

}



/* ============================================================
   LINK FINAL
   ============================================================ */

.ib-product-catalog__complete-link {
	min-width: 215px;
	min-height: 48px;

	display: inline-flex;

	align-items: center;
	justify-content: center;

	gap: 12px;

	padding:
		0
		22px;

	border:
		1px solid
		#d2d7dc;

	border-radius: 9px;

	background: #ffffff;

	color: var(--ibpc-black) !important;

	font-size: 12px;
	line-height: 1;

	font-weight: 800;

	text-decoration: none !important;
}


.ib-product-catalog__complete-link[hidden] {
	display: none !important;
}


.ib-product-catalog__status {
	min-height: 16px;

	margin:
		8px
		0
		0;

	color: var(--ibpc-muted);

	font-size: 10.5px;
	line-height: 1.4;

	text-align: center;
}



/* ============================================================
   SKELETON
   ============================================================ */

.ib-product-skeleton {
	min-width: 0;

	border:
		1px solid
		var(--ibpc-line);

	border-radius: 14px;

	overflow: hidden;

	background: #ffffff;
}


.ib-product-skeleton__media {
	position: relative;

	width: 100%;

	aspect-ratio: 1.35 / 1;

	overflow: hidden;

	background: #e7eaed;
}


.ib-product-skeleton__body {
	padding:
		14px
		14px
		13px;
}


.ib-product-skeleton__line {
	position: relative;

	overflow: hidden;

	border-radius: 999px;

	background: #e7eaed;
}


.ib-product-skeleton__line--category {
	width: 34%;
	height: 7px;

	margin-bottom: 12px;
}


.ib-product-skeleton__line--title {
	width: 76%;
	height: 13px;
}


.ib-product-skeleton__footer {
	position: relative;

	height: 38px;

	border-top:
		1px solid
		#edf0f2;

	background: #edf0f2;
}



/* ============================================================
   SHIMMER
   ============================================================ */

.ib-product-skeleton__media::after,
.ib-product-skeleton__line::after,
.ib-product-skeleton__footer::after {
	content: "";

	position: absolute;

	inset: 0;

	transform:
		translateX(-100%);

	background:
		linear-gradient(
			90deg,
			transparent 0%,
			rgba(255,255,255,.82) 50%,
			transparent 100%
		);

	animation:
		ibCatalogShimmer
		1.05s
		infinite;
}


@keyframes ibCatalogShimmer {

	to {
		transform:
			translateX(100%);
	}

}



/* ============================================================
   HOVER
   ============================================================ */

@media (hover: hover) and (pointer: fine) {

	.ib-product-item:hover {
		border-color:
			#ccd1d6;

		box-shadow:
			0
			14px
			30px
			rgba(18,24,31,.07);
	}


	.ib-product-item:hover
	.ib-product-item__media img {
		transform:
			scale(1.025);
	}


	.ib-product-item:hover
	.ib-product-item__footer {
		color:
			var(--ibpc-red);

		background:
			#fafafa;
	}


	.ib-product-item:hover
	.ib-product-item__footer > span:last-child {
		transform:
			translateX(3px);
	}


	.ib-product-catalog__all:hover {
		gap: 12px;

		color:
			var(--ibpc-red) !important;
	}


	.ib-product-catalog__load-button:hover {
		background:
			#bd0031;

		border-color:
			#bd0031;

		transform:
			translateY(-2px);

		box-shadow:
			0
			8px
			18px
			rgba(228,0,58,.18);
	}

}



/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1000px) {

	.ib-product-catalog__grid {
		grid-template-columns:
			repeat(3, minmax(0, 1fr));

		gap: 12px;
	}

}



/* ============================================================
   MÓVIL
   ============================================================ */

@media (max-width: 680px) {

	.ib-product-catalog {
		padding:
			44px
			12px
			50px;
	}


	.ib-product-catalog__header {
		display: block;

		margin-bottom: 21px;
	}


	.ib-product-catalog__all {
		margin-top: 13px;
	}


	.ib-product-catalog__grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap: 9px;
	}


	.ib-product-item,
	.ib-product-skeleton {
		border-radius: 11px;
	}


	.ib-product-item__media,
	.ib-product-skeleton__media {
		aspect-ratio: 1.15 / 1;
	}


	.ib-product-item__content,
	.ib-product-skeleton__body {
		padding:
			11px
			11px
			10px;
	}


	.ib-product-item__category {
		margin-bottom: 5px;

		font-size: 6.6px;
	}


	.ib-product-item__content h3 {
		font-size:
			12.5px !important;
	}


	.ib-product-item__footer {
		min-height: 34px;

		padding:
			0
			11px;

		font-size: 9px;
	}


	.ib-product-skeleton__footer {
		height: 34px;
	}


	.ib-product-catalog__load {
		margin-top: 25px;
	}


	.ib-product-catalog__load-button,
	.ib-product-catalog__complete-link {
		width: 100%;
	}

}



/* ============================================================
   ACCESIBILIDAD
   ============================================================ */

.ib-product-item__link:focus-visible,
.ib-product-catalog__all:focus-visible,
.ib-product-catalog__load-button:focus-visible,
.ib-product-catalog__complete-link:focus-visible {
	outline:
		3px solid
		rgba(228,0,58,.20);

	outline-offset:
		3px;
}



/* ============================================================
   REDUCIR MOVIMIENTO
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

	.ib-product-item,
	.ib-product-item__media img,
	.ib-product-item__footer,
	.ib-product-catalog__all,
	.ib-product-catalog__load-button {
		transition: none !important;
	}


	.ib-product-item {
		animation: none !important;
	}


	.ib-product-skeleton__media::after,
	.ib-product-skeleton__line::after,
	.ib-product-skeleton__footer::after,
	.ib-product-catalog__load-arrow {
		animation: none !important;
	}

}