/*
 * Superstore — site chrome.
 *
 * Derived from the shared Editorial stylesheet, which is almost entirely
 * token-driven and carries structural work worth keeping: the focus-ring flip
 * on dark bands, the alignwide geometry fix, wide-table overflow containment,
 * the honeypot, and the print rules.
 *
 * What changes is form: soft geometric sans, generous rounding, real elevation
 * instead of hairlines, pill controls, and the payment calculator that runs the
 * homepage. Overbuilt-style hard edges are exactly what this skin is not.
 *
 * Superstore-specific rules live in the block at the end of the file.
 */

/* ------------------------------------------------------------------ */
/* Reset + base                                                       */
/* ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--zst-paper);
	color: var(--zst-ink);
	font-family: var(--zst-font-body);
	font-size: 16.5px;
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--zst-accent-deep); }

h1, h2, h3, h4 {
	font-family: var(--zst-font-display);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.022em;
	margin: 0;
	text-wrap: balance;
}

p { margin: 0 0 1em; }

hr { border: 0; border-top: 1px solid var(--zst-line); margin: 2.5rem 0; }

::selection { background: var(--zst-accent); color: #fff; }

/* ------------------------------------------------------------------ */
/* Accessibility                                                      */
/* ------------------------------------------------------------------ */

/* One focus treatment everywhere. --zst-focus flips to a light green inside
   .zst-on-dark (see inc/dynamic-css.php) so the ring never drops below 3:1. */
:focus-visible {
	outline: 2px solid var(--zst-focus);
	outline-offset: 2px;
	border-radius: 2px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.zst-skip {
	position: absolute;
	inset-inline-start: -9999px;
	top: 0;
	z-index: 999;
	padding: .8rem 1.2rem;
	background: var(--zst-brand);
	color: var(--zst-brand-ink);
	font-weight: 600;
	text-decoration: none;
}
.zst-skip:focus {
	inset-inline-start: 1rem;
	top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------------------------ */
/* Layout primitives                                                  */
/* ------------------------------------------------------------------ */
.zst-wrap {
	width: 100%;
	max-width: var(--zst-maxw);
	margin-inline: auto;
	padding-inline: var(--zst-gutter);
}

/* The shop page runs wider so the plugin's results grid can breathe. */
.zst-wrap--shop { max-width: 1520px; }

/* .zs-main is the plugin's content wrapper (contract §3) — the theme owns its
   styling on every page, plugin-rendered or not. */
.zs-main {
	display: block;
	min-height: 40vh;
}

.zst-section { padding-block: clamp(2.5rem, 5vw, 4.5rem); }

.zst-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	padding-bottom: .9rem;
	margin-bottom: 1.8rem;
	border-bottom: 1px solid var(--zst-ink);
}

.zst-section__title {
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin: 0;
}

.zst-section__intro {
	max-width: 62ch;
	color: var(--zst-ink-soft);
	margin-top: -.8rem;
	margin-bottom: 1.8rem;
}

.zst-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--zst-accent-deep);
	white-space: nowrap;
}
.zst-link-arrow .zst-ic { width: 17px; height: 17px; transition: transform .18s ease; }
.zst-link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }
.zst-link-arrow:hover .zst-ic { transform: translateX(3px); }

/* ------------------------------------------------------------------ */
/* Buttons                                                            */
/* ------------------------------------------------------------------ */
.zst-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	font: inherit;
	font-weight: 600;
	line-height: 1.15;
	padding: .78em 1.35em;
	border: 1px solid transparent;
	border-radius: var(--zst-radius);
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.zst-btn--lg { padding: .95em 1.7em; font-size: 1.02rem; }
.zst-btn--block { width: 100%; }

.zst-btn--primary {
	background: var(--zst-brand);
	color: var(--zst-brand-ink);
	border-color: var(--zst-brand);
}
.zst-btn--primary:hover {
	background: var(--zst-brand-hover);
	border-color: var(--zst-brand-hover);
}

.zst-btn--ghost {
	background: transparent;
	color: var(--zst-ink);
	border-color: var(--zst-line);
}
.zst-btn--ghost:hover { border-color: var(--zst-accent-deep); color: var(--zst-accent-deep); }

/* For use on dark bands. */
.zst-btn--invert {
	background: var(--zst-on-dark);
	color: var(--zst-brand);
	border-color: var(--zst-on-dark);
}
.zst-btn--invert:hover { background: #fff; border-color: #fff; }

/* ------------------------------------------------------------------ */
/* Header                                                             */
/* ------------------------------------------------------------------ */
.zst-topbar {
	background: var(--zst-brand);
	color: var(--zst-on-dark);
	font-size: .82rem;
	letter-spacing: .04em;
	text-align: center;
	padding: .55rem 0;
}

.zst-header {
	background: var(--zst-paper);
	border-bottom: 1px solid var(--zst-line);
	position: sticky;
	top: 0;
	z-index: 60;
}

.zst-header__in {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 76px;
}

.zst-header__brand { flex: 0 0 auto; }
.zst-header__brand img { max-height: 46px; width: auto; }

.zst-header__name {
	font-family: var(--zst-font-display);
	font-size: 1.45rem;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--zst-ink);
	text-decoration: none;
}

