/*
 * Puesto Modelo — Tienda
 * Estilos del shortcode [pm_tienda].
 *
 * Todo va con prefijo pm- y anidado bajo .pm-tienda para no colisionar con el
 * tema Rife. Los !important puntuales existen para pisar los estilos que Rife
 * y WooCommerce aplican globalmente a ul.products / li.product / .button.
 */

/* ── Variables de marca ──────────────────────────────────────────────────── */
.pm-tienda {
	--pm-bordo: #7a2e2e;          /* acento principal: títulos, links, paginación */
	--pm-marron: #b08050;         /* botones */
	--pm-marron-oscuro: #97693d;  /* hover de botones */
	--pm-borde: #e8e2dc;          /* bordes suaves de tarjetas y cajas */
	/* Blanco puro, y no un gris casi blanco, porque las fotos de producto vienen
	   con fondo #ffffff: cualquier otro valor dibuja un rectángulo visible
	   alrededor de la foto. Verificado sobre las 89 fotos del catálogo: 39
	   tienen fondo blanco puro (almacén, marcas) y 48 fondo negro (los cortes,
	   fotografiados sobre tabla oscura), que contra blanco se recortan igual de
	   limpio que contra gris. */
	--pm-fondo-foto: #fff;        /* fondo del recuadro de la foto */
	--pm-texto: #2b2b2b;
	--pm-texto-suave: #8a8a8a;
}

/* ── Layout general: filtros a la izquierda, grilla a la derecha ─────────── */
/* La plantilla de la página no aporta contenedor, así que el aire (ancho
   máximo centrado + padding) lo pone el propio bloque. */
.pm-tienda {
	display: grid;
	grid-template-columns: minmax(230px, 25%) minmax(0, 1fr);
	gap: 36px;
	align-items: start;
	box-sizing: border-box;
	max-width: 1440px;
	margin: 0 auto;
	padding: 36px 28px 56px;
	background: #fff;
	color: var(--pm-texto);
}

/* ── Encabezado de la tienda (ocupa las dos columnas) ────────────────────── */
.pm-encabezado {
	grid-column: 1 / -1;
	margin: 0;
}

.pm-encabezado__titulo {
	margin: 0;
	font-size: 2.2rem;
	font-weight: 900;
	line-height: 1.1;
	color: var(--pm-bordo);
}

/* Subrayado corto en el marrón de marca, como acento. */
.pm-encabezado__titulo::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	margin-top: 10px;
	border-radius: 2px;
	background: var(--pm-marron);
}

/* ── Columna de filtros ──────────────────────────────────────────────────── */

/* El botón de colapsar solo aparece en mobile (ver media query al final). */
.pm-filtros__toggle {
	display: none;
}

/* Cajas de cada filtro de BeRocket: toque liviano, sin pelear con su CSS. */
.pm-filtros .bapf_sfilter {
	margin: 0 0 18px;
	padding: 14px;
	background: #fff;
	border: 1px solid var(--pm-borde);
	border-radius: 10px;
}

.pm-filtros .bapf_sfilter .bapf_head h3,
.pm-filtros .bapf_sfilter .bapf_head .bapf_h1 {
	margin: 0 0 10px;
	font-size: 1rem;
	font-weight: 800;
	color: var(--pm-bordo);
	text-transform: none;
}

.pm-filtros .bapf_body {
	font-size: 0.9rem;
}

.pm-filtros .bapf_body a {
	color: var(--pm-texto);
}

/* Botones propios de BeRocket (aplicar / limpiar), si el grupo los muestra. */
.pm-filtros .bapf_button,
.pm-filtros .bapf_update,
.pm-filtros .bapf_reset {
	background: var(--pm-bordo);
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 8px 14px;
	font-weight: 700;
	cursor: pointer;
}

/* ── Buscador por nombre ─────────────────────────────────────────────────── */
.pm-tienda .pm-buscador {
	display: flex;
	gap: 8px;
	max-width: 420px;
	margin: 0 0 14px;
}

