/* ==========================================================================
   Fajardos — WooCommerce
   Catálogo pensado para venta consultiva: la imagen manda, el precio no.
   ========================================================================== */

/* Retícula de productos ---------------------------------------------------- */

.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(var(--fj-woo-cols, 3), 1fr);
	gap: 26px;
	margin: 0 0 34px;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	background: var(--fj-content-bg);
	border: 1px solid var(--fj-border);
	border-radius: var(--fj-card-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow .22s ease, transform .22s ease;
}
.woocommerce ul.products li.product:hover {
	box-shadow: 0 10px 28px rgba(var(--fj-primary-rgb), .13);
	transform: translateY(-2px);
}

@media (max-width: 1024px) {
	.woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.woocommerce ul.products { grid-template-columns: 1fr; }
}

/* Imagen del producto ------------------------------------------------------ */

.fj-product-media {
	position: relative;
	overflow: hidden;
	background: #eceef1;
}
.woocommerce ul.products li.product a img {
	margin: 0;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .35s ease;
}
.woocommerce ul.products li.product:hover a img { transform: scale(1.04); }

.woocommerce span.onsale {
	background: var(--fj-accent);
	color: #fff;
	border-radius: 2px;
	min-height: 0;
	min-width: 0;
	line-height: 1;
	padding: 6px 11px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	top: 10px;
	left: 10px;
	right: auto;
	margin: 0;
}

/* Cuerpo de la tarjeta ----------------------------------------------------- */

.fj-product-body {
	padding: 18px 18px 20px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--fj-font-heading);
	font-size: var(--fj-fs-h5);
	font-weight: var(--fj-heading-weight);
	color: var(--fj-primary);
	padding: 0;
	margin: 0 0 8px;
	line-height: 1.3;
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title { color: var(--fj-accent); }

.woocommerce ul.products li.product .price {
	color: var(--fj-muted);
	font-size: 15px;
	margin: 0 0 12px;
}

.woocommerce ul.products li.product .button {
	margin-top: auto;
	border-radius: var(--fj-btn-radius);
}

.woocommerce ul.products li.product .star-rating { margin: 0 0 8px; font-size: 13px; }

/* Cabecera del catálogo ---------------------------------------------------- */

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { margin-bottom: 22px; }

.woocommerce .woocommerce-ordering select {
	width: auto;
	min-width: 220px;
	padding: 9px 12px;
}

.term-description,
.woocommerce-products-header__title { margin-bottom: 20px; }

.term-description {
	max-width: 760px;
	color: var(--fj-muted);
	font-size: 16px;
	line-height: 1.65;
}

/* Ficha de producto -------------------------------------------------------- */

.woocommerce div.product {
	background: var(--fj-content-bg);
	border: 1px solid var(--fj-border);
	border-radius: var(--fj-card-radius);
	padding: 30px;
}

/* --------------------------------------------------------------------------
   Ficha de producto — retícula y galería en mosaico (v1.2)
   -------------------------------------------------------------------------- */

/* Retícula CSS en lugar de los flotantes de WooCommerce: así 75/25 es
   exactamente 75/25 y la separación es espacio real, no un porcentaje. */
.woocommerce div.product {
	position: relative;
	display: grid;
	grid-template-columns: var(--fj-woo-img-w, 75fr) var(--fj-woo-sum-w, 25fr);
	column-gap: 34px;
	align-items: start;
}
/* Pestañas, relacionados y ventas cruzadas ocupan el ancho completo. */
.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > .related,
.woocommerce div.product > .upsells,
.woocommerce div.product > .woocommerce-product-gallery + .summary + * {
	grid-column: 1 / -1;
}
.woocommerce div.product > span.onsale { position: absolute; }

@media (max-width: 900px) {
	.woocommerce div.product { grid-template-columns: 1fr; row-gap: 26px; }
}

/* Las anchuras llevan !important porque WooCommerce reparte 48/48 con la
   misma especificidad. La carga en prioridad 30 ya lo resuelve, pero un
   plugin de caché que reordene las hojas volvería a romperlo. */
.woocommerce div.product div.images,
.woocommerce div.product div.images.woocommerce-product-gallery,
.woocommerce div.product div.summary {
	width: 100% !important;
	float: none !important;
	clear: none !important;
	margin-bottom: 0 !important;
	position: relative;
	min-width: 0;
}

/* ---------- Mosaico (v1.3) ---------- */
/* Multicolumna en vez de retícula: con alturas variables, una retícula
   deja huecos porque todas las celdas de una fila comparten alto. La
   multicolumna empaqueta cada columna por su cuenta y no sobra espacio.
   La primera imagen cruza ambas columnas con column-span. */

