/*
Theme Name: Elessi Child
Theme URI: https://drstitch.com.co
Template: elessi-theme
Author: Dr Stitch
Description: Child theme de Elessi para Dr Stitch. Contiene la tipografía de marca (Franklin Gothic Demi / Montserrat) y personalizaciones propias, separadas del tema padre para sobrevivir sus actualizaciones.
Version: 1.1.22
Text Domain: elessi-theme-child
*/

@font-face {
	font-family: 'Franklin Gothic Demi';
	src: url('fonts/FRADM.TTF') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Franklin Gothic Demi';
	src: url('fonts/FRADMIT.TTF') format('truetype');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

/* Carrusel de mensajes del top bar (lado izquierdo) */
.left-text {
	position: relative;
	overflow: hidden;
	height: 1.6em;
	line-height: 1.6em;
	min-width: 260px;
}

.left-text > a {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transform: translateX(20px);
	transition: opacity 0.9s ease, transform 0.9s ease;
	white-space: nowrap;
	pointer-events: none;
}

.left-text > a.drstitch-topbar-active {
	opacity: 1;
	transform: translateX(0);
	pointer-events: auto;
}

.left-text > a.drstitch-topbar-leaving {
	opacity: 0;
	transform: translateX(-20px);
}
#masthead {
  padding: 10px 0;
}
.nasa-header-sticky .fixed-already #masthead {
  padding-top: 5px;
  padding-bottom: 5px;
}
/* El panel de Personalizar (bg_color_topbar/text_color_topbar) no está
   aplicando el cambio en este sitio (el sistema de CSS dinámico del tema no
   lo está imprimiendo, posible cache interno) — se fija directo aquí. */
body #top-bar {
	background-color: #21201F !important;
}

#top-bar .left-text a {
    font-family: "Franklin Gothic Demi", Sans-serif;
    font-size: 1em;
    font-weight: 600;
    color: #FFFFFF !important;
}

body #top-bar .topbar-menu-container > ul > li > a,
body #top-bar .topbar-menu-container > ul > li > a svg {
	color: #FFFFFF !important;
}

body #top-bar .topbar-menu-container > ul > li > a:hover,
body #top-bar .topbar-menu-container > ul > li > a:hover svg {
	color: #4FBDC2 !important;
}

/* ------------------------------------------------------------------ */
/* Top bar con más contraste (fondo oscuro) + iconos de carrito/envío  */
/* ------------------------------------------------------------------ */
/* Acordado en la reunión del 21 de agosto: el top bar en fondo claro se
   perdía visualmente. El color de fondo/texto real se controla desde el
   theme_mod bg_color_topbar/text_color_topbar (ver drstitch_setup.php o el
   panel Personalizar > Top Bar) — aquí solo se ajustan detalles que esos
   controles no cubren (el texto de los mensajes rotativos, que tenía el
   teal de marca fijo, y los iconos nuevos). */
.drstitch-topbar-icons {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-right: 16px;
}

.drstitch-topbar-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: #FFFFFF;
	transition: color 0.2s ease;
}

.drstitch-topbar-icon:hover {
	color: #4FBDC2;
}

.drstitch-topbar-icon-count {
	position: absolute;
	top: -7px;
	right: -8px;
	background: #027877;
	color: #fff;
	font-size: 10px;
	font-family: Montserrat, sans-serif;
	line-height: 1;
	padding: 3px 5px;
	border-radius: 50%;
	min-width: 8px;
	text-align: center;
}

.drstitch-topbar-shipping {
	cursor: default;
}

/* ------------------------------------------------------------------ */
/* Home: Banner Hombre / Mujer                                        */
/* ------------------------------------------------------------------ */
.drstitch-gender-banners {
	display: flex;
	gap: 20px;
	margin: 40px 0;
}

.gender-banner {
	position: relative;
	flex: 1 1 50%;
	height: 340px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background-size: cover;
	background-position: center;
	background-color: #027877;
	background-blend-mode: overlay;
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.4s ease;
}

.gender-banner--mujer {
	background-color: #4FBDC2;
}

.gender-banner:hover {
	transform: scale(1.01);
}

.gender-banner__content {
	text-align: center;
	color: #fff;
	padding-bottom: 40px;
}

.gender-banner__title {
	display: block;
	font-family: "Franklin Gothic Demi", Sans-serif;
	font-size: 2.2em;
	margin-bottom: 10px;
}

