/**
 * GM Diseño — Vista móvil tipo app
 *
 * Todo lo de aquí se apaga por encima del ancho configurado mediante una
 * media query que genera el PHP, así que en escritorio no hay nada que
 * revertir.
 */

:root {
	--gmapp-fondo: #fff;
	--gmapp-icono: #6b7280;
	--gmapp-activo: #2f80ed;
	--gmapp-alto: 58px;
}

/* --- Barra inferior ----------------------------------------------------- */

.gmapp-barra {
	position: fixed;
	z-index: 9990;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	box-sizing: border-box;
	align-items: stretch;
	/* Alto automático con mínimo: si el navegador cambia la altura visible
	 * al aparecer o esconderse su barra de direcciones, la barra no queda
	 * cortada por la mitad. */
	height: auto;
	min-height: calc(var(--gmapp-alto) + env(safe-area-inset-bottom, 0px));
	padding-bottom: env(safe-area-inset-bottom, 0px);
	transform: translateZ(0);
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	background: var(--gmapp-fondo);
	box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
}

/* El contenido necesita hueco para no quedar tapado por la barra. */
body.gmapp {
	padding-bottom: calc(var(--gmapp-alto) + env(safe-area-inset-bottom, 0px));
}

/* Con el teclado en pantalla la barra estorba y el navegador la dejaría
 * flotando por encima. */
body.gmapp-teclado .gmapp-barra {
	display: none;
}

body.gmapp-teclado {
	padding-bottom: 0;
}

.gmapp-item {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-width: 0;
	padding: 6px 2px;
	color: var(--gmapp-icono);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.gmapp-item.sin-texto {
	justify-content: center;
}

.gmapp-item.is-activo {
	color: var(--gmapp-activo);
}

.gmapp-item:focus-visible {
	outline: 2px solid var(--gmapp-activo);
	outline-offset: -3px;
}

.gmapp-icono {
	position: relative;
	display: block;
	line-height: 0;
}

.gmapp-icono svg {
	display: block;
	width: 23px;
	height: 23px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.gmapp-texto {
	overflow: hidden;
	max-width: 100%;
	font-size: 10.5px;
	font-weight: 500;
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --- Contador del carrito ----------------------------------------------- */

.gmapp-cuenta {
	position: absolute;
	top: -6px;
	left: 13px;
	display: none;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--gmapp-activo);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}

.gmapp-cuenta.tiene {
	display: block;
}

/* --- Cabecera compacta --------------------------------------------------- */

body.gmapp-cabecera .site-header,
body.gmapp-cabecera #masthead {
	transition: transform 0.25s ease;
	will-change: transform;
}

body.gmapp-bajando .site-header,
body.gmapp-bajando #masthead {
	transform: translateY(-100%);
}

/* --- Hoja del buscador --------------------------------------------------- */