/* Header search */
.zst-hsearch {
	position: relative;
	flex: 1 1 auto;
	max-width: 380px;
	display: flex;
	align-items: center;
}
.zst-hsearch__ic {
	position: absolute;
	inset-inline-start: .7rem;
	display: flex;
	color: var(--zst-ink-faint);
	pointer-events: none;
}
.zst-hsearch__ic .zst-ic { width: 17px; height: 17px; }
.zst-hsearch input {
	width: 100%;
	font: inherit;
	font-size: .92rem;
	padding-block: .58em;
	padding-inline: 2.3rem .8em;
	border: 1px solid var(--zst-line);
	border-radius: var(--zst-radius);
	background: var(--zst-surface);
	color: var(--zst-ink);
}
.zst-hsearch input::placeholder { color: var(--zst-ink-faint); }
.zst-hsearch input:focus { border-color: var(--zst-accent-deep); }

/* Nav */
.zst-nav {
	flex: 0 1 auto;
	margin-inline-start: auto;
	display: flex;
	align-items: center;
	gap: 1.6rem;
}

.zst-menu {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.zst-menu a {
	font-size: .88rem;
	white-space: nowrap;
	font-weight: 500;
	letter-spacing: .01em;
	color: var(--zst-ink);
	text-decoration: none;
	padding-block: .3rem;
	border-bottom: 1px solid transparent;
}
.zst-menu a:hover { border-bottom-color: var(--zst-ink); }
.zst-menu .current-menu-item > a { border-bottom-color: var(--zst-accent-deep); }
.zst-menu .sub-menu { display: none; }

.zst-nav__cta { display: flex; align-items: center; gap: 1rem; }

.zst-header__phone {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	font-size: .88rem;
	font-weight: 600;
	color: var(--zst-ink);
	text-decoration: none;
	white-space: nowrap;
}
.zst-header__phone .zst-ic { width: 17px; height: 17px; }
.zst-header__phone:hover { color: var(--zst-accent-deep); }

.zst-navtoggle {
	display: none;
	background: none;
	border: 1px solid var(--zst-line);
	border-radius: var(--zst-radius);
	padding: .55rem .6rem;
	cursor: pointer;
	margin-inline-start: auto;
}
.zst-navtoggle__bars { display: block; width: 20px; }
.zst-navtoggle__bars span {
	display: block;
	height: 1.5px;
	background: var(--zst-ink);
	margin: 4px 0;
}

/* ------------------------------------------------------------------ */
/* Quick-filter chips                                                 */
/* ------------------------------------------------------------------ */
.zst-chips {
	background: var(--zst-paper);
	border-bottom: 1px solid var(--zst-line-soft);
}
.zst-chips__in {
	display: flex;
	gap: .5rem;
	overflow-x: auto;
	padding-block: .8rem;
	scrollbar-width: thin;
}
.zst-chip {
	flex: 0 0 auto;
	font-size: .8rem;
	font-weight: 500;
	letter-spacing: .02em;
	padding: .42em .9em;
	border: 1px solid var(--zst-line);
	border-radius: var(--zst-radius);
	background: var(--zst-surface);
	color: var(--zst-ink);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .15s ease, color .15s ease;
}
.zst-chip:hover { border-color: var(--zst-accent-deep); color: var(--zst-accent-deep); }
.zst-chip--primary { background: var(--zst-ink); border-color: var(--zst-ink); color: var(--zst-paper); }
.zst-chip--primary:hover { background: var(--zst-brand); border-color: var(--zst-brand); color: var(--zst-brand-ink); }

/* ------------------------------------------------------------------ */
/* Breadcrumbs                                                        */
/* ------------------------------------------------------------------ */
.zst-crumbs {
	font-size: .8rem;
	color: var(--zst-ink-faint);
	padding-block: .9rem;
	border-bottom: 1px solid var(--zst-line-soft);
}
.zst-crumbs a { color: var(--zst-ink-soft); text-decoration: none; }
.zst-crumbs a:hover { color: var(--zst-accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.zst-crumbs__sep { margin-inline: .5em; opacity: .5; }
.zst-crumbs__cur { color: var(--zst-ink); }

/* ------------------------------------------------------------------ */
/* Hero                                                               */
/* ------------------------------------------------------------------ */
.zst-hero {
	border-bottom: 1px solid var(--zst-line);
	padding-block: clamp(3rem, 8vw, 6.5rem);
}
.zst-hero--photo { background-color: var(--zst-surface-2); }

.zst-hero__in {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(2rem, 6vw, 5rem);
	align-items: end;
}

/* A ch-based cap here would resolve against the 17px body size, not the
   display size, and crush the headline into a narrow column. Cap in px. */
.zst-hero__lede { max-width: 41rem; }

.zst-hero__eyebrow {
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--zst-ink-faint);
	margin: 0 0 1.2rem;
}

.zst-hero__h1 {
	font-size: clamp(2.6rem, 7vw, 4.6rem);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -.028em;
	margin: 0;
}
.zst-hero__em {
	font-style: italic;
	font-weight: 400;
	color: var(--zst-accent-deep);
}

.zst-hero__sub {
	max-width: 44ch;
	margin-top: 1.4rem;
	font-size: 1.06rem;
	color: var(--zst-ink-soft);
}

.zst-hero__actions {
	display: flex;
	align-items: center;
	gap: 1.6rem;
	flex-wrap: wrap;
	margin-top: 2rem;
}

/* Stats as a ruled column — the editorial answer to a stat row. */
.zst-hero__stats {
	margin: 0;
	display: grid;
	gap: 1rem;
	min-width: 200px;
}
.zst-hero__stat {
	border-top: 1px solid var(--zst-ink);
	padding-top: .7rem;
}
.zst-hero__stat-l {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--zst-ink-faint);
}
.zst-hero__stat-v {
	font-family: var(--zst-font-display);
	font-size: 2.1rem;
	font-weight: 600;
	letter-spacing: -.02em;
	margin: .1rem 0 0;
}

/* Inverted hero over a dark photo wash. */
.zst-hero--invert .zst-hero__h1,
.zst-hero--invert .zst-hero__stat-v { color: var(--zst-on-dark); }
.zst-hero--invert .zst-hero__sub { color: var(--zst-on-dark-soft); }
.zst-hero--invert .zst-hero__eyebrow,
.zst-hero--invert .zst-hero__stat-l { color: var(--zst-on-dark-soft); }
.zst-hero--invert .zst-hero__stat { border-top-color: var(--zst-on-dark-soft); }
.zst-hero--invert .zst-hero__em { color: var(--zst-on-dark); }
.zst-hero--invert .zst-link-arrow { color: var(--zst-on-dark); }

/* ------------------------------------------------------------------ */
/* Hero search panel                                                  */
/* ------------------------------------------------------------------ */
.zst-searchband {
	margin-top: -1px;
	padding-block: 0;
}
.zst-herosearch {
	background: var(--zst-surface);
	border: 1px solid var(--zst-line);
	border-top: 0;
	padding: 1.4rem var(--zst-gutter);
	margin-inline: calc(var(--zst-gutter) * -1);
}
.zst-herosearch__row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
	gap: 1rem;
	align-items: end;
}
.zst-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.zst-field__label {
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--zst-ink-faint);
}
.zst-field select {
	font: inherit;
	font-size: .94rem;
	padding: .6em .7em;
	border: 0;
	border-bottom: 1px solid var(--zst-ink);
	border-radius: 0;
	background: transparent;
	color: var(--zst-ink);
	cursor: pointer;
}
.zst-herosearch__go { align-self: end; }
.zst-herosearch__kw { margin-top: 1rem; }
.zst-herosearch__kw input {
	width: 100%;
	font: inherit;
	font-size: .94rem;
	padding: .6em .8em;
	border: 1px solid var(--zst-line);
	border-radius: var(--zst-radius);
	background: var(--zst-paper);
	color: var(--zst-ink);
}
.zst-herosearch__kw input::placeholder { color: var(--zst-ink-faint); }

