/* Seller landing pages (TCT-9878): styles for the Elementor template "Seller Landing Template".
   Layout (sections, padding, flex direction, gaps) is set in the template; this file sets type, colours,
   cards, the quantity select and the FAQ accordion through the CSS classes on its widgets and containers.
   Selectors start with .ct-sl to outrank the Elementor kit; settings an editor sets on a widget still win. */

.ct-sl {
	--ct-sl-gold: #d98f00;
	--ct-sl-gold-dark: #b87900;
	--ct-sl-ink: #242629;
	--ct-sl-muted: #5f6166;
	--ct-sl-line: #e4e1dc;
	--ct-sl-cream: #f6f4f0;
	--ct-sl-white: #fff;
	--kit-widget-spacing: 0px; /* spacing comes from the classes below */
	color: var(--ct-sl-ink);
	font-family: Montserrat, sans-serif;
	font-size: 16px;
	line-height: 1.6;
}

/* ------------------------------------------------------------------ views */

.ct-sl .ct-sl-form-only {
	display: none !important;
}

.ct-sl-form-view .ct-sl .ct-sl-form-only,
.elementor-editor-active .ct-sl .ct-sl-form-only {
	display: flex !important;
}

.ct-sl-form-view .ct-sl .ct-sl-landing-only {
	display: none !important;
}

/* ------------------------------------------------------------------ shared text */

.ct-sl .ct-sl-eyebrow .elementor-heading-title {
	color: var(--ct-sl-gold);
	font-family: Montserrat, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.5;
	text-transform: uppercase;
}

.ct-sl .elementor-widget.ct-sl-eyebrow {
	margin-block-end: 14px;
}

.ct-sl .ct-sl-h2 .elementor-heading-title,
.ct-sl .ct-sl-form__title .elementor-heading-title {
	color: var(--ct-sl-ink);
	font-family: Montserrat, sans-serif;
	font-size: clamp(32px, 3.9vw, 56px);
	font-weight: 400;
	letter-spacing: -0.03em; /* design -0.045em on Geist; Montserrat is wider, so a little less */
	line-height: 1.06;
	max-width: 680px;
}

.ct-sl .ct-sl-lead .elementor-heading-title {
	color: var(--ct-sl-muted);
	font-family: Montserrat, sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
}

/* ------------------------------------------------------------------ buttons */

.ct-sl .ct-sl-btn .elementor-button {
	align-items: center;
	border: 1px solid transparent; /* the kit adds a gold border and shadow to every button */
	border-radius: 0;
	box-shadow: none;
	display: inline-flex;
	font-family: Montserrat, sans-serif;
	font-size: 15px;
	font-weight: 700;
	justify-content: center;
	letter-spacing: 0.04em;
	min-height: 52px;
	padding: 14px 24px;
	text-transform: uppercase;
	transition: background-color 0.15s ease;
}

.ct-sl .ct-sl-btn .elementor-button-icon svg,
.ct-sl .ct-sl-btn .elementor-button-icon i {
	font-size: 14px;
	height: 14px;
	width: 14px;
}

.ct-sl .ct-sl-btn--gold .elementor-button {
	background: var(--ct-sl-gold);
	color: var(--ct-sl-ink);
	fill: var(--ct-sl-ink);
}

.ct-sl .ct-sl-btn--gold .elementor-button:hover,
.ct-sl .ct-sl-btn--gold .elementor-button:focus-visible {
	background: var(--ct-sl-gold-dark);
	color: var(--ct-sl-ink);
}

.ct-sl .ct-sl-btn--dark .elementor-button {
	background: var(--ct-sl-ink);
	color: var(--ct-sl-white);
	fill: var(--ct-sl-white);
	width: 100%;
}

.ct-sl .ct-sl-btn--dark .elementor-button:hover,
.ct-sl .ct-sl-btn--dark .elementor-button:focus-visible {
	background: #000;
	color: var(--ct-sl-white);
}

