/* ═══════════════════════════════════════════════════════════════
   Campaign Theme
   Customize the values in this block — everything else adapts.
   ═══════════════════════════════════════════════════════════════ */
:root {
	/* Primary / brand color — used for buttons, links, active states */
	--cm-primary:  #68b608;

	/* Page background */
	--cm-bg:       #fff;

	/* Font *
	--cm-font:     Arial, sans-serif;

	/* Border color for cards, dividers */
	--cm-border:   #e404f4;

	/* Border radius for cards, images */
	--cm-radius:   10px;
}
/* ═══════════════════════════════════════════════════════════════ */


/* ── Auto-generated tints (no need to edit) ──────────────────── */
:root {
	--cm-primary-tint: color-mix(in srgb, var(--cm-primary) 12%, white);
	--cm-primary-hover: color-mix(in srgb, var(--cm-primary) 85%, black);
}

/* ── WebAwesome brand token overrides ────────────────────────── */
/* WA uses semantic tokens — components read these directly.      */
:root {
	/* Filled button background + strong borders */
	--wa-color-brand-fill-loud:    var(--cm-primary);
	--wa-color-brand-fill-normal:  color-mix(in srgb, var(--cm-primary) 18%, white);
	--wa-color-brand-fill-quiet:   color-mix(in srgb, var(--cm-primary)  8%, white);

	--wa-color-brand-border-loud:   var(--cm-primary);
	--wa-color-brand-border-normal: color-mix(in srgb, var(--cm-primary) 45%, white);
	--wa-color-brand-border-quiet:  color-mix(in srgb, var(--cm-primary) 22%, white);

	/* Text on brand-colored backgrounds */
	--wa-color-brand-on-loud:   white;
	--wa-color-brand-on-normal: var(--cm-primary-hover);
	--wa-color-brand-on-quiet:  var(--cm-primary);

	/* Links + focus ring */
	--wa-color-text-link: var(--cm-primary);
	--wa-color-focus:     var(--cm-primary);

	--wa-font-sans: var(--cm-font);
	--wa-border-radius-m: var(--cm-radius);
}

/* ── Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body { font-family: var(--cm-font); background: var(--cm-bg); color: #1a1a2e; min-height: 100vh; }

/* ── Page layout ──────────────────────────────────────────────── */
#cm-header  { max-width: 1100px; margin: 0 auto; padding: 32px 24px 0; }
#cm-content { max-width: 1100px; margin: 0 auto; padding: 32px 24px; }

/* ── Category page sections ───────────────────────────────────── */
.cm-cat-info { max-width: 1100px; margin: 0 auto; padding: 28px 24px 0; }

.cm-hero { max-width: 1100px; margin: 0 auto; padding: 16px 24px 0; }
.cm-hero picture, .cm-hero img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--cm-radius);
}
@media (min-width: 640px) {
	.cm-hero picture, .cm-hero img { aspect-ratio: 16 / 9; }
}

.cm-legal { max-width: 1100px; margin: 0 auto; padding: 8px 24px 0; font-size: 12px; color: #718096; line-height: 1.6; }
.cm-legal p { margin: 0; }

/* ── Campaign grid ────────────────────────────────────────────── */
.cm-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}
.cm-campaign-card { width: 100%; cursor: pointer; }
.cm-campaign-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.08); }

/* ── Car card ─────────────────────────────────────────────────── */
.cm-car-card { width: 100%; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.cm-car-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }

