/* ================================================================
   VISOR SUN — Main Stylesheet
   Design: bright minimal · vibrant · balanced density
   Approach: desktop-first responsive
   All colours & fonts via CSS custom properties (injected by base.py)
   ================================================================ */

/* ── Reset & Foundations ───────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-text);
    color: var(--color-text);
    background: var(--color-background);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-link); text-decoration: none; transition: color .2s ease, opacity .2s ease; }
a:hover { color: var(--color-primary); }
ul, ol { list-style: none; }
button, input, select, textarea {
    font-family: inherit; font-size: inherit; color: inherit;
    border: none; outline: none; background: none;
}
button { cursor: pointer; }
address { font-style: normal; }
details summary { cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
details summary::marker { display: none; content: ''; }

/* ── Layout Container ──────────────────────────────────────────── */
.sun-wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* ── Main Content Area ─────────────────────────────────────────── */
.sun-content {
    min-height: 55vh;
    padding-bottom: 2.5rem;
}

/* ================================================================
   TOP BAR (Announcement strip + language/cart)
   ================================================================ */
.sun-topbar {
    background: var(--color-secondary);
    color: #fff;
    font-size: .8rem;
    letter-spacing: .02em;
}
.sun-topbar > .sun-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: .45rem;
    padding-bottom: .45rem;
    gap: 1rem;
}
.sun-topbar-msg {
    margin: 0;
    flex: 1;
    text-align: center;
    opacity: .92;
}
.sun-topbar-tools {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
}

/* Cart icon */
.sun-cart-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #fff;
    transition: opacity .2s;
}
.sun-cart-link:hover { color: #fff; opacity: .8; }
.sun-cart-count {
    position: absolute;
    top: -6px;
    right: -8px;
    background: var(--color-accent);
    color: var(--color-secondary);
    font-size: .65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ================================================================
   LANGUAGE SWITCHER
   ================================================================ */
.sun-locale {
    position: relative;
    z-index: 200;
}
.sun-locale-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #fff;
    font-size: .8rem;
    padding: .25rem .5rem;
    border-radius: 4px;
    transition: background .2s;
}
.sun-locale-btn:hover { background: rgba(255,255,255,.12); }
.sun-locale-label { white-space: nowrap; }
.sun-flag { border-radius: 2px; vertical-align: middle; }
.sun-caret {
    transition: transform .25s;
    flex-shrink: 0;
}
.sun-locale-btn[aria-expanded="true"] .sun-caret { transform: rotate(180deg); }
.sun-locale-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,.15);
    min-width: 180px;
    padding: .35rem 0;
    z-index: 210;
}
.sun-locale-menu.active { display: block; }
.sun-locale-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1rem;
    color: var(--color-text);
    font-size: .85rem;
    transition: background .15s;
}
.sun-locale-item:hover {
    background: rgba(0,0,0,.04);
    color: var(--color-primary);
}

/* Geo-redirect banner */
.sun-geo-banner {
    display: none;
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    width: calc(100% - 2rem);
    max-width: 440px;
}
.sun-geo-banner.active { display: block; }
.sun-geo-prompt {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0,0,0,.18);
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.sun-geo-flag { border-radius: 3px; flex-shrink: 0; }
.sun-geo-text {
    flex: 1;
    font-size: .9rem;
    margin: 0;
    min-width: 140px;
    color:black;
}
.sun-geo-buttons { display: flex; gap: .5rem; }
.sun-geo-btn {
    padding: .45rem 1rem;
    border-radius: 6px;
    font-size: .82rem;
    font-weight: 600;
    transition: opacity .2s;
}
.sun-geo-btn:hover { opacity: .85; }
.sun-geo-confirm {
    background: var(--color-primary);
    color: #fff;
}
.sun-geo-dismiss {
    background: #eee;
    color: var(--color-text);
}

/* ================================================================
   HEADER
   ================================================================ */
.sun-header {
    background: var(--color-header-footer);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 100;
}
.sun-header-inner {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 0;
    min-height: 56px;
}
.sun-header-inner--solo { justify-content: center; }

/* Hamburger toggle */
.sun-menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 6px;
    z-index: 102;
}
.sun-menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
    transition: transform .3s ease, opacity .25s ease;
}
.sun-menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sun-menu-toggle.active span:nth-child(2) { opacity: 0; }
.sun-menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Brand / Logo */
.sun-brand {
    display: inline-flex;
    align-items: center;
    color: #fff;
    flex-shrink: 0;
}
.sun-brand:hover { color: #fff; opacity: .9; }
.sun-brand-img { height: auto; }
.sun-brand-name {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

/* ================================================================
   NAVIGATION RIBBON
   ================================================================ */
.sun-ribbon {
    background: var(--color-header-footer);
    border-top: 1px solid rgba(255,255,255,.08);
}
.sun-ribbon > .sun-wrap {
    display: flex;
    align-items: center;
    gap: .15rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-top: .25rem;
    padding-bottom: .25rem;
}
.sun-ribbon > .sun-wrap::-webkit-scrollbar { display: none; }

.sun-ribbon-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: rgba(255,255,255,.85);
    font-size: .85rem;
    font-weight: 500;
    padding: .55rem .85rem;
    border-radius: 6px;
    white-space: nowrap;
    transition: background .2s, color .2s;
}
.sun-ribbon-link:hover,
.sun-ribbon-link:focus { color: #fff; background: rgba(255,255,255,.1); }
.sun-ribbon-static { cursor: default; }
.sun-chevron {
    flex-shrink: 0;
    transition: transform .25s;
}

/* Dropdown */
.sun-ribbon-dropdown { position: relative; }
.sun-ribbon-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0,0,0,.14);
    min-width: 200px;
    padding: .4rem 0;
    z-index: 120;
}
.sun-ribbon-dropdown:hover .sun-ribbon-submenu,
.sun-ribbon-dropdown:focus-within .sun-ribbon-submenu { display: block; }
.sun-ribbon-dropdown:hover .sun-chevron { transform: rotate(180deg); }

