/* Mantarraya · Mega Menú Grid
   ------------------------------------------------------------------ */

.mmg {
	--mmg-accent: #E30613;
	--mmg-text: #4a4a4a;
	--mmg-text-strong: #1a1a1a;
	--mmg-muted: #8b8b8b;
	--mmg-line: #ececec;
	--mmg-gap: 8px;
	--mmg-thumb: 130px;

	box-sizing: border-box;
	width: 100%;
	font-family: inherit;
}

.mmg *,
.mmg *::before,
.mmg *::after {
	box-sizing: border-box;
}

.mmg-panel-title {
	margin: 0 0 14px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--mmg-line);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--mmg-text-strong);
}

/* Cuadrícula ---------------------------------------------------------- */

.mmg .mmg-grid {
	display: grid;
	grid-template-columns: repeat(var(--mmg-cols, 5), minmax(0, 1fr));
	gap: 22px var(--mmg-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mmg .mmg-cell {
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
	border: 0;
}

/* Tarjeta ------------------------------------------------------------- */

.mmg .mmg-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 12px 8px 14px;
	height: 100%;
	text-decoration: none;
	color: var(--mmg-text);
	background: transparent;
	border-radius: 3px;
	transition: background-color .18s ease, transform .18s ease;
}

.mmg .mmg-item:hover,
.mmg .mmg-item:focus-visible {
	background: #fafafa;
	color: var(--mmg-text-strong);
	text-decoration: none;
	transform: translateY(-2px);
}

.mmg .mmg-item:focus-visible {
	outline: 2px solid var(--mmg-accent);
	outline-offset: 2px;
}

/* Imagen -------------------------------------------------------------- */

.mmg .mmg-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--mmg-thumb);
	overflow: hidden;
}

.mmg .mmg-img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	mix-blend-mode: multiply; /* funde fondos blancos de foto de producto */
	transition: transform .25s ease;
}

.mmg .mmg-item:hover .mmg-img {
	transform: scale(1.05);
}

.mmg .mmg-img--placeholder {
	opacity: .35;
	mix-blend-mode: normal;
}

/* Texto --------------------------------------------------------------- */

.mmg .mmg-label {
	display: block;
	text-align: center;
	line-height: 1.35;
}

.mmg .mmg-name {
	position: relative;
	display: inline-block;
	padding-bottom: 4px;
	font-size: 14px;
	font-weight: 400;
}

.mmg .mmg-name::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	height: 2px;
	background: var(--mmg-accent);
	transform: translateX(-50%);
	transition: width .22s ease;
}

.mmg .mmg-item:hover .mmg-name::after,
.mmg .mmg-item:focus-visible .mmg-name::after {
	width: 100%;
}

.mmg .mmg-count {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	color: var(--mmg-muted);
}

/* Tarjeta "Ver todo" -------------------------------------------------- */

.mmg .mmg-thumb--all {
	color: var(--mmg-accent);
	border: 1px dashed #d8d8d8;
	border-radius: 3px;
}

.mmg .mmg-thumb--all svg {
	width: 34px;
	height: 34px;
}

.mmg .mmg-item--all .mmg-name {
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: 12px;
}

/* Aviso de administrador --------------------------------------------- */

.mmg-notice {
	margin: 0;
	padding: 10px 14px;
	font-size: 13px;
	color: #8a6d3b;
	background: #fcf8e3;
	border-left: 3px solid #e0c068;
}

/* Responsive ---------------------------------------------------------- */

@media (max-width: 1100px) {
	.mmg .mmg-grid {
		grid-template-columns: repeat(min(var(--mmg-cols, 5), 4), minmax(0, 1fr));
	}
}

@media (max-width: 782px) {
	.mmg {
		--mmg-thumb: 92px;
	}

	.mmg .mmg-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px 4px;
	}

	.mmg .mmg-name {
		font-size: 13px;
	}
}

@media (max-width: 480px) {
	.mmg .mmg-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.mmg .mmg-item,
	.mmg .mmg-img,
	.mmg .mmg-name::after {
		transition: none;
	}

	.mmg .mmg-item:hover {
		transform: none;
	}

	.mmg .mmg-item:hover .mmg-img {
		transform: none;
	}
}

/* --------------------------------------------------------------------
   Overrides para Max Mega Menu
   MMM aplica estilos agresivos a los <a> y <li> dentro de sus paneles.
   -------------------------------------------------------------------- */

#mega-menu-wrap .mmg,
.mega-menu-item .mmg,
.mega-sub-menu .mmg {
	padding: 4px 0;
}

#mega-menu-wrap .mmg .mmg-grid,
.mega-sub-menu .mmg .mmg-grid {
	display: grid !important;
	float: none !important;
	width: 100% !important;
}

#mega-menu-wrap .mmg .mmg-cell,
.mega-sub-menu .mmg .mmg-cell {
	display: block !important;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

#mega-menu-wrap .mmg .mmg-item,
.mega-sub-menu .mmg .mmg-item {
	display: flex !important;
	height: auto !important;
	padding: 12px 8px 14px !important;
	line-height: 1.35 !important;
	text-transform: none !important;
	border: 0 !important;
}

#mega-menu-wrap .mmg .mmg-img,
.mega-sub-menu .mmg .mmg-img {
	display: inline-block !important;
	max-width: 100% !important;
	height: auto !important;
}