.site-header,
.site-footer {
    background: var(--color-surface);
}

.site-header {
    border-bottom: var(--border-width-default) solid var(--color-border);
}

.site-footer {
    border-top: var(--border-width-default) solid var(--color-border);
}

.site-name {
    color: var(--color-text);
    font-family: var(--type-serif);
    font-size: var(--type-size-3);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-decoration: none;
}

.button,
.button-link,
button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--button-min-height);
    padding: 0.65rem 1rem;
    border: var(--border-width-default) solid var(--color-text);
    border-radius: var(--radius-control);
    color: var(--color-text);
    background: var(--color-surface);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.button--primary { border-color: var(--color-accent); color: var(--color-accent-on); background: var(--color-accent); }
.button--primary:hover { border-color: var(--color-accent-hover); background: var(--color-accent-hover); }
.button--secondary { border-color: var(--color-accent); color: var(--color-accent); }
.button--tertiary,
.link-button { padding: 0; border: 0; color: var(--color-accent-hover); background: transparent; text-decoration: underline; text-underline-offset: 0.15em; }
.site-header .site-navigation__toggle { display: none; }

.eyebrow { color: var(--color-text-muted); font-size: var(--type-size-1); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

.rotev-consent {
    position: fixed;
    z-index: 900;
    inset: auto var(--space-4) var(--space-4);
    width: min(calc(100% - (var(--space-4) * 2)), var(--container-reading));
    margin-inline: auto;
    padding: var(--space-5);
    border: var(--border-width-default) solid var(--color-border);
    border-radius: var(--radius-status);
    background: var(--color-surface);
    box-shadow: var(--shadow-subtle);
}
.rotev-consent[hidden] { display: none; }
.rotev-consent h2 { margin-block: 0 var(--space-2); font-size: var(--type-size-3); }
.rotev-consent p { margin-block: 0 var(--space-4); color: var(--color-text-muted); }
.rotev-consent__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.skip-link { position: fixed; z-index: 1000; inset: var(--space-2) auto auto var(--space-2); padding: var(--space-2) var(--space-4); color: var(--color-accent-on); background: var(--color-text); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }

.breadcrumb__list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; color: var(--color-text-muted); list-style: none; }
.breadcrumb__item + .breadcrumb__item::before { margin-right: var(--space-2); content: "/"; color: var(--color-border); }
.card { display: flex; flex-direction: column; min-width: 0; border: var(--border-width-default) solid var(--color-border); border-radius: var(--radius-status); background: var(--color-surface); box-shadow: var(--shadow-subtle); overflow: hidden; }
.card__body { display: grid; align-content: start; gap: var(--space-3); width: 100%; padding: var(--space-5); }
.card__media { display: grid; place-items: end start; min-height: 9rem; padding: var(--space-4); border-bottom: var(--border-width-default) solid var(--color-border); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__media--vehicle { aspect-ratio: 16 / 9; color: var(--color-text-on-dark); background: var(--color-surface-dark); }
.card__media--product { aspect-ratio: 4 / 3; color: var(--color-text-muted); background: var(--color-surface-muted); }
.card__media--placeholder span { font-family: var(--type-serif); font-size: var(--type-size-3); }
.card__image { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; background: var(--color-surface-muted); }
.card__eyebrow { margin: 0; color: var(--color-text-muted); font-size: var(--type-size-1); font-weight: 700; }
.card__title { margin: 0; font-size: var(--type-size-3); }
.card__copy, .card__meta { margin: 0; color: var(--color-text-muted); }
.card--vehicle .card__title { font-family: var(--type-serif); }
.card--product .card__title { font-weight: 800; }
.card--category { border-radius: var(--radius-control); background: transparent; box-shadow: none; }
.card--category .card__body { gap: var(--space-2); padding: var(--space-4); }
.card--category .card__title { font-size: var(--type-size-2); }
.card--guide { border-top: var(--border-width-accent) solid var(--color-accent); border-radius: var(--radius-control); background: var(--color-surface-muted); box-shadow: none; }
.card--guide .card__title { font-family: var(--type-sans); }

.fitment-status, .warning, .compatibility-summary { display: flex; gap: var(--space-3); padding: var(--space-4); border: var(--border-width-default) solid var(--color-border); border-radius: var(--radius-control); }
.fitment-status { --fitment-state: var(--color-fit-unknown); --fitment-surface: var(--color-fit-unknown-surface); color: var(--fitment-state); background: var(--color-surface); border-inline-start: var(--border-width-accent) solid var(--fitment-state); }
.fitment-status__icon, .warning__icon { display: inline-grid; flex: 0 0 1.5rem; place-items: center; width: 1.5rem; height: 1.5rem; border: var(--border-width-default) solid currentColor; border-radius: 50%; color: var(--fitment-state, currentColor); background: var(--fitment-surface, transparent); font-weight: 800; }
.fitment-status__copy, .warning p, .compatibility-summary p { margin: var(--space-2) 0 0; }
.fitment-status--confirmed { --fitment-state: var(--color-fit-confirmed); --fitment-surface: var(--color-fit-confirmed-surface); }
.fitment-status--conditional { --fitment-state: var(--color-fit-conditional); --fitment-surface: var(--color-fit-conditional-surface); }
.fitment-status--verification-required { --fitment-state: var(--color-fit-verification); --fitment-surface: var(--color-fit-verification-surface); }
.fitment-status--not-compatible { --fitment-state: var(--color-fit-not-compatible); --fitment-surface: var(--color-fit-not-compatible-surface); }
.fitment-status--unknown { --fitment-state: var(--color-fit-unknown); --fitment-surface: var(--color-fit-unknown-surface); }
.compatibility-summary { display: grid; color: var(--color-text); background: var(--color-surface); border-top: var(--border-width-accent) solid var(--color-border); }
.warning { color: var(--color-fit-verification); background: var(--color-fit-verification-surface); }
.cta-group { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.sticky-cta { position: sticky; z-index: 10; bottom: max(var(--space-3), env(safe-area-inset-bottom)); padding: var(--space-3); border-top: var(--border-width-default) solid var(--color-border); background: var(--color-surface); box-shadow: var(--shadow-subtle); }
.fact-group { display: grid; gap: var(--space-2); margin: 0; }
.fact-group__item { display: grid; grid-template-columns: minmax(8rem, 1fr) 2fr; gap: var(--space-3); padding-block: var(--space-2); border-bottom: var(--border-width-default) solid var(--color-border); }
.fact-group dd { margin: 0; }
.empty-state { display: grid; justify-items: start; gap: var(--space-3); padding: var(--space-7); border: var(--border-width-default) dashed var(--color-border); background: var(--color-surface-muted); text-align: center; }
.empty-state h2, .empty-state p { margin: 0; }

.preview-hero { background: var(--color-surface-muted); }
.preview-hero h1 { font-size: var(--type-size-display); }
.preview-section { border-top: var(--border-width-default) solid var(--color-border); }
.preview-note { max-width: var(--container-reading); margin-block: 0 var(--space-5); color: var(--color-text-muted); }
.preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--space-5); }
.preview-grid--cards { align-items: stretch; }
.preview-state { display: grid; align-content: start; gap: var(--space-3); }
.preview-display { font-family: var(--type-serif); font-size: var(--type-size-4); }
.preview-swatches { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block: var(--space-5); }
.preview-swatch { min-width: 9rem; padding: var(--space-4); border: var(--border-width-default) solid var(--color-border); }
.preview-swatch--bg { background: var(--color-bg); }
.preview-swatch--surface { background: var(--color-surface); }
.preview-swatch--accent { color: var(--color-accent-on); background: var(--color-accent); }