.woocommerce div.product .woocommerce-product-gallery__wrapper {
	column-count: 2;
	column-gap: var(--fj-woo-gap, 10px);
	display: block;
	background: none;
	border-radius: 0;
	overflow: visible;
	margin: 0;
}
/* WooCommerce trae esta regla en su propia hoja, para su rejilla de
   miniaturas de cuatro columnas:

     .woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2)
     { width: 25%; display: inline-block; }

   Es más específica que cualquier selector corto del tema, así que las
   fotografías secundarias salían al 25 % y en línea: tres miniaturas
   apiladas en la esquina y el resto de la columna vacío. Hay que
   igualarle la especificidad y forzar el ancho. */
/* El selector va por descendencia genérica (`> *`) en lugar de por la clase
   de la celda: así no depende de qué etiqueta o clase use la versión de
   WooCommerce instalada, y la cadena de ancestros basta para ganarle. */
body:not(.fj-woo-gallery-carousel) div.product div.images .woocommerce-product-gallery__wrapper > *,
body:not(.fj-woo-gallery-carousel) div.product div.images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:nth-child(n+2) {
	width: 100% !important;
	max-width: 100% !important;
	display: block !important;
	float: none !important;
	clear: none !important;
	margin: 0 0 var(--fj-woo-gap, 10px) !important;
	padding: 0 !important;
	position: relative;
	break-inside: avoid;
	page-break-inside: avoid;
	overflow: hidden;
	border-radius: 10px;
	background: var(--fj-body-bg, #f4f4f4);
}
body:not(.fj-woo-gallery-carousel) div.product div.images .woocommerce-product-gallery__wrapper > * > a,
body:not(.fj-woo-gallery-carousel) div.product div.images .woocommerce-product-gallery__wrapper > * > a > img,
body:not(.fj-woo-gallery-carousel) div.product div.images .woocommerce-product-gallery__wrapper > * > img {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	display: block !important;
	float: none !important;
}
.woocommerce div.product .woocommerce-product-gallery__image a { display: block; }

/* WooCommerce arranca la galería en opacity:0 y la revela por JS con una
   transición. Sin carrusel esa transición se queda colgada en su primer
   fotograma —playState «running», currentTime 0 para siempre— y la galería
   nunca llega a verse, aunque el estilo en línea diga opacity:1. Se fuerza
   la opacidad y se anula la transición. */
body:not(.fj-woo-gallery-carousel) div.product div.images.woocommerce-product-gallery {
	opacity: 1 !important;
	transition: none !important;
}

/* Ancho fijo al de la columna, alto según la propia imagen. */
.woocommerce div.product .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: auto;
	object-fit: contain;
	transition: transform .4s ease;
}
.woocommerce div.product .woocommerce-product-gallery__image:hover img {
	transform: scale(1.03);
}

/* La primera cruza las dos columnas. */
.woocommerce div.product .woocommerce-product-gallery__image:first-child {
	column-span: all;
	margin-bottom: var(--fj-woo-gap, 10px);
}

@media (max-width: 520px) {
	.woocommerce div.product .woocommerce-product-gallery__wrapper { column-count: 1; }
}

/* Disparador de la ampliación */
.woocommerce div.product .woocommerce-product-gallery__trigger {
	top: 14px;
	right: 14px;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .14);
	z-index: 6;
}

/* ---------- Modo carrusel (alternativo) ---------- */

.fj-woo-gallery-carousel .woocommerce-product-gallery__wrapper {
	column-count: 1;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	background: var(--fj-body-bg, #f4f4f4);
}
.fj-woo-gallery-carousel .woocommerce-product-gallery__image { border-radius: 0; }
.fj-woo-gallery-carousel .woocommerce-product-gallery__image:first-child { column-span: none; margin-bottom: 0; }
.fj-woo-gallery-carousel .woocommerce-product-gallery__image img {
	aspect-ratio: var(--fj-woo-ratio, 4 / 5) !important;
	object-fit: cover !important;
	height: auto !important;
}
.woocommerce div.product .flex-direction-nav { list-style: none; margin: 0; padding: 0; }
.woocommerce div.product .flex-direction-nav a {
	position: absolute;
	top: 50%;
	width: 38px;
	height: 38px;
	margin-top: -19px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
	text-indent: -9999px;
	overflow: hidden;
	opacity: 0;
	transition: opacity .18s ease, transform .18s ease;
	z-index: 5;
}
.woocommerce div.product .flex-direction-nav a::before {
	content: "";
	position: absolute;
	top: 13px;
	left: 14px;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--fj-primary, #1c2c4c);
	border-bottom: 2px solid var(--fj-primary, #1c2c4c);
	transform: rotate(-45deg);
}
.woocommerce div.product .flex-direction-nav .flex-prev { left: 14px; }
.woocommerce div.product .flex-direction-nav .flex-next { right: 14px; }
.woocommerce div.product .flex-direction-nav .flex-prev::before { transform: rotate(135deg); left: 16px; }
.woocommerce div.product .woocommerce-product-gallery:hover .flex-direction-nav a { opacity: 1; }
.woocommerce div.product .flex-direction-nav .flex-disabled { opacity: 0 !important; pointer-events: none; }

/* Miniaturas */
.woocommerce div.product .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}
.woocommerce div.product .flex-control-thumbs li { width: 62px; margin: 0; float: none; }
.woocommerce div.product .flex-control-thumbs img {
	width: 62px;
	height: 62px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
	opacity: .55;
	border: 2px solid transparent;
	transition: opacity .18s ease, border-color .18s ease;
	cursor: pointer;
}
.woocommerce div.product .flex-control-thumbs img:hover { opacity: .85; }
.woocommerce div.product .flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--fj-primary, #1c2c4c);
}

