/* ------------------------------------------------------------------ *
 * WooCommerce y tienda.
 *
 * Salio de `style.css` el 2026-09-02. **No es un archivo nuevo: es un corte.**
 *
 * El motivo NO es el tamano, aunque asi empezo. `scripts/ci/sloc.py` daba 1029
 * para `style.css` contra un limite duro de 800, y sobre ese numero se decidio
 * partirlo. El numero estaba mal: sloc.py no conoce la extension `.css` y cae
 * a contar lineas no vacias, comentarios incluidos -- y este tema comenta
 * mucho. El SLOC real era 495. Nunca estuvo sobre el limite.
 *
 * El corte se mantiene por la razon que si se sostiene, y que salio del cotejo
 * con el original: la copia servia el CSS de la tienda y el de /catalogo/ y
 * /somos/ en CADA entrada, y el original no lo hace. Ahora se encolan donde
 * hacen falta (ver `functions.php`).
 *
 * Nota para quien mida CSS en este repositorio: sloc.py infla los archivos muy
 * comentados. Hasta que sepa leer comentarios de CSS, un `.css` se mide aparte.
 * ------------------------------------------------------------------ */

/* -------------------------------------------------------- WooCommerce */

.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border-left: 4px solid var(--acento); background: #f7f7f7; padding: 1em 1.2em;
	list-style: none; margin: 0 0 1.6em; font-size: 15px;
}
.woocommerce-error { border-left-color: #c00; }
.woocommerce .button, .woocommerce button.button, .woocommerce a.button,
.woocommerce #respond input#submit, .wc-block-components-button {
	background: var(--acento) !important; color: var(--tinta) !important;
	border: 1px solid var(--tinta) !important; border-radius: 0 !important;
	font-family: inherit !important; font-weight: 500 !important;
	text-transform: uppercase; letter-spacing: .08em; font-size: var(--t-meta) !important;
	padding: .85em 2em !important;
}
.woocommerce .price, .woocommerce-Price-amount { font-variant-numeric: tabular-nums; }
.woocommerce .quantity input { font: inherit; padding: .4em; border: 1px solid var(--tinta); }
.woocommerce table.shop_table { border-collapse: collapse; width: 100%; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td {
	border: 1px solid var(--linea); padding: .7em; text-align: left; }
.woocommerce-product-gallery { margin-bottom: 24px; }

/* --- ficha de producto -------------------------------------------------
 *
 * **WooCommerce maqueta esta página con floats**: `.woocommerce-product-gallery`
 * y `.summary` van a `float:left` con `width:48%`. El bloque de pestañas de
 * abajo no los limpia, así que «Productos relacionados» se montaba ENCIMA de
 * la descripción. No es un problema de márgenes: es que nada cierra el float.
 *
 * Se reemplaza por una retícula. La galería y el resumen arriba, en dos
 * columnas; las pestañas, los relacionados y las ventas cruzadas ocupando el
 * ancho entero. Con grid no hay float que cerrar.
 *
 * La regla anterior apuntaba a `.producto`, una clase que este tema nunca
 * emite: WooCommerce escribe `div.product`. Por eso no hacía nada.
 */
.woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(30px, 4vw, 56px) var(--aire);
	align-items: start;
}
@media (min-width: 860px) {
	.woocommerce div.product { grid-template-columns: 1.02fr .98fr; }
}
/* La ESPECIFICIDAD importa acá y por eso los selectores son largos.
   WooCommerce escribe `.woocommerce div.product div.images { float:left;
   width:48% }`, que son 3 clases y 2 elementos (0,3,2). Un selector con una
   clase menos --`.woocommerce div.product > .woocommerce-product-gallery`,
   (0,3,1)-- PIERDE, y la galería seguía midiendo 261 px dentro de una columna
   de 543. Se agrega la segunda clase de cada elemento para llegar a (0,4,2) y
   ganar por especificidad, no por `!important`. */
.woocommerce div.product > div.images.woocommerce-product-gallery,
.woocommerce div.product > div.summary.entry-summary {
	float: none; width: auto; margin: 0; clear: none;
}
/* Todo lo que va DEBAJO ocupa las dos columnas. */
.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > .related,
.woocommerce div.product > .upsells,
.woocommerce div.product > .product_meta,
.woocommerce div.product > .woocommerce-product-details__short-description {
	grid-column: 1 / -1;
}
.woocommerce div.product::before,
.woocommerce div.product::after { content: none; display: none; }

/* La descripción del producto se lee como prosa, pero a todo el ancho de la
   retícula no: 66ch es el límite del resto del sitio y acá vale igual. */
.woocommerce-tabs .panel { max-width: 66ch; }
.woocommerce-tabs .wc-tabs { list-style: none; display: flex; gap: 4px;
	margin: 0 0 22px; padding: 0; border-bottom: 1px solid var(--linea); }
