/**
 * Jarrucheo · Listado de tienda y de categoría.
 *
 * Medido sobre d2_listado_ficha_desktop.pdf, que viene exportado a 660 px y
 * se reescala a los 1366 del resto de diseños (factor 2,07):
 *
 *   banda oscura de portada … 549 px de alto
 *   caja de contenido ……… 1174 px (margen de 94)
 *   rejilla ……………………… 3 columnas de 327 con calle de 96
 *
 * El listado va sobre base crema, al revés que la portada. Por eso el fondo
 * se pinta aquí y no se reutiliza `jarrucheo-pagina`, que es burdeos.
 */

body.jarrucheo-tienda{
	background-color:var(--j-crema);
	color:var(--j-burdeos);
}
body.jarrucheo-tienda .site-main,
body.jarrucheo-tienda .page-content,
body.jarrucheo-tienda main#content{
	max-width:none;margin:0;padding:0;
}

.j-tienda{ overflow-x:hidden; }
.j-tienda .j-contenedor{ width:min(100% - 48px, 1174px); }

/* --- Portada de la categoría ------------------------------------------- */
.j-tienda__portada{
	background:var(--j-burdeos);
	padding-block:56px 60px;
	min-height:549px;
	display:grid;
	align-items:center;
}
.j-tienda__portada-inner{
	display:grid;
	grid-template-columns:minmax(0,500px) minmax(0,1fr);
	gap:76px;
	align-items:center;
}
.j-tienda__foto{
	width:100%;
	aspect-ratio:500/330;
	object-fit:cover;
	display:block;
}
.j-tienda__titulo{
	margin:0 0 22px;
	max-width:14ch;
	color:var(--j-lima);
}
.j-tienda__desc{
	font-size:21px;
	line-height:1.42;
	max-width:34ch;
	color:var(--j-crema);
}
.j-tienda__desc a{ color:var(--j-lima);text-underline-offset:4px; }
.j-tienda__desc p{ margin:0 0 14px; }
.j-tienda__desc ul{ margin:0 0 14px;padding-inline-start:22px; }
.j-tienda__desc p:last-child{ margin-bottom:0; }

/* --- Cuerpo ------------------------------------------------------------ */
.j-tienda__cuerpo{
	background:var(--j-crema);
	color:var(--j-burdeos);
	padding-block:44px 96px;
}

.j-tienda__barra{
	display:flex;flex-wrap:wrap;gap:16px 40px;
	align-items:center;justify-content:space-between;
	margin-block-end:38px;
}
.j-miga{
	font-size:15px;letter-spacing:.06em;text-transform:uppercase;
	color:color-mix(in srgb, var(--j-burdeos) 68%, transparent);
}
.j-miga a{ color:inherit;text-decoration:none; }
.j-miga a:hover{ text-decoration:underline;text-underline-offset:4px; }

.j-tienda__orden{ display:flex;align-items:center;gap:26px;flex-wrap:wrap; }
.j-tienda__orden .woocommerce-result-count{
	margin:0;font-size:15px;letter-spacing:.06em;text-transform:uppercase;
}
.j-tienda__orden form.woocommerce-ordering{ margin:0; }
.j-tienda__orden select{
	border:1px solid color-mix(in srgb, var(--j-burdeos) 35%, transparent);
	background:transparent;color:var(--j-burdeos);
	font-family:var(--j-fuente-texto);font-size:15px;
	padding:8px 12px;border-radius:0;
}

/* --- Filtros + rejilla -------------------------------------------------- */
/* ── LA REJILLA DE 3 COLUMNAS CON LOS FILTROS DENTRO ─────────────────────
 *
 * En el diseño la primera fila lleva los filtros y DOS productos, y las
 * filas siguientes llevan TRES, porque los filtros ya no ocupan sitio. No
 * son dos rejillas una al lado de otra: es una sola de tres columnas donde
 * la barra de filtros es la primera celda.
 *
 * Para conseguirlo, el <div> de la rejilla y el <ul> de WooCommerce se
 * declaran `display:contents`: desaparecen como cajas y sus <li> pasan a ser
 * celdas de esta rejilla. Es la única forma de hacerlo sin tocar el bucle de
 * WooCommerce, que es justo lo que no conviene tocar.
 *
 * El <ul> lleva role="list" añadido desde PHP: con display:contents algunos
 * navegadores dejan de anunciarlo como lista.
 * -------------------------------------------------------------------- */
.j-tienda__cols{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:56px 96px;
	align-items:start;
}
.j-filtros{ grid-column:1; }
.j-tienda__rejilla{ display:contents; }

