/* Ajustes de Motoshop (nudge) — arreglos de celular sobre Salient y los bloques de HTML de WPBakery. */

/* Pie: los <li> mostraban la viñeta del navegador pegada al borde de la pantalla. */
.ms-footer ul li { list-style: none; }

/* Páginas de la tienda y de cada moto: el fondo de afuera era gris claro y se veían franjas a los costados.
   Lleva !important porque los estilos dinámicos de Salient se cargan después. */
html body .container-wrap { background-color: #0B0B0C !important; }

/* Tienda: el encabezado de WooCommerce viene vacío pero ocupaba 80 px, y dejaba un hueco entre el título y las motos. */
body.woocommerce-page .woocommerce-products-header { padding: 0 !important; margin: 0 !important; min-height: 0 !important; }
body.woocommerce-page .nectar-shop-header .woocommerce-breadcrumb { margin-bottom: 24px; }

/* Títulos de la tienda y de la ficha con la tipografía del sitio (venían en Open Sans gigante). */
body.woocommerce-page h1.page-title,
body.woocommerce-page .woocommerce-products-header__title,
body.single-product h1.product_title {
	font-family: 'Saira Condensed', sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .01em;
	line-height: 1;
}

/* Menú del celular: fondo con los colores de la marca (venía en el azul por defecto del theme). */
#slide-out-widget-area-bg { background-color: #0B0B0C !important; }
#slide-out-widget-area .menu li a,
#slide-out-widget-area .off-canvas-menu-container li a {
	font-family: 'Saira Condensed', sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .04em;
}

@media (max-width: 767px) {
	/* Grilla de motos del inicio: las tarjetas quedaban pegadas a los bordes de la pantalla. */
	.full-width-content .woocommerce ul.products {
		margin-left: 16px !important;
		margin-right: 16px !important;
		width: auto !important;
	}

	/* Títulos más chicos en celular. */
	body.woocommerce-page h1.page-title,
	body.woocommerce-page .woocommerce-products-header__title { font-size: 44px; }
	body.single-product h1.product_title { font-size: 34px; }

	/* Financiación: las tarjetas de entidades quedaban en 3 columnas y la página se corría hacia el costado. */
	.ms-ents-grid { grid-template-columns: 1fr !important; }

	/* Campos de 16 px o más: con menos, el iPhone hace zoom al tocarlos. */
	.ms-cot input[type="number"],
	.ms-cot input[type="text"] { font-size: 16px; }
	.ms-cot .ms-price-input { font-size: 20px; }
}

/* En pantallas táctiles no hay "pasar el mouse": el botón "Ver información" quedaba fijo tapando la foto,
   y el título y el precio no llevaban a la ficha. Se oculta el botón y toda la tarjeta pasa a ser el link. */
@media (hover: none) {
	.woocommerce ul.products li.product.classic { position: relative; }
	.woocommerce ul.products li.product.classic .product-wrap { position: static; }
	.woocommerce ul.products li.product.classic .product-wrap > a::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 2;
	}
	.woocommerce ul.products li.product.classic .product-wrap .product-add-to-cart { display: none !important; }
}

/* Menú principal con la tipografía de la marca (venía en Open Sans fina). */
#header-outer header#top nav > ul.sf-menu > li > a .menu-title-text,
#header-outer header#top nav > ul.sf-menu > li > a {
	font-family: 'Saira Condensed', sans-serif !important;
	font-size: 18px !important;
	font-weight: 800 !important;
	letter-spacing: .06em !important;
	text-transform: uppercase;
}

/* Tarjetas de motos: foto vertical 3:4, sin deformar. */
.woocommerce ul.products li.product.classic .product-wrap > a img,
.woocommerce ul.products li.product .product-wrap img.attachment-woocommerce_single {
	width: 100% !important;
	aspect-ratio: 3 / 4 !important;
	height: auto !important;
	object-fit: cover !important;
}

