/*
 * PF Todos los Productos — sección «products» de Hardware Store Homepage.dc.html
 * + paginación de Category Page.dc.html. Solo estructura.
 */

.pf-prods-root {
	container-type: inline-size;
}

/* Valores base también fuera de .pf-prods: las tarjetas se reutilizan en
   el archivo, la ficha y el 404. El widget de productos los sobrescribe. */
.pf-prods-root,
.pf-prods {
	--pf-card-min: 230px;
	--pf-grid-gap: 20px;
	--pf-card-img-h: 140px;
}

.pf-prods {
	padding: 40px 0 64px;
	scroll-margin-top: 90px;
}

.pf-prods__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 24px;
}

.pf-prods__title {
	margin: 0;
	font-family: var(--pf-font-display);
	font-weight: 800;
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--pf-ink);
}

.pf-prods__count {
	margin: 0;
	font-size: 13.5px;
	color: var(--pf-text-3);
}

.pf-prods__empty {
	display: none;
	margin: 0;
	padding: 60px 0;
	text-align: center;
	font-size: 15px;
	color: var(--pf-muted);
}

.pf-prods.is-empty .pf-prods__empty {
	display: block;
}

.pf-prods__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(var(--pf-card-min), 100%), 1fr));
	gap: var(--pf-grid-gap);
	transition: opacity 0.15s ease;
}

.pf-prods[aria-busy="true"] .pf-prods__grid,
.pf-prods[aria-busy="true"] .pf-prods__pager {
	opacity: 0.45;
	pointer-events: none;
}

/* ---------- Tarjeta ---------- */

.pf-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	padding: 16px;
	border: 1px solid var(--pf-line);
	border-radius: 16px;
	background: #fff;
	transition: box-shadow 0.15s ease;
}

.pf-card:hover {
	box-shadow: 0 8px 24px rgba(18, 23, 58, 0.08);
}

.pf-card__media {
	position: relative;
	display: block;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}

.pf-prods-root .pf-card__img {
	display: block;
	width: 100%;
	height: var(--pf-card-img-h);
	object-fit: contain;
	border-radius: 10px;
}

.pf-card__badge {
	position: absolute;
	top: 8px;
	left: 8px;
	padding: 4px 8px;
	border-radius: 5px;
	background: var(--pf-ink);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.2;
}

.pf-card__stock {
	align-self: flex-start;
	padding: 3px 8px;
	border-radius: 6px;
	background: var(--pf-warn-bg);
	color: var(--pf-warn);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
}

.pf-card__stock.is-out {
	background: var(--pf-soft);
	color: var(--pf-text-3);
}

.pf-prods-root .pf-card__name {
	margin: 0;
	min-height: 36px;
	font-family: var(--pf-font-body);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: normal;
	text-transform: none;
}

.pf-card__name a {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--pf-ink);
}

.pf-card__name a:hover {
	color: var(--pf-orange);
}

.pf-card__price {
	font-family: var(--pf-font-display);
	font-weight: 800;
	font-size: 16px;
	line-height: 1.3;
	color: var(--pf-ink);
}

.pf-card__price del {
	margin-right: 6px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--pf-muted);
}

.pf-card__price ins {
	text-decoration: none;
}

.pf-card__price .woocommerce-price-suffix {
	font-family: var(--pf-font-body);
	font-weight: 500;
	font-size: 11px;
	color: var(--pf-muted);
}

