/* Compralikes Mobile Menu
 * Tema: negro + acentos. Tipografías: Open Sans.
 * Editá las variables de abajo para re-tematizar todo el cajón.
 */

.cl-mm {
	--cl-mm-accent: #e11d48;      /* acento (ajustalo al rojo exacto de tu marca) */
	--cl-mm-bg: #000;
	--cl-mm-bg-2: #141414;
	--cl-mm-bg-3: #1d1d1d;
	--cl-mm-line: #2a2a2a;
	--cl-mm-txt: #fff;
	--cl-mm-soft: #d6d6d6;
	--cl-mm-muted: #8c8c8c;
	--cl-mm-body: "Open Sans", Arial, sans-serif;

	position: fixed;
	inset: 0;
	z-index: 2147483000;
}

.cl-mm[hidden] { display: none; }

html.cl-mm-lock,
html.cl-mm-lock body { overflow: hidden; }

.cl-mm *,
.cl-mm *::before,
.cl-mm *::after { box-sizing: border-box; border-radius: 0; }

/* Fondo y cajón */

.cl-mm-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .6);
	opacity: 0;
	transition: opacity .25s ease;
}

.cl-mm-drawer {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: min(90vw, 420px);
	display: flex;
	flex-direction: column;
	background: var(--cl-mm-bg);
	color: var(--cl-mm-txt);
	font-family: var(--cl-mm-body);
	transform: translateX(-100%);
	transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}

.cl-mm.is-open .cl-mm-backdrop { opacity: 1; }
.cl-mm.is-open .cl-mm-drawer { transform: translateX(0); }

.cl-mm-ico { flex: none; }
/* Dashicons como íconos monocromo (heredan color y se escalan por font-size) */
.cl-mm .cl-mm-ico.dashicons { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; line-height: 1; }

.cl-mm a,
.cl-mm button { -webkit-tap-highlight-color: transparent; }

.cl-mm a:focus-visible,
.cl-mm button:focus-visible {
	outline: 2px solid var(--cl-mm-accent);
	outline-offset: -2px;
}

/* Cabecera */

.cl-mm-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--cl-mm-line);
	flex: none;
}

.cl-mm-head-title {
	padding-left: 16px;
	font: 800 14px/18.2px var(--cl-mm-body);
	letter-spacing: 1px;
	text-transform: uppercase;
}

.cl-mm .cl-mm-x {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--cl-mm-accent);
	color: #fff;
	cursor: pointer;
}

.cl-mm .cl-mm-x .cl-mm-ico { font-size: 22px; }

/* Buscador/filtro de plataformas */

.cl-mm-filter {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--cl-mm-line);
}

.cl-mm-filter .cl-mm-ico { font-size: 18px; color: var(--cl-mm-muted); }

.cl-mm-filter-input {
	flex: 1;
	min-width: 0;
	height: 34px;
	margin: 0;
	padding: 0 6px;
	border: 0;
	background: transparent;
	color: var(--cl-mm-txt);
	font: 400 13px/1.2 var(--cl-mm-body);
	letter-spacing: .3px;
}

.cl-mm-filter-input::placeholder { color: var(--cl-mm-muted); }
.cl-mm-filter-input:focus { outline: none; }
.cl-mm-item[hidden] { display: none; }

/* Cuerpo */

.cl-mm-body {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding-bottom: 96px;
}

.cl-mm ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Accesos rápidos */

.cl-mm-quick {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--cl-mm-line);
	border-bottom: 1px solid var(--cl-mm-line);
}

.cl-mm-chip {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 56px;
	padding: 8px 12px 8px 14px;
	background: var(--cl-mm-bg);
	color: var(--cl-mm-txt);
	font: 800 12px/18.2px var(--cl-mm-body);
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
}

.cl-mm-chip .cl-mm-thumb { width: 22px; height: 22px; }
.cl-mm-chip .cl-mm-ico { font-size: 18px; color: var(--cl-mm-accent); }
.cl-mm-chip:active { background: var(--cl-mm-bg-2); }

/* Filas */

.cl-mm .cl-mm-row {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 56px;
	margin: 0;
	padding: 8px 12px;
	border: 0;
	border-bottom: 1px solid var(--cl-mm-line);
	background: transparent;
	color: var(--cl-mm-txt);
	font: 800 14px/18.2px var(--cl-mm-body);
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.cl-mm .cl-mm-row:active { background: var(--cl-mm-bg-2); }

.cl-mm-thumb {
	width: 32px;
	height: 32px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cl-mm-txt);
}

.cl-mm-thumb.is-icon .cl-mm-ico { font-size: 22px; color: var(--cl-mm-accent); }
.cl-mm-thumb .cl-emoji { font-size: 20px; line-height: 1; }
.cl-mm-thumb img { width: 32px; height: 32px; object-fit: contain; }

.cl-mm-name { flex: 1; min-width: 0; }