.gmapp-hoja {
	position: fixed;
	z-index: 9995;
	inset: 0;
	display: flex;
	flex-direction: column;
	background: var(--gmapp-fondo);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.gmapp-hoja[hidden] {
	display: none;
}

.gmapp-hoja.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.gmapp-hoja__barra {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.gmapp-hoja__form {
	flex: 1 1 auto;
	margin: 0;
}

.gmapp-hoja .gmapp-hoja__campo {
	box-sizing: border-box;
	width: 100% !important;
	height: 44px;
	margin: 0 !important;
	padding: 0 14px !important;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	border-radius: 999px !important;
	background: #f3f4f6 !important;
	/* 16px evita que iOS haga zoom al enfocar el campo. */
	font-size: 16px !important;
}

.gmapp-hoja__cerrar {
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	background: none;
	color: var(--gmapp-activo);
	font-size: 15px;
	cursor: pointer;
}

/* --- Ajustes táctiles ---------------------------------------------------- */

@media (max-width: 782px) {
	body.gmapp .button,
	body.gmapp button.button,
	body.gmapp input[type="submit"] {
		min-height: 44px;
	}

	body.gmapp input[type="text"],
	body.gmapp input[type="search"],
	body.gmapp input[type="email"],
	body.gmapp input[type="tel"],
	body.gmapp input[type="number"],
	body.gmapp select,
	body.gmapp textarea {
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gmapp-hoja,
	body.gmapp-cabecera .site-header,
	body.gmapp-cabecera #masthead {
		transition: none;
	}
}

/* =========================================================================
 * Panel lateral del menú (el de la hamburguesa)
 *
 * Estructura real del tema:
 *   .col-full-nav              panel deslizante de 300px, con padding 0 15px
 *     .main-navigation
 *       .menu-primary-menu-container > ul.menu > li > a   (padding .35rem 0)
 *         span.caret           flecha propia del tema, absoluta a la derecha
 *         .sub-menu-wrapper    submenú, se abre con li.dropdown-open
 *     .site-search
 *     .mobile-extra            widgets opcionales
 *
 * De fábrica las filas miden poco más que la línea de texto, no hay
 * separadores y la flecha se monta sobre el texto. Aquí se convierte en una
 * lista de verdad: filas altas, márgenes constantes y jerarquía por tamaño
 * y color, no por sangría.
 * ====================================================================== */

body.gmapp-menu .col-full-nav {
	padding: 0;
	padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

body.gmapp-menu .main-navigation {
	padding-top: 6px;
}

body.gmapp-menu .col-full-nav ul.menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- Primer nivel -------------------------------------------------------- */

body.gmapp-menu .shoptimizer-mobile-menu > ul.menu > li {
	border-top: 1px solid rgba(17, 24, 39, 0.07);
}

body.gmapp-menu .shoptimizer-mobile-menu > ul.menu > li:first-child {
	border-top: 0;
}

body.gmapp-menu .shoptimizer-mobile-menu > ul.menu > li > a,
body.gmapp-menu .shoptimizer-mobile-menu > ul.menu > li.nolink > span {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 50px;
	padding: 12px 52px 12px 18px;
	color: #111827;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.005em;
}

body.gmapp-menu .shoptimizer-mobile-menu > ul.menu > li > a:active {
	background: rgba(17, 24, 39, 0.04);
}

/* La sección abierta se queda marcada mientras dura. */
body.gmapp-menu .shoptimizer-mobile-menu > ul.menu > li.dropdown-open > a,
body.gmapp-menu .shoptimizer-mobile-menu > ul.menu > li.dropdown-open > span {
	color: var(--gmapp-activo);
}

body.gmapp-menu .col-full-nav li.current-menu-item > a {
	color: var(--gmapp-activo);
}

/* --- Flecha propia del tema ---------------------------------------------- */

body.gmapp-menu .col-full-nav ul.menu li.menu-item-has-children > span.caret {
	top: 0;
	right: 0;
	bottom: 0;
	width: 52px;
	height: auto;
	color: #9ca3af;
}

body.gmapp-menu .col-full-nav ul.menu li.menu-item-has-children > span.caret svg {
	width: 16px;
	height: 16px;
}

/* --- Submenús ------------------------------------------------------------ */

body.gmapp-menu .col-full-nav .sub-menu-wrapper {
	margin-top: 0;
	padding: 4px 0 10px;
	padding-left: 0;
	background: rgba(17, 24, 39, 0.025);
}

body.gmapp-menu .col-full-nav .sub-menu-wrapper .sub-menu-wrapper {
	margin-top: 0;
	padding-left: 0;
	background: none;
}

body.gmapp-menu .col-full-nav ul.menu ul li > a,
body.gmapp-menu .col-full-nav ul.menu ul li.nolink {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 42px;
	padding: 8px 52px 8px 30px;
	color: #4b5563;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.35;
}

body.gmapp-menu .col-full-nav ul.menu ul ul li > a {
	padding-left: 42px;
	font-size: 13.5px;
}

body.gmapp-menu .col-full-nav ul.menu ul li > a:active {
	background: rgba(17, 24, 39, 0.05);
}

body.gmapp-menu
	.shoptimizer-mobile-menu
	> ul.menu
	> li.menu-item-has-children.dropdown-open
	> .sub-menu-wrapper {
	border-bottom: 0;
}

/* --- Buscador y widgets dentro del panel --------------------------------- */

body.gmapp-menu .col-full-nav .site-search {
	padding: 14px 18px 4px;
}

body.gmapp-menu .col-full-nav .site-search input[type="search"],
body.gmapp-menu .col-full-nav .site-search input[type="text"] {
	box-sizing: border-box;
	width: 100%;
	height: 44px;
	padding: 0 14px;
	border: 1px solid rgba(17, 24, 39, 0.12);
	border-radius: 10px;
	background: rgba(17, 24, 39, 0.03);
	/* 16px evita que iOS haga zoom al enfocar. */
	font-size: 16px;
}

body.gmapp-menu .col-full-nav .mobile-extra {
	padding: 10px 18px 0;
	border-top: 1px solid rgba(17, 24, 39, 0.07);
	margin-top: 10px;
}

/* --- Botón de cerrar ------------------------------------------------------ */

body.gmapp-menu.mobile-toggled .mobile-menu.close-drawer {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}