.gender-banner__cta {
	display: inline-block;
	border: 1px solid #fff;
	padding: 10px 24px;
	border-radius: 30px;
	font-family: Montserrat, sans-serif;
	font-size: 0.85em;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

@media (max-width: 767px) {
	.drstitch-gender-banners {
		flex-direction: column;
	}
}

/* ------------------------------------------------------------------ */
/* Home: Categorías de producto (círculos)                            */
/* ------------------------------------------------------------------ */
.drstitch-categories {
	display: flex;
	justify-content: center;
	gap: 40px;
	flex-wrap: wrap;
	margin: 60px 0;
}

.category-circle {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	width: 160px;
}

.category-circle__img {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	background-color: #027877;
	background-size: cover;
	background-position: center;
	background-blend-mode: overlay;
	margin-bottom: 16px;
	transition: transform 0.3s ease;
}

.category-circle:hover .category-circle__img {
	transform: scale(1.06);
}

.category-circle__label {
	font-family: "Franklin Gothic Demi", Sans-serif;
	font-size: 1em;
	color: #21201F;
	text-align: center;
}

/* ------------------------------------------------------------------ */
/* Home: Paleta de colores de temporada (tarjetas estilo Pantone)     */
/* ------------------------------------------------------------------ */
.drstitch-color-palette {
	margin: 60px 0;
}

.color-palette__heading {
	text-align: center;
	margin-bottom: 30px;
}

.color-palette__eyebrow {
	display: block;
	font-family: Montserrat, sans-serif;
	font-size: 0.8em;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: #4FBDC2;
	margin-bottom: 6px;
}

.color-palette__title {
	font-family: "Franklin Gothic Demi", Sans-serif;
	font-size: 1.8em;
	margin: 0;
	color: #21201F;
}

.color-palette__track {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 10px 20px 20px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.color-card {
	scroll-snap-align: start;
	flex: 0 0 200px;
	background: #fff;
	border: 1px solid #eee;
	box-shadow: 0 2px 10px rgba(0,0,0,0.06);
	padding: 14px;
}

.color-card__swatch {
	width: 100%;
	height: 160px;
}

.color-card__info {
	padding-top: 12px;
	display: flex;
	flex-direction: column;
}

.color-card__collection {
	font-family: Montserrat, sans-serif;
	font-size: 0.7em;
	letter-spacing: 0.1em;
	color: #999;
	margin-bottom: 4px;
}

.color-card__name {
	font-family: "Franklin Gothic Demi", Sans-serif;
	font-size: 1.1em;
	color: #21201F;
}

/* El tema trae por defecto un rojo/coral (#f76b6a) como color base de TODOS */
/* los badges de producto (Nuevo, Bajo pedido, Oferta, Destacado...) — la     */
/* marca no usa rojo en su paleta, así que se reemplaza por el teal.         */
.badge {
	background: #027877;
}

/* El total de "Complementa tu look" reutiliza el marcado <ins> de WooCommerce */
/* (pensado para resaltar precios en oferta), heredando el rojo de énfasis    */
/* del tema (style-single-product.css, que carga después del child theme —   */
/* por eso hace falta !important para ganarle). */
ins .woocommerce-Price-amount {
	color: #027877 !important;
}

/* Títulos de las pestañas del producto (Descripción, Especificaciones, */
/* etc.) — el texto vive en el <a class="nasa-single-product-tab">     */
/* interno, no en el div .nasa-accordion-title que lo envuelve, así    */
/* que hay que apuntar directo al link (si no, una regla del tema      */
/* padre con más especificidad gana y se queda en Montserrat).         */
.nasa-accordion-title a.nasa-single-product-tab {
	font-family: "Franklin Gothic Demi", Sans-serif;
}

/* ------------------------------------------------------------------ */
/* Botones flotantes WhatsApp/Instagram (footer, plantilla Elementor  */
/* post 216). El CSS que Elementor genera para esa plantilla carga    */
/* dentro del <body> (lo inyecta header-footer-elementor junto con el */
/* footer), así que llega tarde y los íconos "saltan" a su posición   */
/* fija un instante después del primer pintado. Se replican aquí las  */
/* mismas reglas para que ya estén listas desde el <head>.            */
.elementor-element-a431c3d,
.elementor-element-11ba010 {
	position: fixed;
	right: 10px;
	bottom: 95px;
	z-index: 999;
}

.elementor-element-11ba010 {
	bottom: 30px;
}

.elementor-element-a431c3d .elementor-icon,
.elementor-element-11ba010 .elementor-icon {
	font-size: 28px;
	padding: 12px;
}

.elementor-element-a431c3d .elementor-icon svg,
.elementor-element-11ba010 .elementor-icon svg {
	height: 28px;
}

@media (max-width: 767px) {
	.elementor-element-a431c3d,
	.elementor-element-11ba010 {
		right: 5px;
		bottom: 140px;
	}

	.elementor-element-11ba010 {
		bottom: 75px;
	}
}

/* ------------------------------------------------------------------ */
/* Popups "Guía de tallas" / "Psicología del color" (mecanismo nativo */
/* nasa-node-popup) — el tema padre fija #nasa-content-size-guide en  */
/* 600px/padding 25px 60px dentro de un @media (min-width:768px) dado */
/* que style-single-product.css se imprime después del child theme,  */
/* así que a igual especificidad gana el padre — hace falta           */
/* !important para el padding (mismo patrón que ins .woocommerce-     */
/* Price-amount más arriba). El resto de popups (sin ID propio) caen  */
/* en el default de .nasa-node-content: 500px/padding 25px. */
body .nasa-node-content#nasa-content-size-guide,
body .nasa-node-content#nasa-content-color-psychology {
	width: 700px;
	padding: 25px 30px !important;
}

/* Tarjeta de "tipo de cuerpo" seleccionada en /guia-de-tallas/ */
.drstitch-tipo-cuerpo-card-selected {
	outline: 2px solid #027877;
	outline-offset: 2px;
	border-radius: 4px;
}

/* Select de los formularios de Elementor Pro: el CSS propio de Elementor
   cubre -webkit-appearance pero no -moz-appearance, así que en Firefox el
   navegador dibuja su propia flecha nativa encima del ícono SVG del campo,
   viéndose como una flecha "duplicada". */
.elementor-form select {
	-moz-appearance: none;
}

/* Flecha duplicada del select (Chrome): Elementor Pro dibuja DOS íconos a la
   vez — un chevron de fondo (background-image) en el propio <select> y,
   además, un SVG aparte (.select-caret-down-wrapper) que el widget agrega
   al DOM. En esta versión del plugin ambos quedan visibles al mismo tiempo
   (conflicto propio de Elementor, no de una personalización nuestra). Se
   oculta el más viejo (el de fondo) y se deja el SVG nuevo, que ya está
   bien posicionado. */
.elementor-select-wrapper select {
	background-image: none !important;
}

/* El ícono SVG queda centrado respecto al wrapper del campo (56px, incluye
   espacio reservado abajo para mensajes de error), no respecto al <select>
   en sí (42px) — por eso sale corrido hacia abajo. Se centra respecto a la
   altura real del campo. */
.elementor-select-wrapper .select-caret-down-wrapper {
	top: 21px;
}


@media (max-width: 767px) {

	.nasa-topbar-wrap .large-12.columns {
		text-align: center;
		display: flex;
		justify-content: center;
	}
	#top-bar .left-text a {
		font-family: "Franklin Gothic Demi", Sans-serif;
		font-size: 1em;
		font-weight: 600;
		color: #027877;
		width: 100%;
	}

}

