/*
 * Integración con el tema WordPress (Astra)
 * Chiarini Catálogos Mayoristas — v1.0.6
 *
 * Todas las reglas están scopeadas bajo body.chiarini-catalogo-page (o
 * bajo .chiarini-catalogo en el área del catálogo), clases que el plugin
 * añade SOLO a las páginas que contienen el shortcode. El resto del sitio
 * (header, título, footer y estilos del tema) no se ve alterado.
 */

/* Previene scroll horizontal causado por el breakout a 100vw
   (100vw incluye la barra de scroll vertical). Solo en páginas de catálogo. */
body.chiarini-catalogo-page {
	clip-path: none;
	overflow-x: hidden;
}

/*
 * Full-width breakout: el wrapper .chiarini-catalogo sale del contenedor
 * centrado del tema (p. ej. .ast-container) y ocupa todo el viewport.
 *
 * width: 100vw            -> ancho del viewport
 * margin-left/right:
 *   calc(50% - 50vw)      -> margen negativo simétrico que centra el
 *                             elemento contra el viewport sin importar el
 *                             ancho del contenedor padre ni la presencia de
 *                             sidebar (funciona para cualquier contenedor
 *                             centrado).
 *
 * No se usa transform para no romper .lb (lightbox) ni position: sticky
 * del .catnav.
 */
body.chiarini-catalogo-page .chiarini-catalogo {
	width: 100vw;
	max-width: none;
	min-width: 0;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/*
 * Ocultar el título de página de Astra en páginas de catálogo.
 * Astra imprime <header class="entry-header"><h1 class="entry-title">…</h1></header>.
 * Se oculta también el contenedor para eliminar su espacio vertical.
 */
body.chiarini-catalogo-page .entry-header,
body.chiarini-catalogo-page .entry-header .entry-title {
	display: none;
}

/*
 * Ocultar el footer global de Astra en páginas de catálogo.
 * Astra imprime <footer class="site-footer" id="colophon">…</footer>.
 */
body.chiarini-catalogo-page #colophon {
	display: none;
}

/*
 * Corrección v1.0.2 - Nº1: subrayado nativo de los links del .catnav.
 *
 * Astra aplica subrayado a los enlaces dentro de .entry-content, y su
 * regla gana (o compite) con el text-decoration:none del catálogo.
 * Se fuerza text-decoration:none en TODOS los estados de los links del
 * .catnav, solo dentro del scope del catálogo. El indicador personalizado
 * (::after) se conserva intacto: aparece en hover y persiste en la
 * categoría activa.
 */
.chiarini-catalogo .catnav-link,
.chiarini-catalogo .catnav-link:link,
.chiarini-catalogo .catnav-link:visited,
.chiarini-catalogo .catnav-link:hover,
.chiarini-catalogo .catnav-link:focus,
.chiarini-catalogo .catnav-link:active,
.chiarini-catalogo .catnav-link.is-active {
	text-decoration: none !important;
	text-decoration-line: none !important;
}

/*
 * Corrección v1.0.11 - Nº6: subrayado del enlace "EXPLORAR COLECCIÓN ↓"
 * en los encabezados de categoría (.cathead-cta).
 *
 * Astra aplica subrayado a los enlaces dentro de .entry-content, y su
 * regla gana (o compite) con el text-decoration:none del catálogo.
 * Se fuerza text-decoration:none en TODOS los estados, solo dentro del
 * scope del catálogo, con la mínima especificidad necesaria. La línea
 * decorativa inferior del CTA se conserva mediante border-bottom (ya
 * existente en catalogo.css).
 */
.chiarini-catalogo .cathead-cta,
.chiarini-catalogo .cathead-cta:link,
.chiarini-catalogo .cathead-cta:visited,
.chiarini-catalogo .cathead-cta:hover,
.chiarini-catalogo .cathead-cta:focus,
.chiarini-catalogo .cathead-cta:active {
	text-decoration: none !important;
	text-decoration-line: none !important;
}

/*
 * Corrección v1.0.6 - Nº1: subrayado del botón "Consultar por WhatsApp".
 *
 * Astra subraya los enlaces dentro de .entry-content y su regla gana (o
 * compite) con el text-decoration:none del catálogo, por lo que el texto
 * del botón .wa-btn aparecía subrayado. Se fuerza text-decoration:none en
 * TODOS los estados del .wa-btn, solo dentro del alcance del catálogo,
 * con la mínima especificidad necesaria bajo .chiarini-catalogo.
 * No altera URL, número, mensaje, icono, borde, dimensiones, colores,
 * hover visual existente ni comportamiento del botón.
 */
.chiarini-catalogo .wa-btn,
.chiarini-catalogo .wa-btn:link,
.chiarini-catalogo .wa-btn:visited,
.chiarini-catalogo .wa-btn:hover,
.chiarini-catalogo .wa-btn:focus,
.chiarini-catalogo .wa-btn:active {
	text-decoration: none !important;
	text-decoration-line: none !important;
}

