/* =============================================================================
   Centerpoint Trailers — Frontend Shortcode Styles
   ============================================================================= */

/* Specs table [cp_trailer_specs] */
.cp-specs-table {
	display: flex;
	gap: 0 40px;
	font-size: 13px;
	width: 100%;
}

.cp-specs-col {
	flex: 1;
	min-width: 0;
}

.cp-specs-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 7px 0;
	border-bottom: 1px solid #f0f0f0;
	gap: 12px;
}

.cp-specs-label {
	font-family: 'Trueno', sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size: 10px;
	line-height: 16px;
	letter-spacing: 0.35px;
	color: #999999;
	white-space: nowrap;
}

.cp-specs-value {
	font-family: 'Trueno', sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size: 11px;
	line-height: 16px;
	letter-spacing: 0px;
	color: #222222;
	text-align: right;
}

@media ( max-width: 600px ) {
	.cp-specs-table {
		flex-direction: column;
		gap: 0;
	}
}

/* Recommended trailers [cp_trailer_recommended] */
/* Card styles come from centerpoint-trailers-ui plugin CSS */
/* This just handles the wrapper and grid */
.cp-recommended {
	margin-top: 16px;
}

.cp-recommended .cp-cards {
	display: grid;
	gap: 20px;
}

.cp-recommended .cp-cards--cols-4 {
	grid-template-columns: repeat( 4, 1fr );
}

@media ( max-width: 900px ) {
	.cp-recommended .cp-cards--cols-4 { grid-template-columns: repeat( 2, 1fr ); }
}

@media ( max-width: 480px ) {
	.cp-recommended .cp-cards--cols-4 { grid-template-columns: 1fr; }
}


/* Breadcrumb [cp_trailer_breadcrumb] */
.cp-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2px;
	font-family: 'Trueno', sans-serif;
	font-weight: 600;
	font-size: 11px;
	line-height: 16.5px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}

.cp-breadcrumb a {
	color: #999999;
	text-decoration: none;
}

.cp-breadcrumb a:hover {
	color: #cc0000;
}

.cp-breadcrumb__sep {
	color: #cccccc;
	margin: 0 2px;
}

.cp-breadcrumb__current {
	color: #333333;
}

/* Category list [cp_category_list] — base layout only, style in Elementor Custom CSS */
.cp-term-list {
	display: grid;
	gap: 8px 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cp-term-list--cols-1 { grid-template-columns: repeat(1, 1fr); }
.cp-term-list--cols-2 { grid-template-columns: repeat(2, 1fr); }
.cp-term-list--cols-3 { grid-template-columns: repeat(3, 1fr); }
.cp-term-list--cols-4 { grid-template-columns: repeat(4, 1fr); }
.cp-term-list--cols-5 { grid-template-columns: repeat(5, 1fr); }
.cp-term-list--cols-6 { grid-template-columns: repeat(6, 1fr); }

.cp-term-list__item {
	margin: 0;
}

.cp-term-list__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	text-decoration: none;
}

@media ( max-width: 600px ) {
	.cp-term-list--cols-3,
	.cp-term-list--cols-4,
	.cp-term-list--cols-5,
	.cp-term-list--cols-6 {
		grid-template-columns: repeat(2, 1fr);
	}
}