/**
 * Car Parts Filter — Public CSS
 * Estilos del formulario de filtro en el frontend.
 * Usa variables CSS para fácil personalización por el usuario final.
 *
 * @since 1.0.0
 */

/* ── Variables ──────────────────────────────────────────────────────── */
:root {
	--cpf-primary:        #0073aa;
	--cpf-primary-hover:  #005f8d;
	--cpf-primary-text:   #ffffff;
	--cpf-border:         #ddd;
	--cpf-border-radius:  4px;
	--cpf-bg:             #f9f9f9;
	--cpf-input-height:   40px;
	--cpf-font-size:      14px;
	--cpf-gap:            10px;
	--cpf-badge-bg:       #e8f0fe;
	--cpf-badge-color:    #1a56db;
	--cpf-clear-color:    #666;
	--cpf-clear-hover:    #c00;
}

/* ── Contenedor principal ───────────────────────────────────────────── */
.cpf-filter-wrap {
	font-size: var(--cpf-font-size);
	font-family: inherit;
	color: inherit;
	margin-bottom: 24px;
}

/* ── Formulario ─────────────────────────────────────────────────────── */
.cpf-filter-form {
	display: flex;
	flex-direction: column;
	gap: var(--cpf-gap);
}

/* ── Layout horizontal ───────────────────────────────────────────────
 *
 * Estructura final deseada:
 *   Fila 1: TODOS los dropdowns (Make, Model, Year, Engine, ...)
 *   Fila 2: Botones de acción (Search Parts, Clear)
 *
 * Forzamos flex-direction column en el form (con !important para vencer
 * temas que apliquen flex-row a forms genéricos), y garantizamos que cada
 * fila ocupe el 100% del ancho del form padre.
 */
.cpf-layout-horizontal .cpf-filter-form {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px;
	width: 100%;
}

.cpf-layout-horizontal .cpf-selects-row,
.cpf-layout-horizontal .cpf-text-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cpf-gap);
	align-items: flex-end;
	width: 100%;
	flex-basis: 100%;
}

.cpf-layout-horizontal .cpf-buttons-row {
	display: flex;
	gap: var(--cpf-gap);
	flex-wrap: wrap;
	width: 100%;
	flex-basis: 100%;
	margin-top: 4px;
}

.cpf-layout-horizontal .cpf-select-group,
.cpf-layout-horizontal .cpf-search-group,
.cpf-layout-horizontal .cpf-category-group {
	flex: 1 1 150px;
	min-width: 130px;
}

/* ── Layout vertical (default): cada select en su propia fila ─────── */
.cpf-layout-vertical .cpf-selects-row,
.cpf-layout-vertical .cpf-text-row {
	display: flex;
	flex-direction: column;
	gap: var(--cpf-gap);
}

/* ── Grupos de select ───────────────────────────────────────────────── */
.cpf-select-group,
.cpf-search-group,
.cpf-category-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* ── Labels (HOME: tamaño original) ─────────────────────────────── */
.cpf-select-label {
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #555;
}

/* Labels más compactos solo en página de resultados */
.cpf-is-results-page .cpf-select-label {
	font-size: 11px;
	text-transform: none;
	letter-spacing: 0.02em;
	color: #6b7280;
	margin-bottom: 2px;
}

/* ── Selects e inputs (HOME: tamaño original) ─────────────────────── */
.cpf-filter-form select.cpf-select,
.cpf-filter-form input.cpf-search-input {
	width: 100%;
	height: var(--cpf-input-height);
	padding: 0 10px;
	border: 1px solid var(--cpf-border);
	border-radius: var(--cpf-border-radius);
	background: #fff;
	font-size: var(--cpf-font-size);
	color: inherit;
	appearance: auto;
	box-sizing: border-box;
	transition: border-color 0.2s;
}

.cpf-filter-form select.cpf-select:focus,
.cpf-filter-form input.cpf-search-input:focus {
	border-color: var(--cpf-primary);
	outline: none;
	box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.15);
}

.cpf-filter-form select.cpf-select:disabled {
	background: var(--cpf-bg);
	color: #999;
	cursor: not-allowed;
}

/* ── Botones ────────────────────────────────────────────────────────── */
.cpf-buttons-row {
	display: flex;
	gap: var(--cpf-gap);
	flex-wrap: wrap;
}