/* Insignias arriba a la izquierda de la foto. */
.woocommerce ul.products li.product.classic { position: relative; }
.nma-insignias { position: absolute; top: 12px; left: 12px; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; }
.nma-ins {
	padding: 5px 10px; border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
	font-family: 'Saira Condensed', sans-serif; font-size: 15px; font-weight: 800; letter-spacing: .06em; line-height: 1.2; text-transform: uppercase;
}
.nma-ins-fuego { background: #E10600; color: #fff; animation: nma-latido 2.4s ease-in-out infinite; }
.nma-ins-cuotas { background: #FFD400; color: #0B0B0C; }
@keyframes nma-latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .nma-ins-fuego { animation: none; } }
@media (max-width: 767px) { .nma-ins { font-size: 13px; padding: 4px 8px; } }

/* «Ver información» tapaba la foto en todas las tarjetas: se oculta y la tarjeta entera lleva a la moto (antes solo en celular). */
.woocommerce ul.products li.product.classic .product-wrap { position: static; }
.woocommerce ul.products li.product.classic .product-wrap > a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.woocommerce ul.products li.product.classic .product-wrap .product-add-to-cart { display: none !important; }
.woocommerce ul.products li.product.classic { transition: transform .2s; }
.woocommerce ul.products li.product.classic:hover { transform: translateY(-4px); }

/* Botones de cada tarjeta, por encima del link que cubre la tarjeta. */
.woocommerce ul.products li.product .nma-acciones { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 20px 20px; }
.nma-btn {
	display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 10px; border-radius: 6px; text-align: center;
	font-family: 'Saira Condensed', sans-serif; font-size: 15px; font-weight: 800; letter-spacing: .05em; line-height: 1.1; text-transform: uppercase; text-decoration: none !important;
}
.nma-btn-ficha { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); color: #fff !important; }
.nma-btn-ficha:hover { box-shadow: inset 0 0 0 1px #fff; }
.nma-btn-fin { background: #E10600; color: #fff !important; }
.nma-btn-fin:hover { filter: brightness(1.1); }
.nma-acciones .nma-btn:only-child { grid-column: 1 / -1; }
@media (max-width: 767px) {
	.woocommerce ul.products li.product .nma-acciones { grid-template-columns: 1fr; margin: 10px 12px 14px; gap: 6px; }
	.nma-btn { min-height: 40px; font-size: 14px; }
}
/* Precio arriba de los botones (el CSS del sitio le da order: 2) y botones al fondo de la tarjeta. */
.woocommerce ul.products li.product.classic .price { order: 1 !important; }
.woocommerce ul.products li.product .nma-acciones { order: 3; margin-top: auto !important; }

/* ---------- Encabezado del celular: fijo arriba y compacto ----------
   El tema lo tenía sin fijar en celular (al bajar desaparecía) y con 142 px de alto. */
@media (max-width: 999px) {
	/* fixed y no sticky: el body del tema tiene overflow: hidden, que anula sticky. El alto se reserva con --nma-header (JS). */
	html body #header-outer { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 9999 !important; transform: none !important; }
	html body { padding-top: var(--nma-header, 92px) !important; }
	#header-outer header#top { padding: 0 !important; }
	#header-outer header#top .container .row { display: flex; align-items: center; min-height: 60px; }
	#header-outer #logo { display: flex !important; align-items: center; margin: 0 auto !important; }
	/* Más específico que la regla del tema (#header-outer[data-permanent-transparent="false"] #logo .dark-version, 55 px). */
	html body #header-outer[data-permanent-transparent] #logo img.stnd.dark-version, html body #header-outer[data-permanent-transparent] #logo img.stnd { height: 34px !important; width: auto !important; max-width: 60vw !important; }
	#header-outer header#top .slide-out-widget-area-toggle { margin: 0 !important; }
	/* Con el menú abierto el encabezado queda debajo, así no se pisan los logos. */
	body.ocm-open #header-outer { visibility: hidden; }
}
@media (max-width: 999px) {
	/* Fila del logo de 60 px (el tema le daba ~84 px de relleno). */
	html body #header-outer[data-permanent-transparent] { padding-top: 0 !important; padding-bottom: 0 !important; }
	html body #header-outer header#top, html body #header-outer header#top .container, html body #header-outer header#top .row { height: 60px !important; min-height: 60px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
	html body #header-outer header#top .col.span_3, html body #header-outer header#top .col.span_9 { height: 60px !important; display: flex !important; align-items: center !important; margin: 0 !important; }
}