.sun-ribbon-sub-link {
    display: block;
    padding: .55rem 1.1rem;
    color: var(--color-text);
    font-size: .85rem;
    transition: background .15s, color .15s;
}
.sun-ribbon-sub-link:hover {
    background: rgba(0,0,0,.04);
    color: var(--color-primary);
}

/* Mobile nav overlay */
.sun-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 99;
}
.sun-overlay.active { display: block; }

/* ================================================================
   VEHICLE FINDER BAR (Car Selector in header)
   ================================================================ */
.sun-vehicle-finder {
    background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 80%, #000));
    color: #fff;
    padding: .65rem 0;
}
.sun-vf-form {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
}
.sun-vf-heading {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: .9rem;
    white-space: nowrap;
    flex-shrink: 0;
}
.sun-vf-controls {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex: 1;
    flex-wrap: wrap;
}
.sun-vf-select {
    flex: 1;
    min-width: 110px;
    padding: .5rem .65rem;
    background: rgba(255,255,255,.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 6px;
    font-size: .85rem;
    appearance: auto;
    cursor: pointer;
    transition: background .2s;
}
.sun-vf-select:hover:not(:disabled) { background: rgba(255,255,255,.22); }
.sun-vf-select:disabled { opacity: .45; cursor: not-allowed; }
.sun-vf-select option { color: var(--color-text); background: #fff; }

.sun-vf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .5rem 1.2rem;
    background: var(--color-accent);
    color: var(--color-secondary);
    font-weight: 700;
    font-size: .85rem;
    border-radius: 6px;
    white-space: nowrap;
    transition: opacity .2s, transform .15s;
}
.sun-vf-btn:hover { opacity: .9; transform: translateY(-1px); }
.sun-vf-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.sun-vf-result {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.sun-vf-vehicle {
    font-family: var(--font-heading);
    font-size: 1rem;
}
.sun-vf-actions {
    display: flex;
    gap: .5rem;
    align-items: center;
}
.sun-vf-reset {
    color: rgba(255,255,255,.8);
    font-size: .82rem;
    text-decoration: underline;
    transition: color .2s;
}
.sun-vf-reset:hover { color: #fff; }

/* ================================================================
   SHARED — Category Cards
   ================================================================ */
.sun-cat-card {
    display: block;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: #f5f5f5;
    transition: transform .25s ease, box-shadow .25s ease;
}
.sun-cat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
.sun-cat-card-img {
    aspect-ratio: var(--category-image-ratio);
    overflow: hidden;
}
.sun-cat-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.sun-cat-card:hover .sun-cat-card-img img { transform: scale(1.05); }
.sun-cat-card-img--empty {
    background: linear-gradient(135deg, #e8e8e8, #d0d0d0);
}
.sun-cat-card-name {
    display: block;
    padding: .65rem .85rem;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: .92rem;
    color: var(--color-text);
    text-align: center;
    text-transform: capitalize;
}

/* ================================================================
   SHARED — Price Display
   ================================================================ */
.sun-price-group {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    flex-wrap: wrap;
}
.sun-price-old {
    font-size: .88rem;
    color: #999;
    text-decoration: line-through;
}
.sun-price-current {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-primary);
}

/* ================================================================
   SHARED — Variant Type Highlighting
   ================================================================ */
.sun-variant-mesh { color: #2E86AB; font-weight: 600; }
.sun-variant-acrylic { color: #A23B72; font-weight: 600; }
.sun-variant-shade { color: #F18F01; font-weight: 600; }

/* ================================================================
   SHARED — FAQ Accordion
   ================================================================ */
.sun-faq {
    padding: 2.5rem 0;
}
.sun-faq-heading {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    color: var(--color-secondary);
}
.sun-faq-entry {
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    margin-bottom: .6rem;
    overflow: hidden;
    transition: border-color .2s;
}
.sun-faq-entry:hover { border-color: var(--color-primary); }
.sun-faq-entry[open] { border-color: var(--color-primary); }
.sun-faq-question {
    padding: 1rem 1.25rem;
    font-weight: 600;
    font-size: .95rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background .2s;
}
.sun-faq-question::after {
    content: '+';
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--color-primary);
    transition: transform .25s;
    flex-shrink: 0;
    margin-left: 1rem;
}
.sun-faq-entry[open] .sun-faq-question::after {
    content: '−';
    transform: rotate(0deg);
}
.sun-faq-question:hover { background: rgba(0,0,0,.02); }
.sun-faq-answer {
    padding: 0 1.25rem 1.1rem;
    font-size: .9rem;
    line-height: 1.7;
    color: #555;
}

/* Shipping table inside FAQ */
.sun-ship-table-container {
    overflow-x: auto;
    margin-top: .75rem;
}
.sun-ship-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}
.sun-ship-table th {
    background: var(--color-secondary);
    color: #fff;
    padding: .6rem .8rem;
    text-align: left;
    font-weight: 600;
}
.sun-ship-table td {
    padding: .55rem .8rem;
    border-bottom: 1px solid #eee;
}
.sun-ship-table tbody tr:hover { background: rgba(0,0,0,.02); }

/* ================================================================
   FOOTER
   ================================================================ */
.sun-footer {
    background: var(--color-header-footer);
    color: rgba(255,255,255,.85);
    padding: 3rem 0 0;
    margin-top: 2rem;
}
.sun-footer-cols {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 2.5rem;
    padding-bottom: 2.5rem;
}
.sun-footer-identity { display: flex; flex-direction: column; gap: 1rem; }
.sun-footer-home { display: inline-block; color: #fff; }
.sun-footer-home:hover { opacity: .85; color: #fff; }
.sun-footer-logo { height: auto; }
.sun-footer-brand-name {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
}
.sun-footer-socials { display: flex; gap: .65rem; }
.sun-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    color: #fff;
    transition: background .2s, transform .2s;
}
.sun-social-icon:hover {
    background: var(--color-primary);
    color: #fff;
    transform: translateY(-2px);
}
.sun-social-icon svg { width: 18px; height: 18px; }

.sun-footer-menu {}
.sun-footer-title {
    font-family: var(--font-heading);
    font-size: .95rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: .85rem;
}
.sun-footer-links li { margin-bottom: .45rem; }
.sun-footer-links a {
    color: rgba(255,255,255,.7);
    font-size: .88rem;
    transition: color .2s;
}
.sun-footer-links a:hover { color: var(--color-accent); }

.sun-footer-reach {}
.sun-footer-address {
    font-size: .85rem;
    line-height: 1.65;
    color: rgba(255,255,255,.65);
    margin-bottom: .75rem;
}
.sun-footer-contact-links {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-bottom: .5rem;
}
.sun-footer-contact-links a {
    color: rgba(255,255,255,.75);
    font-size: .85rem;
    transition: color .2s;
}
.sun-footer-contact-links a:hover { color: var(--color-accent); }
.sun-footer-schedule {
    font-size: .82rem;
    color: rgba(255,255,255,.55);
}
.sun-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 1.1rem 0;
    text-align: center;
    font-size: .8rem;
    color: rgba(255,255,255,.5);
}

/* ================================================================
   HOMEPAGE — Hero Banner
   ================================================================ */
.hp-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 520px;
    display: flex;
    align-items: center;
}
.hp-hero-overlay {
    width: 100%;
    background: linear-gradient(135deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.35) 100%);
    padding: 4.5rem 0;
}
.hp-hero-overlay .sun-wrap { text-align: center; color: #fff; }
.hp-hero-h1 {
    font-family: var(--font-heading);
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: .65rem;
    letter-spacing: -.02em;
    text-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.hp-hero-tagline {
    font-size: 1.15rem;
    opacity: .92;
    max-width: 560px;
    margin: 0 auto 1.75rem;
    line-height: 1.55;
}
.hp-hero-actions {
    display: flex;
    justify-content: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

/* Homepage buttons */
.hp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .75rem 1.75rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .95rem;
    border-radius: 8px;
    transition: transform .2s, box-shadow .2s, opacity .2s;
    white-space: nowrap;
}
.hp-btn:hover { transform: translateY(-2px); }
.hp-btn--primary {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.hp-btn--primary:hover {
    color: #fff;
    box-shadow: 0 6px 24px rgba(0,0,0,.3);
}
.hp-btn--outline {
    border: 2px solid #fff;
    color: #fff;
    background: transparent;
}
.hp-btn--outline:hover { background: rgba(255,255,255,.12); color: #fff; }
.hp-btn--lg { padding: .9rem 2.25rem; font-size: 1.05rem; }

/* Hero social proof */
.hp-hero-proof {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    flex-wrap: wrap;
    font-size: .88rem;
}
.hp-hero-stars { color: var(--color-accent); letter-spacing: 2px; }
.hp-hero-stat { opacity: .88; }
.hp-hero-badge {
    background: var(--color-accent);
    color: var(--color-secondary);
    padding: .2rem .65rem;
    border-radius: 4px;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* ================================================================
   HOMEPAGE — Trust Bar
   ================================================================ */
.hp-trust-bar {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 1rem 0;
}
.hp-trust-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
}
.hp-trust-item {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.hp-trust-icon {
    color: var(--color-primary);
    flex-shrink: 0;
}
.hp-trust-label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-text);
}

/* ================================================================
   HOMEPAGE — Browse by Make
   ================================================================ */
.hp-makes {
    padding: 3rem 0;
}
.hp-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
}
.hp-section-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-secondary);
}
.hp-section-title--center { text-align: center; }
.hp-link-arrow {
    font-size: .9rem;
    font-weight: 600;
    color: var(--color-primary);
    white-space: nowrap;
    transition: gap .2s;
}
.hp-link-arrow:hover { color: var(--color-primary); opacity: .8; }
.hp-makes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 1rem;
}

/* ================================================================
   HOMEPAGE — Feature Cards
   ================================================================ */
.hp-features {
    padding: 3rem 0;
    background: #fafafa;
}
.hp-features-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
.hp-feature-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: box-shadow .25s, border-color .25s;
}
.hp-feature-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 6px 24px rgba(0,0,0,.06);
}
.hp-feature-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    margin-bottom: 1rem;
}
.hp-feature-icon { color: var(--color-primary); }
.hp-feature-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: .45rem;
    color: var(--color-secondary);
}
.hp-feature-desc {
    font-size: .9rem;
    color: #666;
    line-height: 1.6;
}