/* En cualquier página de WooCommerce shop/category (body.cpf-on-shop):
 *   - Botones Search Parts / Clear se ocultan
 *   - Los dropdowns auto-submitean al cambiar
 * Esto aplica TANTO si hay vehículo (cpf-is-results-page) como si NO
 * (después de "× Clear all"). Solo en home el usuario necesita el botón
 * Search Parts para navegar a /shop. */
body.cpf-on-shop .cpf-filter-wrap .cpf-buttons-row {
	display: none !important;
}

.cpf-btn-search,
.cpf-btn-clear {
	height: var(--cpf-input-height);
	padding: 0 20px;
	border: none;
	border-radius: var(--cpf-border-radius);
	font-size: var(--cpf-font-size);
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	box-sizing: border-box;
}

.cpf-btn-search {
	background: var(--cpf-primary);
	color: var(--cpf-primary-text);
}

.cpf-btn-search:hover,
.cpf-btn-search:focus {
	background: var(--cpf-primary-hover);
}

.cpf-btn-clear {
	background: transparent;
	color: var(--cpf-clear-color);
	border: 1px solid var(--cpf-border);
}

.cpf-btn-clear:hover,
.cpf-btn-clear:focus {
	color: var(--cpf-clear-hover);
	border-color: var(--cpf-clear-hover);
}

/* ── Filtros activos (badges) — al final, antes de los productos ─────
 * Contenedor con fondo verde suave (tema automotriz) que agrupa
 * visualmente los filtros activos como un bloque informativo. */
.cpf-filter-wrap .cpf-active-filters {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	margin-top: 10px !important;
	padding: 8px 14px !important;
	background: #dcfce7 !important;        /* verde claro automotriz */
	border: none !important;
	border-radius: 4px !important;
	font-size: 10px !important;
	line-height: 1 !important;
	min-height: 0 !important;
}

.cpf-filter-wrap .cpf-active-filters-label {
	font-weight: 700 !important;
	color: #6b7280 !important;
	margin-right: 2px !important;
	font-size: 10px !important;
	letter-spacing: 0.04em !important;
	line-height: 18px !important;
	text-transform: uppercase;
}

.cpf-filter-wrap .cpf-active-badge {
	display: inline-flex !important;
	align-items: center !important;
	gap: 3px !important;
	height: 18px !important;
	min-height: 0 !important;
	max-height: 18px !important;
	background: #fff !important;
	border: 1px solid #d1d5db !important;
	border-radius: 9px !important;
	padding: 0 7px !important;
	margin: 0 !important;
	color: #374151 !important;
	font-size: 10px !important;
	line-height: 1 !important;
	box-sizing: border-box !important;
	box-shadow: none !important;
}

.cpf-filter-wrap .cpf-active-badge-level {
	opacity: 0.7;
}

.cpf-filter-wrap .cpf-clear-link {
	margin-left: auto !important;
	color: var(--cpf-clear-color) !important;
	text-decoration: none !important;
	font-size: 10px !important;
	line-height: 18px !important;
	white-space: nowrap !important;
}

.cpf-clear-link:hover {
	color: var(--cpf-clear-hover);
	text-decoration: underline;
}

/* ── Icono de búsqueda ──────────────────────────────────────────────── */
.cpf-btn-icon {
	font-style: normal;
}

/* ══════════════════════════════════════════════════════════════════════
   CAPA 2a: Búsqueda por texto (refinamiento post-vehículo)
   ══════════════════════════════════════════════════════════════════════ */
.cpf-layer2-search-box {
	display: flex;
	flex: 1 1 auto;
	max-width: 480px;
	min-width: 220px;
	gap: 0;
}

.cpf-layer2-search-input {
	flex: 1;
	height: 30px;
	padding: 0 10px;
	border: 1px solid var(--cpf-border);
	border-right: none;
	border-radius: var(--cpf-border-radius) 0 0 var(--cpf-border-radius);
	font-size: 12px;
	background: #fff;
	color: inherit;
	box-sizing: border-box;
	outline: none;
	transition: border-color 0.2s;
}

.cpf-layer2-search-input:focus {
	border-color: var(--cpf-primary);
	box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.12);
}

.cpf-layer2-search-btn {
	height: 30px !important;
	width: 34px !important;
	min-width: 34px !important;
	max-width: 34px !important;
	min-height: 0 !important;
	max-height: 30px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid var(--cpf-primary) !important;
	border-radius: 0 var(--cpf-border-radius) var(--cpf-border-radius) 0 !important;
	background: var(--cpf-primary) !important;
	color: var(--cpf-primary-text) !important;
	cursor: pointer;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 14px !important;
	line-height: 1 !important;
	box-sizing: border-box !important;
	transition: background 0.2s;
}

