/* ============================================================
   dooth — Sistema de card de producto + Quick View + galería.

   UN SOLO set de clases para cada cosa (sin duplicados por sección):
   · CARD de producto  -> se usa igual en archive de tienda, productos
     relacionados y home. Un cambio acá se refleja en las tres.
   · QUICK VIEW modal   -> se usa en cualquier lugar donde se abra.
   · GALERÍA (.dooth-gallery) -> compartida por single-product y quick view.

   Lo único que varía por ubicación es la CANTIDAD DE COLUMNAS (variable
   --dooth-cols), no el estilo de la card.
   ============================================================ */

/* ============================================================
   1) GRILLA (ul.products) — común a tienda / related / home
   ============================================================ */
.woocommerce ul.products {
	--dooth-cols: 3; /* default desktop */
	display: grid;
	grid-template-columns: repeat(var(--dooth-cols), minmax(0, 1fr));
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none; /* mata el clearfix del layout float de WooCommerce */
}

@media (max-width: 1024px) { .woocommerce ul.products { --dooth-cols: 2; } }
@media (max-width: 767px)  { .woocommerce ul.products { --dooth-cols: 2; } }

/* --- Columnas por ubicación (única diferencia por sección) --- */
/* Productos relacionados: 4 / 2 / 1 */
.woocommerce .related ul.products { --dooth-cols: 4; }
@media (max-width: 1024px) { .woocommerce .related ul.products { --dooth-cols: 2; } }
@media (max-width: 767px)  { .woocommerce .related ul.products { --dooth-cols: 1; } }

/* Home "Ver productos": 4 / 3 / 1 */
.dooth-home-products ul.products { --dooth-cols: 4; }
@media (max-width: 1024px) { .dooth-home-products ul.products { --dooth-cols: 3; } }
@media (max-width: 767px)  { .dooth-home-products ul.products { --dooth-cols: 1; } }
/* (El archive de tienda usa el selector de columnas: shop-columns.js setea --dooth-cols) */

/* ============================================================
   2) CARD DE PRODUCTO — set único
   ============================================================ */
.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	position: relative;
	display: flex;
	flex-direction: column;
	text-align: left;
	background: var(--color-fondo-1);
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 10px;
	overflow: hidden;
	transition: box-shadow .18s ease, border-color .18s ease;
}

.woocommerce ul.products li.product:hover {
	border-color: rgba(0, 0, 0, .2);
	box-shadow: 0 8px 26px rgba(0, 0, 0, .08);
}

/* Media: imagen destacada + segunda imagen (crossfade en hover) */
.dooth-card-media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--color-fondo-1);
	overflow: hidden;
}

.dooth-card-imglink {
	position: absolute;
	inset: 0;
	display: block;
}

.dooth-img {
	position: absolute;
	inset: 0;
}

.dooth-img img {
	width: 100%;
	height: 100%;
	object-fit: contain; /* producto completo, sin recortar */
	display: block;
}

.dooth-img-back {
	opacity: 0;
	transition: opacity .45s ease;
}

.dooth-card-media:hover .dooth-img-back {
	opacity: 1;
}

/* Badge de oferta: barra superior */
.woocommerce ul.products li.product .onsale {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 3;
	margin: 0;
	padding: .5rem;
	min-height: 0;
	min-width: 0;
	text-align: center;
	border-radius: 0;
	background: var(--color-primario);
	color: var(--color-fondo-1);
	font-size: .8rem;
	line-height: 1.4;
}

/* Overlay de acciones (ojo = quick view, carrito = add to cart) */
.dooth-card-actions {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: .5rem;
	padding: .85rem;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .25s ease, transform .25s ease;
	pointer-events: none;
}

.dooth-card-media:hover .dooth-card-actions {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.dooth-action {
	width: 44px;
	height: 44px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-primario);
	color: var(--color-fondo-1);
	border: 0;
	border-radius: 0;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s ease;
}

.dooth-action:hover,
.dooth-action:focus-visible {
	background: var(--color-acento);
	color: var(--color-fondo-1);
}

/* Iconos ojo + carrito: 24px ancho + 24px alto fijo, misma regla para ambos
   SVG (viewBox 1:1 → misma altura final para los dos, sin que el path desiguale).
   No toca el padding del botón. !important para que Elementor no los achique. */
.dooth-action svg {
	display: block;
	flex: none; /* no encoger: el botón <button> del ojo tiene nodos de texto que lo achicaban */
	width: 24px !important;
	height: 24px !important;
	color: var(--color-fondo-1) !important;
}

/* Iconos (ojo + carrito) SIEMPRE #ffffff: fuerzo stroke Y fill en el svg y en
   todos sus paths/circles/shapes, para cualquier icono sin excepción. */
.dooth-action svg,
.dooth-action svg *,
.dooth-action svg path,
.dooth-action svg circle,
.dooth-action svg line,
.dooth-action svg polyline,
.dooth-action svg rect {
	stroke: var(--color-fondo-1) !important; /* #ffffff */
}

