/**
 * 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 SIEMPRE — estilo Mobimax.
 *   - Los dropdowns auto-seleccionan en cascada (AJAX) y auto-submitean
 *     cuando se completa el último nivel activo.
 *   - El "Clear" está en la franja "Filtering by" en results page.
 * (La lógica de cuándo auto-submit vs cascada vive en cpf-filter.js.) */
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 de la barra lateral ──────────────────────────────────────
   v2.2.2 — Dibujado por nosotros, no por el navegador ni por el tema.

   Antes se confiaba en el render nativo (`accent-color`). Casi cualquier tema
   moderno hace `input[type=checkbox] { appearance: none }` para poner su propio
   diseño, y su marca de verificación cuelga de SU marcado (un ::before en la
   etiqueta que le sigue, normalmente). Con nuestro marcado esa marca no aparece
   por ningún lado: la casilla se ve, se puede pulsar, pero nunca muestra el
   tic — el comprador no sabe qué categoría tiene activa.

   Al pintar la casilla y el tic con nuestras propias reglas, el resultado es
   idéntico en cualquier tema. Los !important son deliberados: estas reglas
   compiten con resets globales de formularios que casi siempre los llevan. */
.cpf-sidebar-option input[type="checkbox"] {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	flex: 0 0 16px;
	width: 16px !important;
	height: 16px !important;
	min-width: 16px;
	margin: 0 !important;
	padding: 0 !important;
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	cursor: inherit;
	background: #fff !important;
	border: 1px solid #9aa1ab !important;
	border-radius: 3px !important;
	box-shadow: none !important;
	transition: background 0.12s, border-color 0.12s;
}

.cpf-sidebar-option input[type="checkbox"]:hover {
	border-color: var(--cpf-primary, #0073aa) !important;
}

.cpf-sidebar-option input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--cpf-primary, #0073aa);
	outline-offset: 1px;
}

.cpf-sidebar-option input[type="checkbox"]:checked {
	background: var(--cpf-primary, #0073aa) !important;
	border-color: var(--cpf-primary, #0073aa) !important;
}

/* El tic: dos bordes de una caja vacía, girados 45°. Sin imágenes ni fuentes
   de iconos, así que no depende de nada externo. */
.cpf-sidebar-option input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 1px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	box-sizing: border-box;
}

/* Algunos temas ocultan del todo los checkbox nativos; esto los devuelve. */
.cpf-sidebar-option input[type="checkbox"] {
	opacity: 1 !important;
	visibility: visible !important;
	clip: auto !important;
	position: relative !important;
}

/* 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;
}

/* ═══════════════════════════════════════════════════════════════════
   BÚSQUEDA POR SKU / OEM  (v1.9.85)
   Componente autónomo: responde "¿tienes ESTA pieza?", intención
   distinta a la del filtro de vehículo. Por eso puede vivir en su
   propio contenedor (obligatorio cuando VIN está activo).
   ═══════════════════════════════════════════════════════════════════ */
.cpf-sku-search { width: 100%; }

.cpf-sku-search-label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	font-size: 14px;
}

.cpf-sku-search-row {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.cpf-sku-search-input {
	flex: 1 1 220px;
	min-width: 0;              /* permite encoger dentro del flex */
	padding: 10px 12px;
	border: 1px solid var(--cpf-border, #ddd);
	border-radius: var(--cpf-radius, 4px);
	font-size: 15px;
}

.cpf-sku-search-btn { flex: 0 0 auto; }

/* Variante inline: más compacta, separada de los dropdowns */
.cpf-sku-search--inline {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--cpf-border, #e5e5e5);
}
.cpf-sku-search--inline .cpf-sku-search-label { font-size: 13px; }

/* Variante standalone: caja propia */
.cpf-sku-search--standalone {
	padding: 14px 16px;
	background: var(--cpf-panel-bg, #fafafa);
	border: 1px solid var(--cpf-border, #e5e5e5);
	border-radius: var(--cpf-radius, 6px);
}

.cpf-sku-no-results {
	padding: 12px 14px;
	background: #fff8e5;
	border-left: 4px solid #d6a300;
	margin: 12px 0;
}

/* Móvil: el botón pasa a ancho completo debajo del input */
@media (max-width: 600px) {
	.cpf-sku-search-input { flex: 1 1 100%; }
	.cpf-sku-search-btn   { flex: 1 1 100%; }
}

/* ── Modo monomarca (v2.1.6) ───────────────────────────────────────────
   Refuerzo del ocultado del desplegable de marca. El estilo en línea con
   !important ya gana la cascada, pero esta regla cubre el caso de un tema
   que reconstruya el marcado por su cuenta a partir de nuestras clases. */
.cpf-select-group.cpf-single-make-hidden {
	display: none !important;
}