.cpf-layer2-search-btn:hover {
	background: var(--cpf-primary-hover) !important;
	border-color: var(--cpf-primary-hover) !important;
}

/* El span interno del botón solo contiene el emoji 🔍.
 * Forzar margin/padding 0 para que el emoji quede perfectamente centrado
 * dentro del botón sin offset heredado del tema. */
.cpf-layer2-search-btn span,
.cpf-layer2-search-btn > * {
	margin: 0 !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
}

/* Badge de búsqueda activa */
.cpf-active-badge-search {
	background: #e8f5e9;
	border-color: #4caf50;
	color: #2e7d32;
}

/* Botón × para eliminar badge individual */
.cpf-badge-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	margin-left: 4px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.1);
	color: inherit;
	text-decoration: none;
	font-size: 11px;
	line-height: 1;
	transition: background 0.15s;
}

.cpf-badge-remove:hover {
	background: rgba(0, 0, 0, 0.25);
	text-decoration: none;
	color: inherit;
}

/* ══════════════════════════════════════════════════════════════════════
   CAPA 2 — Filas separadas: Search by name (fila 1) + Filter by Category (fila 2)
   ══════════════════════════════════════════════════════════════════════
   Cada fila tiene:
     - Título a la izquierda (ancho fijo, alineado)
     - Contenido a la derecha (input/búsqueda o chips)
   Look plano, sin paneles, espacio vertical consistente.
*/
.cpf-layer2-row {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap;
	gap: 0 !important;        /* sin gap — el espaciado lo da el margin del título */
	margin-top: 10px !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
}

/* Título de fila (Search parts by name / Filter by Category) ──
 * Ancho natural del texto + 5px margin a la derecha. El input/chip
 * inicia exactamente 5px después de los dos puntos del título.
 * (Cada fila puede tener X distinto si los títulos tienen longitudes
 * distintas — el usuario aceptó esto a cambio de tight spacing.) */
.cpf-filter-wrap .cpf-layer2-title {
	display: inline-block !important;
	font-weight: 700 !important;
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	color: #4b5563 !important;
	white-space: nowrap !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	flex: 0 0 auto !important;
	margin: 0 5px 0 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
}

.cpf-layer2-options {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	flex: 1 1 auto;
}

/* Legacy: clase .cpf-layer2-wrap del partial antiguo (por si add-ons la usan) */
.cpf-layer2-wrap {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.cpf-layer2-label {
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.02em;
	color: #6b7280;
	white-space: nowrap;
}

/* Chip individual de categoría — más compacto y bajo perfil
 * !important porque temas como BuyFebestParts estilizan <a> globalmente
 * con padding/height grandes. Sin !important nuestra altura se ignora. */
.cpf-filter-wrap .cpf-cat-chip,
.cpf-filter-wrap a.cpf-cat-chip {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 24px !important;
	min-height: 0 !important;
	max-height: 24px !important;
	padding: 0 12px !important;
	margin: 0 !important;
	border: 1px solid var(--cpf-border) !important;
	border-radius: 12px !important;
	background: #fff;
	color: #444;
	font-size: 12px !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: all 0.15s ease;
	white-space: nowrap;
	line-height: 1 !important;
	box-sizing: border-box !important;
	box-shadow: none !important;
}

.cpf-cat-chip:hover {
	border-color: var(--cpf-primary);
	color: var(--cpf-primary);
	background: #f0f7fc;
	text-decoration: none;
}

/* Chip activo (categoría seleccionada) */
.cpf-cat-chip-active {
	background: var(--cpf-primary);
	color: var(--cpf-primary-text);
	border-color: var(--cpf-primary);
}

.cpf-cat-chip-active:hover {
	background: var(--cpf-primary-hover);
	color: var(--cpf-primary-text);
	border-color: var(--cpf-primary-hover);
}

/* Badge de categoría activa en filtros activos */
.cpf-active-badge-cat {
	background: #fef3cd;
	border-color: #ffc107;
	color: #856404;
}

/* ══════════════════════════════════════════════════════════════════════
   ENLACE "VOLVER A RESULTADOS" (producto con contexto de vehículo)
   ══════════════════════════════════════════════════════════════════════ */
.cpf-back-to-results {
	margin-bottom: 16px;
	padding: 10px 14px;
	background: var(--cpf-badge-bg);
	border: 1px solid #c7d7f8;
	border-radius: var(--cpf-border-radius);
}

.cpf-back-to-results-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--cpf-primary);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: color 0.15s;
}