/* Link "Ver carrito" que agrega WooCommerce tras el add-to-cart AJAX: fuera del overlay.
   !important: WooCommerce lo fuerza a display:block con mayor especificidad (3 clases). */
.dooth-card-actions .added_to_cart {
	display: none !important;
}

/* Título + precio (centrados) */
.dooth-card-title-link {
	display: block;
	padding: 1rem 1rem 0;
	color: inherit;
	text-decoration: none;
	text-align: center;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 0;
	padding: 0;
	font-size: 1.2rem; /* +20% */
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
}

.woocommerce ul.products li.product .price {
	display: block;
	margin: 0;
	padding: .4rem 1rem 1.1rem;
	font-size: 1.3rem; /* +30% */
	font-weight: 700;  /* negrita */
	text-align: center;
	color: inherit;
}

.woocommerce ul.products li.product .price del {
	opacity: .5;
	font-weight: 400;
	margin-right: .4rem;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
}

/* ============================================================
   3) SINGLE-PRODUCT — layout de la ficha (página, no card)
   ============================================================ */
/* Título del producto +50%, negro, negrita */
.woocommerce div.product .product_title {
	font-size: 3rem;
	color: var(--color-primario);
	font-weight: 700;
}

/* Galería a la izquierda (visible sin el slider de WC) */
.woocommerce-product-gallery.dooth-gallery-host {
	opacity: 1 !important;
}

/* 2 columnas en PC/tablet (galería izq / summary der), apilado en mobile */
@media (min-width: 768px) {
	.woocommerce div.product .dooth-gallery-host {
		float: left;
		width: 48%;
		clear: none;
		margin-bottom: 2em;
	}

	.woocommerce div.product .summary.entry-summary {
		float: right;
		width: 48%;
	}

	.woocommerce div.product::after {
		content: "";
		display: block;
		clear: both;
	}
}

/* ============================================================
   4) GALERÍA (.dooth-gallery) — set único, single-product + quick view
   Miniaturas verticales izq + imagen grande der. Igual en todos los dispositivos.
   Flechas ↑/↓ (carrusel) solo si las miniaturas exceden la altura.
   ============================================================ */
.dooth-gallery {
	--dooth-thumb-h: 90px; /* alto FIJO de miniatura (px); el ancho es proporcional (auto) */
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	min-width: 0;
}

/* Columna de miniaturas: se ajusta al ancho de las miniaturas (que es variable) */
.dooth-gallery-thumbs-wrap {
	flex: 0 0 auto;
	width: auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: .35rem;
	min-height: 0;
}

.dooth-gallery-thumbs {
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* cada miniatura conserva su ancho proporcional (no se estira) */
	gap: .5rem;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	scroll-behavior: smooth;
}

/* Miniatura: CUADRADA. Lado = --dooth-thumb-h = 20% del alto de la imagen
   destacada (lo calcula el JS en sync()). La imagen se muestra COMPLETA dentro
   del cuadrado con object-fit:contain (nunca cover, nunca stretch, sin recorte). */
.dooth-gallery-thumb {
	flex: 0 0 auto;
	height: var(--dooth-thumb-h); /* alto = 20% del alto del main (JS) */
	width: var(--dooth-thumb-h);  /* ancho = alto → cuadrado 1:1 */
	padding: 0 !important;         /* Elementor (.elementor-kit-5 button) mete 15/18px; lo anulo */
	background: none !important;   /* y su fondo de botón */
	border-radius: 0;
	overflow: hidden;
	cursor: pointer;
	line-height: 0;
}

.dooth-gallery-thumb img {
	display: block;
	width: 100% !important;         /* llena el cuadrado... */
	height: 100% !important;        /* ...en ambos ejes */
	max-width: none !important;     /* reset/Woo ponen max-width:100% */
	object-fit: contain !important; /* imagen completa dentro del cuadrado; sin cover/stretch/recorte */
}

/* Sin borde/outline en NINGÚN estado (default, activo, hover, focus) — ninguna miniatura */
.dooth-gallery-thumb,
.dooth-gallery-thumb.is-active,
.dooth-gallery-thumb:hover,
.dooth-gallery-thumb:focus,
.dooth-gallery-thumb:focus-visible {
	border: 0;
	outline: none;
	box-shadow: none;
}

/* Flechas del carrusel */
.dooth-gallery-nav {
	display: none; /* aparece solo con overflow (clase .has-nav via JS) */
	flex: 0 0 auto;
	width: 100%;
	padding: .15rem 0;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: inherit;
}

.dooth-gallery.has-nav .dooth-gallery-nav {
	display: flex;
}

.dooth-gallery-nav:hover:not([disabled]),
.dooth-gallery-nav:focus:not([disabled]) {
	background-color: var(--color-acento) !important;
	color: var(--color-fondo-1) !important;
}

.dooth-gallery-nav[disabled] {
	opacity: .3;
	cursor: default;
}

.dooth-gallery-nav svg {
	display: block;
}

.dooth-gallery-main {
	flex: 1 1 auto;
	min-width: 0;
}