.j-filtros__titulo{
	margin:0 0 22px;font-family:var(--j-fuente-texto);
	font-size:19px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}
.j-filtro{
	border-block-end:1px solid color-mix(in srgb, var(--j-burdeos) 22%, transparent);
	padding-block:14px;
}
.j-filtro summary{
	list-style:none;cursor:pointer;
	display:flex;align-items:center;justify-content:space-between;gap:12px;
	font-size:17px;
}
.j-filtro summary::-webkit-details-marker{ display:none; }
/* El signo se genera desde CSS para que siga al estado real del <details>
   y no haya que sincronizarlo con JS. */
.j-filtro summary::after{ content:"+";font-size:22px;line-height:1; }
.j-filtro[open] summary::after{ content:"–"; }
.j-filtro ul{ margin:14px 0 4px;padding:0;list-style:none;display:grid;gap:9px; }
.j-filtro a{
	display:flex;align-items:center;justify-content:space-between;gap:10px;
	color:inherit;text-decoration:none;font-size:16px;
}
.j-filtro a:hover{ text-decoration:underline;text-underline-offset:4px; }
.j-filtro__num{ opacity:.55;font-size:14px; }

.j-filtros__ayuda{ margin-block-start:34px;display:grid;gap:10px;justify-items:start; }
.j-filtros__pregunta{ margin:0;font-size:17px;line-height:1.45;max-width:24ch; }
.j-filtros__ayuda p{ margin:0;font-size:17px; }
.j-filtros__ayuda .j-btn{ margin-block-start:12px;min-width:196px; }

/* --- Rejilla de productos ----------------------------------------------
 *
 * OJO con esto. WooCommerce trae `woocommerce-layout.css`, que maqueta el
 * listado con floats y anchos en porcentaje (`li.product{float:left;
 * width:22.05%}`). Si no se anula, gana al `display:grid` de aquí y las
 * tarjetas salen estrechas y descolocadas —que es exactamente lo que pasaba
 * la primera vez que se subió esto—. No se puede quitar esa hoja sin más,
 * porque también maqueta el carrito y el checkout; se anula solo aquí.
 * -------------------------------------------------------------------- */
.j-tienda__rejilla ul.products,
.j-tienda__rejilla .products{
	display:contents;
	margin:0;padding:0;list-style:none;
}

/* WooCommerce mete un ::before y un ::after de limpieza de floats en el
   <ul>. Con display:grid o contents esos dos pseudoelementos cuentan como
   celdas, y el primer producto se iba a la segunda columna dejando un hueco
   en la primera. Costó un rato verlo: el hueco parecía un producto sin
   pintar. Con !important porque la regla de Woo tiene la misma
   especificidad y gana según el orden de carga de las hojas. */
.j-tienda__rejilla ul.products::before,
.j-tienda__rejilla ul.products::after,
.j-tienda__rejilla .products::before,
.j-tienda__rejilla .products::after{
	content:none !important;
	display:none !important;
}

.j-tienda__rejilla ul.products li.product,
.j-tienda__rejilla .products > li{
	float:none !important;
	width:auto !important;
	margin:0 !important;
	clear:none !important;
}

.j-ficha{ margin:0;display:grid;gap:0;align-content:start; }
.j-ficha__foto{ display:block; }
.j-ficha__foto img{
	width:100%;aspect-ratio:1;object-fit:cover;display:block;
	background:var(--j-blanco);
}
.j-ficha__pie{
	display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
	padding-block-start:16px;
}
.j-ficha__nombre{
	margin:0;font-family:var(--j-fuente-texto);
	font-size:19px;font-weight:400;line-height:1.28;max-width:18ch;
}
.j-ficha__nombre a{ color:inherit;text-decoration:none; }
.j-ficha__nombre a:hover{ text-decoration:underline;text-underline-offset:4px; }

.j-ficha__anadir{
	flex:none;display:grid;place-items:center;
	width:40px;height:40px;padding:0;margin:0;
	background:transparent;border:0;box-shadow:none;
	color:var(--j-burdeos);border-radius:0;
}
.j-ficha__anadir svg{ width:26px;height:26px; }
.j-ficha__anadir:hover{ background:transparent;color:var(--j-oliva); }
/* WooCommerce añade «Ver carrito» detrás del botón AJAX; en esta tarjeta
   sobra, el aviso ya lo da el contador de la cabecera. */
.j-ficha .added_to_cart{ display:none; }

.j-ficha__precio{
	margin:14px 0 0;font-size:21px;font-weight:600;
}
.j-ficha__precio del{ opacity:.5;font-weight:400;margin-inline-end:8px; }

