/* ==========================================================================
   Noctavox Rentals — estilos que theme.json no puede expresar directamente
   Tokens de referencia: ver DESIGN_TOKENS.md (extraído del sitio Shopify original)
   ========================================================================== */

/* --- Barra de anuncio superior (equivalente al utility-bar de Shopify) --- */
.noctavox-utility-bar {
	background-color: #B9B9A8;
	color: #000000;
	text-align: center;
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.02em;
	padding: 10px 20px;
}

/* --- Header: fondo negro, sticky, texto/iconos blancos --- */
.wp-block-template-part.noctavox-header,
.noctavox-header {
	background-color: #000000;
	color: #ffffff;
	position: sticky;
	top: 0;
	z-index: 100;
}
.noctavox-header a,
.noctavox-header .wp-block-navigation-item__label {
	color: #ffffff !important;
}

/* --- Tarjetas de producto WooCommerce (grid "Nuevos Equipos" / shop loop) --- */
.woocommerce ul.products li.product,
.wc-block-grid__product {
	background-color: #F4F2E7;
	border-radius: 18px;
	padding: 0.6rem 0.6rem 1.4rem;
	transition: box-shadow 0.2s ease;
}
.woocommerce ul.products li.product img,
.wc-block-grid__product-image img {
	border-radius: 14px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
	font-family: "Archivo", sans-serif;
	font-weight: 700;
	font-size: 0.95rem;
	margin-top: 0.75rem;
	color: #000 !important;
	padding: 0 0.6rem;
}
.woocommerce ul.products li.product .price,
.wc-block-grid__product-price {
	font-family: "Questrial", sans-serif;
	color: #000 !important;
	padding: 0 0.6rem;
}
.wc-block-grid__product-add-to-cart {
	padding: 0 0.6rem;
}
.wc-block-grid__product-add-to-cart .wp-block-button__link {
	border-radius: 40px;
	background-color: #000;
	color: #fff;
}

/* --- Separación entre tarjetas de "Nuevos Equipos": el grid de bloque de
   WooCommerce (.wc-block-grid__products, flex) no reserva ningún gap entre
   items — quedaban completamente pegados. Un `gap` real en el flex-container
   desbordaría el ancho (los items tienen `width` fijo en %, que no descuenta
   el gap), así que se usa box-shadow como "borde" del color de fondo de la
   sección — separa visualmente sin tocar el cálculo de ancho/wrap. --- */
.wc-block-grid__product {
	box-shadow: 0 0 0 8px #000;
}

/* --- Tarjetas de la página de Contacto (WhatsApp / Correo) --- */
.noctavox-contact-card {
	background-color: #F4F2E7;
	border-radius: 18px;
	padding: 1.6rem;
}

/* --- Tarjetas de categoría (sección "Categorías") ---
   Desde 2026-07-24 usa el bloque dinámico woocommerce/product-categories
   (se actualiza solo al crear/quitar categorías, en vez de 7 tarjetas
   armadas a mano) — reskin completo de su HTML por defecto (una simple
   lista <ul><li>) para que se vea igual que el resto del sitio. */
.noctavox-categories-dynamic .wc-block-product-categories-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.noctavox-categories-dynamic .wc-block-product-categories-list-item {
	/* Por defecto queda "display:list-item" (es un <li>) — ese modo no
	   estira el item para llenar su columna del grid como sí hace "block",
	   y además trae un margen de indentación para la viñeta (aunque esté
	   en list-style:none). Esto hacía que las tarjetas salieran chiquitas
	   y corridas hacia la derecha en vez de llenar su celda del grid. */
	display: block;
	margin: 0;
	background-color: #F4F2E7;
	border-radius: 18px;
	padding: 1.6rem;
	text-align: left;
	list-style: none;
	/* Los items de grid no se achican por debajo del tamaño intrínseco de su
	   contenido por defecto (min-width:auto) — el nombre largo de una
	   categoría ("Sliders, Estabilizadores...") empujaba su columna más
	   ancha que las demás, desbordando el grid completo en móvil. */
	min-width: 0;
}
.noctavox-categories-dynamic .wc-block-product-categories-list-item > a {
	text-decoration: none;
	color: inherit;
	display: block;
}
/* WooCommerce trae su propio CSS pensado para un ícono chiquito junto al
   texto (max-width:50px, margin negativo, inline-block) — hay que pisarlo
   por completo para que sea una foto grande arriba del texto, como el
   resto de las tarjetas del sitio. */