.pm-tienda .pm-buscador input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 10px 14px;
	background: #fff;
	border: 1px solid var(--pm-borde);
	border-radius: 8px;
	font-size: 0.95rem;
	color: var(--pm-texto);
}

.pm-tienda .pm-buscador input[type="search"]:focus {
	outline: none;
	border-color: var(--pm-bordo);
	box-shadow: 0 0 0 2px rgba(122, 46, 46, 0.15);
}

/* El `padding: 0` no es decorativo, es lo que hace visible la lupa.
   Rife imprime desde el Customizer (rife-free/css/user.css) una regla
   `input[type="submit"], button[type="submit"] { padding-left:30px; padding-right:30px }`.
   Con box-sizing:border-box y width:44px, esos 60px de padding se comían el
   ancho entero de la caja de contenido: el SVG quedaba con width 0 y el botón
   se veía como un rectángulo bordó vacío. */
.pm-tienda .pm-buscador button {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	padding: 0;
	flex-shrink: 0;
	background: var(--pm-bordo);
	color: #fff;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.pm-tienda .pm-buscador button:hover {
	background: #5f2323;
}

.pm-tienda .pm-buscador svg {
	width: 18px;
	height: 18px;
	flex: none;   /* que nunca lo achique el flex del botón */
}

.pm-tienda .pm-busqueda-activa {
	margin: 0 0 10px;
	font-size: 0.88rem;
	color: var(--pm-texto-suave);
}

.pm-tienda .pm-busqueda-activa a {
	color: var(--pm-bordo);
	font-weight: 700;
	text-decoration: underline;
}

/* ── Contador de resultados ──────────────────────────────────────────────── */
.pm-tienda .pm-resultados {
	float: none !important;   /* WooCommerce/temas lo flotan en archivos */
	width: auto !important;
	margin: 2px 0 14px;
	font-size: 0.85rem;
	color: var(--pm-texto-suave);
}

/* ── Grilla de productos ─────────────────────────────────────────────────── */

/* Reset fuerte sobre ul.products: Rife/WooCommerce le meten floats,
   márgenes negativos y clearfix. */
.pm-tienda ul.products.pm-grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	width: 100%;
	margin: 0 0 28px !important;
	padding: 0 !important;
	list-style: none !important;
}

.pm-tienda ul.products.pm-grid::before,
.pm-tienda ul.products.pm-grid::after {
	content: none !important;
	display: none !important;
}

/* Tarjeta: flex en columna para que precio y botón queden anclados abajo
   y todas las tarjetas de la fila midan lo mismo (el grid las estira). */
.pm-tienda ul.products.pm-grid > li.product {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--pm-borde);
	border-radius: 12px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
	overflow: hidden;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.pm-tienda ul.products.pm-grid > li.product:hover {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

.pm-tienda .pm-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* Foto: alto fijo, fondo blanco y object-fit contain para no recortar nada.
   El overflow:hidden es red de seguridad: si algún CSS externo vuelve a forzarle
   un alto a la imagen, se recorta acá adentro en lugar de derramarse sobre el
   nombre del producto. */
.pm-tienda .pm-card__imagen {
	display: block;
	height: 200px;
	padding: 10px;
	box-sizing: border-box;
	overflow: hidden;
	background: var(--pm-fondo-foto);
}

/* El selector es largo a propósito: tiene que ganarle en especificidad al bloque
   que quedó en Personalizar → CSS adicional para maquetar la Shop nativa de Rife:

       .woocommerce ul.products li.product img {
           height: 200px !important; margin-bottom: 12px !important;
           background: #fafafa; border-radius: 6px;
       }

   Esa regla también agarra esta grilla —también es un `ul.products`— y le ganaba
   al `height:100%` de acá por tener una clase más. Con un alto fijo de 200px
   dentro de un recuadro de 200px con 10px de padding, la foto se pasaba 10px en
   desktop y 50px en mobile (donde el recuadro baja a 160px) y terminaba dibujada
   por encima del título de la tarjeta. Ese bloque del Customizer se puede borrar
   cuando se saque la Shop vieja del menú; hasta entonces, esto lo neutraliza. */
.pm-tienda ul.products.pm-grid > li.product .pm-card__imagen img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	object-fit: contain !important;
	background: none !important;      /* el CSS adicional le pinta #fafafa a la propia img */
	border-radius: 0 !important;
}