/* ------------------------------------------------------------------ */
/* Trust strip                                                        */
/* ------------------------------------------------------------------ */
.zst-trust { padding-block: 2.2rem; border-bottom: 1px solid var(--zst-line-soft); }
.zst-trust__heading { font-size: 1.2rem; margin-bottom: 1.2rem; }
.zst-trust__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.6rem 2rem;
}
.zst-trust__item { display: flex; gap: .8rem; align-items: flex-start; }
.zst-trust__ic { color: var(--zst-accent-deep); flex: 0 0 auto; margin-top: .1rem; }
.zst-trust__txt { display: flex; flex-direction: column; gap: .15rem; }
.zst-trust__txt strong { font-size: .95rem; font-weight: 600; }
.zst-trust__txt span { font-size: .86rem; color: var(--zst-ink-soft); }

/* ------------------------------------------------------------------ */
/* Value propositions — numbered, rule-separated                      */
/* ------------------------------------------------------------------ */
.zst-values {
	background: var(--zst-surface-2);
	border-block: 1px solid var(--zst-line);
	padding-block: clamp(2.8rem, 6vw, 4.5rem);
}
.zst-values__title { margin-bottom: 2.2rem; }
.zst-values__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 0;
}
.zst-value {
	padding: 0 1.8rem;
	border-inline-start: 1px solid var(--zst-line);
}
.zst-value:first-child { padding-inline-start: 0; border-inline-start: 0; }
.zst-value__n {
	display: block;
	font-family: var(--zst-font-display);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--zst-accent-deep);
	margin-bottom: .7rem;
}
.zst-value__t { font-size: 1.16rem; margin-bottom: .5rem; }
.zst-value__p { font-size: .92rem; color: var(--zst-ink-soft); margin: 0; }