.noctavox-categories-dynamic .wc-block-product-categories-list-item__image {
	display: block !important;
	max-width: none !important;
	width: 100% !important;
	margin: 0 0 0.75rem !important;
	border: none !important;
	padding: 0 !important;
}
/* Cada foto de categoría se subió con proporciones distintas (cuadrada,
   vertical, horizontal) — aspect-ratio fijo para que todas las tarjetas
   salgan de la misma altura, sin importar la foto de origen. */
.noctavox-categories-dynamic .wc-block-product-categories-list-item__image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	border-radius: 14px;
}
.noctavox-categories-dynamic .wc-block-product-categories-list-item__name {
	font-family: "Archivo", sans-serif;
	font-weight: 700;
	color: #000;
}
.noctavox-categories-dynamic .wc-block-product-categories-list-item__name::after {
	content: " →";
}
@media (max-width: 781px) {
	.noctavox-categories-dynamic .wc-block-product-categories-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --- Botones WooCommerce (add to cart, checkout, etc.) — píldora 40px --- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	border-radius: 40px;
	font-family: "Questrial", sans-serif;
	padding: 1rem 2.25rem;
	background-color: #000000;
	color: #ffffff;
	border: none;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background-color: rgba(0, 0, 0, 0.85);
	color: #ffffff;
}

/* Variante "outline" (ej. Comprar ahora / Rentar ya sobre fondo negro) */
.noctavox-section-dark .woocommerce a.button,
.noctavox-section-dark .woocommerce button.button {
	background-color: #ffffff;
	color: #000000;
}

/* --- Inputs (cantidad, selects de variación, newsletter) --- */
.woocommerce div.product form.cart .variations select,
.woocommerce .quantity .qty,
input[type="email"],
input[type="text"] {
	border-radius: 26px;
	border: 1px solid rgba(0, 0, 0, 0.55);
	padding: 0.6rem 1.2rem;
}

/* Tamaño de fuente mínimo 16px en TODOS los campos de formulario del sitio:
   por debajo de eso, Safari/Chrome en iOS hacen zoom automático al enfocar
   el campo — se sentía como un bug molesto de "la página salta" en móvil. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
select,
textarea {
	font-size: 16px;
}

/* --- Badge de oferta (equivalente a color-scheme-4 del original) --- */
.woocommerce span.onsale {
	background-color: #4770DB;
	color: #ffffff;
	border-radius: 0;
	font-family: "Questrial", sans-serif;
}

/* --- Secciones de fondo negro (equivalente a color-scheme-3) --- */
.noctavox-section-dark {
	background-color: #000000;
	color: #ffffff;
}
.noctavox-section-dark h1,
.noctavox-section-dark h2,
.noctavox-section-dark h3 {
	color: #ffffff;
}

/* --- Sección crema/gris cálido (equivalente a color-scheme-1) --- */
.noctavox-section-light {
	background-color: #ffffff;
}

/* --- Espaciado 0 entre secciones del home, igual que el original --- */
.noctavox-no-gap {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* --- Footer: sin padding lateral por defecto — el contenido quedaba pegado
   al borde crudo del navegador (obvio al agregar el 2do link de políticas,
   que terminaba justo en el borde derecho, "cortado" visualmente). --- */
.noctavox-footer {
	padding-left: 30px;
	padding-right: 30px;
	box-sizing: border-box;
}
/* Los links de navegación son <li> fuera de un <ul> real de navegación —
   el navegador les pone bullet por defecto (list-style:disc). */
.noctavox-footer-links li {
	list-style: none;
}
/* Íconos de formas de pago — logos oficiales reales (SINPE Móvil provisto
   por el usuario; Mastercard/Visa/Amex recreaciones exactas de Wikimedia
   Commons, dominio público / uso estándar en e-commerce para indicar
   métodos de pago aceptados). Servidos como archivo estático del tema
   (no por la librería de medios de WP, que bloquea subir SVG por defecto).
   Tarjetas blancas parejas detrás de cada uno — Mastercard y Visa no
   traen fondo propio (solo el símbolo/texto), y SINPE tiene texto negro
   que se perdería sobre el footer negro. Amex ya trae su propio fondo
   azul de marca, la tarjeta blanca queda como marco fino consistente. */
.noctavox-payment-icons {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.noctavox-payment-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 6px;
	height: 32px;
	width: 52px;
	padding: 4px 6px;
	box-sizing: border-box;
}
.noctavox-payment-badge img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}
.noctavox-payment-badge--amex {
	padding: 2px;
}
/* El "© 2026..." se veía corrido del centro real: "space-between" entre
   "Formas de pago" (izq) y el grupo de links (der) — de ancho MUY distinto —
   empuja al elemento del medio lejos del centro real de la pantalla. Mismo
   arreglo que el header: grid de 3 columnas, centrado real garantizado. */