/* Nombre: tipografía gruesa en bordó, máximo dos líneas. */
.pm-tienda .pm-card__nombre {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	padding: 12px 14px 4px;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--pm-bordo);
}

/* Precio: margin-top auto lo empuja (junto al botón) al fondo de la tarjeta.
   El HTML interno viene de get_price_html(), con lo que inyecte el plugin de
   precio por peso incluido. */
.pm-tienda .pm-card__precio {
	display: block;
	/* !important porque WooCommerce y Rife le fijan un margin propio a `.price`,
	   y con eso se perdía el `auto` que ancla precio y botón al pie de la
	   tarjeta: los botones quedaban a distinta altura según el título ocupara
	   una o dos líneas. */
	margin-top: auto !important;
	padding: 6px 14px 0;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--pm-texto);
}

.pm-tienda .pm-card__precio del {
	margin-right: 4px;
	color: #999;
	font-weight: 400;
}

.pm-tienda .pm-card__precio ins {
	text-decoration: none;
}

/* Sufijos tipo "precio estimado por kg": misma línea de estilo, más discretos. */
.pm-tienda .pm-card__precio small,
.pm-tienda .pm-card__precio .woocommerce-price-suffix {
	display: block;
	font-size: 0.78rem;
	font-weight: 400;
	color: var(--pm-texto-suave);
}

/* Botón "Agregar" con el marrón de marca. Cubre <a> y <button> porque el
   template del loop puede generar cualquiera de los dos. */
.pm-tienda .pm-card__accion {
	padding: 10px 14px 14px;
}

/* Este bloque tiene que deshacer dos cosas que Rife le hace a todo botón de
   producto, y por eso lleva tantos !important:

   1. Lo saca del flujo: `position:absolute; bottom:0; left:50%;
      transform:translateX(-50%) translateY(25px)`. Es el efecto de Rife de
      "el botón asoma al pasar el mouse". Ahí la tarjeta queda con un hueco
      vacío abajo, en desktop el botón no se ve nunca (está corrido 25px hacia
      abajo y la tarjeta tiene overflow:hidden) y en mobile, donde el :hover
      queda pegado al tocar, aparece superpuesto encima de la foto y a lo ancho
      de toda la tarjeta. Acá la grilla es de compra directa: el botón se ve
      siempre y ocupa su lugar.
   2. Le suma 30px de padding lateral con box-sizing content-box, que se sumaban
      al width:100% — el botón medía 261px dentro de una tarjeta de 231px y
      quedaba recortado contra los dos bordes, sin esquinas redondeadas y sin
      aire. Eso era lo que le daba el aspecto de barra vieja.

   El hover se resuelve con color y sombra, sin transform, justamente para no
   volver a mover un elemento que en touch se queda en :hover. */
.pm-tienda .pm-card__accion .button,
.pm-tienda .pm-card__accion a.button,
.pm-tienda .pm-card__accion button.button {
	/* `relative` y no `static`: alcanza para devolverlo al flujo normal, y de paso
	   sigue sirviendo de referencia al `::after` absoluto con el que WooCommerce
	   dibuja el spinner de "agregando…". */
	position: relative !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	transform: none !important;
	float: none !important;
	box-sizing: border-box !important;
	/* Flex + min-height en vez de confiar en el line-height: Rife le fija uno de
	   25px que dejaba el botón demasiado bajo para tocarlo cómodo en el celular
	   (44px es el mínimo razonable para un target táctil). */
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto !important;
	min-height: 44px;
	margin: 0 !important;
	padding: 12px 14px !important;
	background: var(--pm-marron) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 10px !important;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	opacity: 1 !important;
	visibility: visible !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
	transition: background 0.15s ease, box-shadow 0.15s ease;
}