/*
 * Corrección v1.0.2 - Nº2: contraste del CTA final y cierre.
 *
 * Astra sobrescribe el color de los encabezados (h2) con var(--ast-global-...)
 * oscuros; como .cta-final h2 heredaba el color claro de su contenedor, el
 * override del tema lo volvía ilegible sobre el fondo oscuro. Se fija
 * explícitamente el color claro aprobado del diseño dentro del scope del
 * catálogo, con especificidad y prioridad suficientes.
 *
 * Colores aprobados: .cta-final h2 -> var(--paper); .cierre-marca ->
 * var(--paper); .cierre-linea -> rgba(255,255,255,0.6).
 */
.chiarini-catalogo .cta-final h2 {
	color: var(--paper) !important;
}
.chiarini-catalogo .cierre,
.chiarini-catalogo .cierre-marca {
	color: var(--paper) !important;
}
.chiarini-catalogo .cierre-linea {
	color: rgba(255, 255, 255, 0.6) !important;
}

/*
 * Corrección v1.0.2 - Nº3: eliminar la franja blanca residual inferior.
 *
 * Causa: al ocultar #colophon en las páginas de catálogo, el espacio
 * vertical inferior del contenedor de contenido de Astra (.ast-container ->
 * "bottom space" del control "Container Spacing" de Astra) y de los
 * envoltorios de la cadena de contenido (.site-content, .content-area,
 * .site-main, article/.entry-content) quedan por debajo del cierre oscuro
 * del catálogo, mostrándose como franja blanca vacía.
 *
 * Solución: colapsar a 0 solo el padding/margin inferior de esa cadena,
 * en exclusiva para body.chiarini-catalogo-page.
 */
body.chiarini-catalogo-page .site-content,
body.chiarini-catalogo-page .ast-container,
body.chiarini-catalogo-page .content-area,
body.chiarini-catalogo-page .site-main,
body.chiarini-catalogo-page #main,
body.chiarini-catalogo-page article,
body.chiarini-catalogo-page .ast-article-single,
body.chiarini-catalogo-page .ast-single-post,
body.chiarini-catalogo-page .hentry,
body.chiarini-catalogo-page .entry-content {
	margin-bottom: 0;
	padding-bottom: 0;
}

/*
 * Corrección v1.0.3 - Nº4: franja blanca inferior en DESKTOP.
 *
 * Causa EXACTA identificada: Astra aplica (CSS dinámico inline) un
 * `padding-bottom` al contenedor del artículo de la página con el selector
 * `.site .site-content #primary .ast-article-single` (especificidad 1,3,1,
 * mayor que nuestro colapso de v1.0.2). En desktop el valor es grande
 * (> 5em); en mobile Astra usa un valor menor, por eso la franja solo se
 * percibía en desktop. En páginas de Astra el <article> lleva la clase
 * `ast-article-single` (de astra_single_post_class; en páginas no hay
 * `.hentry`).
 *
 * Solución: cero en el padding inferior de ese selector EXACTO con
 * prioridad forzada, scopeado bajo body.chiarini-catalogo-page.
 */
body.chiarini-catalogo-page .site .site-content #primary .ast-article-single {
	padding-bottom: 0 !important;
}

/*
 * Corrección v1.0.5 - Nº5: franja blanca inferior RESIDUAL (confirmada en
 * WordPress real: aún presentada tras la corrección v1.0.3, grande en
 * desktop y fina en mobile).
 *
 * Causa REAL identificada con la fuente del tema Astra:
 *
 *  1) CSS base:  `.ast-separate-container #primary { margin: 4em 0 }`
 *     (assets/css/minified/frontend.min.css) — el div que envuelve todo el
 *     artículo (`<div id="primary" class="content-area primary">`) porta un
 *     margen inferior de 4em.
 *
 *  2) CSS dinámico del módulo posts-structures (inc/modules/posts-structures/
 *     css/single-dynamic.css.php, líneas 55-67): se emite margin-bottom sobre
 *     `.site .site-content #primary` (desktop/tablet/mobile según el control
 *     "outside/spacing").
 *
 *  Ambas reglas tienen especificidad superior a la cadena de colapso v1.0.2
 *  (.content-area, 0,2,1 < 1,1,0 / 1,2,1), por eso la franja persistía:
 *  v1.0.3 solo neutralizó el padding-bottom del `.ast-article-single`.
 *
 *  Solución: cero en el margin-bottom de #primary con los selectores EXACTOS
 *  de Astra (base + dinámica) + !important, scopeado bajo
 *  body.chiarini-catalogo-page. No afecta otras páginas.
 */
body.chiarini-catalogo-page #primary {
	margin-bottom: 0 !important;
}
body.chiarini-catalogo-page .ast-separate-container #primary,
body.chiarini-catalogo-page .site .site-content #primary {
	margin-bottom: 0 !important;
}

/*
 * Corrección v1.0.3 - LIGHTBOX: geometría de los controles 100% propia.
 *
 * En producción Astra contamina <button> con padding/min-width/line-height/
 * border-radius propios, convirtiendo los controles en óvalos descentrados.
 * Aquí se impone una geometría cerrada e independiente del tema: círculo
 * perfecto, ancho=alto, sin padding, icono centrado por grid. La
 * especificidad dentro de .chiarini-catalogo + !important impiden que Astra
 * vuelva a deformarlos.
 */