/* ------------------------------------------------------------------ */
/* Locations                                                          */
/* ------------------------------------------------------------------ */
.zst-stores {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1px;
	background: var(--zst-line);
	border: 1px solid var(--zst-line);
}
.zst-store { background: var(--zst-surface); padding: 1.6rem; }
.zst-store__name { font-size: 1.2rem; margin-bottom: .3rem; }
.zst-store__name a { color: var(--zst-ink); text-decoration: none; }
.zst-store__name a:hover { color: var(--zst-accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.zst-store__city { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--zst-ink-faint); margin: 0 0 .6rem; }
.zst-store__desc { font-size: .9rem; color: var(--zst-ink-soft); }
.zst-store__phone { font-weight: 600; font-size: .92rem; color: var(--zst-accent-deep); text-decoration: none; }
.zst-store__phone:hover { text-decoration: underline; text-underline-offset: 3px; }

.zst-socials { display: flex; gap: .6rem; margin-top: .9rem; }
.zst-soc { color: var(--zst-ink-faint); }
.zst-soc:hover { color: var(--zst-accent-deep); }

/* ------------------------------------------------------------------ */
/* Finance band                                                       */
/* ------------------------------------------------------------------ */
.zst-financeband {
	background: var(--zst-brand);
	color: var(--zst-on-dark);
	padding-block: clamp(2.5rem, 5vw, 4rem);
}
.zst-financeband__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
}
.zst-financeband__h { font-size: clamp(1.5rem, 3.4vw, 2.2rem); color: var(--zst-on-dark); max-width: 20ch; }
.zst-financeband__p { margin: .8rem 0 0; max-width: 52ch; color: var(--zst-on-dark-soft); }

/* ------------------------------------------------------------------ */
/* Entity blurb + FAQs                                                */
/* ------------------------------------------------------------------ */
.zst-entity__text {
	max-width: 68ch;
	font-family: var(--zst-font-display);
	font-size: clamp(1.15rem, 2.4vw, 1.45rem);
	line-height: 1.45;
	color: var(--zst-ink-soft);
	margin: 0;
}

.zst-faq__list { margin: 0; }
.zst-faq__item { border-top: 1px solid var(--zst-line); padding-block: 1.4rem; }
.zst-faq__item:last-child { border-bottom: 1px solid var(--zst-line); }
.zst-faq__q {
	font-family: var(--zst-font-display);
	font-size: 1.14rem;
	font-weight: 600;
	margin-bottom: .45rem;
}
.zst-faq__a { margin: 0; color: var(--zst-ink-soft); max-width: 72ch; font-size: .96rem; }

/* ------------------------------------------------------------------ */
/* Pages, prose, forms                                                */
/* ------------------------------------------------------------------ */
.zst-page { padding-block: clamp(2.5rem, 5vw, 4rem); }
.zst-page__head { margin-bottom: 2rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--zst-ink); }
.zst-page__eyebrow {
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--zst-ink-faint);
	margin: 0 0 .7rem;
}
.zst-page__title { font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -.025em; }

.zst-prose { max-width: 68ch; }
.zst-prose--lead { font-size: 1.1rem; color: var(--zst-ink-soft); }
.zst-prose h2 { font-size: 1.6rem; margin: 2.2rem 0 .8rem; }
.zst-prose h3 { font-size: 1.25rem; margin: 1.8rem 0 .6rem; }
.zst-prose ul, .zst-prose ol { padding-inline-start: 1.3rem; }
.zst-prose li { margin-bottom: .4rem; }
.zst-prose blockquote {
	margin: 1.8rem 0;
	padding-inline-start: 1.4rem;
	border-inline-start: 2px solid var(--zst-accent-deep);
	font-family: var(--zst-font-display);
	font-size: 1.16rem;
	font-style: italic;
	color: var(--zst-ink-soft);
}

.zst-split {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.zst-aside {
	background: var(--zst-surface);
	border: 1px solid var(--zst-line);
	padding: 1.6rem;
	position: sticky;
	top: 96px;
}
.zst-aside__h { font-size: 1.05rem; margin-bottom: .8rem; }
.zst-aside__h + * { margin-top: 0; }
.zst-aside__phone { font-family: var(--zst-font-display); font-size: 1.5rem; font-weight: 600; text-decoration: none; }
.zst-aside__store { display: flex; flex-direction: column; gap: .1rem; font-size: .9rem; margin-bottom: 1.1rem; }
.zst-aside__store span { color: var(--zst-ink-soft); }

.zst-steps { padding-inline-start: 1.2rem; margin: 0 0 1.4rem; font-size: .93rem; color: var(--zst-ink-soft); }
.zst-steps li { margin-bottom: .5rem; }

/* Forms */
.zst-form { max-width: 42rem; margin-top: 1.6rem; }
.zst-fieldset { border: 0; border-top: 1px solid var(--zst-line); padding: 1.6rem 0 0; margin: 0 0 1.8rem; }
.zst-legend {
	font-family: var(--zst-font-display);
	font-size: 1.2rem;
	font-weight: 600;
	padding: 0 .7rem 0 0;
}
.zst-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.zst-form__row--3 { grid-template-columns: repeat(3, 1fr); }
.zst-form__field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.1rem; min-width: 0; }
.zst-form__label {
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--zst-ink-faint);
}
.zst-req { color: var(--zst-danger); }
.zst-form__hint { font-size: .88rem; color: var(--zst-ink-soft); margin-top: -.4rem; }
.zst-form__count { font-size: .78rem; color: var(--zst-ink-faint); }

.zst-form input[type="text"],
.zst-form input[type="email"],
.zst-form input[type="tel"],
.zst-form input[type="search"],
.zst-form select,
.zst-form textarea {
	font: inherit;
	font-size: .96rem;
	width: 100%;
	padding: .68em .8em;
	border: 1px solid var(--zst-line);
	border-radius: var(--zst-radius);
	background: var(--zst-surface);
	color: var(--zst-ink);
}
.zst-form textarea { resize: vertical; }
.zst-form input:focus, .zst-form select:focus, .zst-form textarea:focus {
	border-color: var(--zst-accent-deep);
}
.zst-form input[type="file"] { border: 1px dashed var(--zst-line); padding: .7em; background: var(--zst-paper); }