@media (min-width: 601px) {
	/* .noctavox-footer.noctavox-footer: WordPress genera su propio CSS de
	   layout (.wp-container-core-group-is-layout-HASH.is-layout-flex) con
	   !important y 2 clases de especificidad — hay que igualar o superar esa
	   especificidad, no solo agregar !important, para ganarle de forma
	   confiable sin depender del orden de carga de las hojas de estilo. */
	.noctavox-footer.noctavox-footer.noctavox-footer {
		display: grid !important;
		grid-template-columns: 1fr auto 1fr !important;
		align-items: center;
	}
	.noctavox-footer > *:first-child {
		justify-self: start;
	}
	.noctavox-footer > *:nth-child(2) {
		justify-self: center;
	}
	.noctavox-footer-links {
		justify-self: end;
	}
}
@media (max-width: 600px) {
	.noctavox-footer.noctavox-footer.noctavox-footer {
		padding-left: 20px;
		padding-right: 20px;
		gap: 10px;
		flex-direction: column !important;
		align-items: center;
		text-align: center;
	}
}

/* --- Fila principal del header (buscador / botón de lupa / logo / cuenta+
   carrito / menú) — un solo CSS Grid con áreas nombradas para los 5 bloques,
   así desktop y móvil pueden reordenarlos de forma completamente distinta
   sin depender de que estén anidados en cierto orden en el DOM (evita el
   viejo problema de "space-between" nunca centraba el logo de verdad, y
   evita apilar position:absolute que antes se encimaba con el logo). --- */
.noctavox-header-row {
	display: grid !important;
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas:
		"search logo   icons"
		"nav    nav    nav";
	align-items: center;
	padding-top: 16px;
}
.noctavox-header-search { grid-area: search; justify-self: start; }
/* --- Íconos de FiboSearch (lupa / botón limpiar) descentrados, y en el
   overlay móvil el panel de sugerencias tapando el input completo: el
   bloque wp:shortcode pasa [fibosearch] por wpautop, que inserta <p>/<br>
   vacíos dentro del HTML que arma el plugin. Cada <p> suma su margin por
   defecto del navegador y cada <br> suma ~16px de line-height, inflando el
   formulario bastante más allá de su alto real (~45px). Hay <br> sueltos
   en DOS niveles distintos: uno dentro de .dgwt-wcas-sf-wrapp (el wrapper
   del <form>) y otro afuera de este pero todavía dentro de
   .dgwt-wcas-search-wrapp (el contenedor exterior, compartido por la barra
   de escritorio y por la instancia que FiboSearch clona en
   .dgwt-wcas-overlay-mobile — un hijo directo de <body>, fuera del header
   por completo). Por eso la regla apunta a .dgwt-wcas-search-wrapp
   (la clase común a ambas instancias) en vez de acotar al header. --- */
.dgwt-wcas-search-wrapp p {
	margin: 0;
}
.dgwt-wcas-search-wrapp br {
	display: none;
}
.noctavox-header-logo { grid-area: logo; justify-self: center; }
.noctavox-header-icons { grid-area: icons; justify-self: end; }
/* --- Ícono de "Mi cuenta": WooCommerce Blocks solo trae una regla de
   tamaño para el ícono en pantallas angostas (móvil) — sin esto, el SVG
   renderizaba a 0×0 en desktop: el link "Mi cuenta" seguía siendo
   clickeable, pero el ícono era completamente invisible (encontrado al
   verificar el header reestructurado, bug preexistente no relacionado con
   el reacomodo del layout). 22px iguala aproximadamente el tamaño visual
   del ícono de carrito (27px) sin competir con él. --- */
.noctavox-header .wc-block-customer-account__link svg {
	width: 22px;
	height: 22px;
}
/* El espacio entre el logo y el menú (Inicio/Catálogo/Contacto) venía del
   gap por defecto de WordPress entre bloques (~19px) — un poco reducido y
   ahora igual al padding de arriba/abajo, para que las tres separaciones del
   header (arriba del logo, entre logo y menú, debajo del menú) se sientan
   parejas en vez de solo tener espacio en el medio. */
.noctavox-header-nav.wp-block-navigation {
	grid-area: nav;
	margin-top: 16px !important;
	padding-bottom: 16px !important;
}