.ct-sl .ct-sl-btn .elementor-button:focus-visible {
	outline: 3px solid var(--ct-sl-gold);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ promo strip */

.ct-sl .e-con.ct-sl-promo {
	border-bottom: 1px solid var(--ct-sl-line);
}

.ct-sl .ct-sl-promo__list .elementor-icon-list-items.elementor-inline-items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ct-sl .ct-sl-promo__list .elementor-icon-list-item {
	justify-content: center;
	margin: 0 !important;
	padding: 0 8px;
}

.ct-sl .ct-sl-promo__list .elementor-icon-list-item:not(:last-child) {
	border-right: 1px solid #e6e4df;
}

.ct-sl .ct-sl-promo__list .elementor-icon-list-text {
	color: var(--ct-sl-ink);
	font-family: Montserrat, sans-serif;
	font-size: 15px;
	padding-inline-start: 8px;
}

/* Elementor pulls inline icon lists out by 8px each side inside an overflow:hidden wrapper,
   which clips the first icon and the last letter. Keep our inline lists inside their container. */
.ct-sl .elementor-widget-icon-list .elementor-icon-list-items.elementor-inline-items {
	margin-left: 0;
	margin-right: 0;
}

.ct-sl .ct-sl-promo__list .elementor-icon-list-item:after {
	display: none;
}

.ct-sl .ct-sl-promo__list .elementor-icon-list-icon i,
.ct-sl .ct-sl-ticks .elementor-icon-list-icon i,
.ct-sl .ct-sl-hero__points .elementor-icon-list-icon i {
	color: var(--ct-sl-gold);
	font-size: 14px;
}

.ct-sl .ct-sl-promo__list .elementor-icon-list-icon svg,
.ct-sl .ct-sl-ticks .elementor-icon-list-icon svg,
.ct-sl .ct-sl-hero__points .elementor-icon-list-icon svg {
	fill: var(--ct-sl-gold);
	height: 14px;
	width: 14px;
}

/* ------------------------------------------------------------------ hero */

.ct-sl .ct-sl-hero .elementor-widget.ct-sl-hero__title {
	margin-block-end: 28px;
}

.ct-sl .ct-sl-hero__title .elementor-heading-title {
	color: var(--ct-sl-white);
	font-family: Montserrat, sans-serif;
	font-size: clamp(40px, 5.1vw, 73px);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.06; /* Montserrat's descenders need more room than the design's Geist at 0.98 */
	max-width: 11em; /* design: ~800px, "Get your truck seen." / "Get it sold." */
}

.ct-sl .ct-sl-hero__intro {
	color: var(--ct-sl-white);
	font-family: Montserrat, sans-serif;
	font-size: 20px;
	line-height: 1.6;
	opacity: 0.92;
}

/* On the inner container: Elementor's widget rules (max-width:100%, widget spacing) outrank the wrapper. */
.ct-sl .ct-sl-hero__intro .elementor-widget-container {
	margin-block-end: 30px;
	max-width: 31em; /* 620px, as the design */
}

.ct-sl .ct-sl-hero__points {
	margin-block-start: 42px;
}

.ct-sl .ct-sl-hero__points .elementor-icon-list-items.elementor-inline-items {
	gap: 12px 28px;
}

.ct-sl .ct-sl-hero__points .elementor-icon-list-item {
	margin: 0 !important;
}

.ct-sl .ct-sl-hero__points .elementor-icon-list-text {
	color: var(--ct-sl-white);
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	padding-inline-start: 8px;
}

/* ------------------------------------------------------------------ listing options */

.ct-sl .e-con.ct-sl-cards {
	margin-top: 43px;
}

.ct-sl .e-con.ct-sl-card {
	--flex-basis: 0;
	--flex-grow: 1;
	--flex-shrink: 1;
	--width: auto;
	background: var(--ct-sl-white);
	border: 1px solid var(--ct-sl-line);
	box-shadow: 0 12px 30px rgba(27, 28, 29, 0.043);
	position: relative;
}

.ct-sl .e-con.ct-sl-card--featured {
	border: 2px solid var(--ct-sl-gold);
	box-shadow: 0 12px 32px rgba(36, 38, 41, 0.12);
}

.ct-sl .e-con.ct-sl-card > .elementor-widget.ct-sl-card__ribbon {
	left: -2px;
	max-width: none;
	position: absolute;
	right: -2px;
	top: -34px;
	width: calc(100% + 4px); /* Elementor sets widget width 100% of the padding box; reach over both 2px borders */
}

.ct-sl .ct-sl-card__ribbon .elementor-heading-title {
	background: var(--ct-sl-gold);
	color: var(--ct-sl-ink);
	font-family: Montserrat, sans-serif;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.12em;
	line-height: 1.6;
	padding: 8px 6px;
	text-align: center;
	text-transform: uppercase;
}

.ct-sl .ct-sl-card__title .elementor-heading-title {
	color: var(--ct-sl-ink);
	font-family: Montserrat, sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.5;
}

.ct-sl .elementor-widget.ct-sl-card__title {
	margin-block-end: 4px;
}

.ct-sl .ct-sl-card__subtitle .elementor-heading-title {
	color: var(--ct-sl-muted);
	font-family: Montserrat, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.45;
}

.ct-sl .elementor-widget.ct-sl-card__subtitle {
	margin-block-end: 28px;
}

.ct-sl .ct-sl-card__price .elementor-heading-title {
	color: var(--ct-sl-muted);
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
}

.ct-sl .ct-sl-price {
	color: var(--ct-sl-ink);
	font-size: 43px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-inline-end: 4px;
}

.ct-sl .ct-sl-card__term .elementor-heading-title {
	color: var(--ct-sl-muted);
	font-family: Montserrat, sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.6;
}

.ct-sl .elementor-widget.ct-sl-card__min {
	border-top: 1px solid var(--ct-sl-line);
	margin-block: 20px 22px;
	padding-top: 20px;
}

.ct-sl .ct-sl-card__min .elementor-heading-title {
	color: #676864;
	font-family: Montserrat, sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
}

.ct-sl .elementor-widget.ct-sl-ticks {
	margin-block-end: 28px;
}

.ct-sl .ct-sl-ticks .elementor-icon-list-items {
	display: grid;
	gap: 14px;
}

.ct-sl .ct-sl-ticks .elementor-icon-list-item {
	align-items: flex-start;
	margin: 0 !important;
	min-height: 24px;
	padding: 0 !important;
}

.ct-sl .ct-sl-ticks .elementor-icon-list-item:after {
	display: none;
}

.ct-sl .ct-sl-ticks .elementor-icon-list-icon {
	padding-top: 2px;
}

.ct-sl .ct-sl-ticks .elementor-icon-list-text {
	color: #4b4c49;
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	line-height: 1.35;
	padding-inline-start: 10px;
}

.ct-sl .e-con.ct-sl-card__foot {
	margin-top: auto;
}

.ct-sl .ct-sl-card__qty {
	color: #343532;
	display: flex;
	flex-direction: column;
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	font-weight: 700;
	gap: 8px;
	margin: 0;
}

.ct-sl .ct-sl-card__qty span {
	line-height: 1.5;
}

.ct-sl .ct-sl-card__qty select {
	appearance: none;
	background: var(--ct-sl-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23242629' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 18px 18px;
	border: 1px solid #cfccc6;
	border-radius: 2px;
	color: var(--ct-sl-ink);
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	min-height: 48px;
	padding: 10px 48px 10px 16px;
	width: 100%;
}

/* ------------------------------------------------------------------ two-column sections */

/* Column gap is set on the template's split containers (Elementor's own gap wins over theme CSS). */
.ct-sl .e-con.ct-sl-split__left {
	--flex-basis: 0;
	--flex-grow: 390;
	--width: auto;
}

.ct-sl .e-con.ct-sl-split__right {
	--flex-basis: 0;
	--flex-grow: 850;
	--width: auto;
}

.ct-sl .ct-sl-about__body {
	color: var(--ct-sl-muted);
	font-family: Montserrat, sans-serif;
	font-size: 18px;
	line-height: 1.7;
	margin-block-end: 8px;
}

.ct-sl .ct-sl-about__body p {
	margin: 0 0 20px;
}

.ct-sl .ct-sl-about__body .elementor-widget-container {
	padding-block-end: 10px; /* + the last paragraph's 20px = the design's 30px above the button (padding: a margin would collapse) */
}

/* ------------------------------------------------------------------ how to list */

.ct-sl .e-con.ct-sl-steps__list {
	margin-top: 40px;
}

.ct-sl .e-con.ct-sl-step {
	--flex-basis: 0;
	--flex-grow: 1;
	--width: auto;
	border-top: 2px solid var(--ct-sl-gold);
	padding-top: 25px;
}

.ct-sl .ct-sl-step__num .elementor-heading-title {
	color: var(--ct-sl-gold);
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.5;
}

.ct-sl .elementor-widget.ct-sl-step__num {
	margin-block-end: 20px;
}

.ct-sl .ct-sl-step__title .elementor-heading-title {
	color: var(--ct-sl-ink);
	font-family: Montserrat, sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.3;
}

.ct-sl .elementor-widget.ct-sl-step__title {
	margin-block-end: 14px;
}

.ct-sl .ct-sl-step__text {
	color: var(--ct-sl-muted);
	font-family: Montserrat, sans-serif;
	font-size: 16px;
	line-height: 1.7;
}

/* ------------------------------------------------------------------ FAQs */

.ct-sl .e-con.ct-sl-faq-item {
	border-top: 1px solid var(--ct-sl-line);
}

.ct-sl .e-con.ct-sl-faq-item:last-child {
	border-bottom: 1px solid var(--ct-sl-line);
}

.ct-sl .ct-sl-faq-q .elementor-heading-title {
	align-items: center;
	color: var(--ct-sl-ink);
	cursor: pointer;
	display: flex;
	font-family: Montserrat, sans-serif;
	font-size: 18px;
	font-weight: 700;
	gap: 16px;
	justify-content: space-between;
	line-height: 1.5;
	padding: 22px 0;
}

.ct-sl .ct-sl-faq-q .elementor-heading-title:after {
	border-bottom: 2px solid var(--ct-sl-gold);
	border-right: 2px solid var(--ct-sl-gold);
	content: "";
	flex: none;
	height: 9px;
	margin-right: 4px;
	transform: rotate(45deg) translateY(-3px);
	transition: transform 0.2s ease;
	width: 9px;
}

.ct-sl .ct-sl-faq-item.is-open .ct-sl-faq-q .elementor-heading-title:after {
	transform: rotate(-135deg) translateY(-3px);
}

.ct-sl .ct-sl-faq-q .elementor-heading-title:focus-visible {
	outline: 3px solid var(--ct-sl-gold);
	outline-offset: 2px;
}

.ct-sl .ct-sl-faq-a {
	color: var(--ct-sl-muted);
	display: none;
	font-family: Montserrat, sans-serif;
	font-size: 16px;
	line-height: 1.7;
	padding: 0 40px 20px 0;
}

.ct-sl .ct-sl-faq-item.is-open .ct-sl-faq-a,
.elementor-editor-active .ct-sl .ct-sl-faq-a {
	display: block;
}

/* ------------------------------------------------------------------ form view */

.ct-sl .e-con.ct-sl-form__intro {
	--flex-basis: 0;
	--flex-grow: 4;
	--width: auto;
}

.ct-sl .e-con.ct-sl-form__panel {
	--flex-basis: 0;
	--flex-grow: 8;
	--width: auto;
	background: var(--ct-sl-white);
	border: 1px solid var(--ct-sl-line);
}

.ct-sl .elementor-widget.ct-sl-form__title {
	margin-block-end: 16px;
}

.ct-sl .ct-sl-form__text {
	color: var(--ct-sl-muted);
	margin-block-end: 28px;
}

.ct-sl .e-con.ct-sl-help {
	background: var(--ct-sl-white);
	border-left: 3px solid var(--ct-sl-gold);
	font-size: 14px;
}

.ct-sl .ct-sl-help__title .elementor-heading-title {
	color: var(--ct-sl-ink);
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	font-weight: 700;
}

.ct-sl .ct-sl-help__text p {
	margin: 6px 0 0;
}

.ct-sl .ct-sl-help__text a {
	color: var(--ct-sl-ink);
	font-weight: 700;
}

/* ------------------------------------------------------------------ responsive */

@media (max-width: 1024px) {
	/* Stacked cards: the 56px tablet gap (room for the Boosted ribbon) is set in the template. */
	.ct-sl .e-con.ct-sl-cards {
		margin-left: auto;
		margin-right: auto;
		max-width: 520px;
		width: 100%;
	}

	.ct-sl .e-con.ct-sl-card,
	.ct-sl .e-con.ct-sl-split__left,
	.ct-sl .e-con.ct-sl-split__right,
	.ct-sl .e-con.ct-sl-form__intro,
	.ct-sl .e-con.ct-sl-form__panel {
		--flex-basis: auto;
		--width: 100%;
	}
}

@media (max-width: 1024px) {
	/* Promo strip stacks in one column, no dividers (as the design below desktop). */
	.ct-sl .ct-sl-promo__list .elementor-icon-list-items.elementor-inline-items {
		gap: 6px;
		grid-template-columns: minmax(0, 1fr);
	}

	.ct-sl .ct-sl-promo__list .elementor-icon-list-item {
		justify-content: flex-start;
		padding: 0;
	}

	.ct-sl .ct-sl-promo__list .elementor-icon-list-item:not(:last-child) {
		border-right: 0;
	}
}

@media (max-width: 767px) {
	.ct-sl .ct-sl-hero__intro {
		font-size: 16px;
	}

	.ct-sl .ct-sl-hero .ct-sl-btn .elementor-button {
		width: 100%;
	}

	/* Section headings at phone size: a two-line heading at 1.06 and a subtitle touching it read cramped
	   (client review). */
	.ct-sl .ct-sl-h2 .elementor-heading-title,
	.ct-sl .ct-sl-form__title .elementor-heading-title {
		line-height: 1.15;
	}

	.ct-sl .elementor-widget.ct-sl-h2 + .elementor-widget.ct-sl-lead {
		margin-block-start: 12px;
	}

	/* Promo strip: smaller type, as the design on phones. */
	.ct-sl .ct-sl-promo__list .elementor-icon-list-items.elementor-inline-items {
		gap: 4px;
	}

	.ct-sl .ct-sl-promo__list .elementor-icon-list-item,
	.ct-sl .ct-sl-promo__list .elementor-icon-list-text {
		font-size: 13px;
		line-height: 1.4;
	}

	/* A tick beside a wrapped line sits by its first line, not between the two. */
	.ct-sl .ct-sl-promo__list .elementor-icon-list-item {
		align-items: flex-start;
	}

	.ct-sl .ct-sl-promo__list .elementor-icon-list-icon {
		margin-block-start: 2px; /* centres the 14px tick on an 18.2px line */
	}
}

/* Steps stack at 840px and below (set in the template), as the design. */
@media (max-width: 840px) {
	.ct-sl .e-con.ct-sl-step {
		--flex-basis: auto;
		--width: 100%;
	}
}