/* ================================================================
   HOMEPAGE — Reviews / Social Proof
   ================================================================ */
.hp-reviews {
    padding: 3rem 0;
}
.hp-reviews-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: .75rem;
}
.hp-reviews-summary {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.hp-reviews-stars { color: var(--color-accent); font-size: 1.1rem; letter-spacing: 2px; }
.hp-reviews-count { font-size: .88rem; color: #666; }
.hp-reviews-badge {
    background: var(--color-accent);
    color: var(--color-secondary);
    padding: .15rem .55rem;
    border-radius: 4px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
}
.hp-reviews-masonry {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.hp-review-tile {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 1.5rem;
    transition: box-shadow .25s, border-color .25s;
}
.hp-review-tile:hover {
    border-color: var(--color-accent);
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.hp-review-stars {
    color: var(--color-accent);
    font-size: 1rem;
    letter-spacing: 2px;
    margin-bottom: .65rem;
}
.hp-review-body {
    font-size: .9rem;
    line-height: 1.65;
    color: #444;
    margin-bottom: .85rem;
    border: 0;
    padding: 0;
}
.hp-review-author {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .82rem;
    gap: .5rem;
}
.hp-review-author cite {
    font-style: normal;
    font-weight: 600;
    color: var(--color-secondary);
}
.hp-review-tag {
    color: #4caf50;
    font-size: .75rem;
    font-weight: 500;
    white-space: nowrap;
}

/* ================================================================
   HOMEPAGE — Brand Story
   ================================================================ */
.hp-story {
    padding: 3.5rem 0;
    background: #fafafa;
}
.hp-story-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}
.hp-story-visual { border-radius: 12px; overflow: hidden; }
.hp-story-visual img { width: 100%; height: auto; }
.hp-story-content {}
.hp-story-heading {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-secondary);
    margin-bottom: .65rem;
}
.hp-story-body {
    font-size: .95rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 1.5rem;
}
.hp-story-stats {
    display: flex;
    gap: 2.5rem;
    margin-bottom: 1.5rem;
}
.hp-stat { text-align: center; }
.hp-stat-value {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--color-primary);
}
.hp-stat-label {
    font-size: .78rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.hp-story-guarantee {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
}
.hp-story-guarantee svg { color: var(--color-primary); flex-shrink: 0; margin-top: .1rem; }
.hp-story-guarantee strong {
    display: block;
    font-size: .9rem;
    color: var(--color-secondary);
    margin-bottom: .2rem;
}
.hp-story-guarantee p {
    font-size: .82rem;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

/* ================================================================
   HOMEPAGE — Final CTA
   ================================================================ */
.hp-final-cta {
    background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 75%, var(--color-accent)));
    padding: 3.5rem 1.25rem;
    text-align: center;
    color: #fff;
}
.hp-final-cta-inner { max-width: 600px; margin: 0 auto; }
.hp-final-cta-heading {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: .5rem;
}
.hp-final-cta-sub {
    font-size: 1rem;
    opacity: .9;
    margin-bottom: 1.5rem;
    line-height: 1.55;
}
.hp-final-cta .hp-btn--primary {
    background: #fff;
    color: var(--color-primary);
}
.hp-final-cta .hp-btn--primary:hover { color: var(--color-primary); }

/* ================================================================
   CATEGORY — Breadcrumb Trail
   ================================================================ */
.vz-trail {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: 1rem 0 .75rem;
    font-size: .82rem;
    color: #888;
    flex-wrap: wrap;
}
.vz-trail-list {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}
.vz-trail-step a { color: var(--color-link); }
.vz-trail-step a:hover { text-decoration: underline; }
.vz-trail-step + .vz-trail-step::before {
    content: '›';
    margin-right: .35rem;
    color: #bbb;
}
.vz-trail-step[aria-current="page"] { color: var(--color-text); font-weight: 500; }
.vz-trail-link { color: var(--color-link); }
.vz-trail-link:hover { text-decoration: underline; }
.vz-trail-sep { color: #bbb; flex-shrink: 0; }
.vz-trail-current { color: var(--color-text); font-weight: 500; }

/* ================================================================
   CATEGORY — Listing Header
   ================================================================ */
.vz-listing-top {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    margin-bottom: 1.25rem;
}
.vz-listing-headline {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-secondary);
}
.vz-listing-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    min-width: 26px;
    height: 26px;
    border-radius: 13px;
    padding: 0 .5rem;
}