/* --- Móvil -------------------------------------------------------------- */
@media (max-width:900px){
	.j-tienda__portada{ min-height:0;padding-block:32px 36px; }
	.j-tienda__portada-inner{ grid-template-columns:1fr;gap:26px; }
	.j-tienda__titulo{ max-width:none; }
	.j-tienda__desc{ max-width:none;font-size:18px; }
	.j-tienda__cols{ grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px; }
	.j-filtros{ grid-column:1 / -1; }
	.j-ficha__nombre{ font-size:16px; }
	.j-ficha__precio{ font-size:18px; }
	.j-tienda__barra{ margin-block-end:24px; }
}

/* =========================================================================
 * FICHA DE PRODUCTO
 *
 * Medido sobre la página 4 de d2_listado_ficha (660 px → 1366):
 *   caja de contenido …… 1172  (margen 97)
 *   foto principal ……… 584 × 688
 *   miniaturas ………………… 180 × 188, calle de 22
 *   columna derecha …… 548, calle de 40
 * ====================================================================== */
body.jarrucheo-producto{
	background-color:var(--j-crema);
	color:var(--j-burdeos);
}
body.jarrucheo-producto .site-main,
body.jarrucheo-producto .page-content,
body.jarrucheo-producto main#content{ max-width:none;margin:0;padding:0; }

.j-producto-pagina{ overflow-x:hidden; }
.j-producto .j-contenedor{ width:min(100% - 48px, 1172px); }

.j-producto__cabecera{ background:var(--j-crema);padding-block:36px 60px;display:flow-root; }
.j-producto__cabecera .j-miga{ margin-block-end:30px; }

.j-producto__cols{
	display:grid;
	grid-template-columns:minmax(0,584fr) minmax(0,548fr);
	gap:40px;
	align-items:start;
}

/* --- Galería ------------------------------------------------------------ */
.j-producto__galeria .woocommerce-product-gallery{ width:100% !important;float:none !important;margin:0; }
.j-producto__galeria .woocommerce-product-gallery__wrapper{ margin:0; }
.j-producto__galeria img{ width:100%;height:auto;display:block; }
.j-producto__galeria .woocommerce-product-gallery__image:first-child img{
	aspect-ratio:584/688;object-fit:cover;
}
.j-producto__galeria .flex-control-thumbs{
	display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
	margin:22px 0 0;padding:0;list-style:none;
}
.j-producto__galeria .flex-control-thumbs li{ margin:0; }
.j-producto__galeria .flex-control-thumbs img{
	aspect-ratio:180/188;object-fit:cover;cursor:pointer;opacity:.72;
	transition:opacity .15s ease;
}
.j-producto__galeria .flex-control-thumbs img:hover,
.j-producto__galeria .flex-control-thumbs img.flex-active{ opacity:1; }
.j-producto__galeria .woocommerce-product-gallery__trigger{ display:none; }

/* --- Resumen ------------------------------------------------------------ */
.j-producto__antetitulo{
	margin:0 0 10px;font-size:19px;letter-spacing:.04em;text-transform:uppercase;
	color:var(--j-oliva);
}
.j-producto__titulo{
	margin:0 0 22px;color:var(--j-burdeos);
	font-size:clamp(28px,3.1vw,42px);line-height:1.14;letter-spacing:normal;
	text-transform:uppercase;
}
.j-producto__etiquetas{
	display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px;padding:0;list-style:none;
}
.j-producto__etiquetas li{
	background:var(--j-oliva);color:var(--j-crema);
	font-size:15px;line-height:1;padding:9px 14px;
}
.j-producto__entradilla{ font-size:17px;line-height:1.5;max-width:52ch; }
.j-producto__entradilla p{ margin:0 0 12px; }
.j-producto__entradilla p:last-child{ margin-bottom:0; }

.j-producto__precio{
	margin:30px 0 4px;font-family:var(--j-fuente-texto);
	font-size:38px;font-weight:700;line-height:1;
}
.j-producto__precio del{ font-size:24px;font-weight:400;opacity:.5;margin-inline-end:10px; }
.j-producto__precio ins{ text-decoration:none; }
.j-producto__envio{ margin:0 0 26px;font-size:13px;opacity:.75; }