/* ── Car detail — mobile base ─────────────────────────────────── */
.cm-car-detail { max-width: 600px; margin: 0 auto; background: #fff; min-height: 100vh; }
@media (min-width: 640px) {
	.cm-car-detail { box-shadow: 0 0 0 1px #e2e8f0; margin: 24px auto; min-height: auto; border-radius: 16px; overflow: hidden; }
}

/* ── Car detail — desktop 2-col layout ────────────────────────── */
.cm-car-nav         { display: flex; align-items: center; padding: 12px 20px; }
.cm-car-body-left   { padding: 12px 20px 0; }
.cm-car-body-right  { padding: 0 20px 16px; }
.cm-car-body-full   { padding: 0 20px; }
.cm-car-body-heading h1   { font-size: 22px; font-weight: 800; line-height: 1.2; margin: 0 0 2px; }
.cm-car-body-heading .sub { font-size: 15px; color: #64748b; margin-bottom: 4px; }

@media (min-width: 960px) {
	.cm-car-detail {
		max-width: 1200px;
		border-radius: 20px;
		overflow: hidden;
		margin: 32px auto;
		box-shadow: 0 4px 32px rgba(0,0,0,.10);
	}
	.cm-car-nav { padding: 24px 36px 0; }
	.cm-car-nav-title { display: none; } /* title moves to right column */
	.cm-car-body {
		display: grid;
		grid-template-columns: 55fr 45fr;
		grid-template-areas: "left right" "full full";
		align-items: start;
	}
	.cm-car-body-left  { grid-area: left;  padding: 20px 20px 28px 36px; }
	.cm-car-body-right {
		grid-area: right;
		padding: 20px 36px 28px 20px;
		position: sticky;
		top: 0;
		max-height: 100vh;
		overflow-y: auto;
	}
	.cm-car-body-full  { grid-area: full;  padding: 0 36px 36px; }
	.cm-car-body-heading h1   { font-size: 30px; }
	.cm-car-body-heading .sub { font-size: 16px; margin-bottom: 16px; }
}

/* ── Empty state ──────────────────────────────────────────────── */
.cm-empty { color: #718096; font-size: 14px; padding: 40px 0; text-align: center; }

/* ── Item card (category + campaign grid) ─────────────────────── */
.cm-item-card { display: flex; flex-direction: column; cursor: pointer; width: 100%; }
.cm-item-card::part(base) { overflow: hidden; display: flex; flex-direction: column; height: 100%; }
.cm-item-card-img {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--cm-primary-tint);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.cm-item-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-item-card-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cm-item-card-title { font-weight: 700; font-size: 15px; color: #1a1a2e; line-height: 1.3; }
.cm-item-legal { font-size: 11px; color: #a0aec0; line-height: 1.5; }



wa-card {
	--spacing: 10px;
}

/* ── Offer details accordion: match wa-button height ─────────── */
.cm-offer-details::part(header) {
	min-height: var(--wa-form-control-height-m, 40px);
	box-sizing: border-box;
}

/* ── Detail rows: full-width striped backgrounds ─────────────── */
.cm-detail-rows::part(base)    { overflow: hidden; }
.cm-detail-rows::part(content) { padding: 0; }

/* ── Equipment HTML content ───────────────────────────────────── */
.cm-equip h2 {
	font-size: 14px;
	font-weight: 700;
	margin: 0;
	padding: 1rem 1rem 0.375rem;
	color: #0f172a;
}
.cm-equip h2:first-child { padding-top: 10px; }
.cm-equip ul {
	list-style: none;
	/* padding-left: 12px; */
	margin: 0 0 4px;
}
.cm-equip li {
	padding: 8px 24px;
	border-bottom: 1px solid #f1f5f9;
	font-size: 14px;
}
.cm-equip li:nth-child(odd)  { background: #ffffff; }
.cm-equip li:nth-child(even) { background: #f5f5f5; }
.cm-equip li:last-child { border-bottom: none; }
.cm-equip li p { margin: 0; }
.cm-equip p:empty { display: none; }

/* ── FAQ Section ──────────────────────────────────────────────── */
.cm-faq { max-width: 1100px; margin: 0 auto; padding: 32px 24px 40px; }
.cm-faq-box {
	border: 1px solid #e2e8f0;
	border-radius: var(--cm-radius);
	overflow: hidden;
	background: #fff;
}
.cm-faq-item::part(base)    { border-radius: 0; border: none; border-bottom: 1px solid #e2e8f0; }
.cm-faq-item::part(header)  { padding: 16px 20px; font-weight: 600; font-size: 15px; color: #1a1a2e; min-height: 54px; box-sizing: border-box; }
.cm-faq-item::part(content) { padding: 4px 20px 18px; font-size: 15px; line-height: 1.75; color: #4a5568; }

/* ── Marquee for overflowing text ─────────────────────────────── */
.cm-marquee {
	display: inline-block;
	white-space: nowrap;
	animation: cm-marquee 4s ease-in-out 1.5s infinite alternate;
}
@keyframes cm-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(var(--marquee-shift, 0px)); }
}