/* ================================================================
   CATEGORY — Make Grid (top-level categories)
   ================================================================ */
.vz-make-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

/* ================================================================
   CATEGORY — Banner
   ================================================================ */
.vz-banner {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 2rem;
    min-height: 180px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
}
.vz-banner-shade {
    width: 100%;
    background: linear-gradient(transparent, rgba(0,0,0,.7));
    padding: 2.5rem 2rem 1.5rem;
    color: #fff;
}
.vz-banner-heading {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: .35rem;
}
.vz-banner-blurb {
    font-size: .92rem;
    opacity: .9;
    max-width: 600px;
    line-height: 1.55;
}
.vz-banner--flat {
    background: linear-gradient(135deg, var(--color-secondary), color-mix(in srgb, var(--color-secondary) 85%, var(--color-primary)));
    color: #fff;
    padding: 2rem;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
}
.vz-banner--flat .vz-banner-heading { margin-bottom: .45rem; }
.vz-banner--flat .vz-banner-blurb { opacity: .85; margin: 0 auto; }

/* ================================================================
   CATEGORY — Subcategory Row
   ================================================================ */
.vz-models-row {
    margin-bottom: 2rem;
}
.vz-section-label {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-secondary);
    margin-bottom: 1rem;
}
.vz-models-track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    scrollbar-width: thin;
}
.vz-models-track .sun-cat-card {
    flex: 0 0 165px;
}

