/* =========================================================================
   Custom Description Layout (cdl-*)
   Styles for the new custom-description-layout PHP component.
   Append this to overrides.css.
   ========================================================================= */

.cdl-layout {
	max-width: 1050px;
	margin: 42px auto;
	font-family: Arial, Helvetica, sans-serif;
	color: #1f2937;
	line-height: 1.6;
}

/* -------- Generic card chrome -------- */
.cdl-layout .cdl-card {
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	padding: 26px;
	margin-bottom: 22px;
	background: #fff;
}

.cdl-layout .cdl-row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 22px;
}

.cdl-layout .cdl-row .cdl-card {
	flex: 1;
	min-width: 270px;
	margin-bottom: 0;
}

/* -------- Badge pill -------- */
.cdl-layout .cdl-badge {
	display: inline-block;
	background: #003366;
	color: #fff;
	font-size: 13px;
	font-weight: bold;
	padding: 5px 12px;
	border-radius: 20px;
	margin-bottom: 12px;
}

.cdl-layout .cdl-badge i {
	margin-right: 6px;
}

.cdl-layout .cdl-badge-green {
	background: #16a34a;
}

/* -------- Headings -------- */
.cdl-layout .cdl-h2 {
	margin: 0 0 12px 0;
	color: #003366;
	font-size: 23px;
}

.cdl-layout .cdl-h2 i {
	margin-right: 8px;
	color: #003366;
}

.cdl-layout .cdl-h3 {
	margin: 0 0 12px 0;
	color: #003366;
	font-size: 21px;
}

.cdl-layout p {
	margin-top: 0;
}

.cdl-layout .cdl-small {
	font-size: 13px;
	color: #475569;
	margin: 10px 0 0 0;
}

.cdl-layout .cdl-small i,
.cdl-layout .cdl-icon-accent {
	color: #16a34a;
	margin-right: 7px;
}

/* =========================================================================
   1. FITMENT CHECK
   ========================================================================= */

.cdl-layout .cdl-card-fitment {
	background: linear-gradient(135deg, #f8fafc, #eef5fb);
	border: 1px solid #dbe3ec;
}

.cdl-layout .cdl-two-col {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
}

.cdl-layout .cdl-two-col-left,
.cdl-layout .cdl-two-col-right {
	flex: 1;
	min-width: 270px;
}

.cdl-layout .cdl-two-col-right {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 18px;
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.cdl-layout .cdl-button {
	display: block;
	text-align: center;
	background: #16a34a;
	color: #fff;
	padding: 13px 18px;
	border-radius: 8px;
	text-decoration: none;
	font-weight: bold;
}

.cdl-layout .cdl-button i {
	margin-right: 7px;
}

/* =========================================================================
   2. PRODUCT OVERVIEW
   ========================================================================= */

.cdl-layout .cdl-overview-body h2 {
	margin: 0 0 12px 0;
	color: #003366;
	font-size: 23px;
}

.cdl-layout .cdl-overview-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 18px;
}

.cdl-layout .cdl-overview-card {
	flex: 1;
	min-width: 220px;
	background: #f8fafc;
	border: 1px solid #e5e7eb;
	border-radius: 11px;
	padding: 16px;
}

.cdl-layout .cdl-overview-card strong {
	color: #003366;
}

.cdl-layout .cdl-overview-card strong i {
	margin-right: 7px;
}

.cdl-layout .cdl-overview-card p {
	margin: 7px 0 0 0;
	font-size: 14px;
}

/* =========================================================================
   3. KEY SPECIFICATIONS
   ========================================================================= */

.cdl-layout .cdl-keyspec-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}

.cdl-layout .cdl-keyspec-col {
	flex: 1;
	min-width: 280px;
}

.cdl-layout .cdl-keyspec-row {
	display: flex;
	justify-content: space-between;
	padding: 10px;
	border-bottom: 1px solid #e5e7eb;
	gap: 12px;
}