.dooth-gallery-main img {
	display: block;
	width: 100%;
	height: auto;          /* aspect-ratio original intacto (nunca stretch/fill) */
	object-fit: contain;   /* si algo fijara un alto, contiene sin deformar */
	border-radius: 4px;
}

/* ============================================================
   5) QUICK VIEW MODAL — set único
   ============================================================ */
body.dooth-qv-open {
	overflow: hidden;
}

.dooth-qv-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
}

.dooth-qv-modal.is-open {
	display: block;
}

.dooth-qv-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .55);
}

.dooth-qv-dialog {
	position: relative;
	z-index: 1;
	max-width: min(1080px, 94vw);
	max-height: 90vh;
	overflow: auto;
	margin: 5vh auto;
	padding: 2rem;
	background: var(--color-fondo-1);
	border-radius: 8px;
}

.dooth-qv-close {
	position: absolute;
	top: .6rem;
	right: .9rem;
	width: 2.2rem;
	height: 2.2rem;
	font-size: 1.7rem;
	line-height: 1;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: inherit;
	transition: background-color .15s ease, color .15s ease;
}

.dooth-qv-close:hover,
.dooth-qv-close:focus,
.dooth-qv-close:focus-visible {
	background-color: var(--color-acento) !important;
	color: var(--color-fondo-1) !important;
}

.dooth-qv-inner {
	display: flex;
	gap: 2rem;
	align-items: flex-start;
}

/* En el modal, la galería ocupa la mitad izquierda */
.dooth-qv-inner .dooth-gallery {
	flex: 1 1 50%;
}

.dooth-qv-summary {
	flex: 1 1 50%;
	min-width: 0;
}

.dooth-qv-title {
	margin: 0 0 .5rem;
	font-size: 2.08rem; /* +30% */
	line-height: 1.25;
}

.dooth-qv-price {
	margin: 0 0 1rem;
	font-size: 1.76rem; /* +35% */
	font-weight: 700;
}

.dooth-qv-price del { opacity: .5; font-weight: 400; margin-right: .4rem; }
.dooth-qv-price ins { text-decoration: none; }

.dooth-qv-desc {
	margin: 0 0 1.5rem;
	line-height: 1.6;
}

.dooth-qv-cart {
	display: flex;
	align-items: center;
	gap: .75rem;
	flex-wrap: wrap;
}

.dooth-qv-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid rgba(0, 0, 0, .25);
}

.dooth-qty-btn {
	width: 2.4rem;
	height: 2.6rem;
	background: transparent;
	border: 0;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	color: inherit;
	transition: background-color .15s ease, color .15s ease;
}

.dooth-qty-btn:hover,
.dooth-qty-btn:focus {
	background-color: var(--color-acento) !important;
	color: var(--color-fondo-1) !important;
}

.dooth-qv-qty input {
	width: 3rem;
	height: 2.6rem;
	text-align: center;
	font: inherit;
	color: inherit;
	background: transparent;
	border: 0;
	border-left: 1px solid rgba(0, 0, 0, .15);
	border-right: 1px solid rgba(0, 0, 0, .15);
	-moz-appearance: textfield;
}

.dooth-qv-qty input::-webkit-outer-spin-button,
.dooth-qv-qty input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.dooth-qv-add {
	display: inline-flex !important; /* gana a .button{display:inline-block} de WooCommerce */
	align-items: center;
	flex-wrap: nowrap;      /* flecha en la misma línea que el texto */
	white-space: nowrap;
	gap: .5rem;
	text-decoration: none;
}

.dooth-qv-add svg {
	display: block;
	flex: 0 0 auto; /* la flecha no salta de línea */
}

.dooth-qv-add.is-loading {
	opacity: .6;
	pointer-events: none;
}

@media (max-width: 767px) {
	.dooth-qv-dialog { padding: 1.5rem; }

	.dooth-qv-inner {
		flex-direction: column;
		gap: 1.25rem;
	}

	.dooth-qv-inner .dooth-gallery,
	.dooth-qv-summary { flex: 1 1 auto; width: 100%; }
}

/* ============================================================
   6) TÍTULO "Related products" (single product)
   Estilo H2 del sitio (36/700 · tablet 28 · mobile 24 · Open Sans) + línea
   acento corta debajo, a la izquierda. Réplica de "Discover the latest news".
   ============================================================ */
.woocommerce .related > h2 {
	position: relative;
	margin: 90px 0 40px;                  /* 90 arriba (desktop) · 40 abajo (bajo la línea) */
	padding-bottom: 20px;                 /* separación entre el texto y la línea */
	font-size: 36px;                      /* H2 del sitio (desktop) */
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-primario);
}

.woocommerce .related > h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100px;                         /* ancho de la línea */
	height: 2px;                          /* grosor */
	background-color: var(--color-acento);
}

@media (max-width: 1024px) {             /* tablet */
	.woocommerce .related > h2 { margin-top: 70px; font-size: 28px; }
}

@media (max-width: 767px) {              /* mobile */
	.woocommerce .related > h2 { margin-top: 60px; font-size: 24px; }
}