.zst-check { display: flex; gap: .7rem; align-items: flex-start; font-size: .9rem; color: var(--zst-ink-soft); margin-bottom: 1.4rem; }
.zst-check input { margin-top: .25rem; flex: 0 0 auto; }

.zst-form__msg { margin-top: .9rem; font-size: .92rem; min-height: 1.4em; }
.zst-form__msg.is-ok { color: var(--zst-trust); }
.zst-form__msg.is-err { color: var(--zst-danger); }

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.zst-hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------------ */
/* Shop page                                                          */
/* ------------------------------------------------------------------ */
.zst-shop__intro { padding-block: 1.4rem; }
.zst-shop__foot { padding-block: 2.5rem; border-top: 1px solid var(--zst-line); margin-top: 2rem; }
.zst-notice { padding: 2rem 0; color: var(--zst-ink-soft); }

/* ------------------------------------------------------------------ */
/* Blog fallback                                                      */
/* ------------------------------------------------------------------ */
.zst-postlist { display: grid; gap: 0; }
.zst-postcard { border-top: 1px solid var(--zst-line); padding-block: 1.6rem; }
.zst-postcard:last-child { border-bottom: 1px solid var(--zst-line); }
.zst-postcard__title { font-size: 1.4rem; margin-bottom: .3rem; }
.zst-postcard__title a { color: var(--zst-ink); text-decoration: none; }
.zst-postcard__title a:hover { color: var(--zst-accent-deep); }
.zst-postcard__meta { font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--zst-ink-faint); margin-bottom: .6rem; }
.zst-postcard__excerpt { color: var(--zst-ink-soft); max-width: 70ch; }

.zst-pagination { margin-top: 2.5rem; font-size: .9rem; }
.zst-pagination .page-numbers {
	display: inline-block;
	padding: .4em .75em;
	border: 1px solid var(--zst-line);
	margin-inline-end: .3rem;
	text-decoration: none;
	color: var(--zst-ink);
}
.zst-pagination .current { background: var(--zst-ink); border-color: var(--zst-ink); color: var(--zst-paper); }

.zst-404 { text-align: start; max-width: 46rem; }
.zst-404__p { font-size: 1.1rem; color: var(--zst-ink-soft); max-width: 52ch; }
.zst-404__actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.8rem; }

.zst-searchform { display: flex; gap: .6rem; }
.zst-searchform input {
	font: inherit;
	flex: 1;
	padding: .6em .8em;
	border: 1px solid var(--zst-line);
	border-radius: var(--zst-radius);
	background: var(--zst-surface);
}

.zst-empty { color: var(--zst-ink-soft); }

/* ------------------------------------------------------------------ */
/* Plugin SEO footer block (.zs-seofooter — required by contract §3)  */
/* ------------------------------------------------------------------ */
.zs-seofooter {
	padding-block: 2.5rem;
	border-top: 1px solid var(--zst-line);
	font-size: .88rem;
}
.zs-seofooter a { color: var(--zst-ink-soft); text-decoration: none; }
.zs-seofooter a:hover { color: var(--zst-accent-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ */
/* Footer                                                             */
/* ------------------------------------------------------------------ */
.zst-footer {
	background: var(--zst-brand);
	color: var(--zst-on-dark);
	padding-top: clamp(2.5rem, 5vw, 4rem);
	margin-top: clamp(2.5rem, 5vw, 4rem);
}
.zst-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
	gap: 2.5rem;
	padding-bottom: 2.5rem;
}
.zst-footer__name {
	font-family: var(--zst-font-display);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -.02em;
}
.zst-footer__logo { margin-bottom: .8rem; }
.zst-footer__about { margin-top: .9rem; font-size: .92rem; color: var(--zst-on-dark-soft); max-width: 40ch; }
.zst-footer__social { display: flex; gap: 1rem; margin-top: 1.1rem; font-size: .86rem; }
.zst-footer__social a { color: var(--zst-on-dark-soft); text-decoration: none; }
.zst-footer__social a:hover { color: var(--zst-on-dark); text-decoration: underline; text-underline-offset: 3px; }

.zst-footer__h {
	font-family: var(--zst-font-body);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--zst-on-dark-soft);
	margin-bottom: 1rem;
}
.zst-footer__links { display: flex; flex-direction: column; gap: .55rem; }
.zst-footer__links a { font-size: .92rem; color: var(--zst-on-dark); text-decoration: none; }
.zst-footer__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.zst-footer__links li { list-style: none; }
.zst-footer__links ul { margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }

.zst-footer__legal {
	border-top: 1px solid color-mix(in srgb, var(--zst-on-dark) 22%, transparent);
	padding-block: 1.4rem;
	font-size: .82rem;
	color: var(--zst-on-dark-soft);
}

/* ------------------------------------------------------------------ */
/* Responsive                                                         */
/* ------------------------------------------------------------------ */
@media (max-width: 1180px) {
	.zst-hsearch { max-width: 240px; }
	.zst-menu { gap: 1rem; }
	.zst-herosearch__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.zst-herosearch__go { grid-column: 1 / -1; }
}