/* --- Header en móvil: cuenta+carrito centrados en su propia fila ARRIBA
   (fila 1), buscador (FiboSearch) a la izquierda del logo y hamburguesa a
   la derecha en la fila 2 — 2 filas en vez de 3, consume menos alto de
   pantalla. FiboSearch maneja su propio comportamiento de overlay en móvil
   (ver ajustes del plugin: "Overlay on mobile"), no depende de un toggle
   propio como antes. --- */
@media (max-width: 600px) {
	.noctavox-header-row {
		grid-template-areas:
			"icons  icons icons"
			"search logo  nav";
		row-gap: 8px;
		padding-top: 14px;
	}
	.noctavox-header-icons {
		grid-area: icons;
		justify-self: center;
		justify-content: center;
	}
	.noctavox-header .wc-block-mini-cart,
	.noctavox-header .wp-block-woocommerce-customer-account {
		flex-shrink: 0;
	}
	.noctavox-header .wp-block-woocommerce-customer-account .wc-block-customer-account__link {
		min-width: 32px;
		min-height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.noctavox-header-nav.wp-block-navigation {
		grid-area: nav;
		justify-self: end;
		margin-top: 0 !important;
		padding: 0 !important;
		min-height: 44px;
		display: flex;
		align-items: center;
	}
	.noctavox-header .wp-block-navigation__responsive-container-open {
		min-width: 44px;
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0;
	}
}

/* --- Menú móvil desplegado (overlay a pantalla completa) --- */
.noctavox-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: #000000 !important;
}
.noctavox-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label {
	color: #ffffff !important;
	font-size: 1.5rem;
}
.noctavox-header .wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
}
/* WordPress ya trae una animación de apertura (fade + slide) pero dura
   apenas 0.1s — casi ni se nota, se siente brusca. La alargamos un poco.
   Respeta prefers-reduced-motion igual que la regla original de WP.
   IMPORTANTE: solo debe aplicar en móvil — en desktop ".wp-block-navigation
   __responsive-container" es el contenedor SIEMPRE VISIBLE de los links
   (Inicio/Catálogo/Contacto), no el overlay de hamburguesa. Sin el
   max-width acá, el ":not(.is-menu-open) { opacity:0 }" de abajo escondía
   el menú completo en desktop (bug encontrado y corregido en la misma
   sesión — los links desaparecían del header en pantallas anchas). */
@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
	.noctavox-header .wp-block-navigation__responsive-container.is-menu-open {
		animation-duration: 0.28s;
		animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
	}
	/* El cierre no tenía ninguna animación (WP quita la clase y pasa a
	   display:none al toque). `transition-behavior:allow-discrete` +
	   `@starting-style` permite animar la salida igual — soportado en
	   navegadores modernos; en los que no, simplemente vuelve al
	   comportamiento brusco original (no rompe nada). */
	.noctavox-header .wp-block-navigation__responsive-container {
		transition: opacity 0.2s ease, display 0.2s allow-discrete;
	}
	.noctavox-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		opacity: 0;
	}
	.noctavox-header .wp-block-navigation__responsive-container.is-menu-open {
		opacity: 1;
	}
	@starting-style {
		.noctavox-header .wp-block-navigation__responsive-container.is-menu-open {
			opacity: 0;
		}
	}
}

/* --- Tabla de variaciones (ej. "Montaje"): en pantallas angostas la columna
   de la etiqueta quedaba tan angosta que la palabra se partía en dos líneas
   ("Mont" / "aje"). Se apila la etiqueta arriba del selector. --- */
@media (max-width: 480px) {
	.woocommerce div.product table.variations,
	.woocommerce div.product table.variations tbody,
	.woocommerce div.product table.variations tr,
	.woocommerce div.product table.variations th,
	.woocommerce div.product table.variations td {
		display: block;
		width: 100%;
	}
	.woocommerce div.product table.variations th {
		padding: 0 0 0.4rem;
		font-family: "Archivo", sans-serif;
		font-weight: 700;
	}
	.woocommerce div.product table.variations td {
		padding: 0 0 0.75rem;
	}
	.woocommerce div.product table.variations select {
		width: 100%;
		box-sizing: border-box;
	}
}

/* --- Fila de cantidad + botón "Agregar al carrito": en pantallas angostas
   quedaban apretados uno junto al otro y el texto del botón se partía en
   3 líneas verticales. Se apilan en columna completa en su lugar. --- */
