/*
 * Punto Ferretero — tokens del diseño (Claude Design, proyecto
 * 9fff2883-932c-4198-a766-81e2b9f782d5) y reseteos compartidos por los
 * widgets PF. Cada widget nuevo suma su clase raíz (.pf-{nombre}-root) a
 * los selectores de este archivo; si se olvida, no hereda ni tokens ni
 * reseteos.
 */

.pf-cats-root,
.pf-prods-root,
.pf-hdr-root,
.pf-pie-root,
.pf-hero-root {
	--pf-ink: #12173a;
	--pf-navy: #1e2a6e;
	--pf-orange: #ff6a2b;
	--pf-orange-dark: #e0551a;
	--pf-text: #3a3e56;
	--pf-text-2: #5a5e75;
	--pf-text-3: #7a7e91;
	--pf-muted: #9498a8;
	--pf-line: #edeef3;
	--pf-line-2: #e4e5ee;
	--pf-soft: #f7f7fa;
	--pf-warn: #c0501a;
	--pf-warn-bg: #fff1e8;
	--pf-font-display: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	--pf-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	font-family: var(--pf-font-body);
	color: var(--pf-ink);
	-webkit-font-smoothing: antialiased;
}

.pf-cats-root *,
.pf-prods-root *,
.pf-hdr-root *,
.pf-pie-root *,
.pf-hero-root * {
	box-sizing: border-box;
}

:where(.pf-cats-root, .pf-prods-root, .pf-hdr-root, .pf-pie-root, .pf-hero-root) :where(ul) {
	list-style: none;
	margin: 0;
	padding: 0;
}

:where(.pf-cats-root, .pf-prods-root, .pf-hdr-root, .pf-pie-root, .pf-hero-root) :where(a) {
	text-decoration: none;
}

/*
 * Los reseteos de ul/a/p van en :where() (peso cero): si no, pisan las
 * clases de cada widget (.pf-cats__track perdía su relleno y cortaba los
 * círculos, v1.9.0).
 *
 * Hello Elementor / Hello Commerce pintan todo `button` desde su reset.css
 * (borde, fondo y texto de marca, relleno .5rem 1rem) con más peso que un
 * reseteo en :where(). Por eso cada raíz lleva el suyo, con la raíz delante.
 */
.pf-cats-root button,
.pf-cats-root button:hover,
.pf-cats-root button:focus,
.pf-hdr-root button,
.pf-hdr-root button:hover,
.pf-hdr-root button:focus,
.pf-hero-root button,
.pf-hero-root button:hover,
.pf-hero-root button:focus {
	font: inherit;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
	box-shadow: none;
	color: inherit;
	cursor: pointer;
}

.pf-cats-root .pf-empty,
.pf-prods-root .pf-empty {
	margin: 0;
	padding: 24px;
	text-align: center;
	color: var(--pf-muted);
	font-size: 14px;
}

.pf-cats-root :focus-visible,
.pf-prods-root :focus-visible,
.pf-hdr-root :focus-visible,
.pf-pie-root :focus-visible,
.pf-hero-root :focus-visible {
	outline: 2px solid var(--pf-orange);
	outline-offset: 3px;
}

:where(.pf-hdr-root, .pf-pie-root, .pf-hero-root) :where(p) {
	margin: 0;
}

.pf-hdr-root .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/*
 * Los widgets PF son secciones: ocupan todo el ancho de su contenedor aunque
 * el contenedor tenga «Alinear elementos: centro» (así está la portada en
 * teléfono). Sin esto el widget se encoge a su contenido, y como las rejillas
 * miden su ancho con container queries, su contenido mide 0 → la rejilla de
 * productos quedaba de 0-60 px en teléfono (v1.9.1).
 *
 * NO usar var(--container-widget-width): en contenedores en fila Elementor la
 * define como calc((1 - 1) * 100%) = 0, y el widget desaparece (le pasó a
 * «Comprar por Categoría» en teléfono con la 1.9.1).
 */
:is(.e-con, .e-con-inner) > .elementor-widget:is(.elementor-widget-pf-productos, .elementor-widget-pf-hero, .elementor-widget-pf-categorias, .elementor-widget-pf-cabecera, .elementor-widget-pf-pie, .elementor-widget-pf-archivo, .elementor-widget-pf-producto, .elementor-widget-pf-404) {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	flex: 1 1 100%;
	align-self: stretch;
}

/* Chips de categoría — archivo y 404. */
body a.pf-chip,
body a.pf-chip:visited {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 16px;
	border: 1.5px solid var(--pf-line-2);
	border-radius: 100px;
	background: #fff;
	color: var(--pf-text);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

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

body a.pf-chip.is-active {
	border-color: var(--pf-ink);
	background: var(--pf-ink);
	color: #fff;
}

/* ---------- Migas — archivo y ficha de producto ---------- */

.pf-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
	font-size: 12.5px;
	color: var(--pf-muted);
}

.pf-crumbs li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.pf-crumbs li + li::before {
	content: "/";
	color: #c7c9d6;
}

body .pf-crumbs a,
body .pf-crumbs a:visited {
	color: var(--pf-muted);
}

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

.pf-crumbs [aria-current] {
	color: var(--pf-ink);
}