/* ABACO-WEB-004 — Catálogo de inventario (/listings/).
   Reskin de presentación sobre el motor nativo de Motors (consultas, filtros,
   orden y paginación no se tocan) — clases reales verificadas en el HTML
   servido por wp-content/plugins/motors-car-dealership-classified-listings. */

/* ===== Hero de inventario ===== */
.abaco-inv-hero{background:var(--abaco-black);color:#fff;padding:56px 0 44px}
.abaco-inv-hero .abaco-eyebrow{color:var(--abaco-yellow);font-size:11px;text-transform:uppercase;letter-spacing:1.6px;font-weight:900;margin-bottom:10px}
.abaco-inv-hero h1{font-size:42px;line-height:1;letter-spacing:-1px;text-transform:uppercase;margin:0 0 12px;color:#fff}
.abaco-inv-hero p{max-width:560px;font-size:14px;line-height:1.6;color:#c9c9cc;margin:0 0 20px}
.abaco-inv-hero-count{display:inline-flex;align-items:baseline;gap:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:5px;padding:10px 16px}
.abaco-inv-hero-count strong{font-size:22px;color:var(--abaco-yellow);line-height:1}
.abaco-inv-hero-count span{font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:#d6d6d9}

/* ===== Contenedor general del catálogo ===== */
.abaco-inv-wrap{background:var(--abaco-gray);padding:36px 0 60px}
.abaco-inv-wrap .container{max-width:var(--abaco-max);padding:0 20px;margin:0 auto}

/* ===== Panel de filtros ===== */
.abaco-inv-wrap .filter-sidebar{background:#fff;border-radius:6px;padding:22px 20px;box-shadow:var(--abaco-shadow)}
.abaco-inv-wrap .sidebar-entry-header{display:flex;align-items:center;gap:8px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--abaco-gray2)}
.abaco-inv-wrap .sidebar-entry-header .h4{font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;color:var(--abaco-black);margin:0}
.abaco-inv-wrap .sidebar-entry-header i{color:var(--abaco-red)}
/* ABACO-WEB-VISUAL-001 — archivos de taxonomía (marca desde el Mega Menu): Motors
   posiciona el icono solo en body.post-type-archive-listings (app.css) y
   motors-inventory-search-filter.css lo devuelve al flujo (position:unset), lo que
   empuja el título a la derecha. Misma posición que en /listings/. */
.abaco-inv-wrap .classic-filter-row.motors-elementor-widget .filter-sidebar .sidebar-entry-header i{position:absolute;top:32px;left:21px}
.abaco-inv-wrap .filter-sidebar .form-control,
.abaco-inv-wrap .filter-sidebar select,
.abaco-inv-wrap .filter-sidebar input[type="text"],
.abaco-inv-wrap .filter-sidebar input[type="number"]{
	width:100%;border:1px solid var(--abaco-gray2);border-radius:4px;padding:9px 10px;font-size:12px;
	color:var(--abaco-text);background:#fff;text-transform:none;
}
.abaco-inv-wrap .filter-sidebar .form-group{margin-bottom:14px}
.abaco-inv-wrap .filter-sidebar .col-md-12,
.abaco-inv-wrap .filter-sidebar .col-sm-6{padding-left:0;padding-right:0}
.abaco-inv-wrap .sidebar-action-units{margin-top:6px}
.abaco-inv-wrap .sidebar-action-units .button{
	display:flex;align-items:center;justify-content:center;gap:6px;width:100%;
	background:var(--abaco-black);color:#fff;border-radius:4px;padding:11px;
	font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.4px;
}
.abaco-inv-wrap .sidebar-action-units .button:hover{background:var(--abaco-red)}

/* ===== Barra superior: título / orden / vista ===== */
.abaco-inv-wrap .stm-filter-top-wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;background:#fff;border-radius:6px;padding:14px 18px;margin-bottom:18px;box-shadow:var(--abaco-shadow)}
.abaco-inv-wrap .stm-listing-directory-title .title{font-size:15px;text-transform:uppercase;letter-spacing:.3px;margin:0;color:var(--abaco-black)}
.abaco-inv-wrap .stm-directory-listing-top__right{display:flex;align-items:center;gap:16px}
.abaco-inv-wrap .stm-sort-by-options{display:flex;align-items:center;gap:8px;font-size:11px;text-transform:uppercase;color:var(--abaco-muted)}
.abaco-inv-wrap .stm-select-sorting select{border:1px solid var(--abaco-gray2);border-radius:4px;padding:7px 10px;font-size:12px;color:var(--abaco-text)}
.abaco-inv-wrap .stm-view-by{display:flex;gap:6px}
.abaco-inv-wrap .stm-view-by a{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--abaco-gray2);border-radius:4px;color:var(--abaco-muted)}
.abaco-inv-wrap .stm-view-by a.active{background:var(--abaco-black);border-color:var(--abaco-black);color:#fff}

/* ===== Cuadrícula de tarjetas ===== */
.abaco-inv-wrap .stm-isotope-sorting{margin:0 -8px}
.abaco-inv-wrap .stm-isotope-listing-item{padding:0 8px;margin-bottom:16px;box-sizing:border-box}
.abaco-inv-wrap .stm-directory-grid-loop{background:#fff;border:1px solid var(--abaco-gray2);border-radius:6px;overflow:hidden;transition:.2s}
.abaco-inv-wrap .stm-directory-grid-loop:hover{box-shadow:var(--abaco-shadow);transform:translateY(-2px)}
.abaco-inv-wrap .stm-directory-grid-loop a.rmv_txt_drctn{display:block;color:inherit;text-decoration:none}
.abaco-inv-wrap .stm-directory-grid-loop .image{position:relative;aspect-ratio:16/11;overflow:hidden;background:#eee}
.abaco-inv-wrap .stm-directory-grid-loop .image img{width:100%;height:100%;object-fit:cover;display:block}
.abaco-inv-wrap .listing-car-item-meta{padding:14px 16px 16px}
.abaco-inv-wrap .car-meta-top{display:flex;flex-direction:column-reverse;gap:4px;margin-bottom:8px}
.abaco-inv-wrap .car-title{font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.1px;color:var(--abaco-black);line-height:1.3}
.abaco-inv-wrap .price,
.abaco-inv-wrap .price:before{background-color:var(--abaco-red)!important}
/* ABACO-WEB-015 (Parte B1): "PRECIO DE LISTA $precio" en una sola línea.
   WEB-013 lo apilaba en dos líneas (etiqueta arriba, muy pequeña) para
   evitar el overflow horizontal que WEB-012 había corregido; ahora se
   pone en fila (flexbox + nowrap) con la etiqueta en un tamaño legible
   (no diminuto) y el precio predominante. El markup ".price > .normal-price"
   sigue siendo el de Motors, sin tocar — solo presentación visual vía ::before. */
.abaco-inv-wrap .price .normal-price{
	font-size:15px;font-weight:900;color:#fff!important;
	display:flex;flex-direction:row;align-items:baseline;justify-content:flex-end;
	gap:6px;white-space:nowrap;
}
.abaco-inv-wrap .price .normal-price:before{
	content:"Precio de lista";font-size:10px;font-weight:800;letter-spacing:.3px;
	text-transform:uppercase;color:#fff;opacity:.92;white-space:nowrap;
}
.abaco-inv-wrap .price.discounted-price .regular-price{font-size:11px;color:rgba(255,255,255,.7)!important;text-decoration:line-through;white-space:nowrap}
.abaco-inv-wrap .price.discounted-price .sale-price{
	font-size:15px;font-weight:900;color:#fff!important;
	display:flex;flex-direction:row;align-items:baseline;justify-content:flex-end;
	gap:6px;white-space:nowrap;
}
.abaco-inv-wrap .price.discounted-price .sale-price:before{
	content:"Precio de lista";font-size:10px;font-weight:800;letter-spacing:.3px;
	text-transform:uppercase;color:#fff;opacity:.92;white-space:nowrap;
}
/* Tarjetas muy angostas (mobile pequeño, columna única): si aun así no
   cabe en una línea, se permite envolver como último recurso, sin reducir
   el texto a un tamaño ilegible (regla explícita de esta fase). */
@media(max-width:380px){
	.abaco-inv-wrap .price .normal-price,
	.abaco-inv-wrap .price.discounted-price .sale-price{flex-wrap:wrap;justify-content:flex-end;white-space:normal}
}
.abaco-inv-wrap .car-meta-bottom ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 14px;margin:10px 0 0;padding:10px 0 0;border-top:1px solid var(--abaco-gray2)}
.abaco-inv-wrap .car-meta-bottom li{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--abaco-muted)}
.abaco-inv-wrap .car-meta-bottom i{color:var(--abaco-red);font-size:12px}
/* ABACO-WEB-015 (Parte B3): el kilometraje aparece como número suelto
   (ej. "36818"), sin unidad visible. Se agrega " km" solo al <li> que
   contiene el icono de kilometraje (stm-icon-road — único en esta lista
   desde que WEB-013 le dio a "Año" su propio icono de calendario), sin
   tocar el valor almacenado ni ningún otro campo. */
.abaco-inv-wrap .car-meta-bottom li:has(.stm-icon-road) span::after{content:" km"}

/* ===== Vacío / paginación ===== */
.abaco-inv-wrap .stm-listings-empty{background:#fff;border-radius:6px;padding:60px 20px;text-align:center;box-shadow:var(--abaco-shadow)}
.abaco-inv-wrap .stm-listings-empty__not-found{display:block;font-size:16px;font-weight:800;text-transform:uppercase;color:var(--abaco-black);margin-top:10px}
.abaco-inv-wrap .stm-listings-empty__another{display:block;font-size:13px;color:var(--abaco-muted);margin-top:6px}
.abaco-inv-wrap .stm-listings-empty__button{display:inline-block;margin-top:18px;background:var(--abaco-red);color:#fff;border-radius:4px;padding:11px 20px;font-size:12px;font-weight:900;text-transform:uppercase}
.abaco-inv-wrap .stm_ajax_pagination{display:flex;justify-content:center;margin-top:26px}
.abaco-inv-wrap .stm_ajax_pagination ul{list-style:none;display:flex;gap:6px;margin:0;padding:0}
.abaco-inv-wrap .stm_ajax_pagination a,
.abaco-inv-wrap .stm_ajax_pagination span{display:grid;place-items:center;min-width:36px;height:36px;padding:0 10px;border-radius:4px;background:#fff;border:1px solid var(--abaco-gray2);font-size:12px;font-weight:700;color:var(--abaco-text)}
.abaco-inv-wrap .stm_ajax_pagination .current{background:var(--abaco-black);border-color:var(--abaco-black);color:#fff}
.abaco-inv-wrap .stm_ajax_pagination a:hover{border-color:var(--abaco-red);color:var(--abaco-red)}

/* ===== Botón "Filtrar vehículos" (mobile) ===== */
.abaco-inv-filter-toggle{display:none}

/* ===== Responsive ===== */
@media (max-width:1000px){
	.abaco-inv-hero h1{font-size:32px}
	.abaco-inv-filter-toggle{
		display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
		background:var(--abaco-black);color:#fff;border:0;border-radius:5px;padding:13px;
		font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.4px;margin-bottom:14px;
	}
	.abaco-inv-wrap .classic-filter-row .filter-sidebar{display:none}
	.abaco-inv-wrap.abaco-filters-open .classic-filter-row .filter-sidebar{display:block;margin-bottom:8px}
}

@media (max-width:640px){
	.abaco-inv-hero{padding:40px 0 32px}
	.abaco-inv-hero h1{font-size:26px}
	.abaco-inv-hero p{font-size:13px}
	.abaco-inv-wrap .stm-filter-top-wrap{flex-direction:column;align-items:stretch}
	.abaco-inv-wrap .stm-directory-listing-top__right{justify-content:space-between}
	.abaco-inv-wrap .stm-isotope-listing-item{flex:1 1 100%;max-width:100%}
}