.c2-page__hero { padding-block: clamp(var(--space-7), 9vw, var(--space-10)); background: var(--color-surface-muted); }
.c2-page__hero--compact { padding-block: clamp(var(--space-6), 6vw, var(--space-8)); }
.c2-page__hero--category { padding-block: clamp(var(--space-5), 4vw, var(--space-7)); }
.c2-page__hero--category .c2-page__lede { margin-block: var(--space-4); }
.c2-page__display { max-width: 15ch; margin: 0; font-family: var(--type-serif); font-size: var(--type-size-display); }
.c2-page__lede { max-width: 58ch; margin-block: var(--space-5); color: var(--color-text-muted); font-size: var(--type-size-3); }
.c2-page__section--muted { background: var(--color-surface-muted); }
.c2-page__section--compact { padding-block: clamp(var(--space-5), 4vw, var(--space-7)); }
.c2-page__heading { display: grid; gap: var(--space-3); max-width: var(--container-reading); margin-block-end: var(--space-6); }
.c2-page__heading h2, .c2-page__heading p { margin: 0; }
.c2-page__heading p:not(.eyebrow) { color: var(--color-text-muted); }
.preview-grid--categories { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.product-detail__breadcrumb { padding-block: var(--space-4); }
.product-detail__hero { padding-block: clamp(var(--space-5), 6vw, var(--space-8)); border-bottom: var(--border-width-default) solid var(--color-border); }
.product-detail__hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.9fr); gap: clamp(var(--space-6), 6vw, var(--space-9)); align-items: start; }
.product-detail__gallery { display: grid; gap: var(--space-3); }
.product-detail__active-image { display: grid; place-items: center; aspect-ratio: 1 / 1; margin: 0; border: var(--border-width-default) solid var(--color-border); background: var(--color-surface-muted); }
.product-detail__active-image img { width: 100%; height: 100%; object-fit: contain; }
.product-detail__thumbnails { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2); }
.product-detail__thumbnail { min-height: 0; aspect-ratio: 1 / 1; padding: 0; border-color: var(--color-border); border-radius: var(--radius-subtle); overflow: hidden; }
.product-detail__thumbnail[aria-pressed="true"] { border-color: var(--color-accent); box-shadow: inset 0 0 0 var(--border-width-default) var(--color-accent); }
.product-detail__thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.product-detail__identity { display: grid; align-content: start; gap: var(--space-5); }
.product-detail__identity > .eyebrow { margin: 0; }
.product-detail__title { max-width: 18ch; margin: 0; font-family: var(--type-sans); font-size: clamp(var(--type-size-4), 4vw, var(--type-size-display)); line-height: 1.18; }
.product-detail__lede { max-width: 52ch; margin: 0; color: var(--color-text-muted); font-size: var(--type-size-3); }
.product-detail__fitment, .product-detail__options { display: grid; gap: var(--space-3); padding-block-start: var(--space-4); border-top: var(--border-width-default) solid var(--color-border); }
.product-detail__section-title { margin: 0; font-size: var(--type-size-3); }
.product-detail__selection { min-height: 1.5em; margin: 0; color: var(--color-text-muted); }
.product-detail__option-group { display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
.product-detail__option-group legend { padding: 0; font-weight: 700; }
.product-detail__option-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.product-detail__option { min-height: var(--button-min-height); border-color: var(--color-border-strong); background: var(--color-surface); text-align: start; }
.product-detail__option[aria-pressed="true"] { border-color: var(--color-accent); color: var(--color-accent-on); background: var(--color-accent); }
.product-detail__section { border-top: var(--border-width-default) solid var(--color-border); }
.product-detail__section--facts { background: var(--color-surface); }
.product-detail__section--muted { background: var(--color-surface-muted); }
.product-detail__content-grid, .product-detail__fitment-reminder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(var(--space-5), 6vw, var(--space-8)); }
.product-detail__package-note, .product-detail__heading { display: grid; align-content: start; gap: var(--space-3); }
.product-detail__package-note p, .product-detail__heading p { margin: 0; color: var(--color-text-muted); }
.product-detail__detail-images { display: grid; gap: var(--space-6); }
.product-detail__image-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.product-detail__image-grid figure { display: grid; place-items: center; aspect-ratio: 1 / 1; margin: 0; border: var(--border-width-default) solid var(--color-border); background: var(--color-surface); }
.product-detail__image-grid img { width: 100%; height: 100%; object-fit: contain; }
.product-detail__vehicle-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.product-detail__vehicle-list li { padding: var(--space-3); border-bottom: var(--border-width-default) solid var(--color-border); }