.chiarini-catalogo .lb-btn,
.chiarini-catalogo .lb-btn:link,
.chiarini-catalogo .lb-btn:visited,
.chiarini-catalogo .lb-btn:active,
.chiarini-catalogo .lb-btn:focus {
	box-sizing: border-box !important;
	display: grid !important;
	place-items: center !important;
	align-content: center;
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	min-height: 40px !important;
	max-width: 40px !important;
	max-height: 40px !important;
	padding: 0 !important;
	margin: 0;
	aspect-ratio: 1 / 1;
	flex-shrink: 0;
	border-radius: 50% !important;
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.04);
	color: #fff;
	line-height: 1 !important;
	font-size: 0;
	font-family: inherit;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	touch-action: manipulation;
	transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.chiarini-catalogo .lb-btn .lb-ico {
	display: block;
	flex-shrink: 0;
	width: auto;
	height: auto;
	transform: none;
}

/*
 * Hover sutil y editorial (190ms): contraste suave, sin sombras fuertes,
 * sin fondos llamativos. Las flechas conservan su translateY(-50%) para no
 * desplazarse; la X solo escala.
 */
.chiarini-catalogo .lb-btn:hover {
	background: rgba(255, 255, 255, 0.09);
	border-color: rgba(255, 255, 255, 0.45);
}
.chiarini-catalogo .lb-close:hover {
	transform: scale(1.04);
}
.chiarini-catalogo .lb-prev:hover {
	transform: translateY(-50%) scale(1.04);
}
.chiarini-catalogo .lb-next:hover {
	transform: translateY(-50%) scale(1.04);
}

/*
 * Posiciones v1.0.3: X arriba a la derecha con respiración (22-24px),
 * flechas centradas verticalmente y simétricas, contador reubicado arriba
 * a la izquierda para no chocar con la X en la esquina opuesta.
 */
.chiarini-catalogo .lb-close {
	top: 1.4rem;
	right: 1.4rem;
}
.chiarini-catalogo .lb-counter {
	top: 1.55rem;
	left: 1.5rem;
	right: auto;
}
.chiarini-catalogo .lb-prev {
	left: 0.8rem;
	top: 50%;
	transform: translateY(-50%);
}
.chiarini-catalogo .lb-next {
	right: 0.8rem;
	top: 50%;
	transform: translateY(-50%);
}

/*
 * Overlay uniforme v1.0.3: el mismo carbón elegante y opaco en
 * desktop, tablet y mobile (antes se percibía distinto/translúcido en
 * mobile). Sin blur pesado, no negro absoluto.
 */
.chiarini-catalogo .lb-backdrop {
	background: rgba(12, 12, 12, 0.94);
}

@media (max-width: 768px) {
	.chiarini-catalogo .lb-btn,
	.chiarini-catalogo .lb-btn:link,
	.chiarini-catalogo .lb-btn:visited,
	.chiarini-catalogo .lb-btn:active,
	.chiarini-catalogo .lb-btn:focus {
		width: 38px !important;
		height: 38px !important;
		min-width: 38px !important;
		min-height: 38px !important;
		max-width: 38px !important;
		max-height: 38px !important;
	}
	.chiarini-catalogo .lb-close {
		top: 1rem;
		right: 1rem;
	}
	.chiarini-catalogo .lb-counter {
		top: 1.15rem;
		left: 1rem;
	}
}

/*
 * Corrección v1.0.5 - LIGHTBOX MOBILE: contraste suficiente sobre fotos
 * claras.
 *
 * En mobile los controles quedaban prácticamente invisibles cuando la
 * fotografía de fondo es blanca: el fondo normal (rgba(255,255,255,0.04))
 * y el borde (rgba(255,255,255,0.28) fueron diseñados para el overlay
 * oscuro y desaparecen sobre una imagen clara.
 *
 * SOLO bajo max-width: 768px se les da un fondo oscuro translúcido y un
 * borde algo más perceptible, manteniendo la familia visual, la geometría
 * circular aprobada (38 x 38px), el SVG blanco perfectamente centrado y
 * las posiciones intactas. Sin sombras fuertes ni círculos sólidos
 * pesados. Estado :active/:hover aumenta sutilmente el contraste. En
 * desktop NO se modifica nada (idéntico a v1.0.4).
 */
@media (max-width: 768px) {
	.chiarini-catalogo .lb-btn,
	.chiarini-catalogo .lb-btn:link,
	.chiarini-catalogo .lb-btn:visited,
	.chiarini-catalogo .lb-btn:active,
	.chiarini-catalogo .lb-btn:focus {
		background: rgba(20, 20, 20, 0.55);
		border-color: rgba(255, 255, 255, 0.42);
		color: #fff;
	}
	.chiarini-catalogo .lb-btn:hover,
	.chiarini-catalogo .lb-btn:active {
		background: rgba(20, 20, 20, 0.72);
		border-color: rgba(255, 255, 255, 0.6);
	}
}