/* Fotos de producto en grillas (tienda, relacionados, etc.) con alturas
   distintas entre sí — .product-img-wrap no fijaba ninguna proporción (cada
   tarjeta tomaba la altura natural de SU foto) y el <img> no recortaba
   (object-fit quedaba en "fill", el default del navegador). Se fuerza la
   proporción más común del catálogo actual (~350x622) + recorte centrado,
   para que todas las tarjetas de una fila midan igual.

   El aspect-ratio va tanto en el wrapper COMO en el <img> mismo: si solo se
   fija en el wrapper y el <img> usa height:100% (porcentaje), esa altura
   depende de que el navegador ya haya resuelto el alto del padre como
   "definido" — con imágenes loading="lazy" que aún no terminan de decodificar
   (fuera de la primera pantalla, o justo antes del hover), el navegador cae
   de vuelta a calcular el alto con la proporción NATURAL del archivo de esa
   foto puntual (ej. fotos 350x525 en vez de 350x622), rompiendo la uniformidad
   solo en esas fotos. Fijar aspect-ratio directo en el <img> evita ese
   fallback: un aspect-ratio declarado por CSS siempre gana sobre la relación
   width/height intrínseca del archivo, cargue o no haya cargado todavía.

   IMPORTANTE: no forzar "width" aquí. El ancho del <img> ya sale correcto
   solo (100% del wrapper) por el CSS propio del tema. El carrusel de fotos
   que aparece al hacer hover sobre una tarjeta (Slick) le pone a cada foto
   un width en px inline vía JS, calculado para calzar exacto en la tarjeta
   — si esta regla trae "width: 100% !important" ese !important le gana al
   inline de Slick (un !important siempre gana sobre un inline style) y cada
   foto termina midiendo el ancho de las 4 fotos juntas del carrusel en vez
   de su propio espacio, y con eso la altura (ligada por aspect-ratio) se
   dispara x4 — eso era el destrozo visible en el hover. */