/* ---------- Ampliación (PhotoSwipe) ---------- */
/* PhotoSwipe anima la opacidad de .pswp__bg de 0 a 1, así que la
   transparencia va en el propio color de fondo, no en la opacidad. */

.pswp__bg { background: var(--fj-lightbox-bg, rgba(28, 44, 76, .9)) !important; }
.pswp__caption__center { text-align: center; font-family: var(--fj-font-body); }
.pswp__button { opacity: .85; }
.pswp__button:hover { opacity: 1; }

/* v1.3 — escala del resumen bajada un punto para que no compita con la
   galería. En una columna del 25 % un serif grande parte por sílabas. */
.woocommerce div.product .product_title {
	font-size: var(--fj-fs-h4);
	line-height: 1.22;
	margin-bottom: 10px;
	overflow-wrap: break-word;
	hyphens: auto;
}
.woocommerce div.product .woocommerce-tabs .panel { font-size: 15px; }

/* El botón de cotización venía en tamaño grande del plugin: en una columna
   estrecha resultaba desproporcionado frente al resto del resumen. */
.woocommerce div.product div.summary .fe-single-cta { padding: 16px; }
.woocommerce div.product div.summary .fe-single-cta .fe-btn {
	padding: 11px 16px;
	font-size: 14px;
	gap: 7px;
	white-space: normal;
	text-align: center;
	line-height: 1.25;
}
.woocommerce div.product div.summary .fe-single-cta .fe-ico {
	width: 17px;
	height: 17px;
}
.woocommerce div.product div.summary .fe-single-cta__note {
	font-size: 12px;
	line-height: 1.45;
	margin-top: 10px;
}
.woocommerce div.product div.summary .button {
	white-space: normal;
	text-align: center;
	font-size: 14px;
}
.woocommerce div.product .product_title::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	background: var(--fj-accent);
	margin-top: 12px;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--fj-muted);
	font-size: 14.5px;
	line-height: 1.6;
}

.woocommerce div.product .product_meta {
	font-size: 12.5px;
	color: var(--fj-muted);
	border-top: 1px solid var(--fj-border);
	padding-top: 14px;
	margin-top: 18px;
}

/* Pestañas */

.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 34px 0 0;
	border-bottom: 1px solid var(--fj-border);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0 22px 0 0;
	padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	padding: 12px 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--fj-muted);
	border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--fj-primary);
	border-bottom-color: var(--fj-accent);
}

/* Productos relacionados */

.woocommerce .related > h2,
.woocommerce .upsells > h2 {
	font-size: var(--fj-fs-h4);
	margin: 44px 0 22px;
}

/* Botones nativos de Woo --------------------------------------------------- */

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background: var(--fj-primary);
	color: #fff;
	border-radius: var(--fj-btn-radius);
	font-family: var(--fj-font-body);
	font-weight: 600;
	font-size: 14.5px;
	text-transform: var(--fj-btn-tt);
	padding: 11px 20px;
	line-height: 1.2;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--fj-primary-dark);
	color: #fff;
}
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var(--fj-accent);
}

/* Avisos */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--fj-primary);
	background: var(--fj-content-bg);
	border-radius: var(--fj-card-radius);
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--fj-primary); }

/* Migas de Woo ------------------------------------------------------------- */

.woocommerce .fj-breadcrumbs { margin: 0; }

/* Modo cotización ---------------------------------------------------------- */

body.fj-quote-mode ul.products li.product .price,
body.fj-quote-mode div.product p.price { display: none; }

body.fj-quote-mode .fj-product-body { padding-bottom: 18px; }

/* Espacio reservado para el botón «Cotizar» del plugin Fajardos Enhancer. */
body.fj-quote-mode ul.products li.product .fe-btn--loop { margin-top: auto; }

body.fj-quote-mode .cart,
body.fj-quote-mode .woocommerce-cart-form,
body.fj-quote-mode .site-header-cart,
body.fj-quote-mode .woocommerce-menu-cart { display: none !important; }