@media (max-width: 1080px) {
	.zst-navtoggle { display: block; order: 3; }
	.zst-hsearch { order: 4; max-width: none; flex-basis: 100%; }
	.zst-header__in { flex-wrap: wrap; padding-block: .9rem; min-height: 0; }
	.zst-header__brand { margin-inline-end: auto; }

	.zst-nav {
		display: none;
		position: fixed;
		top: var(--zst-nav-top, 76px);
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--zst-paper);
		border-top: 1px solid var(--zst-line);
		border-bottom: 1px solid var(--zst-line);
		padding: 1rem var(--zst-gutter) 1.6rem;
		overflow-y: auto;
		z-index: 55;
	}
	.zst-nav.is-open { display: flex; }
	.zst-menu { flex-direction: column; align-items: stretch; gap: 0; }
	.zst-menu a { display: block; padding: .8rem 0; border-bottom: 1px solid var(--zst-line-soft); }
	.zst-menu a:hover { border-bottom-color: var(--zst-line-soft); }
	.zst-nav__cta { flex-direction: column; align-items: stretch; gap: .8rem; margin-top: 1.2rem; }
	.zst-header__cta { justify-content: center; }

	.zst-hero__in { grid-template-columns: 1fr; align-items: start; }
	.zst-hero__lede { max-width: none; }
	.zst-hero__stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

	.zst-split { grid-template-columns: 1fr; }
	.zst-aside { position: static; }

	.zst-value { border-inline-start: 0; border-top: 1px solid var(--zst-line); padding: 1.4rem 0 0; }
	.zst-value:first-child { border-top: 0; padding-top: 0; }

	.zst-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
	body { font-size: 16px; }
	:root { --zst-gutter: 20px; }
	.zst-herosearch__row { grid-template-columns: 1fr; }
	.zst-form__row, .zst-form__row--3 { grid-template-columns: 1fr; }
	.zst-footer__grid { grid-template-columns: 1fr; gap: 2rem; }
	.zst-financeband__in { flex-direction: column; align-items: flex-start; }
	.zst-section__head { border-bottom-width: 1px; }
}

/* ------------------------------------------------------------------ */
/* Block content                                                      */
/*                                                                    */
/* functions.php declares align-wide, so the theme owes wide and full */
/* alignment real CSS.                                                */
/*                                                                    */
/* Geometry: .zst-prose is a fixed measure sitting at the START edge of */
/* .zst-wrap, not centred in it. A `left:50%; translateX(-50%)` breakout*/
/* therefore centres on the *column*, not the page, and spills off the */
/* start edge — which scrollWidth does not report, so it fails silently*/
/* Instead, wide content simply starts where the column starts and     */
/* runs to the wrap's far edge, and full content backs out to the      */
/* viewport with a guarded calc that can never go positive.            */
/* ------------------------------------------------------------------ */
.zst-prose > .alignwide {
	/* The wrap's inner width, but never wider than the viewport allows. */
	width: min(
		calc(var(--zst-maxw) - var(--zst-gutter) * 2),
		calc(100vw - var(--zst-gutter) * 2)
	);
	max-width: none;
	margin-inline: 0;
}

.zst-prose > .alignfull {
	width: 100vw;
	max-width: 100vw;
	/* Distance from the column's start edge back to the viewport edge:
	   the wrap's own gutter, plus half of whatever the wrap is centred by. */
	margin-inline-start: calc(-1 * (var(--zst-gutter) + max(0px, (100vw - var(--zst-maxw)) / 2)));
	margin-inline-end: 0;
}

.zst-prose > .alignleft {
	float: inline-start;
	margin-inline-end: 1.6rem;
	margin-block: .4rem 1rem;
	max-width: 45%;
}
.zst-prose > .alignright {
	float: inline-end;
	margin-inline-start: 1.6rem;
	margin-block: .4rem 1rem;
	max-width: 45%;
}
.zst-prose > .aligncenter { margin-inline: auto; }
.zst-prose::after { content: ""; display: block; clear: both; }

.zst-prose figure { margin: 2rem 0; }
.zst-prose figcaption {
	margin-top: .6rem;
	font-size: .84rem;
	color: var(--zst-ink-faint);
}
.zst-prose img { border-radius: var(--zst-radius); }

.zst-prose .wp-block-pullquote,
.zst-prose .wp-block-quote {
	border-inline-start: 2px solid var(--zst-accent-deep);
	padding-inline-start: 1.4rem;
	font-family: var(--zst-font-display);
	font-style: italic;
	color: var(--zst-ink-soft);
}
.zst-prose .wp-block-separator {
	border: 0;
	border-top: 1px solid var(--zst-line);
	margin-block: 2.5rem;
}
.zst-prose .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: .94rem;
}
.zst-prose .wp-block-table th,
.zst-prose .wp-block-table td {
	border-bottom: 1px solid var(--zst-line);
	padding: .7em .8em;
	text-align: start;
}
.zst-prose .wp-block-table th { font-weight: 600; }
/* Wide tables scroll inside their own box rather than pushing the page. */
.zst-prose .wp-block-table { overflow-x: auto; }