/* ================================================================
   CATEGORY — Product Card Grid
   ================================================================ */
.vz-shop-grid {
    margin-bottom: 2rem;
}
.vz-card-columns {
    display: grid;
    grid-template-columns: repeat(var(--products-per-row, 4), 1fr);
    gap: 1.25rem;
}
.vz-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow .25s, border-color .25s, transform .2s;
    display: flex;
    flex-direction: column;
}
.vz-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 6px 24px rgba(0,0,0,.08);
    transform: translateY(-3px);
}
.vz-card-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: var(--color-text);
}
.vz-card-link:hover { color: var(--color-text); }
.vz-card-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--image-ratio);
}
.vz-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.vz-card:hover .vz-card-media img { transform: scale(1.05); }
.vz-card-badge {
    position: absolute;
    top: .6rem;
    left: .6rem;
    background: var(--color-accent);
    color: var(--color-secondary);
    font-size: .7rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.vz-card-details {
    padding: .85rem 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.vz-card-name {
    font-family: var(--font-heading);
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: .3rem;
}
.vz-card-summary {
    font-size: .8rem;
    color: #777;
    line-height: 1.5;
    margin-bottom: .4rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.vz-card-rating { margin-bottom: .35rem; }
.vz-stars {
    color: var(--color-accent);
    font-size: .9rem;
    letter-spacing: 1px;
}
.vz-card-ship {
    display: inline-block;
    font-size: .72rem;
    font-weight: 500;
    color: #4caf50;
    margin-top: auto;
    padding-top: .35rem;
}
.vz-card-cart-btn {
    display: block;
    width: 100%;
    padding: .7rem;
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
    font-size: .85rem;
    text-align: center;
    border-top: 1px solid #eee;
    transition: background .2s, opacity .2s;
}
.vz-card-cart-btn:hover {
    opacity: .9;
}

/* ================================================================
   CATEGORY — Trust Bar
   ================================================================ */
.vz-trust-bar {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 1.25rem 0;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.vz-trust-chip {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    font-weight: 500;
    color: var(--color-text);
}
.vz-trust-svg {
    width: 20px;
    height: 20px;
    color: var(--color-primary);
    flex-shrink: 0;
}

/* ================================================================
   CATEGORY — Related / Sibling Pills
   ================================================================ */
.vz-related {
    margin-bottom: 2rem;
}
.vz-pill-row {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}
.vz-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem 1rem;
    border: 1.5px solid var(--color-primary);
    border-radius: 2rem;
    font-size: .82rem;
    font-weight: 500;
    color: var(--color-primary);
    transition: background .2s, color .2s;
}
.vz-pill:hover {
    background: var(--color-primary);
    color: #fff;
}

/* ================================================================
   CAR SELECTOR PAGE
   ================================================================ */
.vz-finder-banner {
    background: linear-gradient(135deg, var(--color-secondary), color-mix(in srgb, var(--color-secondary) 80%, var(--color-primary)));
    border-radius: 12px;
    padding: 2.5rem 2rem;
    margin-bottom: 2rem;
    color: #fff;
    text-align: center;
}
.vz-finder-banner-body {}
.vz-finder-title {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: .45rem;
}
.vz-finder-subtitle {
    font-size: .95rem;
    opacity: .88;
    max-width: 520px;
    margin: 0 auto 1.25rem;
    line-height: 1.55;
}
.vz-finder-pills {
    display: flex;
    justify-content: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.vz-finder-pills .vz-pill {
    border-color: rgba(255,255,255,.4);
    color: #fff;
    font-size: .8rem;
}
.vz-finder-pills .vz-pill:hover {
    background: rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.6);
}

/* Make browser */
.vz-make-browser { margin-bottom: 2rem; }
.vz-make-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.vz-make-heading {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-secondary);
}
.vz-make-total {
    font-weight: 400;
    color: #999;
    font-size: .9rem;
}
.vz-make-search-wrap {
    position: relative;
    max-width: 280px;
    flex: 1;
}
.vz-make-search-ico {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
}
.vz-make-search {
    width: 100%;
    padding: .55rem .75rem .55rem 2.25rem;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    font-size: .88rem;
    background: #fafafa;
    transition: border-color .2s, background .2s;
}
.vz-make-search:focus {
    border-color: var(--color-primary);
    background: #fff;
}
.vz-make-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 1rem;
}
.vz-make-noresult {
    text-align: center;
    color: #999;
    font-size: .92rem;
    padding: 2rem 0;
}

/* Assurance strip */
.vz-assurance-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    padding: 1.25rem;
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
    border-radius: 10px;
    margin-bottom: 2rem;
}
.vz-assurance-icon { flex-shrink: 0; }
.vz-assurance-msg {
    font-size: .88rem;
    color: var(--color-text);
    margin: 0;
}