.woocommerce-tabs .wc-tabs li { margin: 0; }
.woocommerce-tabs .wc-tabs li a {
	display: block; padding: .7em 1.1em; font-size: var(--t-meta);
	font-weight: 500; text-transform: uppercase; letter-spacing: .07em;
	border: 1px solid transparent; border-bottom: 0;
}
.woocommerce-tabs .wc-tabs li.active a {
	border-color: var(--linea); background: var(--papel);
	box-shadow: inset 0 3px 0 var(--acento);
}
.woocommerce-tabs .wc-tabs li a:hover { text-decoration: none; background: #f7f7f7; }

.related > h2, .upsells > h2 {
	font-size: var(--t-seccion); letter-spacing: -0.3px; line-height: 26px;
	display: flex; align-items: center; gap: 9px; margin-bottom: 26px;
}
.related > h2::before, .upsells > h2::before {
	content: ""; width: 11px; height: 11px; background: var(--acento); flex: none;
}

/* La galería: la miniatura activa y la tira de abajo. */
.woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce-product-gallery .flex-control-thumbs {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
	list-style: none; margin: 8px 0 0; padding: 0;
}
.woocommerce-product-gallery .flex-control-thumbs li { margin: 0; width: auto; }

.summary .price { font-size: 22px; font-weight: 500; margin: 0 0 22px;
	font-variant-numeric: tabular-nums; }
.summary .product_title { font-size: var(--t-titular); margin-bottom: 14px; }
.summary form.cart { display: flex; gap: 10px; align-items: center;
	flex-wrap: wrap; margin-bottom: 22px; }
.product_meta { font-size: var(--t-meta); text-transform: uppercase;
	letter-spacing: .06em; color: var(--tenue); }
.product_meta a { color: var(--tinta); }


/* ------------------------------------------------------------- tienda */

.filtros--tienda { margin-bottom: 26px; }
/* Un producto agotado: el botón se ve inactivo aunque siga siendo un enlace a
   su ficha, que es lo que WooCommerce hace y está bien.
   El selector va acotado con `.woocommerce a.` porque compite contra
   `.woocommerce a.button { background: var(--acento) !important }`, que es
   (0,2,1). Con `!important` de los dos lados gana la especificidad, y
   `.boton--agotado` a secas es (0,1,0): el agotado se veía igual de comprable
   que el resto. */
.woocommerce a.boton--agotado,
.woocommerce .boton--agotado,
.ficha a.boton--agotado {
	background: none !important; border-color: var(--linea) !important;
	color: var(--tenue) !important; cursor: default;
}
.woocommerce ul.products { margin: 0; padding: 0; }
/* **El clearfix de WooCommerce ocupa una celda.** `ul.products::before` lleva
   `content:" "; display:table` para limpiar los floats de su maquetación
   original; dentro de un contenedor `display:grid` eso deja de ser invisible y
   pasa a ser un ítem más, así que la primera fila arrancaba en la SEGUNDA
   columna y la parrilla entera quedaba corrida. */
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; display: none; }
.woocommerce ul.products li.product { margin: 0; width: auto; float: none; }
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after { content: none; }
/* WooCommerce numera las filas con `first`/`last` para su maquetación por
   float. Con grid eso rompe la alineación. */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last { clear: none; }

.woocommerce-result-count, .woocommerce-ordering {
	font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .06em;
}
.woocommerce-ordering select { font: inherit; font-size: var(--t-meta);
	border: 1px solid var(--tinta); padding: .45em .6em; background: none; }

/* Galería recuperada: imágenes que en el origen estaban en una galería de
   Elementor y llegaron sueltas. Ver `inc-galerias.php`. Las columnas se
   ajustan solas al ancho disponible; en la columna de prosa (66ch) salen dos,
   a ancho completo salen cuatro. */
.galeria--recuperada {
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.galeria--recuperada li { margin: 0; }
.galeria--recuperada img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* Fichas recuperadas: imagen + título + texto que en el origen estaban en una
   parrilla de Elementor y llegaron apiladas. Ver `inc-galerias.php`. */
.parrilla--fichas {
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	margin-block: 1.6em;
}
.ficha--recuperada { gap: 6px; }
.ficha--recuperada > p:first-child { margin: 0; }
.ficha--recuperada img { width: 100%; height: auto; }
.ficha--recuperada h1, .ficha--recuperada h2, .ficha--recuperada h3,
.ficha--recuperada h4, .ficha--recuperada h5, .ficha--recuperada h6 {
	font-size: 14px; line-height: 1.3; margin: 4px 0 0;
}
.ficha--recuperada p { font-size: 12px; color: var(--tenue); margin: 0;
	text-transform: none; letter-spacing: 0; }
/* La prosa limita a 66ch; una parrilla de fichas necesita el ancho entero. */
.prosa .parrilla--fichas { max-width: none; width: 100%; }