.cl-mm-count {
	flex: none;
	color: var(--cl-mm-muted);
	font: 400 11.2px/1 var(--cl-mm-body);
	letter-spacing: 1px;
	text-transform: none;
}

.cl-mm-chev {
	flex: none;
	width: 28px;
	display: flex;
	justify-content: center;
	transition: transform .2s ease, color .2s ease;
}

.cl-mm-chev .cl-mm-ico { font-size: 20px; color: var(--cl-mm-muted); }

.cl-mm .cl-mm-toggle[aria-expanded="true"] { color: var(--cl-mm-accent); }
.cl-mm .cl-mm-toggle[aria-expanded="true"] .cl-mm-chev { transform: rotate(180deg); }

/* Niveles / paneles */

.cl-mm-panel { background: var(--cl-mm-bg-2); }
.cl-mm-panel:not([hidden]) { animation: cl-mm-in .2s ease; }

.cl-mm .cl-mm-d1 .cl-mm-row {
	padding-left: 56px;
	min-height: 50px;
}

/* Filas "ricas" (Ayuda, Mi cuenta): emoji + título + descripción */

.cl-mm .cl-mm-rich {
	align-items: flex-start;
	padding-top: 12px;
	padding-bottom: 12px;
	padding-left: 16px;
}

.cl-mm-rich .cl-mm-thumb { margin-top: 1px; }

.cl-mm-rich-txt {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	flex: 1;
}

.cl-mm-desc {
	font: 400 11.2px/1.5 var(--cl-mm-body);
	letter-spacing: 1px;
	text-transform: none;
	color: var(--cl-mm-muted);
}

/* Servicios (solo título) */

.cl-mm .cl-mm-box { padding: 4px 0 8px; }

.cl-mm .cl-mm-servs { margin: 0; padding: 0; }
.cl-mm .cl-mm-servs li[hidden] { display: none; }
.cl-mm .cl-mm-servs li[data-x]:not([hidden]) { animation: cl-mm-in .2s ease; }

.cl-mm .cl-mm-serv {
	display: block;
	padding: 11px 16px 11px 56px;
	border-bottom: 1px solid var(--cl-mm-line);
	color: var(--cl-mm-soft);
	font: 400 14px/1.35 var(--cl-mm-body);
	text-decoration: none;
}

.cl-mm .cl-mm-serv:active { background: var(--cl-mm-bg-3); color: var(--cl-mm-txt); }

/* Ver todo en X */

.cl-mm .cl-mm-all {
	display: block;
	width: 100%;
	margin: 0;
	padding: 14px 16px;
	background: var(--cl-mm-accent);
	color: #fff;
	font: 400 14px/1.2 var(--cl-mm-body);
	text-align: center;
	text-decoration: none;
}

/* Cargar más / Ver todos */

.cl-mm-links {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 16px 0 56px;
}

.cl-mm .cl-mm-more,
.cl-mm .cl-mm-see {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	margin: 0;
	padding: 0 2px;
	border: 0;
	background: transparent;
	color: var(--cl-mm-txt);
	font: 400 13px/1.2 var(--cl-mm-body);
	text-decoration: underline;
	text-decoration-color: var(--cl-mm-accent);
	text-underline-offset: 4px;
	cursor: pointer;
}

.cl-mm .cl-mm-see {
	margin-left: auto;
	color: var(--cl-mm-muted);
	text-decoration: none;
}

.cl-mm .cl-mm-see::after { content: "\2192"; margin-left: 6px; }

.cl-mm .cl-mm-more:active,
.cl-mm .cl-mm-see:active { color: var(--cl-mm-accent); }

.cl-mm .cl-mm-more[aria-busy="true"] {
	color: var(--cl-mm-muted);
	text-decoration: none;
	cursor: progress;
}

/* Página actual */

.cl-mm .is-current { color: var(--cl-mm-accent); }

/* Pie (secundarios) */

.cl-mm-foot { margin-top: 20px; border-top: 1px solid var(--cl-mm-line); }

/* "Salir" solo logueado */
body:not(.logged-in) .cl-mm-logout { display: none; }

/* Carrito al lado de la hamburguesa (fuera de .cl-mm) */

.cl-mm-cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: #fff;
	background: transparent;
	text-decoration: none;
	vertical-align: middle;
	-webkit-tap-highlight-color: transparent;
}

.cl-mm-cart .cl-mm-ico { font-size: 24px; }
.cl-mm-cart:active { color: var(--cl-mm-accent); }

@keyframes cl-mm-in {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.cl-mm-drawer,
	.cl-mm-backdrop,
	.cl-mm-chev { transition: none; }
	.cl-mm-panel:not([hidden]),
	.cl-mm .cl-mm-servs li[data-x]:not([hidden]) { animation: none; }
}

/* Solo mobile/tablet. En desktop solo si el megamenú se colapsó a hamburguesa. */
@media (min-width: 922px) {
	html:not(.cl-md-collapsed) .cl-mm { display: none !important; }
	.cl-mm-cart { display: none !important; }
}