/* ================================================================
   PRODUCT PAGE — Breadcrumb
   ================================================================ */
.sun-breadcrumb {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: 1rem 0 .75rem;
    font-size: .82rem;
    color: #888;
    flex-wrap: wrap;
}
.sun-breadcrumb a { color: var(--color-link); }
.sun-breadcrumb a:hover { text-decoration: underline; }
.sun-bc-sep { color: #bbb; margin: 0 .15rem; }
.sun-breadcrumb [aria-current="page"] { color: var(--color-text); font-weight: 500; }

/* ================================================================
   PRODUCT PAGE — Hero Layout
   ================================================================ */
.sun-product-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    padding: 1rem 0 2.5rem;
    align-items: start;
}
.sun-product-detail { order: 1; }
.sun-product-media {
    order: 2;
    border-radius: 12px;
    overflow: hidden;
    position: sticky;
    top: 80px;
}
.sun-product-media img {
    width: 100%;
    height: auto;
    display: block;
}

/* Trending flag */
.sun-trending-flag {
    display: inline-block;
    background: var(--color-accent);
    color: var(--color-secondary);
    font-size: .72rem;
    font-weight: 700;
    padding: .22rem .65rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .65rem;
}

/* Product name */
.sun-product-name {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-secondary);
    margin-bottom: .65rem;
}

/* Rating row */
.sun-rating-row {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .85rem;
}
.sun-stars {
    color: var(--color-accent);
    font-size: 1rem;
    letter-spacing: 2px;
}
.sun-availability {
    font-size: .82rem;
    font-weight: 600;
    color: #4caf50;
}

/* Price */
.sun-price-wrap {
    margin-bottom: 1rem;
}
.sun-price-wrap .sun-price-current { font-size: 1.35rem; }

/* Excerpt */
.sun-excerpt {
    font-size: .92rem;
    color: #555;
    line-height: 1.65;
    margin-bottom: 1.25rem;
}

/* Specs block */
.sun-specs-block {
    margin-bottom: 1.25rem;
}
.sun-label {
    font-family: var(--font-heading);
    font-size: .88rem;
    font-weight: 600;
    color: var(--color-secondary);
    margin-bottom: .5rem;
}
.sun-attr-list {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.sun-attr-tag {
    display: inline-block;
    background: #f4f4f4;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    padding: .3rem .7rem;
    font-size: .8rem;
    color: #555;
}
.sun-attr-tag strong { color: var(--color-text); }

/* Variant picker */
.sun-variant-picker {
    margin-bottom: 1.25rem;
}
.sun-vpill-row {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}
.sun-vpill {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: .6rem 1.1rem;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-text);
    transition: border-color .2s, background .2s;
    text-align: center;
}
.sun-vpill:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.sun-vpill-on {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    color: var(--color-primary);
}
.sun-vpill-cost {
    display: block;
    font-size: .75rem;
    font-weight: 400;
    color: #888;
    margin-top: .15rem;
}

/* Add to cart button */
.sun-add-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--color-primary);
    color: #fff;
    padding: .85rem 2rem;
    border-radius: 8px;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    transition: opacity .2s, transform .15s, box-shadow .2s;
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.sun-add-btn:hover {
    opacity: .92;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,0,0,.16);
}
.sun-add-btn svg { flex-shrink: 0; }

/* Cart feedback */
.sun-cart-msg {
    margin-top: .5rem;
    font-size: .85rem;
    color: #4caf50;
    min-height: 1.2em;
}

/* Shipping info */
.sun-shipping-info {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.sun-shipping-info li {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .82rem;
    color: #666;
}
.sun-shipping-info svg { color: var(--color-primary); flex-shrink: 0; }

/* ================================================================
   PRODUCT PAGE — Trust Bar
   ================================================================ */
.sun-trust-bar {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 1.25rem 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.sun-trust-cell {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    font-weight: 500;
    color: var(--color-text);
}
.sun-trust-cell svg { color: var(--color-primary); flex-shrink: 0; }

/* ================================================================
   PRODUCT PAGE — Full Description
   ================================================================ */
.sun-full-desc {
    margin-bottom: 2.5rem;
}
.sun-section-heading {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-secondary);
    margin-bottom: 1rem;
}
.sun-prose {
    font-size: .93rem;
    line-height: 1.75;
    color: #444;
}
.sun-prose p { margin-bottom: 1rem; }
.sun-prose h2, .sun-prose h3 {
    font-family: var(--font-heading);
    color: var(--color-secondary);
    margin-top: 1.5rem;
    margin-bottom: .5rem;
}
.sun-prose ul, .sun-prose ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}
.sun-prose ul { list-style: disc; }
.sun-prose ol { list-style: decimal; }
.sun-prose li { margin-bottom: .35rem; }

/* ================================================================
   PRODUCT PAGE — Related Products
   ================================================================ */
.sun-related { margin-bottom: 2.5rem; }
.sun-card-duo {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}
.sun-rcard {
    display: flex;
    gap: 1rem;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    padding: .75rem;
    color: var(--color-text);
    transition: box-shadow .25s, border-color .2s;
}
.sun-rcard:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
    color: var(--color-text);
}
.sun-rcard-img {
    width: 120px;
    height: 90px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}