.pf-card__action {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* El botón es el de WooCommerce (a.button): el tema lo pinta a su manera,
   por eso lleva la raíz delante y cubre :hover/:focus/:visited. */
body .pf-prods-root .pf-card__action a.pf-card__btn,
body .pf-prods-root .pf-card__action a.pf-card__btn:visited {
	display: block;
	width: 100%;
	margin: 0;
	padding: 10px;
	border: 0;
	border-radius: 8px;
	background-color: var(--pf-orange);
	color: #fff;
	font-family: var(--pf-font-body);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	transition: background-color 0.15s ease;
}

body .pf-prods-root .pf-card__action a.pf-card__btn:hover,
body .pf-prods-root .pf-card__action a.pf-card__btn:focus {
	background-color: var(--pf-orange-dark);
	color: #fff;
}

body .pf-prods-root .pf-card__action a.pf-card__btn.loading {
	opacity: 0.7;
}

body .pf-prods-root .pf-card__action a.pf-card__btn.added::after {
	content: " ✓";
}

/* «Solicitar cotización» (WhatsApp): un fragmento del sitio lo pone en lugar
   del botón de compra en productos sin precio público. Mismo tamaño que el
   botón de la tarjeta, en contorno para que no se lea como compra. */
.pf-prods-root .pf-card__action .ask-quote,
.pf-prods-root .pf-card__action .ask-quote:visited {
	display: block;
	width: 100%;
	margin: 0;
	padding: 8.5px 10px;
	border: 1.5px solid var(--pf-navy);
	border-radius: 8px;
	background: #fff;
	color: var(--pf-navy);
	font-family: var(--pf-font-body);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-transform: none;
	box-shadow: none;
}

.pf-prods-root .pf-card__action .ask-quote:hover,
.pf-prods-root .pf-card__action .ask-quote:focus {
	background: var(--pf-navy);
	color: #fff;
}

.pf-prods-root .pf-card__price:empty {
	display: none;
}

/* Enlace «Ver carrito» que WooCommerce añade tras el AJAX. */
.pf-prods-root .pf-card__action .added_to_cart {
	display: block;
	text-align: center;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--pf-navy);
	text-decoration: underline;
}

/* ---------- Paginación (Category Page.dc.html) ---------- */

.pf-prods__pager:empty {
	display: none;
}

.pf-pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 40px;
}

.pf-pager__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 9px 14px;
	border: 1.5px solid var(--pf-line-2);
	border-radius: 8px;
	background: #fff;
	color: var(--pf-text);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1;
	transition: border-color 0.15s ease, color 0.15s ease;
}

a.pf-pager__btn:hover {
	border-color: var(--pf-ink);
	color: var(--pf-ink);
}

.pf-pager__btn.is-current {
	border-color: var(--pf-ink);
	background: var(--pf-ink);
	color: #fff;
	font-weight: 700;
}

.pf-pager__btn.is-disabled {
	color: var(--pf-muted);
	opacity: 0.6;
}

.pf-pager__prev,
.pf-pager__next {
	font-size: 18px;
}

.pf-pager__gap {
	padding: 0 2px;
	color: var(--pf-muted);
}

/* ---------- Por ancho del BLOQUE, no de la pantalla ---------- */

/* Tablet: con 230 px entran 2 columnas de 350 px; con 190 px, 3. */
@container (max-width: 900px) {
	.pf-prods {
		--pf-card-min: 190px;
		padding: 24px 0 32px;
	}
}

@container (max-width: 560px) {
	.pf-prods {
		padding: 16px 0 20px;
	}

	.pf-prods__head {
		margin-bottom: 14px;
	}

	.pf-prods__title {
		font-size: 20px;
	}

	.pf-prods__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.pf-card {
		padding: 10px;
		gap: 8px;
		border-radius: 12px;
	}

	.pf-prods-root .pf-card__img {
		height: min(var(--pf-card-img-h), 120px);
	}

	.pf-prods-root .pf-card__name {
		font-size: 12.5px;
	}

	.pf-card__price {
		font-size: 15px;
	}

	body .pf-prods-root .pf-card__action a.pf-card__btn,
	body .pf-prods-root .pf-card__action a.pf-card__btn:visited {
		padding: 11px 6px;
		font-size: 12.5px;
	}

	.pf-pager {
		gap: 6px;
		margin-top: 20px;
	}

	.pf-pager__btn {
		padding: 9px 10px;
	}
}

@media (hover: none) {
	.pf-card:hover {
		box-shadow: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pf-prods__grid,
	.pf-card,
	body .pf-prods-root .pf-card__action a.pf-card__btn {
		transition: none;
	}
}