.pm-tienda .pm-card__accion .button:hover,
.pm-tienda .pm-card__accion .button:focus {
	background: var(--pm-marron-oscuro) !important;
	box-shadow: 0 3px 10px rgba(122, 46, 46, 0.18);
}

/* Estado "agregando…" del AJAX de WooCommerce. */
.pm-tienda .pm-card__accion .button.loading {
	opacity: 0.7;
}

/* Link "Ver carrito" que WooCommerce agrega después de sumar al carrito. */
.pm-tienda .pm-card__accion .added_to_cart {
	display: block;
	margin-top: 8px;
	font-size: 0.85rem;
	text-align: center;
	color: var(--pm-bordo);
	text-decoration: underline;
}

/* ── Estado vacío (sin resultados para los filtros elegidos) ─────────────── */
.pm-tienda .pm-vacio {
	grid-column: 1 / -1;
	padding: 48px 16px;
	border: 1px dashed var(--pm-borde);
	border-radius: 12px;
	text-align: center;
	color: var(--pm-texto-suave);
}

.pm-tienda .pm-vacio__reset {
	display: inline-block;
	margin-top: 10px;
	color: var(--pm-bordo);
	font-weight: 700;
	text-decoration: underline;
}

/* ── Paginación ──────────────────────────────────────────────────────────── */
.pm-tienda .pm-paginacion {
	margin-top: 6px;
	text-align: center;
}

.pm-tienda .pm-paginacion ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	border: 0 !important;
}

.pm-tienda .pm-paginacion ul.page-numbers li {
	margin: 0 !important;
	border: 0 !important;
	overflow: visible;
}

.pm-tienda .pm-paginacion li > .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	background: #fff;
	border: 1px solid var(--pm-borde);
	border-radius: 8px;
	color: var(--pm-bordo);
	font-weight: 600;
	text-decoration: none;
}

.pm-tienda .pm-paginacion li > a.page-numbers:hover {
	border-color: var(--pm-bordo);
}

.pm-tienda .pm-paginacion li > .page-numbers.current {
	background: var(--pm-bordo);
	border-color: var(--pm-bordo);
	color: #fff;
}

.pm-tienda .pm-paginacion li > .page-numbers.dots {
	border: 0;
	background: none;
	color: var(--pm-texto-suave);
}

/* ── Tablet: grilla de 3 columnas ────────────────────────────────────────── */
@media (max-width: 1100px) {
	.pm-tienda ul.products.pm-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ── Mobile: filtros arriba (colapsables) y grilla de 2 columnas ─────────── */
@media (max-width: 900px) {
	.pm-tienda {
		grid-template-columns: 1fr;
		gap: 18px;
		padding: 20px 16px 40px;
	}

	.pm-encabezado__titulo {
		font-size: 1.6rem;
	}

	/* Botón que abre/cierra los filtros (el JS alterna .pm-abierto). */
	.pm-filtros__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 12px 16px;
		background: #fff;
		border: 2px solid var(--pm-bordo);
		border-radius: 10px;
		color: var(--pm-bordo);
		font-size: 1rem;
		font-weight: 800;
		cursor: pointer;
	}

	.pm-filtros__flecha {
		transition: transform 0.15s ease;
	}

	.pm-filtros.pm-abierto .pm-filtros__flecha {
		transform: rotate(180deg);
	}

	.pm-filtros__contenido {
		display: none;
		margin-top: 12px;
	}

	.pm-filtros.pm-abierto .pm-filtros__contenido {
		display: block;
	}
}

@media (max-width: 700px) {
	.pm-tienda ul.products.pm-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.pm-tienda .pm-card__imagen {
		height: 160px;
	}

	.pm-tienda .pm-card__nombre {
		font-size: 0.88rem;
	}
}