.zst-prose .wp-block-button__link {
	background: var(--zst-brand);
	color: var(--zst-brand-ink);
	border-radius: var(--zst-radius);
	font-weight: 600;
	padding: .78em 1.35em;
}
.zst-prose .wp-block-code,
.zst-prose pre {
	background: var(--zst-surface-2);
	border: 1px solid var(--zst-line);
	border-radius: var(--zst-radius);
	padding: 1rem 1.2rem;
	overflow-x: auto;
	font-size: .88rem;
}

/* ------------------------------------------------------------------ */
/* Single post, post navigation, comments                             */
/* ------------------------------------------------------------------ */
.zst-single__meta {
	font-size: .78rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--zst-ink-faint);
	margin: .6rem 0 0;
}
.zst-single__media { margin: 0 0 2rem; }
.zst-single__media img { width: 100%; border-radius: var(--zst-radius); }
.zst-single__tags { margin-top: 2rem; font-size: .86rem; color: var(--zst-ink-faint); }

.zst-postnav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--zst-line);
	border: 1px solid var(--zst-line);
	margin-top: 3rem;
}
.zst-postnav__link {
	background: var(--zst-surface);
	padding: 1.2rem 1.4rem;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	gap: .3rem;
}
.zst-postnav__link span {
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--zst-ink-faint);
}
.zst-postnav__link strong {
	font-family: var(--zst-font-display);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--zst-ink);
}
.zst-postnav__link:hover strong { color: var(--zst-accent-deep); }
.zst-postnav__link--next { text-align: end; align-items: flex-end; }

.zst-comments { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--zst-ink); }
.zst-comments__title { font-size: 1.4rem; margin-bottom: 1.4rem; }
.zst-comments__list { list-style: none; margin: 0 0 2.5rem; padding: 0; }
.zst-comments__list .comment-body { border-top: 1px solid var(--zst-line); padding: 1.2rem 0; }
.zst-comments__list .children { list-style: none; margin: 0; padding-inline-start: 1.6rem; }
.zst-comments__list .fn { font-weight: 600; font-style: normal; }
.zst-comments__list .comment-metadata { font-size: .78rem; color: var(--zst-ink-faint); }
.zst-comments__closed { color: var(--zst-ink-soft); font-size: .9rem; }
.zst-commentform .comment-form-cookies-consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; }

.zst-searchaside {
	margin-top: 3rem;
	padding: 1.6rem;
	background: var(--zst-surface);
	border: 1px solid var(--zst-line);
	max-width: 42rem;
}
.zst-searchaside p { color: var(--zst-ink-soft); font-size: .94rem; }

.zst-linkpages { margin-top: 1.5rem; font-size: .9rem; }