.preview-shell__header { position: relative; padding-block: var(--space-4); }
.preview-shell__header .site-header__inner { min-height: 2.75rem; }
.preview-shell__marker { max-width: 11rem; margin: 0; color: var(--color-text-muted); font-size: var(--type-size-1); font-weight: 700; letter-spacing: 0.04em; text-align: end; }
.preview-shell__nav { min-width: 0; }

@media (max-width: 48rem) {
    .preview-shell__header .site-header__inner { align-items: center; flex-direction: row; gap: var(--space-3); }
    .preview-shell__menu { display: inline-flex; flex: 0 0 auto; min-height: 2.75rem; padding-inline: var(--space-3); }
    html.js .preview-shell__nav { position: absolute; z-index: 20; inset-block-start: 100%; inset-inline: var(--gutter); width: auto; padding: var(--space-3); border: var(--border-width-default) solid var(--color-border); background: var(--color-surface); box-shadow: var(--shadow-subtle); }
    .preview-shell__nav ul { align-items: stretch; flex-direction: column; gap: var(--space-1); padding: 0; }
    .preview-shell__nav li a { display: flex; align-items: center; min-height: 2.75rem; padding: var(--space-2) var(--space-3); }
    html.js .preview-shell__nav[hidden] { display: none; }
    .preview-shell__marker { margin-inline-start: auto; }
}

@media (max-width: 48rem) {
    .site-header .site-navigation__toggle { display: inline-flex; }
}

@media (max-width: 40rem) {
    .preview-hero h1 { font-size: var(--type-size-display-mobile); }
    .c2-page__display { font-size: var(--type-size-display-mobile); }
    .rotev-consent { inset-inline: var(--space-2); bottom: var(--space-2); width: calc(100% - var(--space-4)); padding: var(--space-4); }
    .rotev-consent__actions { flex-direction: column; }
    .rotev-consent__actions button { width: 100%; }
    .product-detail__hero-grid, .product-detail__content-grid, .product-detail__fitment-reminder { grid-template-columns: 1fr; }
    .product-detail__thumbnails { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 4rem; overflow-x: auto; padding-block-end: var(--space-1); scroll-snap-type: x proximity; }
    .product-detail__thumbnail { scroll-snap-align: start; }
    .product-detail__image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .product-detail__vehicle-list { grid-template-columns: 1fr; }
}