/*
 * SweetPay Financing Page — sweetpay-financing.css
 *
 * Owner's design ported faithfully from SweetPayFinalDraft.html.
 * Every rule scoped under .lac-sp-fin to prevent theme collisions.
 * Custom properties defined on .lac-sp-fin (not :root).
 * Nav / footer / edit-toolbar / top-bar rules omitted (those elements
 * come from the real theme and are not reproduced here).
 *
 * @package shoptimizer-child-theme
 */

/* ── Design tokens ────────────────────────────────────────────────────────── */

.lac-sp-fin {
	--black:       #000;
	--white:       #fff;
	--offwhite:    #f8f8f8;
	--softwhite:   #f4f4f4;
	--line:        #e4e4e4;
	--line-dark:   #2b2b2b;
	--text:        #111;
	--muted:       #666;
	--muted-light: #cfcfcf;
	--max:         1180px;
	/* Owner's draft lists Montserrat first but never loads it — what he
	   actually sees/approved is the Helvetica Neue fallback, so match that. */
	--font:        "Helvetica Neue", Helvetica, Arial, sans-serif;

	font-family: var(--font);
	color: var(--text);
	background: var(--white);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

/* ── Base element resets (scoped) ─────────────────────────────────────────── */

.lac-sp-fin *,
.lac-sp-fin *::before,
.lac-sp-fin *::after {
	box-sizing: border-box;
}

.lac-sp-fin a { color: inherit; text-decoration: none; }

.lac-sp-fin img { max-width: 100%; display: block; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.lac-sp-fin .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 24px;
	border: 2px solid #111;
	text-transform: uppercase;
	font-family: var(--font);
	font-size: 12px;
	letter-spacing: .10em;
	font-weight: 900;
	background: transparent;
	transition: .18s ease;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
}

.lac-sp-fin .btn.black  { background: #000; color: #fff; border-color: #000; }
.lac-sp-fin .btn.black:hover  { background: #333; border-color: #333; transform: translateY(-1px); }

.lac-sp-fin .btn.white  { background: #fff; color: #000; border-color: #fff; }
.lac-sp-fin .btn.white:hover  { background: #efefef; border-color: #efefef; transform: translateY(-1px); }

.lac-sp-fin .btn.outline-white  { color: #fff; border-color: #fff; }
.lac-sp-fin .btn.outline-white:hover  { background: #fff; color: #000; }

.lac-sp-fin .btn.ghost  { color: #000; border-color: #000; background: transparent; }
.lac-sp-fin .btn.ghost:hover  { background: #000; color: #fff; }

/* Stacked button — label with phone number underneath */
.lac-sp-fin .btn.btn-stacked {
	flex-direction: column;
	gap: 3px;
	padding-top: 9px;
	padding-bottom: 9px;
	line-height: 1.1;
}

.lac-sp-fin .btn.btn-stacked .btn-sub {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.lac-sp-fin .hero {
	position: relative;
	background: #050505;
	color: #fff;
	overflow: hidden;
	min-height: 720px;
}

.lac-sp-fin .hero-bg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
	opacity: 1;
	z-index: 0;
	pointer-events: none;
}

.lac-sp-fin .hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #070707, #2a2a2a);
	z-index: -1;
	pointer-events: none;
}

.lac-sp-fin .hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.12) 48%, rgba(0,0,0,0) 100%),
		linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.10) 100%);
	z-index: 1;
	pointer-events: none;
}

.lac-sp-fin .hero-inner {
	position: relative;
	z-index: 2;
	max-width: var(--max);
	margin: 0 auto;
	padding: 84px 24px 66px;
	display: grid;
	grid-template-columns: 1.05fr .74fr;
	gap: 46px;
	align-items: start;
}

.lac-sp-fin .eyebrow {
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #c7c7c7;
	margin-bottom: 18px;
}

.lac-sp-fin h1,
.lac-sp-fin h2,
.lac-sp-fin h3,
.lac-sp-fin h4 {
	margin: 0;
	font-weight: 900;
	text-transform: uppercase;
	line-height: .98;
	letter-spacing: -.045em;
	font-family: var(--font);
	color: inherit; /* theme Kirki sets explicit h1-h4 colors; inherit section color instead */
}

.lac-sp-fin h1 { font-size: clamp(48px, 7vw, 92px); max-width: 760px; }
.lac-sp-fin h2 { font-size: clamp(34px, 4.4vw, 62px); }
.lac-sp-fin h3 { font-size: 24px; line-height: 1.02; }
.lac-sp-fin h4 { font-size: 18px; letter-spacing: -.02em; }

.lac-sp-fin p { margin: 0; }

.lac-sp-fin .lead {
	color: #f2f2f2;
	max-width: 720px;
	font-size: 20px;
	margin: 26px 0 34px;
	text-shadow: 0 2px 18px rgba(0,0,0,.9);
}

.lac-sp-fin .hero h1,
.lac-sp-fin .hero .eyebrow { text-shadow: 0 2px 18px rgba(0,0,0,.95); }

.lac-sp-fin .hero-buttons { display: flex; flex-wrap: wrap; gap: 14px; }

/* ── Hero step-stack (right column — replaces the form) ──────────────────── */

/* White card matching his hero form panel (.dealer-style-form in the draft) */
.lac-sp-fin .hero-step-stack {
	background: #fff;
	color: #111;
	border: 1px solid #ddd;
	box-shadow: 0 28px 80px rgba(0,0,0,.45);
	padding: 40px 34px;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.lac-sp-fin .hero-step-stack .eyebrow {
	color: #777;
	margin-bottom: 24px;
	text-shadow: none;
}

.lac-sp-fin .sp-step {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	padding: 26px 0;
	border-top: 1px solid var(--line);
}

.lac-sp-fin .sp-step:first-of-type { border-top: none; }

.lac-sp-fin .sp-step-num {
	font-size: 36px;
	font-weight: 900;
	line-height: 1;
	color: #000;
	letter-spacing: -.04em;
	flex-shrink: 0;
	min-width: 42px;
}

.lac-sp-fin .sp-step-body h3 {
	font-size: 15px;
	letter-spacing: -.01em;
	line-height: 1.1;
	color: #111;
	margin-bottom: 6px;
}

.lac-sp-fin .sp-step-body p {
	font-size: 13px;
	color: #555;
	line-height: 1.55;
}

/* ── Stats / callout strip ────────────────────────────────────────────────── */

.lac-sp-fin .stats-band {
	background: #f7f7f7; /* match .section.alt below so the strip sits on one surface */
}

.lac-sp-fin .stats {
	position: relative;
	z-index: 4;
	max-width: var(--max);
	margin: -34px auto 0;
	padding: 0 24px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: #ddd; /* tile dividers + side gutters (band behind stays #f7f7f7) */
}

.lac-sp-fin .stat {
	background: #fff;
	color: #111;
	padding: 24px 22px;
	min-height: 104px;
}

.lac-sp-fin .stat strong {
	display: block;
	font-size: 18px;
	font-weight: 900;
	line-height: 1.1;
	text-transform: uppercase;
	font-family: var(--font);
}

/* ── Sections ─────────────────────────────────────────────────────────────── */

.lac-sp-fin section { border-top: 1px solid var(--line); }

.lac-sp-fin .section { padding: 88px 0; background: #fff; }

.lac-sp-fin .section.alt { background: #f7f7f7; }

.lac-sp-fin .section.black {
	background: #000;
	color: #fff;
	border-top-color: var(--line-dark);
}

.lac-sp-fin .section-inner {
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 24px;
}

.lac-sp-fin .section-head {
	display: grid;
	grid-template-columns: .22fr 1fr; /* .35fr wraps "A simple path to financing" — owner wants one line */
	gap: 42px;
	align-items: end;
	margin-bottom: 42px;
}

.lac-sp-fin .kicker {
	color: #777;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.lac-sp-fin .section-head p {
	color: #555;
	font-size: 18px;
	max-width: 760px;
}

.lac-sp-fin .black .section-head p,
.lac-sp-fin .black p { color: #cfcfcf; }

.lac-sp-fin .black .kicker { color: #bdbdbd; }

/* ── Steps grid (Section 2 — "A simple path to financing") ───────────────── */

.lac-sp-fin .steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.lac-sp-fin .step {
	background: #fff;
	border: 1px solid var(--line);
	padding: 28px;
	min-height: 250px;
}

.lac-sp-fin .step h3 { font-size: 22px; } /* 24px wraps "Choose Products" */

/* no divider between hero/stats strip and this section */
.lac-sp-fin #how-it-works { border-top: 0; }

.lac-sp-fin .step .num {
	font-size: 56px;
	font-weight: 900;
	line-height: .8;
	color: #d0d0d0;
	margin-bottom: 28px;
	font-family: var(--font);
}

.lac-sp-fin .step p { color: #5b5b5b; margin-top: 16px; }

/* ── Category cards ───────────────────────────────────────────────────────── */

.lac-sp-fin .cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.lac-sp-fin .category-card {
	position: relative;
	min-height: 292px;
	border: 1px solid #222;
	background:
		linear-gradient(rgba(0,0,0,.42), rgba(0,0,0,.86)),
		repeating-linear-gradient(135deg, #131313 0 16px, #1d1d1d 16px 32px);
	background-size: cover;
	background-position: center;
	color: #fff;
	padding: 26px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
}

.lac-sp-fin .category-card .label {
	color: #d0d0d0;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .16em;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.lac-sp-fin .category-card h3 {
	font-size: 22px; /* match .step h3 per owner */
}

.lac-sp-fin .category-card p { color: #ddd; margin-top: 14px; font-size: 14px; }

.lac-sp-fin .text-link {
	display: inline-block;
	color: inherit;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 5px;
	margin-top: 22px;
}

.lac-sp-fin .text-link:hover {
	opacity: .75;
}

/* ── Partner row (Section 4 — SweetPay) ──────────────────────────────────── */

.lac-sp-fin .partner-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 1px solid var(--line-dark);
	background: #1b1b1b;
	gap: 1px;
}

.lac-sp-fin .partner {
	background: #000;
	color: #fff;
	padding: 38px;
	min-height: 260px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.lac-sp-fin .partner p { color: #cfcfcf; margin-top: 18px; }

.lac-sp-fin .partner .btn { margin-top: 18px; }

/* ── Talk to LAC (Section 5 — split with photo) ──────────────────────────── */

/* Matches his .application-band: plain (borderless) copy column + photo */
.lac-sp-fin .talk-split {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: 34px;
	align-items: start;
}

.lac-sp-fin .talk-copy p { color: #cfcfcf; margin-top: 22px; }

.lac-sp-fin .talk-buttons {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 30px;
}

.lac-sp-fin .photo-block {
	position: relative;
	min-height: 410px;
	background:
		linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.52)),
		repeating-linear-gradient(135deg, #161616 0 18px, #202020 18px 36px);
	background-size: cover;
	background-position: center;
	border: 1px solid #2a2a2a;
	overflow: hidden;
}

/* ── FAQ — native <details>/<summary> accordions ─────────────────────────── */

/* His 2-col card grid (.faq-grid/.faq-item), cards act as accordions */
.lac-sp-fin .faq-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	align-items: start; /* an open card doesn't stretch its row neighbor */
}

.lac-sp-fin .faq-item {
	background: #fff;
	border: 1px solid var(--line);
}

.lac-sp-fin .faq-item summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 26px;
	font-size: 18px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -.02em;
	line-height: 1.15;
	cursor: pointer;
	list-style: none;
	user-select: none;
	font-family: var(--font);
	color: var(--text);
}

.lac-sp-fin .faq-item summary::-webkit-details-marker { display: none; }

/* caret */
.lac-sp-fin .faq-item summary::after {
	content: "";
	width: 9px;
	height: 9px;
	border-right: 2px solid #999;
	border-bottom: 2px solid #999;
	transform: translateY(-3px) rotate(45deg);
	flex-shrink: 0;
	transition: transform .2s ease;
}

.lac-sp-fin .faq-item[open] > summary::after {
	transform: translateY(3px) rotate(-135deg);
}

.lac-sp-fin .faq-item > p {
	padding: 0 26px 26px;
	color: #555;
	font-size: 15px;
	line-height: 1.65;
}

/* ── Newsletter / FluentForm restyle ─────────────────────────────────────── */

.lac-sp-fin .newsletter-section {
	padding: 64px 24px;
	text-align: center;
	background: #f7f7f7;
	border-top: 1px solid var(--line);
}

.lac-sp-fin .newsletter-section .kicker {
	color: #777;
	margin-bottom: 14px;
}

.lac-sp-fin .newsletter-section h2 { margin-bottom: 24px; }

/* FluentForm — neutralise any theme overrides; match owner's palette */
.lac-sp-fin .newsletter-section .ff-form-wrap {
	max-width: 480px;
	margin: 0 auto;
}

.lac-sp-fin .newsletter-section .ff_form_fields_container {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
}

.lac-sp-fin .newsletter-section .ff-el-input--content input[type="email"],
.lac-sp-fin .newsletter-section .ff-el-input--content input[type="text"] {
	width: 100%;
	max-width: 480px;
	border: 1px solid #d6d6d6;
	background: #fff;
	padding: 14px;
	font-family: var(--font);
	font-size: 13px;
	font-weight: 700;
	color: #111;
	border-radius: 0;
	box-shadow: none;
}

/* !important: FluentForm's per-form inline style (form.fluent_form_3
   .ff-btn-submit:not(.ff_btn_no_style)) out-specifies us and paints it red.
   Scoped under .lac-sp-fin, so forms elsewhere on the site keep their color. */
.lac-sp-fin .newsletter-section .ff-btn-submit,
.lac-sp-fin .newsletter-section button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;    /* match the email input height exactly */
	min-height: 42px;
	padding: 0 28px;
	border: 2px solid #000;
	background-color: #000 !important;
	color: #fff !important;
	text-transform: uppercase;
	font-family: var(--font);
	font-size: 12px;
	letter-spacing: .10em;
	font-weight: 900;
	cursor: pointer;
	border-radius: 0;
	transition: .18s ease;
}

.lac-sp-fin .newsletter-section .ff-btn-submit:hover,
.lac-sp-fin .newsletter-section button[type="submit"]:hover {
	background-color: #333 !important;
	border-color: #333;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 980px) {
	.lac-sp-fin .hero-inner       { grid-template-columns: 1fr; }
	.lac-sp-fin .stats            { grid-template-columns: 1fr 1fr; }
	.lac-sp-fin .steps            { grid-template-columns: 1fr 1fr; }
	.lac-sp-fin .cards            { grid-template-columns: 1fr 1fr; }
	.lac-sp-fin .partner-row      { grid-template-columns: 1fr; }
	.lac-sp-fin .talk-split       { grid-template-columns: 1fr; }
	.lac-sp-fin .section-head     { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 640px) {
	.lac-sp-fin .hero-inner { padding-top: 56px; }
	.lac-sp-fin .stats      { grid-template-columns: 1fr 1fr; }
	.lac-sp-fin .steps      { grid-template-columns: 1fr; }
	.lac-sp-fin .cards      { grid-template-columns: 1fr; }
	.lac-sp-fin .faq-grid   { grid-template-columns: 1fr; }
	.lac-sp-fin h1          { font-size: 46px; }
	.lac-sp-fin h2          { font-size: 36px; }
	.lac-sp-fin .btn        { width: 100%; justify-content: center; }
	.lac-sp-fin .hero-buttons { flex-direction: column; }
	.lac-sp-fin .talk-buttons { flex-direction: column; }
}

/* ── Theme integration — full-bleed layout (scoped by body class) ──────────
   The theme header wraps page content in .site-content > .col-full (1440px,
   padded). The owner design is full-bleed with its own inner max-width
   containers, so unset the theme container on this page only. */
body.lac-sp-fin-page .site-content .col-full {
	max-width: none;
	padding: 0;
	margin: 0;
}

/* #content id needed: the theme's body:has(...) .site-content{padding-top:2rem}
   ties our class specificity and its stylesheet loads after this one */
body.lac-sp-fin-page #content.site-content {
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 0;
}

/* Breadcrumb strip above the content container — not part of the design */
body.lac-sp-fin-page .archive-header {
	display: none;
}