/* Storefront content styles for the Express pages, built on the Trade theme
 * tokens (theme-tokens.css) so tables/diagrams/VIN tools read as native theme
 * content. Layout/typography primitives come from base.css. */

.storefront-main { padding-top: 3.6rem; padding-bottom: 5.2rem; }

.storefront-main h1 {
	margin: 0 0 1rem;
}
.storefront-main h2 {
	margin: 3rem 0 1rem;
}

.storefront-muted { color: rgba(var(--color-foreground), 0.55); }
.meta { color: rgba(var(--color-foreground), 0.6); font-size: 1.3rem; }
.meta b { color: rgb(var(--color-foreground)); }

/* Breadcrumbs */
.storefront-breadcrumb { margin: 0 0 1.6rem; }

/* Tables — themed like Trade's quick-order/cart tables */
.storefront-main table {
	border-collapse: collapse;
	width: 100%;
	margin: 1rem 0 2rem;
	background: rgb(var(--color-background));
	font-size: 1.4rem;
}
.color-scheme-1 .storefront-main table, .storefront-main table {
	background: #ffffff; /* card scheme (scheme-2) */
	border-radius: var(--product-card-corner-radius);
	overflow: hidden;
	box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.08);
}
.storefront-main table th, .storefront-main table td {
	padding: 0.9rem 1.2rem;
	text-align: left;
	border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
	vertical-align: top;
}
.storefront-main table th {
	font-family: var(--font-heading-family);
	font-weight: var(--font-heading-weight);
	color: rgb(var(--color-foreground));
	background: rgba(var(--color-foreground), 0.03);
	font-size: 1.3rem;
	letter-spacing: 0.06rem;
}
.storefront-main table tbody tr:hover { background: rgba(var(--color-foreground), 0.03); }
.storefront-main table a { color: rgba(var(--color-link), 1); text-decoration: none; }
.storefront-main table a:hover { text-decoration: underline; }

/* Search form — theme field styling */
form.search { margin: 0 0 2rem; display: flex; gap: 1rem; max-width: 60rem; }
form.search input[type=text] {
	flex: 1;
	padding: 1rem 1.4rem;
	border-radius: var(--inputs-radius);
	border: var(--inputs-border-width) solid rgba(var(--color-foreground), var(--inputs-border-opacity));
	background: #fff;
	font: inherit;
	color: rgb(var(--color-foreground));
}
form.search button {
	cursor: pointer;
	font: inherit;
	letter-spacing: 0.1rem;
	padding: 0 2.4rem;
	min-height: 4.4rem;
	border-radius: var(--buttons-radius);
	background-color: rgb(var(--color-button));
	color: rgb(var(--color-button-text));
	border: var(--buttons-border-width) solid rgba(var(--color-button-text), var(--buttons-border-opacity));
}

/* Buttons reuse the theme's .button class from base.css */

/* Pager */
.pager { margin: 1.6rem 0; }
.pager a, .pager span {
	padding: 0.5rem 1.1rem;
	border: 0.1rem solid rgba(var(--color-foreground), 0.15);
	margin-right: 0.4rem;
	display: inline-block;
	border-radius: var(--buttons-radius);
	color: rgba(var(--color-link), 1);
	text-decoration: none;
}
.pager .current {
	background: rgb(var(--color-button));
	color: rgb(var(--color-button-text));
	border-color: rgb(var(--color-button));
}

/* Color swatches */
.swatch {
	display: inline-block;
	width: 1.4rem;
	height: 1.4rem;
	border: 0.1rem solid rgba(var(--color-foreground), 0.35);
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 0.5rem;
}