.cpf-back-to-results-link:hover {
	color: var(--cpf-primary-hover);
	text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════════════
   PRODUCT TAB: Tabla de compatibilidad vehicular
   ══════════════════════════════════════════════════════════════════════ */
.cpf-compat-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.cpf-compat-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.cpf-compat-table th {
	background: #f4f6f9;
	font-weight: 600;
	text-align: left;
	padding: 10px 12px;
	border-bottom: 2px solid #e2e6ed;
	white-space: nowrap;
}

.cpf-compat-table td {
	padding: 8px 12px;
	border-bottom: 1px solid #eee;
	vertical-align: top;
}

.cpf-compat-table tr:last-child td {
	border-bottom: none;
}

.cpf-compat-make {
	font-weight: 600;
}

.cpf-compat-years {
	white-space: nowrap;
}

.cpf-compat-universal-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	background: #e8f5e9;
	border: 1px solid #a5d6a7;
	border-radius: var(--cpf-border-radius, 4px);
	color: #2e7d32;
	font-size: 15px;
	font-weight: 500;
}

.cpf-compat-universal-icon {
	font-size: 20px;
}

/* ══════════════════════════════════════════════════════════════════════
   FIX: Layout — Agnostic al tema.

   Block themes usan la CSS variable --wp--style--global--content-size
   para restringir el ancho del contenido (ej. 645px en TT5). Cuando
   hay productos, el grid se expande. Sin productos, todo se encoge.

   Estrategia:
   1. :has() — overridea la variable CSS del contenedor PADRE para que
      use wideSize en vez de contentSize cuando contiene elementos CPF.
      Funciona en Chrome 105+, Safari 15.4+, Firefox 121+.
   2. Inline styles — los wrappers PHP tienen max-width inline que
      supera cualquier regla CSS externa (specificity 1,0,0,0).
   3. Classic themes — sin variables CSS de WP, el width:100% funciona
      directamente.

   NO usa selectores de ningún tema específico.
   ══════════════════════════════════════════════════════════════════════ */

/*
 * CAPA 1: :has() — Cuando un contenedor tiene un hijo directo del plugin,
 * overridear la variable CSS de ancho del contenedor.
 *
 * WordPress Core aplica max-width via:
 *   --wp--style--global--content-size (angosto, ej. 645px)
 *   --wp--style--global--wide-size    (amplio, ej. 1340px)
 *
 * Al cambiar content-size = wide-size en el PADRE, TODOS sus hijos
 * (título, filtro, resultados, paginación) usan el ancho amplio.
 */
:has(> .cpf-shop-filter-wrap),
:has(> .cpf-filter-wrap),
:has(> .cpf-no-results-wrap) {
	--wp--style--global--content-size: var(--wp--style--global--wide-size, 100%);
}

/* CAPA 2: ancho completo para los wrappers del plugin */
.cpf-no-results-wrap,
.cpf-shop-filter-wrap,
.cpf-filter-wrap {
	width: 100%;
	box-sizing: border-box;
}