/* ------------------------------------------------------------------ */
/* Print                                                              */
/*                                                                    */
/* Shoppers print vehicle detail pages to take to the bank or their    */
/* mechanic, so the VDP is what this is really for: drop the chrome,   */
/* keep the specs, and show link targets.                             */
/* ------------------------------------------------------------------ */
@media print {
	.zst-topbar, .zst-header, .zst-chips, .zst-nav, .zst-navtoggle, .zst-hsearch,
	.zst-footer, .zs-seofooter, .zst-skip, .zst-financeband,
	.zs-rail__actions, .zs-mprice__actions, .zs-lead, .zs-subscribe,
	.zs-compare-tray, .zs-viewed, .zs-reviews, .zs-share, .zs-fav,
	.zs-gallery__thumbs, .zs-showmore, .zs-toolbar {
		display: none !important;
	}
	body { background: #fff; color: #000; font-size: 11pt; }
	.zst-wrap, .zs-wrap { max-width: none; padding-inline: 0; }
	a { text-decoration: underline; }
	.zst-prose a[href^="http"]::after,
	.zs-detail a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: .82em;
		color: #444;
		word-break: break-all;
	}
	.zs-card, .zs-specs--boxed, .zst-aside { break-inside: avoid; border-color: #999; }
	h1, h2, h3 { break-after: avoid; }
	img { max-width: 100% !important; }
}

/* ================================================================== */
/* SUPERSTORE — form overrides                                        */
/* ================================================================== */

/* ---- Chrome: white header, soft tinted bands ---------------------- */
.zst-topbar {
	background: var(--zst-surface-2);
	color: var(--zst-ink-soft);
	border-bottom: 1px solid var(--zst-line-soft);
	font-size: 13.5px;
}
.zst-topbar .zst-wrap { min-height: 40px; display: flex; align-items: center; }

.zst-header { background: #fff; border-bottom: 1px solid var(--zst-line-soft); }
.zst-header__in { min-height: 76px; gap: 22px; }
.zst-header__name { font-weight: 800; letter-spacing: -.03em; font-size: 25px; }
.zst-menu > li > a { font-weight: 600; border-radius: 999px; padding: 8px 14px; }
.zst-menu > li > a:hover,
.zst-menu > li.current-menu-item > a {
	background: var(--zst-surface-2);
	color: var(--zst-accent-deep);
}
.zst-header__phone { font-weight: 600; }

/* ---- Buttons: pills ---------------------------------------------- */
.zst-btn { border-radius: 999px; font-weight: 700; letter-spacing: 0; }
.zst-btn--lg { font-size: 17px; padding: 14px 30px; }

/* ---- Hero: light, airy, calculator-led --------------------------- */
.zst-hero {
	background:
		radial-gradient(720px 380px at 12% -20%, rgba(18,135,154,.13), transparent 62%),
		linear-gradient(180deg, var(--zst-surface-2) 0%, #fff 100%);
	border-bottom: 1px solid var(--zst-line-soft);
}
.zst-hero__in { align-items: center; }
.zst-hero__h1 { font-size: clamp(34px, 4.6vw, 54px); letter-spacing: -.03em; }
.zst-hero__sub { font-size: 18px; color: var(--zst-ink-soft); max-width: 46ch; }
.zst-hero__eyebrow {
	font-weight: 700;
	font-size: .8rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--zst-accent-deep);
}

/* ---- The budget calculator --------------------------------------- */
.zst-calc {
	background: #fff;
	border: 1px solid var(--zst-line);
	border-radius: 18px;
	padding: 24px;
	box-shadow: 0 10px 40px rgba(18,33,43,.10);
}
.zst-calc__h {
	font-family: var(--zst-font-display);
	font-weight: 800;
	font-size: 1.22rem;
	letter-spacing: -.02em;
	margin: 0 0 2px;
}
.zst-calc__note { font-size: .85rem; color: var(--zst-ink-faint); margin: 0 0 18px; }
.zst-calc__field { margin-bottom: 16px; }
.zst-calc__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px;
}
.zst-calc__label { font-weight: 600; font-size: .92rem; }
.zst-calc__val {
	font-family: var(--zst-font-display);
	font-weight: 800;
	font-size: 1.16rem;
	color: var(--zst-accent-deep);
	font-variant-numeric: tabular-nums;
}
.zst-calc input[type="range"] { width: 100%; accent-color: var(--zst-brand); height: 24px; }
.zst-calc__terms { display: flex; gap: 8px; flex-wrap: wrap; }
.zst-calc__term {
	flex: 1 1 0;
	min-width: 64px;
	padding: 9px 6px;
	border: 1px solid var(--zst-line);
	background: #fff;
	border-radius: 999px;
	font: inherit;
	font-weight: 600;
	font-size: .9rem;
	cursor: pointer;
	color: var(--zst-ink);
}
.zst-calc__term[aria-pressed="true"] {
	background: var(--zst-brand);
	border-color: var(--zst-brand);
	color: #fff;
}
.zst-calc__out {
	background: var(--zst-surface-2);
	border-radius: 12px;
	padding: 14px 16px;
	margin: 18px 0 14px;
	text-align: center;
}
.zst-calc__range {
	font-family: var(--zst-font-display);
	font-weight: 800;
	font-size: 1.3rem;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	display: block;
}
.zst-calc__count { font-size: .9rem; color: var(--zst-ink-soft); }
.zst-calc .zst-btn { width: 100%; justify-content: center; }
.zst-calc__fine { font-size: .74rem; color: var(--zst-ink-faint); margin: 12px 0 0; line-height: 1.45; }

/* ---- Process strip: numbered, roomy ------------------------------- */
.zst-values { background: var(--zst-surface-2); }
.zst-value {
	background: #fff;
	border: 1px solid var(--zst-line-soft);
	border-radius: 14px;
	padding: 22px;
	box-shadow: 0 1px 2px rgba(18,33,43,.05);
}
.zst-value__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	border-radius: 999px;
	background: var(--zst-brand);
	color: #fff;
	font-family: var(--zst-font-display);
	font-weight: 800;
	font-size: .95rem;
	margin-bottom: 12px;
}
.zst-value__t { font-weight: 800; letter-spacing: -.015em; }

/* ---- Sections, stores, finance band, footer ----------------------- */
.zst-section__title { font-size: clamp(24px, 3vw, 34px); letter-spacing: -.028em; }
.zst-link-arrow { font-weight: 700; color: var(--zst-accent-deep); }
.zst-store {
	background: #fff;
	border: 1px solid var(--zst-line-soft);
	border-radius: 14px;
	padding: 20px;
	box-shadow: 0 1px 2px rgba(18,33,43,.05);
}
.zst-financeband { background: var(--zst-ink); border-radius: 0; }
.zst-footer { background: var(--zst-ink); }
.zst-trust { background: #fff; border: 1px solid var(--zst-line-soft); border-radius: 16px; box-shadow: 0 1px 2px rgba(18,33,43,.05); }

/* ---- Responsive --------------------------------------------------- */
@media (max-width: 900px) {
	.zst-calc { padding: 20px; }
}

/* ---- Header fit between the nav-collapse breakpoint and full width -----
   This skin's maxw is 1280 with pill nav links, so the header needs more room
   than Editorial's. The nav collapse threshold (1080) lives in core's theme.js
   as well as in CSS, and moving it here would desync the two or change the
   other skins — so instead the header is made to FIT the 1081–1259 band.

   The phone is what gives way: it is duplicated in the utility bar and the
   footer, whereas the CTA is the page's primary action and the nav is the way
   around the site. Below 1080 the nav collapses and the phone returns. */
@media (min-width: 1081px) and (max-width: 1259px) {
	.zst-header__phone { display: none; }
	.zst-menu > li > a { padding: 8px 11px; font-size: .95rem; }
	.zst-header__cta { padding-left: 18px; padding-right: 18px; }
	.zst-header__in { gap: 14px; }
}