/* Exploded-view sections */
.section {
	margin: 2.4rem 0;
	padding: 1.6rem;
	background: #ffffff;
	border-radius: var(--product-card-corner-radius);
	box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.08);
}
.section h3 { margin: 0 0 1rem; font-family: var(--font-heading-family); }
.section-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 1.6rem; }
@media screen and (max-width: 900px) { .section-body { grid-template-columns: 1fr; } }
.section-body img {
	max-width: 100%;
	height: auto;
	display: block;
	border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
	border-radius: var(--media-radius);
	background: #fff;
}
.diagram-wrap { position: relative; display: block; }
.diagram-area { position: absolute; box-sizing: border-box; border: 0.1rem solid transparent; text-decoration: none; }
.diagram-area:hover { background: rgba(255, 220, 0, 0.35); border-color: rgba(220, 140, 0, 0.9); }
tr.row-highlight { background: #fffbcc !important; }

/* Definition lists */
dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.6rem; margin: 1rem 0 2rem; }
dl dt { font-weight: var(--font-body-weight-bold); color: rgba(var(--color-foreground), 0.75); }
dl dd { margin: 0; }

/* VIN tool */
.vin-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.05em; text-transform: uppercase; }
.badge {
	display: inline-block;
	padding: 0.3rem 1rem;
	border-radius: var(--badge-corner-radius);
	font-size: 1.2rem;
	font-weight: var(--font-body-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.badge-ok { background: #e3f6e1; color: #1b5e20; }
.badge-soft { background: #eef4ff; color: #1a3d80; }
.badge-warn { background: #fff4d5; color: #7a5200; }
.badge-bad { background: #fde2e2; color: #8b1a1a; }
.badge-neutral { background: rgba(var(--color-foreground), 0.08); color: rgba(var(--color-foreground), 0.7); }
.vin-parts { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.6rem; letter-spacing: 0.05em; }
.vin-parts span { padding: 0.2rem 0.4rem; margin: 0 0.1rem; border-radius: 0.2rem; }
.v-prefix { background: #e3edff; color: #14213d; }
.v-check { background: #fff4d5; color: #14213d; }
.v-year { background: #ffe9d6; color: #14213d; }
.v-plant { background: #f3e3ff; color: #14213d; }
.v-serial { background: #e1f6e1; color: #14213d; }
.vin-legend { margin: 0.5rem 0 1.6rem; border-collapse: collapse; font-size: 1.3rem; }
.vin-legend td { padding: 0.3rem 0.8rem; border: none; vertical-align: middle; }
.vin-legend .seg { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; padding: 0.2rem 0.6rem; border-radius: 0.2rem; letter-spacing: 0.05em; white-space: nowrap; }
.vin-legend .pos { color: rgba(var(--color-foreground), 0.6); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vin-legend .name { font-weight: var(--font-body-weight-bold); white-space: nowrap; }
.vin-legend .desc { color: rgba(var(--color-foreground), 0.65); }
.alt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: 1rem; margin: 1rem 0; }
.alt-card {
	background: #fff;
	padding: 1rem 1.2rem;
	font-size: 1.3rem;
	border-radius: var(--product-card-corner-radius);
	box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.08);
}
.alt-card .alt-color { font-weight: var(--font-body-weight-bold); }
.alt-card .alt-meta { color: rgba(var(--color-foreground), 0.6); font-size: 1.2rem; margin-top: 0.2rem; }
.confidence-line { margin: 1rem 0; }
.confidence-line .meta { margin-left: 0.5rem; }

/* VIN lookup result card — the matched vehicle */
.vin-note { margin: 1.6rem 0 0; }
.vin-note .badge { margin-right: 0.4rem; }
.vin-result {
	display: flex;
	gap: 2.4rem;
	align-items: flex-start;
	margin: 1.2rem 0 2rem;
	padding: 2rem 2.4rem;
	background: #fff;
	border-radius: var(--product-card-corner-radius);
	box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.08);
}
.vin-result__image {
	width: 28rem;
	max-width: 38%;
	height: auto;
	object-fit: contain;
	flex-shrink: 0;
}
.vin-result__body { flex: 1; min-width: 0; }
.vin-result__title { margin: 0 0 0.8rem; }
.vin-result .button { text-decoration: none; }
@media screen and (max-width: 640px) {
	.vin-result { flex-direction: column; }
	.vin-result__image { max-width: 100%; width: 100%; }
}

/* Buy button cell */
.buy-link { white-space: nowrap; }

/* Footer paddings (theme setting: 36/36) */
.footer .footer__content-top { padding-top: 36px; padding-bottom: 24px; }
.footer .footer__content-bottom { padding-bottom: 36px; }

/* Hero (Trade rich-text banner look, as a full-width dark band) */
.hero {
	text-align: center;
	padding: 6rem 2rem 6.4rem;
	margin: 0 0 4rem;
	border-radius: var(--text-boxes-radius);
}
.hero__caption {
	font-size: 1.2rem;
	letter-spacing: 0.13rem;
	text-transform: uppercase;
	color: rgba(var(--color-foreground), 0.7);
	margin: 0 0 1rem;
}
.hero__heading {
	margin: 0 0 1.6rem;
	font-size: calc(var(--font-heading-scale) * 4rem);
}
@media screen and (min-width: 750px) {
	.hero__heading { font-size: calc(var(--font-heading-scale) * 5.2rem); }
}
.hero__text {
	max-width: 64rem;
	margin: 0 auto 2.4rem;
	color: rgba(var(--color-foreground), 0.75);
}
.hero form.search { margin: 0 auto; max-width: 54rem; }
.hero form.search input[type=text] { border: none; }

/* Card grids (categories, models) */
.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
	gap: var(--grid-desktop-horizontal-spacing);
	margin: 1.6rem 0 3rem;
}
.catalog-card {
	display: block;
	background: #ffffff;
	border-radius: var(--product-card-corner-radius);
	box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.08);
	padding: 1.6rem;
	text-decoration: none;
	color: rgb(var(--color-foreground));
	transition: box-shadow 0.15s ease;
}
.catalog-card:hover {
	box-shadow: 0 0 0 0.2rem rgba(var(--color-foreground), 0.25);
}
.catalog-card__image {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background: #fff;
	border-radius: calc(var(--product-card-corner-radius) - 0.2rem);
	margin-bottom: 1.2rem;
}
.catalog-card__image--empty { background: rgba(var(--color-foreground), 0.04); }
.catalog-card__title { margin: 0 0 0.4rem; }
.catalog-card__meta { margin: 0; color: rgba(var(--color-foreground), 0.6); font-size: 1.3rem; }
.catalog-card__cta {
	display: inline-block;
	margin-top: 1.2rem;
	color: rgba(var(--color-link), 1);
	font-size: 1.4rem;
}

/* VIN callout band */
.vin-callout {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
	background: #ffffff;
	border-radius: var(--text-boxes-radius);
	box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.08);
	padding: 2rem 2.4rem;
	margin: 0 0 2rem;
}
.vin-callout h3 { margin: 0 0 0.4rem; }
.vin-callout p { margin: 0; }
.vin-callout .button { text-decoration: none; }

/* Header menu styles — ported from sections/header.liquid's inline <style>
 * block (not part of any theme CSS asset), with the section settings baked
 * in: padding_top 8, padding_bottom 8, margin_bottom 0. */
.list-menu {
	list-style: none;
	padding: 0;
	margin: 0;
}
.list-menu--inline {
	display: inline-flex;
	flex-wrap: wrap;
}
summary.list-menu__item { padding-right: 2.7rem; }
.list-menu__item {
	display: flex;
	align-items: center;
	line-height: calc(1 + 0.3 / var(--font-body-scale));
}
.list-menu__item--link {
	text-decoration: none;
	padding-bottom: 1rem;
	padding-top: 1rem;
	line-height: calc(1 + 0.8 / var(--font-body-scale));
}
@media screen and (min-width: 750px) {
	.list-menu__item--link {
		padding-bottom: 0.5rem;
		padding-top: 0.5rem;
	}
}
.header { padding: 4px 3rem 4px 3rem; }
.section-header { position: sticky; margin-bottom: 0; z-index: 3; top: 0; }
@media screen and (min-width: 990px) {
	.header { padding-top: 8px; padding-bottom: 8px; }
}

/* Legal pages (terms, privacy) — prose measure + list rhythm */
.legal-page { max-width: 76rem; }
.legal-page p, .legal-page li { line-height: 1.65; }
.legal-page ul { margin: 1rem 0 2rem; padding-left: 2.2rem; }
.legal-page li { margin: 0 0 0.7rem; }
.legal-page h2 { margin-top: 3.4rem; }
.legal-page h3 { margin: 2rem 0 0.6rem; }
.legal-page a { color: rgba(var(--color-link), 1); }