/* WooCommerce notices */
.woocommerce-no-products-found,
.woocommerce .woocommerce-info {
	width: 100%;
	box-sizing: border-box;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
	.cpf-layout-horizontal .cpf-selects-row,
	.cpf-layout-horizontal .cpf-text-row,
	.cpf-layout-horizontal .cpf-buttons-row {
		flex-direction: column;
	}

	.cpf-layout-horizontal .cpf-select-group,
	.cpf-layout-horizontal .cpf-search-group,
	.cpf-layout-horizontal .cpf-category-group {
		flex: 1 1 100%;
	}

	.cpf-btn-search,
	.cpf-btn-clear {
		flex: 1;
		justify-content: center;
	}

	.cpf-active-filters {
		flex-direction: column;
		align-items: flex-start;
	}

	.cpf-clear-link {
		margin-left: 0;
	}

	.cpf-layer2-wrap {
		flex-direction: column;
		align-items: flex-start;
	}

	.cpf-layer2-options {
		width: 100%;
	}

	.cpf-layer2-search-box {
		max-width: 100%;
		width: 100%;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   TRIM BADGES — Etiquetas en tarjetas de producto
   Muestra el trim (4WD, 2WD, etc.) sobre la imagen del producto
   cuando el filtro usa solo 3 niveles (Make/Model/Year).
   Posicionamiento: esquina superior izquierda, debajo del badge "Sale".
   ══════════════════════════════════════════════════════════════════════ */

/* Contenedor relativo para posicionar los badges */
.wc-block-grid__product,
.product {
	position: relative;
}

/* ──────────────────────────────────────────────────────────────────────
 * Badges CPF en tarjetas de producto.
 *
 * Posicionados en top-RIGHT para evitar conflicto con badges de descuento
 * del tema y con el badge ".onsale" nativo de WooCommerce, que típicamente
 * van en top-LEFT.
 * ──────────────────────────────────────────────────────────────────────
 */
.cpf-trim-badges {
	position: absolute;
	top: 8px;
	right: 8px;
	left: auto;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-end;   /* alinea cada badge al borde derecho */
	gap: 4px;
	pointer-events: none;
	max-width: 70%;          /* evita que un badge largo invada toda la card */
}

.cpf-trim-badge {
	display: inline-block;
	padding: 4px 10px;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: 3px;
	line-height: 1.3;
	pointer-events: auto;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ── Colores por nivel ── */
/* Trim: púrpura */
.cpf-badge-trim {
	background: rgba(123, 45, 142, 0.92);
}

/* Engine: azul oscuro */
.cpf-badge-engine {
	background: rgba(21, 101, 192, 0.92);
}

/* Fallback: gris oscuro (si se usa un nivel sin clase específica) */
.cpf-trim-badge:not(.cpf-badge-trim):not(.cpf-badge-engine) {
	background: rgba(55, 71, 79, 0.9);
}

/* ══════════════════════════════════════════════════════════════════════
   REFINAMIENTOS DINÁMICOS — Dropdowns de Trim/Engine que aparecen
   automáticamente cuando hay más de una opción para el vehículo.
   ══════════════════════════════════════════════════════════════════════ */

.cpf-refinements-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cpf-gap);
	align-items: flex-end;
	padding: 12px 14px;
	background: linear-gradient(135deg, #f8f4ff 0%, #f0f4ff 100%);
	border: 1px solid #d4c5e8;
	border-radius: var(--cpf-border-radius);
	margin-top: 4px;
}

.cpf-refinement-group {
	flex: 1 1 180px;
	min-width: 150px;
}

.cpf-refinement-group .cpf-select-label {
	color: #6b21a8;
}

.cpf-refine-icon {
	font-style: normal;
}

.cpf-refine-hint {
	font-weight: 400;
	font-size: 10px;
	color: #888;
	text-transform: none;
	letter-spacing: normal;
}

.cpf-refinement-group select.cpf-select {
	border-color: #c4b5d9;
}

.cpf-refinement-group select.cpf-select:focus {
	border-color: #7c3aed;
	box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
}

@media (max-width: 600px) {
	.cpf-refinements-row {
		flex-direction: column;
	}

	.cpf-refinement-group {
		flex: 1 1 100%;
	}
}

/* ── Reset link (no-results page) ──────────────────────────────────── */
.cpf-reset-link {
	text-align: center;
	margin: 16px 0 8px;
}

.cpf-reset-link a {
	display: inline-block;
	padding: 10px 24px;
	background: var(--cpf-primary, #0073aa);
	color: var(--cpf-primary-text, #fff);
	border-radius: var(--cpf-border-radius, 4px);
	text-decoration: none;
	font-weight: 600;
	transition: background 0.2s;
}

.cpf-reset-link a:hover {
	background: var(--cpf-primary-hover, #005f8d);
	color: var(--cpf-primary-text, #fff);
}

/* ══════════════════════════════════════════════════════════════════════
   MODO COMPACTO — solo en página de resultados (con vehículo seleccionado)
   ══════════════════════════════════════════════════════════════════════
   Estas reglas se aplican EXCLUSIVAMENTE cuando el wrap tiene la clase
   .cpf-is-results-page (añadida server-side cuando $has_vehicle === true).
   En HOME los tamaños quedan en sus valores originales del :root.

   Usamos !important en height/padding porque temas como BuyFebestParts
   sobreescriben los estilos de form elements globalmente. */
.cpf-filter-wrap.cpf-is-results-page {
	--cpf-input-height: 30px;
	--cpf-font-size:    13px;
	--cpf-gap:          8px;
}

.cpf-filter-wrap.cpf-is-results-page .cpf-filter-form select.cpf-select,
.cpf-filter-wrap.cpf-is-results-page .cpf-filter-form input.cpf-search-input {
	height: var(--cpf-input-height) !important;
	min-height: 0 !important;
	max-height: var(--cpf-input-height) !important;
	padding: 0 10px !important;
	line-height: normal !important;
	box-sizing: border-box !important;
	font-size: var(--cpf-font-size);
	margin: 0;
}

.cpf-filter-wrap.cpf-is-results-page .cpf-btn-search,
.cpf-filter-wrap.cpf-is-results-page .cpf-btn-clear {
	height: var(--cpf-input-height) !important;
	min-height: 0 !important;
	max-height: var(--cpf-input-height) !important;
	line-height: normal !important;
	padding: 0 14px !important;
	font-size: 12px;
	letter-spacing: 0.03em;
	box-sizing: border-box !important;
}

/* Search input de Capa 2 — ya scoped por .cpf-layer2-row que solo
 * aparece con vehículo, pero igual reducimos altura para coherencia. */
.cpf-filter-wrap.cpf-is-results-page .cpf-layer2-search-input,
.cpf-filter-wrap.cpf-is-results-page .cpf-layer2-search-btn {
	height: 30px !important;
	min-height: 0 !important;
	max-height: 30px !important;
	line-height: normal !important;
	box-sizing: border-box !important;
}

/* ── Dropdowns BLOQUEADOS (committed) ────────────────────────────────
 * En página de resultados, los niveles ya comprometidos (Make/Model/Year
 * siempre, Engine/Transmission/Drivetrain una vez seleccionados) se ven
 * con fondo gris claro, texto tenue y cursor not-allowed. El valor está
 * visible pero el dropdown no es interactivo.
 * Solo "× Clear all" desbloquea todo. */
.cpf-filter-wrap.cpf-is-results-page .cpf-locked-group select.cpf-select,
.cpf-filter-wrap.cpf-is-results-page .cpf-locked-group select.cpf-select:disabled,
.cpf-filter-wrap.cpf-is-results-page select.cpf-select:disabled {
	background: #f3f4f6 !important;
	color: #4b5563 !important;
	border-color: #d1d5db !important;
	cursor: not-allowed !important;
	opacity: 1 !important;
	font-weight: 500;
}

.cpf-filter-wrap.cpf-is-results-page .cpf-locked-group .cpf-select-label {
	color: #9ca3af; /* label más tenue para reforzar visualmente el bloqueo */
}

/* ══════════════════════════════════════════════════════════════════════
   SIDEBAR MODE (v1.8.0)
   ══════════════════════════════════════════════════════════════════════
   Refinements (categorías + smart selects + search) en columna izquierda.
   Se activa cuando Settings.cpf_layout_mode === 'sidebar' y hay vehículo.
*/

/* ── Sidebar container ──────────────────────────────────────────────── */
.cpf-shop-sidebar {
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	padding: 12px 14px;
	margin-bottom: 20px;
	font-size: 13px;
	color: #2c2c2c;
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* Section dentro del sidebar */
.cpf-sidebar-section {
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid #f0f0f1;
}
.cpf-sidebar-section:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

/* Título de cada sección */
.cpf-sidebar-title {
	margin: 0 0 10px;
	padding: 0;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #6b7280;
}

/* v1.9.54: mensaje cuando widget queda sin opciones por refinement */
.cpf-sidebar-empty {
	margin: 0;
	padding: 8px 0;
	font-size: 13px;
	color: #6b7280;
	font-style: italic;
}
.cpf-sidebar-empty-action {
	margin: 4px 0 0;
}
.cpf-sidebar-empty-action .cpf-clear-refinement {
	font-size: 12px;
	color: #2563eb;
	text-decoration: underline;
}
.cpf-sidebar-empty-action .cpf-clear-refinement:hover {
	color: #1d4ed8;
}

/* Lista de opciones (checkboxes) */
.cpf-sidebar-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cpf-sidebar-list > li {
	margin: 0;
	padding: 0;
}

/* Opción individual — label envuelve checkbox + texto + count */
.cpf-sidebar-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 6px;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.12s;
	font-size: 13px;
	line-height: 1.3;
}
.cpf-sidebar-option:hover {
	background: #f4f6f9;
}
.cpf-sidebar-option.is-active {
	background: #e8f0fe;
	color: #1a56db;
	font-weight: 500;
}
.cpf-sidebar-option.is-active .cpf-sidebar-label {
	color: #1a56db;
}
.cpf-sidebar-option.is-locked {
	cursor: not-allowed;
	background: #f3f4f6;
	color: #6b7280;
}

/* Checkbox dentro de la opción — estilo nativo */
.cpf-sidebar-option input[type="checkbox"] {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	margin: 0;
	cursor: inherit;
	accent-color: var(--cpf-primary);
}

/* Label texto */
.cpf-sidebar-label {
	flex: 1;
	color: #374151;
}

/* Count "(N)" al lado */
.cpf-sidebar-count {
	flex: 0 0 auto;
	font-size: 11px;
	color: #9ca3af;
	font-variant-numeric: tabular-nums;
}
.cpf-sidebar-option.is-active .cpf-sidebar-count {
	color: #1a56db;
}

/* Lock icon para items committed (engine/transmission ya seleccionados) */
.cpf-sidebar-lock {
	flex: 0 0 auto;
	font-size: 12px;
	opacity: 0.6;
}

/* Loading placeholder */
.cpf-sidebar-loading {
	padding: 6px 0;
	font-size: 12px;
	color: #9ca3af;
	font-style: italic;
}

/* Search dentro del sidebar */
.cpf-sidebar-search {
	display: flex;
	gap: 0;
}
.cpf-sidebar-search-input {
	flex: 1;
	min-width: 0; /* permite shrink */
}

/* ── CSS Grid Fallback (cuando tema no tiene sidebar WC nativo) ─────── */
/* El plugin envuelve ul.products en .cpf-shop-grid-fallback con sidebar + main */
.cpf-shop-grid-fallback {
	display: grid;
	grid-template-columns: minmax(220px, 260px) 1fr;
	gap: 24px;
	align-items: start;
	margin: 0 0 20px;
}
.cpf-shop-grid-fallback > .cpf-shop-sidebar {
	margin-bottom: 0;
	position: sticky;
	top: 80px; /* offset si hay admin bar / header sticky */
	max-height: calc(100vh - 100px);
	overflow-y: auto;
}
.cpf-shop-grid-main {
	min-width: 0; /* evita overflow horizontal del grid de productos */
}

/* Responsive — en mobile el sidebar va arriba, no a la izquierda */
@media (max-width: 768px) {
	.cpf-shop-grid-fallback {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.cpf-shop-grid-fallback > .cpf-shop-sidebar {
		position: static;
		max-height: none;
	}
}

/* ── Filtering By en barra nativa WC (cpf_filtering_by_pos = native-bar) ── */
.cpf-filtering-by-native {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0 0 14px;
	padding: 6px 10px;
	background: #dcfce7;                   /* verde claro automotriz */
	border-radius: 4px;
	font-size: 11px;
	line-height: 1;
	width: 100%;
	box-sizing: border-box;
}
.cpf-filtering-by-native .cpf-active-filters-label {
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6b7280;
	margin-right: 2px;
}
.cpf-filtering-by-native .cpf-active-badge {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	height: 18px;
	background: #fff;
	border: 1px solid #d1d5db;
	border-radius: 9px;
	padding: 0 7px;
	font-size: 10px;
	line-height: 1;
}
.cpf-filtering-by-native .cpf-active-badge-level {
	opacity: 0.7;
}
.cpf-filtering-by-native .cpf-clear-link {
	margin-left: auto;
	color: #c00;
	text-decoration: none;
	font-size: 10px;
	white-space: nowrap;
}
.cpf-filtering-by-native .cpf-clear-link:hover {
	text-decoration: underline;
}

/* Cuando layout=sidebar, ocultar el form de Capa 1 si hay vehículo
 * (los dropdowns locked no aportan en sidebar mode — el vehículo se
 * ve en Filtering By + el sidebar tiene los refinements). */
.cpf-filter-wrap.cpf-using-sidebar .cpf-filter-form {
	display: none;
}

/* ══════════════════════════════════════════════════════════════════════
   CPF SHOP SIDEBAR — sidebar única (v1.8.5)
   ══════════════════════════════════════════════════════════════════════
   Cuando layout=sidebar Y has_vehicle, body tiene .cpf-sidebar-active.

   ESTRATEGIA: una sola sidebar dueña.
     1. Bloqueamos TODO el contenido de la sidebar nativa del tema
        (siblings de nuestra .cpf-shop-sidebar dentro del wrapper)
     2. Nuestra sidebar permanece visible con dos secciones:
        - .cpf-sidebar-managed   → filtros CPF (categorías, smart selects)
        - .cpf-sidebar-widgets   → widget area registrada (Price, Search, etc.)

   Por qué NO usar selectores específicos como .widget_product_categories?
     - Si el tema cambia idioma/markup/clase, falla
     - Si un plugin externo agrega un widget de categorías con clase
       custom, también falla
     - El enfoque "ocultar siblings" cubre TODO contenido externo dentro
       del wrapper, presente y futuro
*/

/* Wrappers comunes de sidebar — ocultar TODOS los hijos directos excepto el nuestro */
body.cpf-sidebar-active #secondary > *:not(.cpf-shop-sidebar):not(script):not(style),
body.cpf-sidebar-active aside.widget-area > *:not(.cpf-shop-sidebar):not(script):not(style),
body.cpf-sidebar-active .woocommerce-sidebar > *:not(.cpf-shop-sidebar):not(script):not(style),
body.cpf-sidebar-active .sidebar-shop > *:not(.cpf-shop-sidebar):not(script):not(style),
body.cpf-sidebar-active .shop-sidebar > *:not(.cpf-shop-sidebar):not(script):not(style),
body.cpf-sidebar-active .sidebar-primary > *:not(.cpf-shop-sidebar):not(script):not(style),
body.cpf-sidebar-active aside.sidebar > *:not(.cpf-shop-sidebar):not(script):not(style) {
	display: none !important;
}

/* Fallback agresivo: si el tema renderea la sidebar como sibling del main
 * (no como wrapper de nuestra sidebar), ocultarla completa. SIEMPRE que
 * cpf-sidebar-active esté activo y la sidebar del tema NO contenga nuestra
 * .cpf-shop-sidebar. Cubre temas como Astra que rinden #secondary aparte.
 *
 * Usamos :not(:has(.cpf-shop-sidebar)) para que la regla solo aplique
 * cuando la sidebar del tema NO contiene la nuestra. Si la contiene, ya
 * el bloque de arriba se encarga de ocultar siblings adentro. */
body.cpf-sidebar-active #secondary:not(:has(.cpf-shop-sidebar)),
body.cpf-sidebar-active aside.widget-area:not(.cpf-shop-sidebar):not(:has(.cpf-shop-sidebar)),
body.cpf-sidebar-active .woocommerce-sidebar:not(.cpf-shop-sidebar):not(:has(.cpf-shop-sidebar)),
body.cpf-sidebar-active .sidebar-shop:not(.cpf-shop-sidebar):not(:has(.cpf-shop-sidebar)),
body.cpf-sidebar-active .ast-woocommerce-container .widget-area:not(:has(.cpf-shop-sidebar)) {
	display: none !important;
}

/* Astra: el wrapper grid de WC pasa de sidebar+main a solo main */
body.cpf-sidebar-active .ast-woocommerce-container {
	display: block !important;
	grid-template-columns: 1fr !important;
	width: 100% !important;
}

/* ── Refinamientos de categoría (Engine/Trans/Drive en category pages) ── */
.cpf-cat-refine-widget {
	margin-top: 16px;
	padding-bottom: 8px;
}
.cpf-cat-refine-widget h2 {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	margin: 0 0 8px;
	padding-bottom: 6px;
	border-bottom: 2px solid #d30b15;
}
.cpf-cat-refine-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cpf-cat-refine-list li {
	margin: 0;
	padding: 0;
}
.cpf-cat-refine-list a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 0;
	text-decoration: none;
	color: #333;
	font-size: 14px;
	border-bottom: 1px solid #f0f0f0;
	transition: color 0.15s;
}
.cpf-cat-refine-list a:hover {
	color: #d30b15;
}
.cpf-cat-refine-list a.is-active {
	color: #d30b15;
	font-weight: 700;
}

/* Sección "widgets" dentro de nuestra sidebar — separación visual del bloque managed */
.cpf-shop-sidebar .cpf-sidebar-widgets {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #e0e0e0;
}

.cpf-shop-sidebar .cpf-sidebar-widget {
	margin-bottom: 16px;
}

.cpf-shop-sidebar .cpf-sidebar-widget:last-child {
	margin-bottom: 0;
}

.cpf-shop-sidebar .cpf-sidebar-widget-title {
	margin: 0 0 10px;
	padding: 0;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #6b7280;
}