/* --- El formulario de WooCommerce, vestido ------------------------------ */
.j-producto__resumen form.cart{
	display:grid;gap:14px;margin:0 0 26px;
}
.j-producto__resumen form.cart .quantity{ display:inline-flex; }
.j-producto__resumen form.cart .quantity input{
	width:96px;height:44px;text-align:center;
	border:1px solid var(--j-burdeos);background:transparent;color:inherit;
	font-family:var(--j-fuente-texto);font-size:17px;border-radius:0;
}
.j-producto__resumen form.cart button[type="submit"],
.j-producto__resumen form.cart .single_add_to_cart_button{
	width:100%;min-height:50px;
	display:grid;place-items:center;
	background:var(--j-burdeos);color:var(--j-lima);
	border:1px solid var(--j-burdeos);border-radius:0;
	font-family:var(--j-fuente-texto);font-size:17px;font-weight:600;
	letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
	box-shadow:var(--j-relieve);
	transition:transform .15s ease,box-shadow .15s ease;
}
.j-producto__resumen form.cart button[type="submit"]:hover{
	box-shadow:none;transform:translate(2px,2px);
}
/* Variaciones: la tabla de Woo se convierte en dos filas legibles. */
.j-producto__resumen table.variations{ width:100%;border:0;margin:0 0 6px; }
.j-producto__resumen table.variations th,
.j-producto__resumen table.variations td{ border:0;padding:0 0 10px;text-align:start; }
.j-producto__resumen table.variations label{
	font-size:14px;letter-spacing:.06em;text-transform:uppercase;
}
.j-producto__resumen table.variations select{
	width:100%;padding:11px 12px;border-radius:0;
	border:1px solid color-mix(in srgb, var(--j-burdeos) 40%, transparent);
	background:transparent;color:inherit;font-family:var(--j-fuente-texto);font-size:16px;
}
.j-producto__resumen .woocommerce-variation-price{ margin-block-end:10px;font-size:24px;font-weight:700; }

/* --- Pago seguro y garantías -------------------------------------------- */
.j-producto__seguro{ border-block-start:1px solid color-mix(in srgb, var(--j-burdeos) 25%, transparent);padding-block-start:18px; }
.j-producto__seguro > p{
	margin:0 0 18px;text-align:center;
	font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.7;
}
.j-garantias-iconos{
	display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;
	margin:0;padding:0;list-style:none;text-align:center;
}
.j-garantias-iconos li{
	font-size:12px;line-height:1.28;letter-spacing:.04em;text-transform:uppercase;
	display:grid;justify-items:center;gap:8px;
}
.j-garantias-iconos svg{ width:34px;height:34px;color:var(--j-burdeos); }

/* --- Historia ------------------------------------------------------------ */
.j-producto__historia{ background:var(--j-crema);padding-block:70px 20px;display:flow-root; }
.j-producto__historia-cols{
	display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:90px;align-items:start;
}
.j-producto__historia .j-titular--seccion{ color:var(--j-burdeos);margin-block-end:10px; }
.j-producto__historia .j-antetitulo{ color:var(--j-oliva); }
.j-producto__texto{ font-size:17px;line-height:1.6; }
.j-producto__texto p{ margin:0 0 16px; }

/* --- Relacionados -------------------------------------------------------- */
.j-producto__relacionados{ background:var(--j-crema);padding-block:60px 80px;display:flow-root; }

/* OJO: la sección de relacionados de WooCommerce se llama `.related.products`
   —lleva la clase `products` ella misma, no solo el <ul>—. Si se estila
   `.products` a secas, la SECCIÓN se convierte en rejilla y el titular se
   superpone a los productos. Por eso aquí todo va contra `ul.products`. */
.j-producto__relacionados .related,
.j-producto__relacionados .up-sells{ display:block; }

/* Y por lo mismo, el titular se acota a hijo directo: si no, esta regla
   pilla también los <h2> del nombre de cada tarjeta y los pinta a 44px en
   Xanh Mono, que es justo como se veía. */
.j-producto__relacionados > .j-contenedor > section > h2,
.j-producto__relacionados .related > h2,
.j-producto__relacionados .up-sells > h2{
	margin:0 0 34px;font-family:var(--j-fuente-titulos);font-weight:400;
	font-size:clamp(28px,3.2vw,44px);line-height:1.14;letter-spacing:normal;
	text-transform:uppercase;color:var(--j-burdeos);max-width:16ch;
}

.j-producto__relacionados ul.products{
	display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 30px;
	margin:0;padding:0;list-style:none;
}
.j-producto__relacionados ul.products::before,
.j-producto__relacionados ul.products::after{ content:none !important;display:none !important; }
.j-producto__relacionados ul.products li.product{
	float:none !important;width:auto !important;margin:0 !important;clear:none !important;
}

@media (max-width:900px){
	.j-producto__cols{ grid-template-columns:1fr;gap:28px; }
	.j-producto__historia-cols{ grid-template-columns:1fr;gap:22px; }
	.j-producto__precio{ font-size:30px; }
	.j-garantias-iconos{ grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 10px; }
	.j-producto__relacionados ul.products{ grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px; }
}