.sun-rcard-body { display: flex; flex-direction: column; justify-content: center; }
.sun-rcard-title {
    font-family: var(--font-heading);
    font-size: .88rem;
    font-weight: 600;
    margin-bottom: .3rem;
    line-height: 1.3;
}

/* ================================================================
   PRODUCT PAGE — Explore / More Categories
   ================================================================ */
.sun-explore, .sun-more-cats { margin-bottom: 2rem; }
.sun-chip-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: .85rem;
}

/* ================================================================
   CART PAGE
   ================================================================ */
.breadcrumb {
    font-size: .82rem;
    color: #888;
    padding: .75rem 0;
}
.breadcrumb a { color: var(--color-link); }
.breadcrumb a:hover { text-decoration: underline; }

.cart-actions {
    display: flex;
    gap: .75rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

/* Generic buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .65rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: .9rem;
    transition: opacity .2s, transform .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn-secondary {
    background: var(--color-primary);
    color: #fff;
}
.btn-secondary:hover { opacity: .9; color: #fff; }
.btn-outline {
    border: 1.5px solid var(--color-primary);
    color: var(--color-primary);
}
.btn-outline:hover { background: var(--color-primary); color: #fff; }

/* ================================================================
   CHECKOUT PAGE
   ================================================================ */
.checkout-layout {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 2.5rem;
    padding: 1.5rem 0;
    align-items: start;
}
.checkout-form-section h2 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-secondary);
    margin-bottom: .85rem;
}
.checkout-form { margin-bottom: 1.5rem; }
.form-row { margin-bottom: .85rem; }
.form-row-half {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .85rem;
}
.form-group { margin-bottom: .85rem; }
.form-group label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    margin-bottom: .3rem;
    color: var(--color-text);
}
.form-input {
    width: 100%;
    padding: .65rem .85rem;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    font-size: .9rem;
    background: #fafafa;
    transition: border-color .2s, background .2s;
}
.form-input:focus {
    border-color: var(--color-primary);
    background: #fff;
}

/* Payment */
.payment-info-text {
    font-size: .88rem;
    color: #666;
    margin-bottom: 1rem;
}
.payment-methods-selection {
    display: flex;
    gap: .75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.btn-payment {
    flex: 1;
    min-width: 160px;
    padding: .75rem 1.25rem;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-weight: 600;
    font-size: .88rem;
    text-align: center;
    transition: border-color .2s, background .2s;
}
.btn-payment:hover { border-color: var(--color-primary); }
.btn-payment.active {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}
.payment-icon-label { display: flex; align-items: center; justify-content: center; gap: .4rem; }
.selected-payment-label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: .75rem;
}

.btn-checkout {
    display: block;
    width: 100%;
    padding: .85rem;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    border-radius: 8px;
    transition: opacity .2s;
    margin-bottom: .75rem;
}
.btn-checkout:hover { opacity: .9; }
.checkout-feedback {
    font-size: .85rem;
    color: #4caf50;
    min-height: 1.2em;
}
.checkout-loading-overlay {
    text-align: center;
    padding: 2rem;
}
.loading-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #eee;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin .7s linear infinite;
    margin: 0 auto .75rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

.checkout-error {
    padding: .75rem 1rem;
    background: #fff0f0;
    border: 1px solid #ffc9c9;
    border-radius: 8px;
    color: #c0392b;
    font-size: .85rem;
}

/* Checkout summary */
.checkout-summary-section {
    position: sticky;
    top: 80px;
}
.checkout-summary-section h2 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-secondary);
    margin-bottom: .85rem;
}

/* ================================================================
   STATIC PAGES
   ================================================================ */
.sp-trail-bar {
    padding: .85rem 0 .5rem;
}
.sp-trail {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .82rem;
    color: #888;
    flex-wrap: wrap;
}
.sp-trail a { color: var(--color-link); }
.sp-trail a:hover { text-decoration: underline; }
.sp-trail-arrow {
    color: #bbb;
    flex-shrink: 0;
}
.sp-trail [aria-current="page"] { color: var(--color-text); font-weight: 500; }

.sp-hero-strip {
    text-align: center;
    padding: 2rem 0 1.5rem;
}
.sp-hero-title {
    font-family: var(--font-heading);
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--color-secondary);
    margin-bottom: .45rem;
}
.sp-hero-accent {
    width: 48px;
    height: 3px;
    background: var(--color-primary);
    border-radius: 2px;
    margin: 0 auto;
}

.sp-two-col {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2.5rem;
    padding-bottom: 2.5rem;
    align-items: start;
}
.sp-main-col {}
.sp-prose {
    font-size: .93rem;
    line-height: 1.75;
    color: #444;
}
.sp-prose h2, .sp-prose h3 {
    font-family: var(--font-heading);
    color: var(--color-secondary);
    margin-top: 1.5rem;
    margin-bottom: .5rem;
}
.sp-prose p { margin-bottom: 1rem; }
.sp-prose ul, .sp-prose ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.sp-prose ul { list-style: disc; }
.sp-prose ol { list-style: decimal; }
.sp-prose li { margin-bottom: .3rem; }
.sp-prose a { color: var(--color-primary); text-decoration: underline; }

