/* Comercial CR - Menú Principal — estilos del header y mega-menú de categorías */

.crm-header {
	--crm-blue: var(--cr-marca, #15489e);
	--crm-blue-d: var(--cr-marca-osc, #0e3578);
	--crm-orange: #f39200;
	--crm-ink: #1f2a37;
	--crm-muted: #6b7280;
	--crm-line: #e9edf3;
	--crm-bg: #f4f6f9;
	font-family: Mulish, system-ui, sans-serif;
	color: var(--crm-ink);
}
.crm-header * { box-sizing: border-box; }
.crm-header a { text-decoration: none; color: inherit; }
.crm-header ul { list-style: none; margin: 0; padding: 0; }
.crm-header .crm-wrap { max-width: 1280px; margin: 0 auto; padding-inline: 22px; }

/* Barra superior */
.crm-topbar { background: var(--crm-blue-d); color: #fff; font-size: 12.5px; }
.crm-topbar .crm-wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-block: 7px; }
.crm-topbar .crm-left, .crm-topbar .crm-right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.crm-topbar a { color: var(--cr-marca-suave, #dbe6ff); display: inline-flex; align-items: center; gap: 7px; }
.crm-topbar .crm-sep { width: 1px; height: 14px; background: rgba(255, 255, 255, .25); }

/* Fila de cabecera: logo, buscador, cuenta, carro */
.crm-headrow { border-bottom: 1px solid var(--crm-line); background: #fff; }
.crm-headrow .crm-wrap { display: flex; align-items: center; gap: 26px; padding-block: 16px; flex-wrap: nowrap; }
.crm-logo { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.crm-logo img { height: 52px; width: auto; display: block; }
.crm-logo .crm-word { font-family: Poppins, sans-serif; font-weight: 800; font-size: 24px; color: var(--crm-blue-d); }
/*
 * Custom Header Builder le agrega a cada elemento pegado en su HTML una
 * clase interna "chb-pos-N" con su propia regla de visibilidad (para su
 * función de "click para poner link/shortcode"). Esa regla puede ganarle
 * en cascada a la nuestra y dejar el buscador oculto. Forzamos que estos
 * elementos del header SIEMPRE se muestren, sin importar esas clases.
 */
.crm-header .crm-search { display: flex !important; }

.crm-search { flex: 1 1 auto; max-width: 620px; display: flex; align-items: stretch; border: 0; border-radius: 8px; overflow: hidden; background: #fff; }
.crm-search input { flex: 1 1 0; border: 0; outline: none; padding: 11px 16px; font-size: 15px; font-family: inherit; }
.crm-search button { border: 0; background: var(--crm-blue-d); color: #fff; padding: 0 22px; font-size: 16px; cursor: pointer; }
.crm-mic { background: transparent !important; color: var(--crm-blue-d); padding: 0 12px !important; display: flex; align-items: center; }
.crm-mic svg { width: 18px; height: 18px; display: block; }
.crm-mic.crm-mic-on { color: var(--crm-orange); }
.crm-shopbtn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 8px; background: #fff; border: 1px solid var(--crm-line); color: var(--crm-blue-d); font-family: Poppins, sans-serif; font-weight: 700; font-size: 14px; white-space: nowrap; }
/* El botón "Tienda" no debe verse cuando ya se está en la página de la tienda. */
body.woocommerce-shop .crm-shopbtn,
body.post-type-archive-product .crm-shopbtn { display: none; }
.crm-utils { margin-left: auto; display: flex; align-items: center; gap: 22px; flex: 0 0 auto; }
.crm-acct { display: flex; flex-direction: column; line-height: 1.15; font-size: 12px; color: var(--crm-muted); }
.crm-acct b { font-size: 14px; color: var(--crm-blue-d); }
.crm-cartbtn { position: relative; display: flex; align-items: center; gap: 10px; border-radius: 10px; padding: 9px 6px; cursor: pointer; font-family: inherit; background: transparent; border: 0; }
.crm-cartbtn small { font-size: 11px; color: var(--crm-muted); }
.crm-cartbtn b { font-size: 14px; color: var(--crm-blue-d); }
.crm-cartbtn .crm-badge { position: absolute; top: -7px; right: -7px; min-width: 21px; height: 21px; padding: 0 5px; background: var(--crm-orange); color: #fff; font-size: 12px; font-weight: 700; border-radius: 11px; display: none; place-items: center; }
.crm-cartbtn .crm-badge.on { display: grid; }

/* Barra de categorías + mega-menú */
.crm-nav { background: var(--crm-blue); color: #fff; position: relative; }
/*
 * En la página de la tienda, la barra de categorías no debe verse "suelta"
 * arriba del todo (ahí ya está el panel de productos/filtros de la tienda,
 * que tapa toda la pantalla) — pero SÍ debe poder abrirse igual que en el
 * resto del sitio, tocando "Menú" en la barra inferior, y verse por ENCIMA
 * de ese panel (ver override en @media más abajo, junto con
 * .crm-header.crm-menu-open). Por eso acá solo se esconde por defecto.
 */
body.woocommerce-shop .crm-nav,
body.post-type-archive-product .crm-nav { display: none; }
.crm-nav .crm-wrap { display: flex; align-items: center; gap: 4px; }
.crm-nav > .crm-wrap > ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; }
.crm-navitem { list-style: none; }
.crm-navitem > a { align-items: center; gap: 7px; padding: 14px 12px; font-family: Poppins, sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .01em; display: inline-flex; white-space: nowrap; }
.crm-catico { width: 18px; height: 18px; flex: 0 0 auto; display: inline-block; vertical-align: middle; }
.crm-nav .crm-allshop { flex: 0 0 auto; margin-left: auto; padding: 14px 12px; font-family: Poppins, sans-serif; font-weight: 700; font-size: 14px; color: #ffd9a8; white-space: nowrap; }

.crm-mega { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 40; background: #fff; color: var(--crm-ink); box-shadow: 0 18px 40px rgba(var(--cr-marca-osc-rgb, 14,53,120), .18); border-top: 3px solid var(--crm-orange); max-height: 72vh; overflow: auto; }
.crm-navitem:hover .crm-mega { display: block; }
.crm-mega .crm-wrap { padding: 22px 22px 26px; max-width: 1280px; }
.crm-mega .crm-cols { columns: 5; column-gap: 18px; }
.crm-mega .crm-cols a { display: flex; align-items: center; gap: 7px; break-inside: avoid; padding: 6px 0; color: #48566b; font-size: 15.5px; line-height: 1.35; }
.crm-mega .crm-cols a:hover { color: var(--crm-orange); }
.crm-mega .crm-tgrp { break-inside: avoid; margin: 0 0 14px; display: block; }
.crm-mega .crm-tg-h { display: flex; align-items: center; gap: 7px; font-weight: 700; color: var(--crm-blue-d); margin: 0 0 4px; text-decoration: none; font-size: 15.5px; line-height: 1.35; }
.crm-mega a.crm-tg-h:hover { color: var(--crm-orange); }
.crm-mega .crm-tg-sub { display: flex; flex-wrap: wrap; gap: 5px 12px; padding-left: 26px; }
.crm-mega .crm-tg-sub a { display: inline; color: #6b7280; font-size: 14px; padding: 0; }
.crm-mega .crm-tg-sub a:hover { color: var(--crm-orange); }
.crm-mega .crm-tagico { flex: 0 0 auto; width: 17px; height: 17px; }

/* Fijar el header al hacer scroll */
.crm-sticky { position: sticky; top: 0; z-index: 60; }

/*
 * Compatibilidad con el panel de la tienda (scroll infinito / filtros AJAX,
 * elemento #spo-shop-overlay). Ese panel es de posición fija y por defecto
 * arranca en top:0, tapando el header. El propio script del sitio ya calcula
 * en tiempo real la altura del header en la variable --cr-shop-panel-top
 * (usando la clase .cr-sticky que el header trae), así que solo hace falta
 * usarla para empujar el panel hacia abajo.
 */
#spo-shop-overlay {
	top: var(--cr-shop-panel-top, 0px) !important;
	height: calc(100% - var(--cr-shop-panel-top, 0px)) !important;
}

/* Botón hamburguesa (móvil) */
.crm-burger { display: none; flex-direction: column; gap: 5px; border-radius: 6px; cursor: pointer; padding: 8px; background: none; border: 1px solid #1a1a1a; }
.crm-burger span { width: 24px; height: 2px; background: #1a1a1a; display: block; }

/*
 * Botón de "reproducir" que hace bajar la tienda solo, con 3 velocidades a
 * elegir, para que el cliente la vaya viendo sin tener que hacer scroll a
 * mano. En escritorio va justo al lado de los botones ∞ / ↓ / ⌗ del plugin
 * de terceros "CR - WooCommerce Vista Cuadricula y Lista" (.modetoggle); en
 * móvil va dentro de la barra inferior (ver más abajo, junto al filtro). El
 * botón y el menú de velocidades los arma menu.js; aquí solo se les da
 * apariencia. En escritorio se le copia el mismo look (círculo chico) que
 * los botones vecinos de ese plugin para que se vea como uno más de la
 * misma barra.
 */
.cr-autoscroll-wrap {
	position: relative;
	display: inline-flex;
	align-items: stretch;
}
.cr-autoscroll-btn {
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 999px;
	background: #fff;
	color: var(--cr-marca, #15489e);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	cursor: pointer;
}
.cr-autoscroll-btn:hover { background: rgba(0, 0, 0, .05); }
.cr-autoscroll-btn.cr-autoscroll-playing { background: var(--cr-marca, #15489e); color: #fff; border-color: var(--cr-marca, #15489e); }
.cr-autoscroll-menu {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 20;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 10px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
	padding: 6px;
	min-width: 110px;
}
.cr-autoscroll-menu.cr-open { display: block; }
.cr-autoscroll-menu button {
	appearance: none;
	-webkit-appearance: none;
	display: block;
	width: 100%;
	text-align: left;
	border: 0;
	background: transparent;
	color: #1f2a37;
	font-size: 13px;
	padding: 7px 10px;
	border-radius: 6px;
	cursor: pointer;
}
.cr-autoscroll-menu button:hover { background: #f4f6f9; }

@media (max-width: 900px) {
	.crm-topbar .crm-wrap > * { display: none; }
	.crm-topbar { min-height: 14px; }
	.crm-acct { display: none; }
	.crm-shopbtn { display: none; }
	.crm-cartbtn { display: none; }
	/*
	 * En móvil, dentro de .crm-utils solo debe verse el botón hamburguesa.
	 * Ocultar cada clase nuestra (arriba) no alcanza: hay plugins de terceros
	 * (p. ej. el carrito lateral) que detectan el link del carro y lo
	 * REEMPLAZAN por su propio botón flotante con otra clase (xoo-wsc-...),
	 * que no coincide con .crm-cartbtn y por eso se quedaba visible,
	 * empujando el hamburguesa fuera de la fila. Esta regla oculta
	 * cualquier cosa ahí adentro que no sea el hamburguesa, sin importar
	 * qué plugin la haya puesto.
	 */
	.crm-utils > *:not(.crm-burger) { display: none !important; }
	.crm-utils { margin-left: 0; gap: 0; order: 3; }
	.crm-burger { display: flex; }
	/* Buscador angosto y centrado entre el logo y el hamburguesa, no estirado de punta a punta. */
	.crm-search { order: 2; flex: 1 1 auto; min-width: 0; max-width: 200px; width: auto; margin: 0 auto; }
	.crm-headrow .crm-wrap { flex-wrap: nowrap; gap: 12px; }
	.crm-logo img { height: 38px; }

	/*
	 * El botón flotante del carrito lateral (plugin de terceros, clase
	 * xoo-wsc-basket) es redundante en móvil: ya existe un ícono de carro en
	 * la barra inferior. Se oculta solo en móvil (no es nuestro plugin, solo
	 * lo escondemos).
	 */
	.xoo-wsc-basket { display: none !important; }

	/*
	 * El botón "Filtros" de la tienda (plugin de terceros, clase .mobfilter)
	 * lo movemos por JS (menu.js) dentro de la barra inferior #cr-mob-nav.
	 * Aquí solo lo re-estilamos para que se vea como un ícono más de esa
	 * barra, en vez de su apariencia flotante original.
	 *
	 * El ícono ya no depende de la imagen emoji externa (s.w.org): menu.js
	 * lo reemplaza por un SVG propio (inline, sin depender de la red) para
	 * que siempre se vea, sin importar la conexión del celular.
	 */
	#cr-mob-nav .mobfilter.cr-mn-filter {
		position: static !important;
		top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
		display: flex !important;
		flex: 0 1 auto !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
		color: #fff !important;
		font-size: 0 !important;
		width: auto !important;
		height: auto !important;
		z-index: auto !important;
		cursor: pointer;
		/* Se anula la apariencia nativa del <button> (algunos celulares le
		 * dibujan encima su propio "chrome" que puede tapar el ícono). */
		-webkit-appearance: none !important;
		appearance: none !important;
		box-shadow: none !important;
	}
	#cr-mob-nav .mobfilter.cr-mn-filter svg {
		width: 23px !important;
		height: 23px !important;
		display: block !important;
		overflow: visible !important;
	}

	/*
	 * El botón de "reproducir" (recorrido automático) dentro de la barra
	 * inferior: se le da la misma apariencia que al resto de los íconos de
	 * esa barra (transparente, ícono blanco) en vez del círculo blanco que
	 * tiene en escritorio.
	 */
	#cr-mob-nav .cr-autoscroll-wrap { display: inline-flex; flex: 0 1 auto; align-items: center; justify-content: center; }
	#cr-mob-nav .cr-mn-autoscroll {
		position: static !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
		color: #fff !important;
		-webkit-appearance: none !important;
		appearance: none !important;
		box-shadow: none !important;
	}
	#cr-mob-nav .cr-mn-autoscroll svg { width: 22px !important; height: 22px !important; display: block !important; }
	#cr-mob-nav .cr-autoscroll-menu {
		right: auto;
		left: 50%;
		transform: translateX(-50%);
		bottom: calc(100% + 8px);
		top: auto;
	}

	/*
	 * El ícono de "Tienda" en la barra inferior no tiene sentido cuando ya
	 * estamos en la página de la tienda — WooCommerce le agrega la clase
	 * "woocommerce-shop" al <body> automáticamente en esa página, así que la
	 * usamos para esconder el ícono solo ahí (en el resto del sitio se sigue
	 * viendo normal).
	 */
	body.woocommerce-shop #cr-mob-nav a[href*="/tienda"] {
		display: none !important;
	}

	/*
	 * El input de cantidad (con los botones "-" y "+") del popup del carrito
	 * flotante (plugin de terceros "Xoo WooCommerce Side Cart") venía sin
	 * quedar centrado con esos botones en algunos celulares, y en algunos
	 * casos el numerito no se alcanzaba a ver. Como ese input es un
	 * <input type="number"> nativo, distintos celulares lo dibujan distinto
	 * (padding, flechitas de subir/bajar, alineación del texto), así que acá
	 * se le fuerza un tamaño y centrado fijo, y se le sacan esas flechitas
	 * nativas (que en algunos celulares empujan el número fuera de la vista).
	 */
	.xoo-wsc-qty-box {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 6px !important;
	}
	.xoo-wsc-qty-box .xoo-wsc-qty {
		-webkit-appearance: none !important;
		-moz-appearance: textfield !important;
		appearance: none !important;
		flex: 0 0 auto !important;
		width: 36px !important;
		height: 28px !important;
		line-height: 28px !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 1px solid #ccc !important;
		border-radius: 4px !important;
		text-align: center !important;
		font-size: 14px !important;
		color: #222 !important;
		background: #fff !important;
		box-sizing: border-box !important;
	}
	.xoo-wsc-qty-box .xoo-wsc-qty::-webkit-outer-spin-button,
	.xoo-wsc-qty-box .xoo-wsc-qty::-webkit-inner-spin-button {
		-webkit-appearance: none !important;
		margin: 0 !important;
	}
	.xoo-wsc-qty-box .xoo-wsc-minus,
	.xoo-wsc-qty-box .xoo-wsc-plus {
		flex: 0 0 auto !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 24px !important;
		height: 24px !important;
		line-height: 1 !important;
	}

	/*
	 * El selector de cantidad ("-", número, "+") de las tarjetas de producto
	 * de la tienda (esto es del tema/sitio, no de este plugin) tenía un
	 * ancho FIJO (como 154px) que no se achicaba junto con la tarjeta, y en
	 * celulares angostos se salía de la tarjeta y quedaba cortado.
	 *
	 * El primer intento de arreglo le puso ancho 100% para que nunca se
	 * saliera — pero eso lo dejó viéndose GRANDE y "inflado" (el numerito se
	 * estiraba para ocupar todo el ancho de la tarjeta), que es justo lo que
	 * se seguía viendo mal en el celular real. Ahora en vez de estirarlo a
	 * 100%, se le da un ancho justo al contenido (fit-content, chico y
	 * compacto, como era la idea original del tema) centrado en la tarjeta,
	 * con max-width:100% y overflow:hidden como red de seguridad para que
	 * NUNCA se salga de la tarjeta aunque sea angosta.
	 */
	.cr-qty-box {
		display: flex !important;
		width: fit-content !important;
		max-width: 100% !important;
		margin: 0 auto !important;
		box-sizing: border-box !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 8px !important;
		overflow: hidden !important;
	}
	.cr-qty-box input.qty {
		flex: 0 1 52px !important;
		width: 52px !important;
		min-width: 38px !important;
		max-width: 60px !important;
		height: 40px !important;
		box-sizing: border-box !important;
		padding: 0 2px !important;
		text-align: center !important;
		font-size: 17px !important;
	}
	.cr-qty-box .cr-qty-plus,
	.cr-qty-box .cr-qty-minus {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		-webkit-appearance: none !important;
		appearance: none !important;
		flex: 0 0 40px !important;
		width: 40px !important;
		min-width: 36px !important;
		height: 40px !important;
		min-height: 36px !important;
		color: var(--cr-marca-osc, #0e3578) !important;
		background: #f4f6f9 !important;
		border: 0 !important;
		box-shadow: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		font-size: 20px !important;
		line-height: 1 !important;
	}

	.crm-nav > .crm-wrap { flex-wrap: wrap; }
	.crm-nav > .crm-wrap > ul { width: 100%; display: none; flex-direction: column; }
	.crm-nav > .crm-wrap > ul.crm-mob-open { display: flex; }
	/*
	 * El menú desplegable (las 8 categorías, y el mega-menú de cada una al
	 * tocarla) puede ser más alto que la pantalla, así que hay que poder
	 * hacer scroll para llegar a todas. Intentamos antes darle scroll propio
	 * al menú (overflow-y:auto), pero en el celular no se sentía bien — los
	 * navegadores móviles a veces no permiten hacer scroll dentro de una
	 * lista flex que además está dentro de un header "pegado" (crm-sticky =
	 * position:sticky). La forma confiable es dejar que la PÁGINA ENTERA
	 * haga scroll, como antes de este cambio: al abrir el menú, el header
	 * deja de estar "pegado" (position:sticky) y pasa a moverse con la
	 * página, así el scroll normal del celular siempre llega a todo.
	 *
	 * IMPORTANTE: el que realmente queda "pegado" arriba no es nuestro
	 * .crm-header — es un div que Custom Header Builder pone por fuera
	 * (.chb-header-custom, con su propio position:sticky). Aunque
	 * destrabáramos el .crm-header, ese contenedor de afuera seguía pegado y
	 * el scroll seguía sin llegar a todas las categorías. menu.js le agrega
	 * la misma clase "crm-menu-open" también a ese contenedor de CHB, así
	 * que hay que destrabarlo aquí también.
	 */
	/*
	 * El plugin de filtros de la tienda (CR - WooCommerce Vista Cuadricula y
	 * Lista) dibuja TODA la grilla de productos dentro de un panel fijo
	 * (#spo-shop-overlay) con z-index 9990 que cubre la pantalla completa.
	 * Si el header quedara con position:static (sin contexto de apilamiento
	 * propio) el menú desplegado quedaría TAPADO por ese panel y se vería
	 * como si el botón "no funcionara". Por eso se usa position:relative en
	 * vez de static (se sigue moviendo con la página igual, sin quedar
	 * "pegado") junto con un z-index bien alto para que el menú abierto
	 * quede siempre por encima de ese panel.
	 */
	.chb-header-custom.crm-menu-open,
	.crm-header.crm-menu-open { position: relative !important; z-index: 10000 !important; }
	/*
	 * En la página de la tienda, la barra de categorías está escondida por
	 * defecto (ver más arriba), pero cuando se abre desde el botón "Menú"
	 * tiene que aparecer igual que en el resto del sitio, flotando por
	 * ENCIMA del panel de la tienda (#spo-shop-overlay, z-index 9990) — el
	 * .crm-header ya queda con z-index 10000 al abrirse (regla de arriba),
	 * así que solo hace falta que .crm-nav deje de estar oculto.
	 */
	body.woocommerce-shop .crm-header.crm-menu-open .crm-nav,
	body.post-type-archive-product .crm-header.crm-menu-open .crm-nav {
		display: block !important;
	}
	/*
	 * En el resto del sitio el menú desplegable usa el truco de "dejar que
	 * la PÁGINA ENTERA haga scroll" (ver comentario más arriba) para poder
	 * llegar a todas las categorías. Ese truco NO funciona en la página de
	 * la tienda: ahí el propio panel de productos (#spo-shop-overlay, del
	 * plugin de filtros) le pone "overflow: hidden" al <body> a propósito
	 * (para que su panel se vea como pantalla completa sin doble scroll), así
	 * que aunque el menú sea más alto que la pantalla, el scroll normal del
	 * celular no llega — se queda "pegado" y el resto de las categorías
	 * queda inalcanzable. Por eso ahí sí hace falta darle scroll PROPIO a la
	 * lista, limitando su alto al espacio libre debajo del header (la
	 * variable --cr-shop-panel-top ya la calcula el propio panel de la
	 * tienda para lo mismo, así que se reutiliza acá).
	 */
	body.woocommerce-shop .crm-nav > .crm-wrap > ul.crm-mob-open,
	body.post-type-archive-product .crm-nav > .crm-wrap > ul.crm-mob-open {
		position: fixed !important;
		left: 0;
		right: 0;
		top: var(--cr-shop-panel-top, 0px);
		bottom: 0;
		height: auto;
		/*
		 * OJO: si se deja "display:flex" (el valor normal de esta lista en el
		 * resto del sitio), un contenedor flex en columna con una altura fija
		 * NO deja que su contenido desborde para poder hacerle scroll — por
		 * default los ítems se encogen (o el navegador directamente no
		 * calcula bien el scrollHeight) para "hacerlos caber" en vez de
		 * respetar su tamaño real y mostrar la barra de scroll. Es un problema
		 * conocido de flexbox + overflow. Cambiándolo a "block" acá (solo en
		 * esta versión de la lista, con scroll propio) se evita ese problema:
		 * un bloque normal sí deja que el contenido desborde y el scroll
		 * funcione como corresponde.
		 */
		display: block !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
	}
	.crm-navitem > a { padding: 14px 16px; font-size: 15px; width: 100%; border-bottom: 1px solid rgba(255, 255, 255, .15); justify-content: space-between; }
	.crm-navitem > a::after { content: "+"; font-family: Poppins, sans-serif; font-weight: 700; font-size: 18px; opacity: .85; }
	.crm-navitem.crm-open > a::after { content: "\2212"; }
	.crm-nav .crm-allshop { display: none; }
	.crm-nav > .crm-wrap > ul.crm-mob-open .crm-allshop { display: block; }

	.crm-mega { display: none; position: static; box-shadow: none; border-top: 0; max-height: none; background: var(--cr-marca-osc, #0f3c86); }
	.crm-navitem:not(.crm-open):hover .crm-mega { display: none; }
	.crm-navitem.crm-open .crm-mega { display: block; }
	.crm-navitem.crm-open .crm-mega .crm-wrap { padding: 6px 16px 14px; }
	.crm-mega .crm-cols { columns: 1; }
	.crm-mega .crm-cols a, .crm-mega .crm-tg-h { color: #fff; }
	.crm-mega .crm-tg-sub a { color: var(--cr-marca-suave, #dbe6ff); }

	/*
	 * OJO: las reglas .cr-qty-box de más arriba apuntan a la vista "clásica"
	 * de WooCommerce (ul.products > li.product), pero en la tienda esa vista
	 * está tapada por otra: la vista "compacta" (#grid.pgrid.cr-view-compact
	 * > article.pc), que es la que en realidad se ve en el celular. Ahí el
	 * selector de cantidad es un <div class="stepper"> con dos <button> sin
	 * clase propia y un <input>, puesto con "justify-content: space-between"
	 * y ancho 100% de la tarjeta — por eso el "-" queda pegado a la
	 * izquierda, el "+" pegado a la derecha, y se ve estirado/con mucho
	 * espacio vacío en el medio. Esta es la vista real que hay que arreglar.
	 */
	article.pc .buy .stepper {
		display: flex !important;
		width: fit-content !important;
		max-width: 100% !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 8px !important;
		margin: 0 auto !important;
		box-sizing: border-box !important;
	}
	article.pc .buy .stepper button {
		flex: 0 0 40px !important;
		width: 40px !important;
		min-width: 36px !important;
		height: 40px !important;
		min-height: 36px !important;
		padding: 0 !important;
		font-size: 20px !important;
		line-height: 1 !important;
		box-sizing: border-box !important;
	}
	article.pc .buy .stepper input {
		flex: 0 1 52px !important;
		width: 52px !important;
		min-width: 38px !important;
		max-width: 60px !important;
		height: 40px !important;
		padding: 0 2px !important;
		font-size: 17px !important;
		box-sizing: border-box !important;
		text-align: center !important;
	}
}

/*
 * En pantallas más angostas todavía (celulares chicos, tipo iPhone SE) el
 * selector de cantidad de las tarjetas de producto queda muy apretado: el
 * numerito se angosta tanto que casi no se ve. Acá se achican un poco más
 * los botones "-"/"+" y la letra, para que el numerito tenga más espacio
 * aunque la tarjeta sea chica.
 */
@media (max-width: 400px) {
	.cr-qty-box {
		gap: 6px !important;
	}
	.cr-qty-box input.qty {
		flex-basis: 46px !important;
		width: 46px !important;
		min-width: 34px !important;
		height: 36px !important;
		padding: 0 2px !important;
		font-size: 16px !important;
	}
	.cr-qty-box .cr-qty-plus,
	.cr-qty-box .cr-qty-minus {
		flex: 0 0 36px !important;
		width: 36px !important;
		min-width: 32px !important;
		height: 36px !important;
		min-height: 32px !important;
		font-size: 18px !important;
	}
	article.pc .buy .stepper {
		gap: 6px !important;
	}
	article.pc .buy .stepper button {
		flex: 0 0 36px !important;
		width: 36px !important;
		min-width: 32px !important;
		height: 36px !important;
		min-height: 32px !important;
		font-size: 18px !important;
	}
	article.pc .buy .stepper input {
		flex: 0 1 46px !important;
		width: 46px !important;
		min-width: 34px !important;
		height: 36px !important;
		font-size: 16px !important;
	}
}