.cdl-layout .cdl-keyspec-label {
	font-weight: bold;
}

.cdl-layout .cdl-keyspec-label i {
	margin-right: 6px;
	color: #003366;
}

.cdl-layout .cdl-keyspec-value {
	text-align: right;
	max-width: 100%;
}

/* =========================================================================
   4. COMPATIBLE VEHICLES
   ========================================================================= */

.cdl-layout .cdl-compat-table {
	display: flex;
	flex-direction: column;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	overflow: hidden;
	font-size: 15px;
}

.cdl-layout .cdl-compat-header {
	display: flex;
	background: #f1f5f9;
	font-weight: bold;
	color: #003366;
}

.cdl-layout .cdl-compat-header > div,
.cdl-layout .cdl-compat-row > div {
	flex: 1;
	padding: 12px;
	border-right: 1px solid #e5e7eb;
}

.cdl-layout .cdl-compat-header > div:last-child,
.cdl-layout .cdl-compat-row > div:last-child {
	border-right: none;
}

.cdl-layout .cdl-compat-row {
	display: flex;
	border-top: 1px solid #e5e7eb;
	background: #fff;
}

.cdl-layout .cdl-see-more {
	margin-top: 10px;
}

.cdl-layout .cdl-see-more a {
	color: #003366;
	font-weight: bold;
	text-decoration: none;
}

.cdl-layout .cdl-compat-popup[hidden] {
	display: none;
}

.cdl-layout .cdl-warn {
	margin-top: 14px;
	padding: 13px;
	background: #fff7ed;
	border: 1px solid #fed7aa;
	border-radius: 9px;
	font-size: 14px;
}

.cdl-layout .cdl-warn i {
	color: #f59e0b;
	margin-right: 7px;
}

/* =========================================================================
   5/6/7. DELIVERY / RETURNS / IMPORTANT NOTES
   ========================================================================= */

.cdl-layout .cdl-card-phrase {
	padding: 23px;
}

.cdl-layout .cdl-phrase {
	margin: 0 0 12px 0;
}

.cdl-layout .cdl-phrase i {
	margin-right: 7px;
	color: #16a34a;
}

/* =========================================================================
   8. FAQ
   ========================================================================= */

.cdl-layout .cdl-faq-item {
	border: 1px solid #e5e7eb;
	border-radius: 9px;
	padding: 14px;
	margin-bottom: 10px;
	background: #f8fafc;
}

.cdl-layout .cdl-faq-item:last-child {
	margin-bottom: 0;
}

.cdl-layout .cdl-faq-item summary {
	cursor: pointer;
	font-weight: bold;
	color: #1f2937;
	list-style: none;
}

.cdl-layout .cdl-faq-item summary::-webkit-details-marker {
	display: none;
}

.cdl-layout .cdl-faq-item summary i {
	color: #003366;
	margin-right: 7px;
}

.cdl-layout .cdl-faq-item p {
	margin: 12px 0 0 0;
}

/* =========================================================================
   Responsive: when a flex item hits 100% width, the next one stacks under it
   (the default flex-wrap behaviour already handles this — these rules just
   tighten spacing on narrow viewports).
   ========================================================================= */

@media all and (max-width: 600px) {

	.cdl-layout {
		margin: 20px auto;
	}

	.cdl-layout .cdl-card,
	.cdl-layout .cdl-card-phrase {
		padding: 18px;
	}

	.cdl-layout .cdl-h2 {
		font-size: 20px;
	}

	.cdl-layout .cdl-h3 {
		font-size: 18px;
	}

	.cdl-layout .cdl-keyspec-value {
		text-align: left;
	}

	.cdl-layout .cdl-compat-table {
		font-size: 13px;
	}

	.cdl-layout .cdl-compat-header > div,
	.cdl-layout .cdl-compat-row > div {
		padding: 8px;
	}

}