.sp-sidebar { position: sticky; top: 80px; }
.sp-sidebar-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}
.sp-sidebar-badge {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 0;
    font-size: .85rem;
    font-weight: 500;
    color: var(--color-text);
}
.sp-sidebar-badge + .sp-sidebar-badge { border-top: 1px solid #f0f0f0; }
.sp-badge-icon { color: var(--color-primary); flex-shrink: 0; }

.sp-sidebar-cta {
    background: linear-gradient(135deg, var(--color-secondary), color-mix(in srgb, var(--color-secondary) 85%, var(--color-primary)));
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
    color: #fff;
}
.sp-cta-text {
    font-size: .92rem;
    margin-bottom: .85rem;
    line-height: 1.5;
}
.sp-cta-link {
    display: inline-block;
    background: var(--color-accent);
    color: var(--color-secondary);
    padding: .6rem 1.5rem;
    border-radius: 6px;
    font-weight: 700;
    font-size: .88rem;
    transition: opacity .2s;
}
.sp-cta-link:hover { opacity: .9; color: var(--color-secondary); }

/* ================================================================
   RESPONSIVE — Tablet (≤ 960px)
   ================================================================ */
@media (max-width: 960px) {
    .hp-hero-h1 { font-size: 2.15rem; }
    .hp-features-duo { grid-template-columns: 1fr; }
    .hp-story-layout { grid-template-columns: 1fr; gap: 2rem; }
    .hp-reviews-masonry { grid-template-columns: repeat(2, 1fr); }

    .vz-card-columns { grid-template-columns: repeat(2, 1fr); }

    .sun-product-hero { grid-template-columns: 1fr; }
    .sun-product-detail { order: 2; }
    .sun-product-media { order: 1; position: static; }
    .sun-card-duo { grid-template-columns: 1fr; }

    .checkout-layout { grid-template-columns: 1fr; }
    .checkout-summary-section { position: static; }

    .sp-two-col { grid-template-columns: 1fr; }
    .sp-sidebar { position: static; }

    .sun-footer-cols { grid-template-columns: repeat(2, 1fr); gap: 2rem; }

    /* Mobile nav behavior */
    .sun-ribbon {
        position: fixed;
        top: 0;
        left: -280px;
        width: 280px;
        height: 100vh;
        z-index: 101;
        overflow-y: auto;
        transition: left .3s ease;
        border-top: none;
    }
    .sun-ribbon.active { left: 0; }
    .sun-ribbon > .sun-wrap {
        flex-direction: column;
        align-items: stretch;
        padding: 1.5rem 1rem;
        gap: .15rem;
    }
    .sun-ribbon-link { padding: .7rem .85rem; }
    .sun-ribbon-dropdown { position: static; }
    .sun-ribbon-submenu {
        position: static;
        box-shadow: none;
        border-radius: 0;
        padding-left: 1rem;
        background: rgba(255,255,255,.06);
    }
    .sun-ribbon-sub-link { color: rgba(255,255,255,.75); }
    .sun-ribbon-sub-link:hover { color: #fff; background: rgba(255,255,255,.08); }
}

/* ================================================================
   RESPONSIVE — Mobile (≤ 640px)
   ================================================================ */
@media (max-width: 640px) {
    .sun-wrap { padding: 0 .85rem; }

    .sun-topbar > .sun-wrap { flex-wrap: wrap; justify-content: center; }
    .sun-topbar-msg { font-size: .72rem; }

    .hp-hero { min-height: 400px; }
    .hp-hero-h1 { font-size: 1.65rem; }
    .hp-hero-tagline { font-size: 1rem; }
    .hp-hero-actions { flex-direction: column; align-items: center; }
    .hp-btn { width: 100%; max-width: 280px; justify-content: center; }

    .hp-trust-row { gap: 1rem; }
    .hp-trust-item { flex: 0 0 calc(50% - .5rem); }

    .hp-makes-grid,
    .vz-make-grid,
    .vz-make-list { grid-template-columns: repeat(2, 1fr); }

    .hp-section-header { flex-direction: column; gap: .4rem; }

    .hp-reviews-masonry { grid-template-columns: 1fr; }
    .hp-reviews-header { flex-direction: column; }

    .hp-story-stats { gap: 1.5rem; }
    .hp-stat-value { font-size: 1.3rem; }

    .hp-final-cta { padding: 2.5rem 1rem; }
    .hp-final-cta-heading { font-size: 1.35rem; }

    .vz-listing-headline { font-size: 1.35rem; }
    .vz-banner { min-height: 140px; border-radius: 8px; }
    .vz-banner-heading { font-size: 1.35rem; }
    .vz-card-columns { grid-template-columns: 1fr; }

    .sun-product-name { font-size: 1.35rem; }
    .sun-rcard { flex-direction: column; }
    .sun-rcard-img { width: 100%; height: 140px; }

    .sun-chip-wrap { grid-template-columns: repeat(2, 1fr); }

    .form-row-half { grid-template-columns: 1fr; }

    .sun-vf-controls { flex-direction: column; }
    .sun-vf-select { min-width: 100%; }
    .sun-vf-form { flex-direction: column; text-align: center; }

    .sun-footer-cols { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ================================================================
   UTILITY — Smooth scrollbar
   ================================================================ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #aaa; }

/* ================================================================
   PRINT
   ================================================================ */
@media print {
    .sun-topbar, .sun-ribbon, .sun-overlay, .sun-vehicle-finder,
    .sun-menu-toggle, .sun-cart-link, .sun-locale,
    .hp-final-cta, .vz-card-cart-btn, .sun-add-btn { display: none !important; }
    .sun-header { position: static; }
    body { color: #000; background: #fff; }
}