.product-img-wrap {
	aspect-ratio: 350 / 622;
	height: auto !important;
	/* En grillas angostas (ej. "Productos relacionados", 5 columnas) el
	   carrusel de fotos por hover (Slick) calcula el ancho de cada foto mal
	   — usa el ancho de la tarjeta completa en vez del espacio real dentro
	   del wrapper (una tanda de fotos, ~10px de más a cada lado) — y como
	   .product-img-wrap tiene overflow:visible por defecto, esa foto de más
	   ancho se desborda por los costados, dando la sensación de "zoom"/
	   descuadre que reportó el cliente al pasar las fotos de una tarjeta en
	   relacionados. overflow:hidden contiene ese desborde sin tocar el
	   cálculo interno de Slick (recortar en vez de corregir el JS del tema). */
	overflow: hidden;
}

.product-img-wrap img {
	aspect-ratio: 350 / 622 !important;
	height: auto !important;
	object-fit: cover;
}

/* Zoom falso al pasar las fotos dentro del carrusel de hover (reportado por
   el cliente, confirmado con capturas comparando la misma foto antes/después
   del hover). Causa: Slick.js calcula mal el ANCHO de cada foto dentro del
   carrusel (240px en vez de los 220px reales del wrapper, mismo bug de la
   nota de arriba) — y como la regla de aspect-ratio de arriba calcula el
   ALTO a partir de ESE ancho equivocado, la foto sale ~9% más alta de lo que
   debería, recortando una porción más "acercada" de la imagen. Ese cálculo
   queda además cacheado por Slick (ni reinicializándolo se corrige — es un
   bug interno del carrusel del tema, no de este CSS). Para las fotos DENTRO
   del carrusel (clase .slick-slide) se desactiva el aspect-ratio propio y se
   usa height:100% para heredar el alto ya correcto del wrapper en vez de
   recalcularlo desde el ancho equivocado de Slick. Las fotos fuera del
   carrusel (grilla estática) siguen usando la regla de arriba sin cambios. */
.product-img-wrap img.slick-slide {
	aspect-ratio: unset !important;
	height: 100% !important;
}

/* ------------------------------------------------------------------ */
/* Logo achatado en el panel de menú móvil (offcanvas)                */
/* ------------------------------------------------------------------ */
/* El propio CSS dinámico del tema (nasa-dynamic/dynamic.css) trae una regla
   que resetea el logo a width:auto dentro del panel móvil, pero apunta a un
   ID equivocado (#mobile-navigation) que no existe en el offcanvas real de
   este sitio (el panel real tiene id #nasa-menu-sidebar-content) — mientras
   que la regla que SÍ acierta el ID correcto solo trae max-height:25px, sin
   resetear el width. Resultado: el logo se queda con el width:110px general
   del header + max-height:25px del panel, aplastándose (relación 514x254
   real vs 110x25 forzado). Se corrige el mismo reset que el tema ya intenta
   hacer, pero con el ID real del panel. */
#nasa-menu-sidebar-content .menu-item-heading .logo .header_logo {
	width: auto !important;
}

/* ------------------------------------------------------------------ */
/* Botón "Seguir comprando" del carrito, ancho completo en móvil       */
/* ------------------------------------------------------------------ */
/* El botón "Actualizar carrito" ya sale a ancho completo en móvil por CSS
   propio del tema; "Seguir comprando" (agregado por nosotros) no tenía esa
   regla y se quedaba del ancho de su propio texto, viéndose más angosto y
   descuadrado al apilarse debajo. */
@media (max-width: 767px) {
	#drstitch-continue-shopping {
		width: 100%;
	}
}

/* ------------------------------------------------------------------ */
/* Asesoría en /guia-de-tallas/: dos grillas independientes (tipo de   */
/* cuerpo + tipo de estilo, reunión del 5 sept 2026) — ambas usan la   */
/* misma clase de tarjeta "seleccionada" de más arriba                */
/* (.drstitch-tipo-cuerpo-card-selected). El resultado (corte          */
/* recomendado + carousel filtrado) se arma en functions.php y se      */
/* muestra/oculta con jQuery .show()/.hide(), no con CSS, para que el  */
/* mismo evento nasa_reload_slick_slider_private que ya usa el resto   */
/* del sitio pueda re-inicializar el slick slider una vez el contenedor*/
/* ya tiene ancho real.                                                */
/* ------------------------------------------------------------------ */

/* Nota: las fotos de fondo de los círculos "Categorías de producto" (Home)
   y "Clientes corporativos" (Grupos) NO se pudieron fijar por CSS — el
   widget "nested-carousel" de Elementor Pro tiene un lazy-load interno de
   imágenes de fondo que nunca dispara la carga real, y ni un !important en
   una hoja de estilos externa le gana (hay otra regla !important, probable-
   mente inyectada por el propio Swiper, que carga después). La única forma
   que funcionó en pruebas en vivo fue fijar el background-image por JS
   directo en el elemento con !important inline (ver
   drstitch_fix_nested_carousel_backgrounds_script en functions.php). */