@media (max-width: 480px) {
	.woocommerce div.product form.cart,
	.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}
	.woocommerce div.product form.cart .quantity {
		width: 100%;
	}
	.woocommerce div.product form.cart .quantity .qty {
		width: 100%;
		box-sizing: border-box;
	}
	.woocommerce div.product form.cart .single_add_to_cart_button {
		width: 100%;
		white-space: normal;
	}
}

/* --- Galería de fotos del producto: por defecto WooCommerce muestra las
   miniaturas como una cuadrícula de 4 columnas que se envuelve en varias
   filas — se ve pesado/apilado. Se reemplaza por una tira horizontal
   deslizable de miniaturas pequeñas, con la activa resaltada. --- */
/* Sin esto, la galería toma el ancho nativo de la imagen (ej. 512px) en vez
   de ajustarse al contenedor — causaba scroll horizontal en toda la página
   en pantallas angostas. Ojo: NO se le pone max-width al __wrapper interno
   — ese necesita quedar ancho (todas las imágenes en fila) para que el
   slide de flexslider funcione; lo que hay que contener es el "visor"
   exterior (.flex-viewport), que ya usa overflow:hidden para recortarlo. */
.woocommerce-product-gallery,
.woocommerce-product-gallery .flex-viewport {
	max-width: 100% !important;
	width: 100% !important;
}
/* La raíz real del problema: la plantilla de producto de WooCommerce fija
   la COLUMNA que envuelve la galería con flex-basis:512px como estilo en
   línea (el ancho nativo de la imagen) — en pantallas angostas eso empuja
   toda la página a scrollear horizontal. Es un estilo en línea puesto por
   WordPress, así que hace falta !important para ganarle. */
@media (max-width: 781px) {
	.wp-block-column:has(> .wp-block-woocommerce-product-image-gallery),
	.woocommerce div.product .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}
	.woocommerce div.product .wp-block-columns {
		flex-wrap: wrap !important;
	}
}
.woocommerce-product-gallery__image,
.woocommerce-product-gallery .flex-viewport {
	border-radius: 20px;
	overflow: hidden;
}
.woocommerce-product-gallery img {
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
}
/* Ojo: NO forzar width:100% en .woocommerce-product-gallery__image — una
   vez que flexslider inicializa, le pone su propio width inline correcto
   (ej. "330px") a cada slide para el layout en fila del track horizontal.
   Un !important genérico aquí le gana a ese inline style y hace que cada
   slide ocupe el 100% del wrapper completo (la suma de todos los slides)
   en vez de solo su porción — infla la altura de la página a miles de px. */

.flex-control-nav.flex-control-thumbs {
	display: flex !important;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: 8px;
	margin: 10px 0 0 !important;
	padding: 2px 2px 8px !important;
	list-style: none;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.flex-control-nav.flex-control-thumbs li {
	display: block !important;
	flex: 0 0 auto;
	width: 64px !important;
	margin: 0 !important;
}
.flex-control-nav.flex-control-thumbs li img {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 10px;
	border: 2px solid transparent;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}
.flex-control-nav.flex-control-thumbs li img:hover {
	opacity: 0.85;
}
.flex-control-nav.flex-control-thumbs li img.flex-active {
	opacity: 1;
	border-color: #000;
}

/* --- Resultados de búsqueda: antes mostraban el contenido COMPLETO y sin
   formato de cada producto (texto pegado, sin párrafos) en vez de una
   tarjeta como en tienda/categorías. Tarjetas consistentes con el resto. --- */
.noctavox-search-grid {
	gap: 1.5rem !important;
}
.noctavox-search-card {
	background-color: #F4F2E7;
	border-radius: 18px;
	padding: 0.6rem 0.6rem 1.4rem;
}
.noctavox-search-card img {
	border-radius: 14px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.noctavox-search-card .wp-block-post-title {
	font-family: "Archivo", sans-serif;
	font-weight: 700;
	font-size: 0.95rem;
	margin-top: 0.75rem;
	padding: 0 0.6rem;
}
.noctavox-search-card .wp-block-post-title a {
	color: #000;
	text-decoration: none;
}
.noctavox-search-card .wc-block-components-product-price {
	font-family: "Questrial", sans-serif;
	padding: 0 0.6rem;
}
.noctavox-search-card .wp-block-post-excerpt {
	padding: 0 0.6rem;
	color: #555;
}
@media (max-width: 781px) {
	.noctavox-search-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (max-width: 480px) {
	.noctavox-search-grid {
		grid-template-columns: 1fr !important;
	}
}