/* ================================================================
   KUNTAW WIPERS — Main Stylesheet
   Design: dark luxury · dark-professional · spacious
   Approach: desktop-first responsive
   All colours/fonts from CSS custom properties (set inline by base.py)
   ================================================================ */

/* ========== DO NOT DELETE CART CSS HERE Cart Page ========== */
.cart-items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.cart-item {
    display: flex;
    gap: 1.25rem;
    padding: 1.25rem;
    background: var(--color-surface);
    border-radius: 10px;
    border: 1px solid var(--color-divider);
    align-items: center;
}

.cart-item-image img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
}

.cart-item-details {
    flex: 1;
}

.cart-item-details h3 {
    font-size: 1.05rem;
    margin-bottom: 4px;
}

.cart-item-attr {
    font-size: .85rem;
    color: var(--color-text-subtle);
    margin-bottom: 4px;
}

.cart-item-price {
    font-weight: 600;
    color: var(--color-accent);
}

.cart-item-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.qty-control {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--color-divider);
    border-radius: 6px;
    overflow: hidden;
}

.qty-btn {
    background: var(--color-surface-soft);
    border: none;
    width: 34px;
    height: 34px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    transition: background .2s;
}

.qty-btn:hover {
    background: var(--color-surface-soft);
}

.qty-value {
    width: 38px;
    text-align: center;
    font-weight: 600;
    font-size: .95rem;
}

.cart-item-line-total {
    font-weight: bold;
    font-size: 1rem;
    color: var(--color-accent);
}

.cart-remove-btn {
    background: none;
    border: none;
    color: var(--color-error);
    cursor: pointer;
    font-size: .85rem;
    text-decoration: underline;
}

.cart-remove-btn:hover {
    color: var(--color-error);
}

.cart-summary {
    background: var(--color-surface);
    padding: 1.75rem;
    border-radius: 10px;
    border: 1px solid var(--color-divider);
    max-width: 420px;
    margin-left: auto;
}

.cart-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 1rem;
}

.cart-total-row {
    border-top: 2px solid var(--color-divider);
    padding-top: 12px;
    margin-top: 8px;
    font-size: 1.15rem;
}

.checkout-grand-total {
    border-top: 2px solid var(--color-divider);
    padding-top: 10px;
    margin-top: 6px;
    font-size: 1.1rem;
    display: flex;
    justify-content: space-between;
}

/* Per-item strikethrough (cart + checkout). Matches the product page
   .prx-price-now / .prx-price-was styling so the cart looks consistent. */
.cart-item-price .price-now,
.cart-item-line-total .price-now,
.checkout-summary-item-price .price-now {
    color: var(--color-accent);
    font-weight: 600;
}
.cart-item-price .price-was,
.cart-item-line-total .price-was,
.checkout-summary-item-price .price-was {
    color: var(--color-text-subtle);
    text-decoration: line-through;
    font-weight: 400;
    margin-left: .35em;
    font-size: .9em;
}

/* Bundle discount rows in the cart/checkout summary block. The subtotal
   row strikes through its amount; the discount row shows the negative
   savings in the accent colour; the total row is unaffected and stays
   the dominant line. */
.cart-subtotal-row,
.checkout-subtotal-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    color: var(--color-text-muted);
}
.cart-subtotal-row .price-was,
.checkout-subtotal-row .price-was {
    text-decoration: line-through;
    color: var(--color-text-subtle);
}
.cart-bundle-row,
.checkout-bundle-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0 10px;
    color: var(--color-accent);
    font-weight: 600;
}
.cart-bundle-row .bundle-savings,
.checkout-bundle-row .bundle-savings {
    color: var(--color-accent);
}

.cart-empty {
    text-align: center;
    padding: 4rem;
    color: var(--color-text-subtle);
    font-size: 1.1rem;
}

/* Generic button + checkout CTA (used by cart "Proceed to Checkout") */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 14px 28px;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .03em;
    color: var(--color-on-dark);
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: background .25s, border-color .25s, color .25s, transform .15s;
}
.btn:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-on-dark);
    transform: translateY(-1px);
}
.btn:active {
    transform: translateY(0);
}

.btn-checkout {
    display: flex;
    width: 100%;
    margin-top: 1rem;
    padding: 16px 28px;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-background);
    background: var(--color-accent);
    border-color: var(--color-accent);
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.btn-checkout:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-background);
}

/* ================================================================
   RESET & BASE
   ================================================================ */
*, *::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.7;
    -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 .25s ease; }
a:hover { color: var(--color-accent); }
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: ''; }

/* ================================================================
   UTILITY — WRAP / CONTAINER
   ================================================================ */
.kw-wrap {
    width: 100%;
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.kw-main {
    min-height: 60vh;
    padding-bottom: 3rem;
}

/* ================================================================
   PRICE DISPLAY
   ================================================================ */
.kw-price-group {
    display: inline-flex;
    align-items: baseline;
    gap: .5rem;
}
.kw-price-old {
    text-decoration: line-through;
    color: var(--color-text-faint);
    font-size: .9em;
}
.kw-price-current {
    font-weight: 700;
    color: var(--color-accent);
    font-size: 1.1em;
}

/* ================================================================
   TOP BAR / ANNOUNCEMENT
   ================================================================ */
.kw-topbar {
    background: var(--color-primary);
    color: var(--color-on-dark);
    text-align: center;
    padding: .45rem 1rem;
    font-size: .78rem;
    letter-spacing: .04em;
    font-weight: 500;
}
.kw-topbar-msg {
    margin: 0;
}

/* ================================================================
   HEADER
   ================================================================ */
.kw-header {
    background: var(--color-header-footer);
    color: var(--color-on-dark);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--color-divider);
}
.kw-header-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 0;
    min-height: 60px;
}
.kw-header-inner--no-nav {
    justify-content: center;
}

/* Hamburger / Menu Toggle */
.kw-menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 102;
}
.kw-menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-on-dark);
    border-radius: 1px;
    transition: transform .3s ease, opacity .25s ease;
}
.kw-menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kw-menu-toggle.active span:nth-child(2) { opacity: 0; }
.kw-menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Brand / Logo */
.kw-brand-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--color-on-dark);
    flex-shrink: 0;
}
.kw-brand-link:hover { color: var(--color-on-dark); opacity: .88; }
.kw-brand-img {
    height: auto;
    max-height: 56px;
    width: auto;
}
.kw-brand-text {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
    text-transform: uppercase;
}

/* Header Actions (cart, locale) */
.kw-header-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-left: auto;
}

/* Cart Icon */
.kw-cart-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--color-on-dark);
    padding: 6px;
    transition: color .2s;
}
.kw-cart-icon:hover { color: var(--color-accent); }
.kw-cart-count {
    position: absolute;
    top: -3px;
    right: -5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    color: var(--color-on-dark);
    font-size: .6rem;
    font-weight: 700;
    line-height: 1;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 50%;
    text-align: center;
}

/* ================================================================
   LOCALE SELECTOR
   ================================================================ */
.kw-locale-selector {
    position: relative;
}
.kw-locale-toggle {
    display: flex;
    align-items: center;
    gap: .35rem;
    background: var(--color-header-footer);
    border: 1px solid var(--color-border-on-dark);
    border-radius: 6px;
    padding: .35rem .65rem;
    color: var(--color-on-dark);
    font-size: .8rem;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.kw-locale-toggle:hover { background: var(--color-surface-on-dark); border-color: var(--color-on-dark); }
.kw-locale-flag {
    width: 20px;
    height: 15px;
    border-radius: 2px;
    object-fit: cover;
}
.kw-locale-label { display: none; }
.kw-locale-arrow {
    transition: transform .25s;
    flex-shrink: 0;
}
.kw-locale-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--color-on-dark);
    border-radius: 10px;
    box-shadow: 0 12px 36px rgba(0,0,0,.25);
    min-width: 190px;
    max-height: 400px;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 120;
}
.kw-locale-dropdown.open { display: block; }
.kw-locale-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .65rem 1rem;
    color: #222;
    font-size: .85rem;
    transition: background .15s;
}
.kw-locale-item:hover { background: #f2f2f2; color: #222; }

/* ================================================================
   GEO REDIRECT / COUNTRY BANNER (popup with WHITE bg)
   ================================================================ */
.country-banner {
    display: none;
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    width: calc(100% - 2rem);
    max-width: 460px;
}
.country-banner.show { display: block; }

.kw-geo-notice {
    background: var(--color-on-dark);
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0,0,0,.2);
    padding: 1.35rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}
.kw-geo-flag {
    width: 34px;
    height: 25px;
    border-radius: 3px;
    object-fit: cover;
}
.kw-geo-msg {
    flex: 1;
    font-size: .9rem;
    color: #222;
    min-width: 140px;
    margin: 0;
}
.kw-geo-btns {
    display: flex;
    gap: .5rem;
    width: 100%;
}
.kw-geo-btn {
    flex: 1;
    padding: .6rem 1rem;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 600;
    text-align: center;
    transition: opacity .2s;
    color: #222;
}
.kw-geo-btn:hover { opacity: .85; }
.kw-geo-confirm {
    background: var(--color-primary);
    color: var(--color-on-dark);
}
.kw-geo-dismiss {
    background: #eee;
    color: #333;
}

/* ================================================================
   NAVIGATION (slide-out drawer)
   ================================================================ */
.kw-nav {
    background: var(--color-header-footer);
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100%;
    z-index: 101;
    overflow-y: auto;
    transition: left .35s cubic-bezier(.4,0,.2,1);
    padding: 5rem 0 2rem;
    border-right: 1px solid var(--color-divider);
}
.kw-nav.open { left: 0; }

.kw-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 99;
    backdrop-filter: blur(2px);
}
.kw-nav-backdrop.open { display: block; }

.kw-nav-item {
    display: block;
    padding: .8rem 1.75rem;
    color: var(--color-text);
    font-size: .92rem;
    transition: color .2s, background .2s;
}
.kw-nav-item:hover {
    color: var(--color-on-dark);
    background: var(--color-surface-soft);
}

.kw-nav-group { position: relative; }
.kw-nav-parent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .8rem 1.75rem;
    color: var(--color-text);
    font-size: .92rem;
    cursor: pointer;
    transition: color .2s, background .2s;
}
.kw-nav-parent:hover { color: var(--color-on-dark); background: var(--color-surface-soft); }
.kw-nav-chevron {
    margin-left: auto;
    transition: transform .25s;
    flex-shrink: 0;
}
.kw-nav-submenu {
    display: none;
    background: rgba(0,0,0,.2);
}
.kw-nav-group.open .kw-nav-submenu { display: block; }
.kw-nav-group.open .kw-nav-chevron { transform: rotate(180deg); }
.kw-nav-subitem {
    display: block;
    padding: .6rem 1.75rem .6rem 2.5rem;
    color: var(--color-text-muted);
    font-size: .85rem;
    transition: color .2s, background .2s;
}
.kw-nav-subitem:hover { color: var(--color-on-dark); background: var(--color-surface-soft); }
.kw-nav-static { cursor: default; }

/* ================================================================
   VEHICLE FINDER / CAR SELECTOR (in-header)
   ================================================================ */
.kw-vehicle-finder {
    background: var(--color-surface);
    border-top: 1px solid var(--color-divider);
    border-bottom: 1px solid var(--color-divider);
    padding: .7rem 0;
}
.kw-finder-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
}
.kw-finder-title {
    font-weight: 600;
    font-size: .85rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.kw-finder-controls {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    flex: 1;
    min-width: 0;
}
.kw-finder-select {
    flex: 1;
    min-width: 110px;
    padding: .5rem .7rem;
    border: 1px solid var(--color-border-on-dark);
    border-radius: 6px;
    background: var(--color-header-footer);
    font-size: .82rem;
    color: var(--color-on-dark);
    cursor: pointer;
    transition: border-color .25s;
    appearance: auto;
}
.kw-finder-select:focus { border-color: var(--color-accent); }
.kw-finder-select:disabled { opacity: .4; cursor: not-allowed; }
.kw-finder-select option { color: #222; background: var(--color-on-dark); }
.kw-finder-submit {
    padding: .5rem 1.2rem;
    background: var(--color-accent);
    color: var(--color-on-dark);
    border-radius: 6px;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background .25s, opacity .25s;
}
.kw-finder-submit:hover { opacity: .88; }
.kw-finder-submit:disabled { opacity: .35; cursor: not-allowed; }

.kw-finder-result {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
}
.kw-finder-vehicle {
    font-size: .9rem;
    color: var(--color-text);
}
.kw-finder-result-actions { display: flex; gap: .45rem; }
.kw-finder-reset {
    padding: .4rem .9rem;
    border: 1px solid var(--color-divider);
    border-radius: 6px;
    font-size: .8rem;
    color: var(--color-text-muted);
    background: var(--color-surface-soft);
    transition: border-color .25s;
}
.kw-finder-reset:hover { border-color: var(--color-accent); color: var(--color-on-dark); }

/* ================================================================
   SHARED: CATEGORY CARDS
   ================================================================ */
.kw-card {
    display: block;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    color: var(--color-text);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.kw-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,.3);
    border-color: var(--color-text-faint);
    color: var(--color-text);
}
.kw-card-media {
    aspect-ratio: var(--category-image-ratio);
    overflow: hidden;
    background: var(--color-surface);
}
.kw-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.kw-card:hover .kw-card-media img { transform: scale(1.06); }
.kw-card-media--blank {
    background: linear-gradient(135deg, var(--color-surface-soft) 0%, var(--color-surface) 100%);
}
.kw-card-name {
    display: block;
    padding: .75rem 1rem;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: .92rem;
    text-align: center;
    text-transform: capitalize;
    letter-spacing: .01em;
}

/* ================================================================
   SHARED: FAQ
   ================================================================ */
.kw-faq {
    padding: 3rem 0;
}
.kw-faq-heading {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 1.5rem;
    text-align: center;
}
.kw-faq-entry {
    border-bottom: 1px solid var(--color-divider);
}
.kw-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 0;
    font-weight: 600;
    font-size: .95rem;
    color: var(--color-text);
    cursor: pointer;
    transition: color .2s;
}
.kw-faq-question:hover { color: var(--color-accent); }
.kw-faq-answer {
    padding: 0 0 1.1rem;
    font-size: .9rem;
    line-height: 1.7;
    color: var(--color-text-muted);
}

/* ================================================================
   SHARED: SHIPPING TABLE
   ================================================================ */
.kw-shipping-table-wrap {
    overflow-x: auto;
    margin: 1.5rem 0;
}
.kw-shipping-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}
.kw-shipping-table th,
.kw-shipping-table td {
    padding: .75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-divider);
}
.kw-shipping-table th {
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.kw-shipping-table td {
    color: var(--color-text);
}
.kw-shipping-table tr:hover td {
    background: var(--color-surface);
}

/* ================================================================
   SOCIAL ICON
   ================================================================ */
.kw-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-surface-soft);
    color: var(--color-text-muted);
    transition: background .25s, color .25s, transform .25s;
}
.kw-social-icon:hover {
    background: var(--color-accent);
    color: var(--color-on-dark);
    transform: translateY(-2px);
}

/* ================================================================
   FOOTER
   ================================================================ */
.kw-footer {
    background: var(--color-header-footer);
    color: var(--color-text-muted);
    padding-top: 0;
    border-top: 1px solid var(--color-divider);
}
.kw-footer-top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 3rem;
    padding: 3.5rem 0 2.5rem;
}
.kw-footer-brand-col { }
.kw-footer-brand-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--color-on-dark);
    margin-bottom: 1rem;
}
.kw-footer-brand-link:hover { color: var(--color-on-dark); opacity: .85; }
.kw-footer-brand-name {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.kw-footer-logo {
    height: auto;
    max-height: 40px;
    width: auto;
}
.kw-footer-social {
    display: flex;
    gap: .5rem;
    margin-top: 1rem;
}
.kw-footer-nav-col { }
.kw-footer-title {
    font-family: var(--font-heading);
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-on-dark);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 1rem;
}
.kw-footer-links {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.kw-footer-links a {
    font-size: .88rem;
    color: var(--color-text-subtle);
    transition: color .2s;
}
.kw-footer-links a:hover { color: var(--color-accent); }

.kw-footer-contact-col { }
.kw-footer-address {
    font-size: .88rem;
    line-height: 1.6;
    color: var(--color-text-subtle);
    margin-bottom: .75rem;
}
.kw-footer-reach {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-size: .88rem;
    margin-bottom: .75rem;
}
.kw-footer-reach a {
    color: var(--color-text-subtle);
}
.kw-footer-reach a:hover { color: var(--color-accent); }
.kw-footer-hours {
    font-size: .82rem;
    color: var(--color-text-subtle);
}

.kw-footer-bottom {
    border-top: 1px solid var(--color-divider);
    padding: 1.25rem 0;
    text-align: center;
    font-size: .78rem;
    color: var(--color-text-faint);
}

/* ================================================================
   HOMEPAGE — HERO
   ================================================================ */
.kw-lp-hero {
    position: relative;
    min-height: 75vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--color-header-footer);
}
.kw-lp-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--color-overlay) 0%, var(--color-overlay-strong) 100%);
    z-index: 1;
}
.kw-lp-hero-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 720px;
    padding: 4rem 1.5rem;
}
.kw-lp-hero-h1 {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--color-on-dark);
    margin-bottom: 1rem;
    letter-spacing: -.02em;
}
.kw-lp-hero-sub {
    font-size: 1.15rem;
    color: var(--color-text-muted);
    margin-bottom: 2rem;
    line-height: 1.6;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}
.kw-lp-hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}
.kw-lp-hero-proof {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .75rem 1.5rem;
    font-size: .82rem;
    color: var(--color-text-muted);
}
.kw-lp-hero-stars {
    color: var(--color-accent);
    font-size: 1rem;
    letter-spacing: 2px;
}
.kw-lp-hero-stat { font-weight: 500; }
.kw-lp-hero-tag {
    background: var(--color-surface-soft);
    padding: .2rem .65rem;
    border-radius: 4px;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ================================================================
   HOMEPAGE — BUTTONS
   ================================================================ */
.kw-lp-btn {
    display: inline-block;
    padding: .85rem 2.25rem;
    border-radius: 6px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: .02em;
    transition: background .25s, transform .2s, box-shadow .25s;
}
.kw-lp-btn--gold {
    background: var(--color-accent);
    color: var(--color-on-dark);
}
.kw-lp-btn--gold:hover {
    background: var(--color-primary);
    color: var(--color-on-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.kw-lp-btn--ghost {
    background: transparent;
    border: 1px solid var(--color-primary-border-hover);
    color: var(--color-on-dark);
}
.kw-lp-btn--ghost:hover {
    background: var(--color-surface-soft);
    color: var(--color-on-dark);
    border-color: var(--color-text-subtle);
    transform: translateY(-2px);
}

/* ================================================================
   HOMEPAGE — SECTIONS
   ================================================================ */
.kw-lp-sect {
    padding: 4.5rem 0;
}
.kw-lp-container {
    width: 100%;
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.kw-lp-divider {
    width: 60px;
    height: 2px;
    background: var(--color-accent);
    margin: 0 auto 2.5rem;
    border: none;
}
.kw-lp-sect-header {
    text-align: center;
    margin-bottom: 3rem;
}
.kw-lp-sect-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: .5rem;
    letter-spacing: -.01em;
}
.kw-lp-sect-sub {
    font-size: 1rem;
    color: var(--color-text-subtle);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
}
.kw-lp-gold-line {
    display: block;
    width: 50px;
    height: 2px;
    background: var(--color-accent);
    margin: 1rem auto 0;
}

/* ================================================================
   HOMEPAGE — PHILOSOPHY
   ================================================================ */
.kw-lp-philosophy {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.kw-lp-philosophy-img {
    border-radius: 14px;
    overflow: hidden;
}
.kw-lp-philosophy-img img {
    width: 100%;
    height: auto;
    display: block;
}
.kw-lp-philosophy-content { }

/* ================================================================
   HOMEPAGE — STATS
   ================================================================ */
.kw-lp-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: center;
    padding: 2.5rem 0;
}
.kw-lp-stat {
    padding: 1.5rem;
}
.kw-lp-stat strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-accent);
    margin-bottom: .3rem;
}
.kw-lp-stat span {
    font-size: .85rem;
    color: var(--color-text-subtle);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ================================================================
   HOMEPAGE — FEATURES
   ================================================================ */
.kw-lp-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}
.kw-lp-feature {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: 14px;
    transition: border-color .3s, transform .3s;
}
.kw-lp-feature:hover {
    border-color: var(--color-accent);
    transform: translateY(-4px);
}
.kw-lp-feature-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--color-accent);
}

/* ================================================================
   HOMEPAGE — BROWSE BY MAKE
   ================================================================ */
.kw-lp-browse-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
}
.kw-lp-browse-link {
    font-size: .9rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--color-accent);
}
.kw-lp-browse-link:hover { text-decoration: underline; }

.kw-lp-makes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}

/* ================================================================
   HOMEPAGE — AWARDS
   ================================================================ */
.kw-lp-awards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: center;
}
.kw-lp-award {
    padding: 1.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: 12px;
    transition: border-color .3s;
}
.kw-lp-award:hover { border-color: var(--color-text-faint); }
.kw-lp-award-icon {
    font-size: 1.8rem;
    margin-bottom: .75rem;
    color: var(--color-accent);
}

/* ================================================================
   HOMEPAGE — REVIEWS / TESTIMONIALS
   ================================================================ */
.kw-lp-reviews-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem 1.25rem;
    margin-bottom: 2rem;
    text-align: center;
}
.kw-lp-reviews-agg {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-accent);
}
.kw-lp-reviews-stars {
    color: var(--color-accent);
    font-size: 1.1rem;
    letter-spacing: 2px;
}
.kw-lp-reviews-count {
    font-size: .85rem;
    color: var(--color-text-subtle);
}
.kw-lp-reviews-badge {
    background: var(--color-accent);
    color: var(--color-on-dark);
    padding: .2rem .7rem;
    border-radius: 4px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.kw-lp-testimonials {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.kw-lp-testimonial {
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: 14px;
    padding: 1.75rem;
    transition: border-color .3s, box-shadow .3s;
}
.kw-lp-testimonial:hover {
    border-color: var(--color-text-faint);
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.kw-lp-testimonial-stars {
    color: var(--color-accent);
    font-size: .95rem;
    letter-spacing: 2px;
    margin-bottom: .75rem;
}
.kw-lp-testimonial p {
    font-size: .9rem;
    line-height: 1.65;
    color: var(--color-text-muted);
    margin-bottom: .75rem;
    font-style: italic;
}
.kw-lp-testimonial cite {
    display: block;
    font-style: normal;
    font-weight: 600;
    font-size: .85rem;
    color: var(--color-text);
}
.kw-lp-testimonial-badge {
    display: inline-block;
    font-size: .72rem;
    color: var(--color-success);
    margin-top: .25rem;
}

/* ================================================================
   HOMEPAGE — TRUST STRIP
   ================================================================ */
.kw-lp-trust-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    text-align: center;
    padding: 3rem 0;
}
.kw-lp-trust-item {
    padding: 1.25rem;
}
.kw-lp-trust-icon {
    font-size: 1.6rem;
    margin-bottom: .6rem;
    color: var(--color-accent);
}
.kw-lp-trust-item strong {
    display: block;
    font-size: .9rem;
    margin-bottom: .25rem;
    color: var(--color-text);
}
.kw-lp-trust-item span {
    font-size: .8rem;
    color: var(--color-text-subtle);
}

/* ================================================================
   HOMEPAGE — CTA
   ================================================================ */
.kw-lp-cta {
    text-align: center;
    padding: 4rem 1.5rem;
    background: var(--color-surface);
    border-radius: 16px;
}
.kw-lp-cta h2 {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: .6rem;
}
.kw-lp-cta p {
    font-size: 1rem;
    color: var(--color-text-subtle);
    margin-bottom: 1.75rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* ================================================================
   HOMEPAGE — GUARANTEE
   ================================================================ */
.kw-lp-guarantee {
    background: var(--color-primary);
    color: var(--color-on-dark);
    text-align: center;
    padding: 3rem 1.5rem;
}
.kw-lp-guarantee h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: .4rem;
}
.kw-lp-guarantee p {
    font-size: .92rem;
    opacity: .9;
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ================================================================
   CATEGORY — BREADCRUMBS
   ================================================================ */
.kc-crumbs {
    padding: 1rem 0;
    font-size: .82rem;
    color: var(--color-text-subtle);
}
.kc-crumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
}
.kc-crumbs__node a {
    color: var(--color-text-subtle);
    transition: color .2s;
}
.kc-crumbs__node a:hover { color: var(--color-accent); }
.kc-crumbs__node + .kc-crumbs__node::before {
    content: '/';
    margin-right: .3rem;
    color: var(--color-text-faint);
}
.kc-crumbs__node--current {
    color: var(--color-text);
    font-weight: 500;
}

/* ================================================================
   CATEGORY — LISTING INTRO
   ================================================================ */
.kc-listing-intro {
    padding: 1.5rem 0 1rem;
}
.kc-listing-intro__title {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: .5rem;
}
.kc-listing-intro__badge {
    display: inline-block;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-divider);
    padding: .3rem .75rem;
    border-radius: 20px;
    font-size: .78rem;
    color: var(--color-text-subtle);
}

/* ================================================================
   CATEGORY — MAKE TILES GRID
   ================================================================ */
.kc-make-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 1rem;
    padding: 1.5rem 0 3rem;
}

/* ================================================================
   CATEGORY — HERO SPLIT
   ================================================================ */
.kc-hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    padding: 2rem 0 2.5rem;
}
.kc-hero-split--solo {
    grid-template-columns: 1fr;
}
.kc-hero-split__text { }
.kc-hero-split__text--full { max-width: 700px; }
.kc-hero-split__heading {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: .6rem;
    line-height: 1.15;
}
.kc-hero-split__rule {
    width: 50px;
    height: 2px;
    background: var(--color-accent);
    border: none;
    margin: 1rem 0;
}
.kc-hero-split__copy {
    font-size: .95rem;
    color: var(--color-text-muted);
    line-height: 1.7;
}
.kc-hero-split__visual {
    border-radius: 14px;
    overflow: hidden;
}
.kc-hero-split__img {
    width: 100%;
    height: auto;
    display: block;
}

/* ================================================================
   CATEGORY — SECTION TITLE
   ================================================================ */
.kc-section-title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 1.25rem;
}

/* ================================================================
   CATEGORY — MODELS GRID
   ================================================================ */
.kc-models { padding: 1.5rem 0; }
.kc-models__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

/* ================================================================
   CATEGORY — CATALOGUE (product listing)
   ================================================================ */
.kc-catalogue { padding: 1.5rem 0 3rem; }
.kc-catalogue__duo {
    display: grid;
    grid-template-columns: repeat(var(--products-per-row, 3), 1fr);
    gap: 1.25rem;
}

/* ================================================================
   CATEGORY — PRODUCT ITEM CARD (minimal: image + name + make/model/year)
   The card itself is the <a>, so the entire tile is clickable.
   No price, blurb, rating or Add-to-Cart at this level — buyers
   commit on the product page, not from the listing.
   ================================================================ */
.kc-item {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: 12px;
    overflow: hidden;
    color: inherit;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.kc-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(0,0,0,.25);
    border-color: var(--color-primary-soft-strong);
    color: inherit;
}
.kc-item__figure {
    position: relative;
    aspect-ratio: var(--image-ratio);
    overflow: hidden;
    background: var(--color-surface);
}
.kc-item__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.kc-item:hover .kc-item__figure img { transform: scale(1.06); }
.kc-item__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.kc-item__body {
    padding: 1rem 1.15rem 1.25rem;
}
.kc-item__title {
    font-family: var(--font-heading);
    font-size: .98rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: .55rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}
.kc-item__meta {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .82rem;
    color: var(--color-text-subtle);
    line-height: 1.65;
}
.kc-item__meta li {
    padding: 0;
}
.kc-item__metakey {
    color: var(--color-text-subtle);
    font-weight: 500;
    margin-right: .25rem;
}

/* ================================================================
   CATEGORY — ASSURANCE / TRUST BADGES
   ================================================================ */
.kc-assurance {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem 0;
    flex-wrap: wrap;
    justify-content: center;
}
.kc-assurance__block {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.kc-assurance__icon {
    width: 22px;
    height: 22px;
    color: var(--color-accent);
    flex-shrink: 0;
}
.kc-assurance__label {
    font-size: .82rem;
    color: var(--color-text-muted);
}
.kc-assurance__sep {
    width: 1px;
    height: 24px;
    background: var(--color-surface-soft);
}

/* ================================================================
   CATEGORY — EXPLORE MORE
   ================================================================ */
.kc-explore {
    padding: 2rem 0;
}
.kc-explore__row {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .5rem;
}
.kc-explore__card {
    flex: 0 0 200px;
    scroll-snap-align: start;
}

/* ================================================================
   VEHICLE FINDER PAGE
   ================================================================ */
.vf-page { }
.vf-crumb {
    padding: 1rem 0;
    font-size: .82rem;
    color: var(--color-text-subtle);
}
.vf-crumb a { color: var(--color-text-subtle); }
.vf-crumb a:hover { color: var(--color-accent); }
.vf-crumb-sep {
    margin: 0 .3rem;
    color: var(--color-text-faint);
}

.vf-banner {
    position: relative;
    padding: 3.5rem 0;
    text-align: center;
    background: var(--color-surface);
    border-radius: 16px;
    margin-bottom: 2rem;
    overflow: hidden;
}
.vf-banner::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 2px;
    background: var(--color-accent);
}
.vf-banner-h1 {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: .6rem;
}
.vf-banner-sub {
    font-size: 1rem;
    color: var(--color-text-subtle);
    max-width: 520px;
    margin: 0 auto;
}

.vf-search {
    max-width: 500px;
    margin: 0 auto 2.5rem;
}
.vf-search-wrap {
    position: relative;
}
.vf-search-input {
    width: 100%;
    padding: .85rem 1.25rem .85rem 3rem;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-divider);
    border-radius: 10px;
    font-size: .95rem;
    color: var(--color-text);
    transition: border-color .25s, background .25s;
}
.vf-search-input::placeholder { color: var(--color-text-faint); }
.vf-search-input:focus {
    border-color: var(--color-accent);
    background: var(--color-surface-soft);
}
.vf-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-faint);
    pointer-events: none;
}

.vf-gallery {
    margin-bottom: 3rem;
}
.vf-gallery-heading {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 1rem;
}
.vf-gallery-count {
    font-size: .85rem;
    color: var(--color-text-subtle);
    font-weight: 400;
}
.vf-makes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: 1rem;
}
.vf-empty {
    text-align: center;
    padding: 3rem;
    color: var(--color-text-subtle);
    font-size: .95rem;
}

.vf-assurance {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    padding: 2.5rem 0;
    border-top: 1px solid var(--color-divider);
}
.vf-assurance-item {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.vf-assurance-icon {
    color: var(--color-accent);
}
.vf-assurance-label {
    font-size: .85rem;
    color: var(--color-text-muted);
}

.vf-callout {
    text-align: center;
    padding: 3.5rem 1.5rem;
    background: var(--color-surface);
    border-radius: 16px;
    margin: 2rem 0;
}
.vf-callout-h2 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: .5rem;
}
.vf-callout-sub {
    font-size: .95rem;
    color: var(--color-text-subtle);
    margin-bottom: 1.5rem;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
}
.vf-callout-btn {
    display: inline-block;
    padding: .75rem 2rem;
    background: var(--color-accent);
    color: var(--color-on-dark);
    border-radius: 6px;
    font-weight: 600;
    font-size: .95rem;
    transition: background .25s, transform .2s;
}
.vf-callout-btn:hover {
    background: var(--color-primary);
    color: var(--color-on-dark);
    transform: translateY(-2px);
}

/* ================================================================
   PRODUCT PAGE — BREADCRUMBS
   ================================================================ */
.prx-crumbs {
    padding: 1rem 0;
    font-size: .82rem;
    color: var(--color-text-subtle);
}
.prx-crumbs a { color: var(--color-text-subtle); }
.prx-crumbs a:hover { color: var(--color-accent); }
.prx-sep {
    margin: 0 .3rem;
    color: var(--color-text-faint);
}

/* ================================================================
   PRODUCT PAGE — MAIN LAYOUT
   ================================================================ */
.prx-product-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    padding: 1.5rem 0 3rem;
    align-items: start;
}
.prx-media-col { }
.prx-hero-frame {
    border-radius: 14px;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
}
.prx-hero-frame img {
    width: 100%;
    height: auto;
    display: block;
}

/* Thumbnail Row */
.prx-thumb-row {
    display: flex;
    gap: .5rem;
    margin-top: .75rem;
}
.prx-thumb {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    opacity: .5;
    transition: opacity .25s, border-color .25s;
}
.prx-thumb:hover { opacity: .8; }
.prx-thumb--sel {
    opacity: 1;
    border-color: var(--color-accent);
}
.prx-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Detail Column */
.prx-detail-col { }
.prx-product-title {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
    margin-bottom: .75rem;
}
.prx-status-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .75rem;
    flex-wrap: wrap;
}
.prx-stock-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-success);
    display: inline-block;
}
.prx-stock-label {
    font-size: .82rem;
    color: var(--color-text-subtle);
}
.prx-rating {
    font-size: .88rem;
    color: var(--color-accent);
    letter-spacing: 1px;
}
.prx-price-block {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 1rem;
    padding: .75rem 0;
    border-top: 1px solid var(--color-divider);
    border-bottom: 1px solid var(--color-divider);
}
.prx-short-desc {
    font-size: .92rem;
    color: var(--color-text-muted);
    line-height: 1.65;
    margin-bottom: 1.25rem;
}
.prx-short-desc ul {
    list-style: disc inside;
    margin-top: .5rem;
    padding-left: .25rem;
}
.prx-short-desc li {
    font-size: .88rem;
    color: var(--color-text-muted);
}

/* Position Selector — variant button group (driver / passenger / rear) */
.prx-pos-selector {
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.prx-pos-label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    letter-spacing: .03em;
}
.prx-variant-btns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: .5rem;
}
.prx-variant-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: .65rem .75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: 8px;
    color: var(--color-text);
    cursor: pointer;
    transition: border-color .2s, background .2s, transform .15s;
    font-family: var(--font-text);
}
.prx-variant-btn:hover {
    border-color: var(--color-text-faint);
    background: var(--color-surface-soft);
    transform: translateY(-1px);
}
.prx-variant-btn--sel {
    border-color: var(--color-accent);
    background: var(--color-primary-soft);
    box-shadow: 0 0 0 1px var(--color-accent) inset;
}
.prx-variant-btn__pos {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
}
.prx-variant-btn__size {
    font-size: .72rem;
    color: var(--color-text-subtle);
    margin-top: .15rem;
}
.prx-variant-btn--sel .prx-variant-btn__size {
    color: var(--color-accent);
}

/* Bundle row — sits below the position row, same button shell */
.prx-variant-btns--bundles {
    margin-top: .5rem;
    grid-template-columns: 1fr;
}
.prx-variant-btn--bundle .prx-variant-btn__pos {
    font-size: .85rem;
}
.prx-variant-btn__pct {
    color: var(--color-accent);
    font-weight: 600;
}

/* Headline price + strikethrough */
.prx-price-now {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-text);
    margin-right: .5rem;
}
.prx-price-was {
    font-size: 1rem;
    color: var(--color-text-subtle);
    text-decoration: line-through;
}

/* Add to Cart */
.prx-atc-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .95rem 2.25rem;
    background: var(--color-accent);
    color: var(--color-on-dark);
    border-radius: 8px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .02em;
    transition: background .25s, transform .2s, box-shadow .25s;
    margin-bottom: 1rem;
}
.prx-atc-btn:hover {
    background: var(--color-primary);
    color: var(--color-on-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.prx-feedback {
    font-size: .82rem;
    color: var(--color-text-subtle);
    margin-bottom: .75rem;
}

/* Shipping Row */
.prx-ship-row {
    display: flex;
    gap: 1.5rem;
    padding: 1rem 0;
    border-top: 1px solid var(--color-divider);
    flex-wrap: wrap;
}
.prx-ship-item {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    color: var(--color-text-subtle);
}

/* Section headings reused outside the bundle block (specs, related, etc.) */
.prx-heading-lg {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 1.5rem;
    text-align: center;
}

/* ================================================================
   PRODUCT PAGE — SPECIFICATIONS
   ================================================================ */
.prx-specs-panel {
    padding: 2.5rem 0;
    border-top: 1px solid var(--color-divider);
}
.prx-spec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.prx-spec-cell {
    padding: 1rem 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: 10px;
}
.prx-spec-cell dt {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-subtle);
    margin-bottom: .25rem;
}
.prx-spec-cell dd {
    font-weight: 600;
    font-size: .95rem;
    color: var(--color-text);
}

/* ================================================================
   PRODUCT PAGE — CRAFTSMANSHIP
   ================================================================ */
.prx-craft-section {
    padding: 3rem 0;
    border-top: 1px solid var(--color-divider);
}
.prx-craft-inner {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}
.prx-craft-copy {
    font-size: .95rem;
    color: var(--color-text-muted);
    line-height: 1.75;
}
.prx-craft-copy h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: .75rem;
}

/* ================================================================
   PRODUCT PAGE — TRUST STRIP
   ================================================================ */
.prx-trust-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding: 2rem 0;
    border-top: 1px solid var(--color-divider);
    border-bottom: 1px solid var(--color-divider);
    margin: 1.5rem 0;
}
.prx-trust-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: 10px;
    transition: border-color .25s, background .25s;
}
.prx-trust-item:hover {
    border-color: var(--color-primary-border-hover);
    background: var(--color-surface);
}
.prx-trust-item svg {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 6px;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-accent);
    box-sizing: content-box;
}
.prx-trust-item span {
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    line-height: 1.3;
}

/* ================================================================
   PRODUCT PAGE — FIT NOTE (Verified precision fit…)
   ================================================================ */
.prx-fitnote {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: 1.25rem 1.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-left: 3px solid var(--color-accent);
    border-radius: 8px;
    font-size: .92rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 2.25rem 0 1.5rem;
}
.prx-fitnote svg {
    flex-shrink: 0;
    margin-top: .15rem;
    color: var(--color-accent);
}
.prx-fitnote p {
    margin: 0;
}

/* ================================================================
   PRODUCT PAGE — GUARANTEE BADGES
   Two prominent cards (Perfect Fit + 12-Month Warranty) shown
   above the spec table to reinforce trust before the buyer scrolls.
   ================================================================ */
.prx-guarantees {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin: 0 0 2rem;
}
.prx-guarantee-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: 12px;
}
.prx-guarantee-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .75rem;
}
.prx-guarantee-title {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: .35rem;
}
.prx-guarantee-desc {
    font-size: .85rem;
    color: var(--color-text-muted);
    line-height: 1.55;
    margin: 0;
}

/* ================================================================
   PRODUCT PAGE — COMPARISON TABLE (Why Choose…)
   ================================================================ */
.prx-compare {
    margin: 0 0 2rem;
}
.prx-compare .prx-heading-lg {
    text-align: center;
}
.prx-compare-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: 12px;
    overflow: hidden;
}
.prx-compare-table thead th {
    font-family: var(--font-heading);
    font-size: .9rem;
    font-weight: 700;
    text-align: left;
    padding: .85rem 1rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-divider);
    color: var(--color-text-muted);
}
.prx-compare-table thead th.prx-compare-us {
    color: var(--color-accent);
}
.prx-compare-table tbody th,
.prx-compare-table tbody td {
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--color-divider-soft);
    font-size: .9rem;
    text-align: left;
    vertical-align: top;
}
.prx-compare-table tbody tr:last-child th,
.prx-compare-table tbody tr:last-child td {
    border-bottom: none;
}
.prx-compare-table tbody th {
    font-weight: 600;
    color: var(--color-text-muted);
    width: 28%;
}
.prx-compare-table tbody td.prx-compare-us {
    color: var(--color-text);
    font-weight: 600;
}
.prx-compare-table tbody td.prx-compare-them {
    color: var(--color-text-subtle);
}

/* Inline ✓ / ✗ icons inside each ours/theirs cell */
.prx-cmp-cell {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}
.prx-cmp-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    padding: 3px;
    border-radius: 50%;
    box-sizing: content-box;
}
.prx-cmp-icon--ok {
    color: var(--color-success);
    background: var(--color-success-bg);
}
.prx-cmp-icon--no {
    color: var(--color-error);
    background: var(--color-error-bg);
}

/* ================================================================
   PRODUCT PAGE — FULL DESCRIPTION
   ================================================================ */
.prx-full-desc {
    padding: 2rem 0;
    border-top: 1px solid var(--color-divider);
}
.prx-full-desc h2,
.prx-full-desc h3 {
    font-family: var(--font-heading);
    color: var(--color-text);
    margin-bottom: .75rem;
}
.prx-full-desc p {
    font-size: .92rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: 1rem;
}
.prx-body-text {
    font-size: .92rem;
    color: var(--color-text-muted);
    line-height: 1.7;
}

/* ================================================================
   PRODUCT PAGE — LIFESTYLE PANELS
   ================================================================ */
.prx-lifestyle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
    padding: 2.5rem 0;
}
.prx-lifestyle--left { }
.prx-lifestyle--right {
    direction: rtl;
}
.prx-lifestyle--right > * {
    direction: ltr;
}
.prx-lifestyle-visual {
    border-radius: 14px;
    overflow: hidden;
}
.prx-lifestyle-visual img {
    width: 100%;
    height: auto;
    display: block;
}
.prx-lifestyle-copy {
    font-size: .95rem;
    color: var(--color-text-muted);
    line-height: 1.75;
}

/* ================================================================
   PRODUCT PAGE — RELATED PRODUCTS
   ================================================================ */
.prx-related {
    padding: 2.5rem 0;
    border-top: 1px solid var(--color-divider);
}
.prx-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}
.prx-related-card {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: 12px;
    overflow: hidden;
    transition: transform .3s, border-color .3s;
    color: var(--color-text);
}
.prx-related-card:hover {
    transform: translateY(-3px);
    border-color: var(--color-text-faint);
    color: var(--color-text);
}
.prx-related-img {
    aspect-ratio: var(--image-ratio);
    overflow: hidden;
    background: var(--color-surface);
}
.prx-related-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}
.prx-related-card:hover .prx-related-img img { transform: scale(1.05); }
.prx-related-info {
    padding: .75rem 1rem;
}
.prx-related-name {
    font-family: var(--font-heading);
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ================================================================
   PRODUCT PAGE — SUBCATEGORIES & SIBLINGS
   ================================================================ */
.prx-subcats {
    padding: 1.5rem 0;
}
.prx-cat-row {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .5rem;
}
.prx-cat-row .kw-card {
    flex: 0 0 180px;
    scroll-snap-align: start;
}
.prx-siblings {
    padding: 1.5rem 0;
}

/* ================================================================
   CART PAGE
   ================================================================ */
.kc-bag-trail {
    padding: 1rem 0;
    font-size: .82rem;
    color: var(--color-text-subtle);
}
.kc-bag-trail a { color: var(--color-text-subtle); }
.kc-bag-trail a:hover { color: var(--color-accent); }
.kc-bag-trail-sep {
    margin: 0 .3rem;
    color: var(--color-text-faint);
}
/*
.kc-bag-hero {
    padding: 1.5rem 0 2rem;
}
*/
.kc-bag-heading {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: .5rem;
}
.kc-bag-rule {
    width: 50px;
    height: 2px;
    background: var(--color-accent);
    border: none;
    margin-bottom: 2rem;
}
.kc-bag-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}
.kc-bag-back,
.kc-bag-home {
    display: inline-block;
    padding: .7rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: .9rem;
    transition: background .25s, transform .2s;
}
.kc-bag-back {
    background: var(--color-accent);
    color: var(--color-on-dark);
}
.kc-bag-back:hover {
    background: var(--color-primary);
    color: var(--color-on-dark);
    transform: translateY(-1px);
}
.kc-bag-home {
    background: var(--color-surface-soft);
    border: 1px solid var(--color-divider);
    color: var(--color-text);
}
.kc-bag-home:hover {
    background: var(--color-surface-soft);
    color: var(--color-text);
}

/* ================================================================
   CHECKOUT PAGE
   ================================================================ */
.kco-trail {
    padding: 1rem 0;
    font-size: .82rem;
    color: var(--color-text-subtle);
}
.kco-trail a { color: var(--color-text-subtle); }
.kco-trail a:hover { color: var(--color-accent); }
.kco-trail-sep {
    margin: 0 .3rem;
    color: var(--color-text-faint);
}
.kco-hero {
    padding: 1.5rem 0;
}
.kco-heading {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: .5rem;
}
.kco-rule {
    width: 50px;
    height: 2px;
    background: var(--color-accent);
    border: none;
}

.kco-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 3rem;
    padding: 1.5rem 0 3rem;
    align-items: start;
}
.kco-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: 14px;
    padding: 2rem;
}
.kco-section-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 1.25rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--color-divider);
}
.kco-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.kco-field {
    margin-bottom: 1rem;
}
.kco-label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-text-subtle);
    margin-bottom: .35rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.kco-input {
    width: 100%;
    padding: .7rem 1rem;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-divider);
    border-radius: 8px;
    color: var(--color-text);
    font-size: .92rem;
    transition: border-color .25s, background .25s;
}
.kco-input:focus {
    border-color: var(--color-accent);
    background: var(--color-surface-soft);
}
.kco-input::placeholder { color: var(--color-text-faint); }

.kco-card-wrap {
    margin-bottom: 1rem;
}
.kco-card-input {
    width: 100%;
    padding: .7rem 1rem;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-divider);
    border-radius: 8px;
    color: var(--color-text);
    font-size: .92rem;
    transition: border-color .25s;
}
.kco-card-input:focus { border-color: var(--color-accent); }
.kco-card-errors {
    font-size: .8rem;
    color: var(--color-error);
    margin-top: .35rem;
}

.kco-submit {
    display: block;
    width: 100%;
    padding: .85rem;
    background: var(--color-accent);
    color: var(--color-on-dark);
    border-radius: 8px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .02em;
    transition: background .25s, transform .2s;
    margin-top: 1.5rem;
}
.kco-submit:hover {
    background: var(--color-primary);
    color: var(--color-on-dark);
    transform: translateY(-1px);
}
.kco-feedback {
    text-align: center;
    margin-top: 1rem;
}
.kco-loader {
    display: none;
    text-align: center;
    padding: 1rem;
}
.kco-spinner {
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 3px solid var(--color-divider);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: kco-spin .7s linear infinite;
}
@keyframes kco-spin {
    to { transform: rotate(360deg); }
}
.kco-error {
    color: var(--color-error);
    font-size: .85rem;
    margin-top: .5rem;
}

.kco-summary-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: 14px;
    padding: 2rem;
    position: sticky;
    top: 80px;
}

/* ================================================================
   CONTACT PAGE
   ================================================================ */
.ct-wrap { }
.ct-trail {
    padding: 1rem 0;
    font-size: .82rem;
    color: var(--color-text-subtle);
}
.ct-trail a { color: var(--color-text-subtle); }
.ct-trail a:hover { color: var(--color-accent); }
.ct-trail-div {
    margin: 0 .3rem;
    color: var(--color-text-faint);
}

.ct-hero {
    text-align: center;
    padding: 3rem 0 2rem;
}
.ct-hero-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: .6rem;
}
.ct-hero-lead {
    font-size: 1rem;
    color: var(--color-text-subtle);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.6;
}

.ct-channels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding: 1.5rem 0 3rem;
}
.ct-channel {
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: 14px;
    padding: 2rem 1.5rem;
    text-align: center;
    transition: border-color .3s, box-shadow .3s;
}
.ct-channel:hover {
    border-color: var(--color-text-faint);
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.ct-channel-icon {
    font-size: 1.8rem;
    color: var(--color-accent);
    margin-bottom: .75rem;
}
.ct-channel-heading {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: .5rem;
}
.ct-channel-body {
    font-size: .88rem;
    color: var(--color-text-subtle);
    line-height: 1.55;
    margin-bottom: .5rem;
}
.ct-channel-link {
    font-size: .88rem;
    color: var(--color-accent);
    font-weight: 600;
}
.ct-channel-link:hover { text-decoration: underline; }
.ct-channel-addr {
    font-size: .85rem;
    color: var(--color-text-subtle);
    line-height: 1.55;
}

.ct-form-section {
    padding: 2.5rem 0 3rem;
}
.ct-form-heading {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 1.5rem;
    text-align: center;
}
.ct-form-card {
    max-width: 640px;
    margin: 0 auto;
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: 14px;
    padding: 2.5rem;
}
.ct-field {
    margin-bottom: 1.25rem;
}
.ct-field-label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-text-subtle);
    margin-bottom: .35rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ct-field-hint {
    font-size: .75rem;
    color: var(--color-text-faint);
    margin-top: .2rem;
}
.ct-input {
    width: 100%;
    padding: .7rem 1rem;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-divider);
    border-radius: 8px;
    color: var(--color-text);
    font-size: .92rem;
    transition: border-color .25s, background .25s;
}
.ct-input:focus {
    border-color: var(--color-accent);
    background: var(--color-surface-soft);
}
.ct-input::placeholder { color: var(--color-text-faint); }
.ct-textarea {
    width: 100%;
    padding: .7rem 1rem;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-divider);
    border-radius: 8px;
    color: var(--color-text);
    font-size: .92rem;
    min-height: 140px;
    resize: vertical;
    transition: border-color .25s, background .25s;
}
.ct-textarea:focus {
    border-color: var(--color-accent);
    background: var(--color-surface-soft);
}
.ct-textarea::placeholder { color: var(--color-text-faint); }
.ct-row-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.ct-submit {
    display: block;
    width: 100%;
    padding: .85rem;
    background: var(--color-accent);
    color: var(--color-on-dark);
    border-radius: 8px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .02em;
    transition: background .25s, transform .2s;
    margin-top: .5rem;
}
.ct-submit:hover {
    background: var(--color-primary);
    color: var(--color-on-dark);
    transform: translateY(-1px);
}
.ct-form-status {
    text-align: center;
    margin-top: 1rem;
    font-size: .88rem;
}

.ct-assurance {
    padding: 2.5rem 0;
    border-top: 1px solid var(--color-divider);
}
.ct-assurance-panel {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}
.ct-assurance-heading {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: .5rem;
}
.ct-assurance-body {
    font-size: .9rem;
    color: var(--color-text-subtle);
    line-height: 1.65;
}

/* ================================================================
   404 PAGE
   ================================================================ */
.nf-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 65vh;
    text-align: center;
    padding: 3rem 1.5rem;
    overflow: hidden;
}
.nf-stage::before {
    content: '404';
    position: absolute;
    font-size: 15rem;
    font-weight: 900;
    color: var(--color-divider-soft);
    pointer-events: none;
    font-family: var(--font-heading);
}
.nf-content {
    position: relative;
    z-index: 1;
    max-width: 560px;
}
.nf-badge {
    display: inline-block;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-divider);
    padding: .3rem .85rem;
    border-radius: 20px;
    font-size: .78rem;
    color: var(--color-text-subtle);
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.nf-heading {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: .6rem;
}
.nf-desc {
    font-size: 1rem;
    color: var(--color-text-subtle);
    margin-bottom: 1.75rem;
    line-height: 1.6;
}
.nf-homelink {
    display: inline-block;
    padding: .75rem 2rem;
    background: var(--color-accent);
    color: var(--color-on-dark);
    border-radius: 6px;
    font-weight: 600;
    font-size: .95rem;
    transition: background .25s, transform .2s;
}
.nf-homelink:hover {
    background: var(--color-primary);
    color: var(--color-on-dark);
    transform: translateY(-2px);
}
.nf-divider {
    width: 50px;
    height: 2px;
    background: var(--color-accent);
    border: none;
    margin: 2.5rem auto;
}

.nf-browse {
    padding: 2rem 0;
}
.nf-browse-inner {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}
.nf-browse-top {
    margin-bottom: 1.5rem;
}
.nf-browse-label {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: .3rem;
}
.nf-browse-sub {
    font-size: .88rem;
    color: var(--color-text-subtle);
}
.nf-cat-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .75rem;
}

/* ================================================================
   ORDER TRACKING PAGE
   ================================================================ */
.kt-tracking-page { }
.kt-trail {
    padding: 1rem 0;
    font-size: .82rem;
    color: var(--color-text-subtle);
}
.kt-trail a { color: var(--color-text-subtle); }
.kt-trail a:hover { color: var(--color-accent); }
.kt-trail-sep {
    margin: 0 .3rem;
    color: var(--color-text-faint);
}

.kt-hero-strip {
    text-align: center;
    padding: 2.5rem 0 2rem;
}
.kt-hero-strip h1 {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: .5rem;
}
.kt-hero-strip p {
    font-size: .95rem;
    color: var(--color-text-subtle);
}

.kt-lookup-card {
    max-width: 480px;
    margin: 0 auto 2.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: 14px;
    padding: 2rem;
}
.kt-input-group {
    margin-bottom: 1rem;
}
.kt-input-label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-text-subtle);
    margin-bottom: .35rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.kt-input-field {
    width: 100%;
    padding: .7rem 1rem;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-divider);
    border-radius: 8px;
    color: var(--color-text);
    font-size: .92rem;
    transition: border-color .25s;
}
.kt-input-field:focus { border-color: var(--color-accent); }
.kt-input-field::placeholder { color: var(--color-text-faint); }
.kt-lookup-btn {
    display: block;
    width: 100%;
    padding: .75rem;
    background: var(--color-accent);
    color: var(--color-on-dark);
    border-radius: 8px;
    font-weight: 600;
    font-size: .95rem;
    transition: background .25s, transform .2s;
    margin-top: .5rem;
}
.kt-lookup-btn:hover {
    background: var(--color-primary);
    color: var(--color-on-dark);
    transform: translateY(-1px);
}
.kt-form-alert {
    font-size: .85rem;
    color: var(--color-error);
    margin-top: .75rem;
    text-align: center;
}

.kt-assurance-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    padding: 2rem 0;
    border-top: 1px solid var(--color-divider);
}
.kt-assurance-item {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.kt-assurance-icon {
    color: var(--color-accent);
}
.kt-assurance-item span {
    font-size: .85rem;
    color: var(--color-text-muted);
}

.kt-result-panel {
    max-width: 600px;
    margin: 0 auto 2rem;
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: 14px;
    padding: 2rem;
}
.kt-result-order-id {
    font-size: .82rem;
    color: var(--color-text-subtle);
    margin-bottom: .5rem;
}
.kt-result-status-text {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 1.5rem;
}

/* Timeline */
.kt-timeline {
    position: relative;
    padding: 1rem 0 1rem 2rem;
}
.kt-timeline::before {
    content: '';
    position: absolute;
    left: .5rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-surface-soft);
}
.kt-timeline-node {
    position: relative;
    padding-bottom: 1.25rem;
}
.kt-timeline-marker {
    position: absolute;
    left: -1.75rem;
    top: .2rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-surface-soft);
    border: 2px solid var(--color-divider);
}
.kt-timeline-node.kt-reached .kt-timeline-marker {
    background: var(--color-accent);
    border-color: var(--color-accent);
}
.kt-timeline-label {
    font-size: .85rem;
    color: var(--color-text-subtle);
}
.kt-timeline-node.kt-reached .kt-timeline-label {
    color: var(--color-text);
    font-weight: 600;
}

.kt-progress-channel {
    height: 6px;
    background: var(--color-surface-soft);
    border-radius: 3px;
    overflow: hidden;
    margin: 1.5rem 0;
}
.kt-progress-fill {
    height: 100%;
    background: var(--color-accent);
    border-radius: 3px;
    transition: width .5s ease;
}

.kt-delivery-info {
    font-size: .88rem;
    color: var(--color-text-subtle);
    line-height: 1.6;
}

/* ================================================================
   ORDER TRACKING — JS-RENDERED RESULT (vs-track-* classes)
   ================================================================ */
.vs-track-order-num {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: .75rem;
}
.vs-track-status {
    font-size: .92rem;
    color: var(--color-text-muted);
    margin-bottom: 1.25rem;
}
.vs-track-steps {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: 1rem;
}
.vs-track-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    text-align: center;
    font-size: .78rem;
    color: var(--color-text-faint);
    transition: color .3s;
}
.vs-track-step.active {
    color: var(--color-text);
}
.vs-track-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-surface-soft);
    border: 2px solid var(--color-divider);
    transition: background .3s, border-color .3s;
}
.vs-track-step.active .vs-track-dot {
    background: var(--color-accent);
    border-color: var(--color-accent);
}
.vs-track-bar-wrap {
    height: 6px;
    background: var(--color-surface-soft);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 1.25rem;
}
.vs-track-bar {
    height: 100%;
    border-radius: 3px;
    transition: width .5s ease;
}
.vs-track-addr {
    font-size: .88rem;
    color: var(--color-text-subtle);
    margin-bottom: .5rem;
    line-height: 1.6;
}
.vs-track-est {
    font-size: .88rem;
    color: var(--color-text-subtle);
    line-height: 1.6;
}

/* ================================================================
   STATIC PAGES (about, terms, privacy, etc.)
   ================================================================ */
.kw-sp-wrap { }
.kw-sp-trail {
    padding: 1rem 0;
    font-size: .82rem;
    color: var(--color-text-subtle);
}
.kw-sp-trail a { color: var(--color-text-subtle); }
.kw-sp-trail a:hover { color: var(--color-accent); }
.kw-sp-trail-divider {
    margin: 0 .3rem;
    color: var(--color-text-faint);
}
.kw-sp-trail-current {
    color: var(--color-text);
    font-weight: 500;
}

.kw-sp-banner {
    padding: 3rem 0 2rem;
    text-align: center;
}
.kw-sp-banner-inner {
    max-width: 700px;
    margin: 0 auto;
}
.kw-sp-heading {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: .6rem;
}
.kw-sp-rule {
    width: 50px;
    height: 2px;
    background: var(--color-accent);
    border: none;
    margin: 0 auto;
}

.kw-sp-content {
    max-width: 780px;
    margin: 0 auto;
    padding: 2rem 0 3rem;
}
.kw-sp-body {
    font-size: .95rem;
    color: var(--color-text-muted);
    line-height: 1.8;
}
.kw-sp-body h2,
.kw-sp-body h3 {
    font-family: var(--font-heading);
    color: var(--color-text);
    margin: 2rem 0 .75rem;
}
.kw-sp-body h2 { font-size: 1.3rem; font-weight: 700; }
.kw-sp-body h3 { font-size: 1.1rem; font-weight: 600; }
.kw-sp-body p {
    margin-bottom: 1rem;
}
.kw-sp-body ul,
.kw-sp-body ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}
.kw-sp-body li {
    margin-bottom: .4rem;
    list-style: disc;
}
.kw-sp-body a {
    color: var(--color-accent);
    text-decoration: underline;
}

/* ================================================================
   THANK YOU PAGE
   ================================================================ */
.kty-trail {
    padding: 1rem 0;
    font-size: .82rem;
    color: var(--color-text-subtle);
}
.kty-trail a { color: var(--color-text-subtle); }
.kty-trail a:hover { color: var(--color-accent); }
.kty-trail-sep {
    margin: 0 .3rem;
    color: var(--color-text-faint);
}

.kty-confirmation {
    text-align: center;
    padding: 4rem 1.5rem;
    max-width: 560px;
    margin: 0 auto;
}
.kty-check {
    font-size: 3rem;
    color: var(--color-success);
    margin-bottom: 1.5rem;
    animation: kty-pop .5s cubic-bezier(.17,.67,.29,1.4);
}
@keyframes kty-pop {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}
.kty-title {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: .5rem;
}
.kty-rule {
    width: 50px;
    height: 2px;
    background: var(--color-accent);
    border: none;
    margin: 1rem auto 1.5rem;
}
.kty-message {
    font-size: 1rem;
    color: var(--color-text-subtle);
    line-height: 1.6;
    margin-bottom: 2rem;
}
.kty-order-box {
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.kty-order-label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-subtle);
    margin-bottom: .3rem;
}
.kty-order-id {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-accent);
}
.kty-email-note {
    font-size: .85rem;
    color: var(--color-text-subtle);
    margin-bottom: 2rem;
}
.kty-cta {
    display: inline-block;
    padding: .75rem 2rem;
    background: var(--color-accent);
    color: var(--color-on-dark);
    border-radius: 6px;
    font-weight: 600;
    font-size: .95rem;
    transition: background .25s, transform .2s;
}
.kty-cta:hover {
    background: var(--color-primary);
    color: var(--color-on-dark);
    transform: translateY(-2px);
}

/* ================================================================
   RESPONSIVE — TABLET (max 960px)
   ================================================================ */
@media (max-width: 960px) {
    .kw-lp-hero-h1 { font-size: 2.25rem; }
    .kw-lp-philosophy { grid-template-columns: 1fr; gap: 2rem; }
    .kw-lp-stats { grid-template-columns: repeat(2, 1fr); }
    .kw-lp-features { grid-template-columns: 1fr 1fr; }
    .kw-lp-testimonials { grid-template-columns: 1fr 1fr; }
    .kw-lp-awards { grid-template-columns: repeat(2, 1fr); }
    .kw-lp-trust-strip { grid-template-columns: repeat(2, 1fr); }

    .kc-hero-split { grid-template-columns: 1fr; gap: 1.5rem; }
    .kc-catalogue__duo { grid-template-columns: repeat(2, 1fr); }

    .prx-product-main { grid-template-columns: 1fr; gap: 2rem; }
    .prx-trust-strip { grid-template-columns: repeat(2, 1fr); }
    .prx-lifestyle { grid-template-columns: 1fr; gap: 1.5rem; }

    .kco-grid { grid-template-columns: 1fr; }

    .ct-channels { grid-template-columns: 1fr 1fr; }

    .kw-footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

/* ================================================================
   RESPONSIVE — MOBILE (max 640px)
   ================================================================ */
@media (max-width: 640px) {
    .kw-wrap { padding: 0 1rem; }

    .kw-lp-hero { min-height: 55vh; }
    .kw-lp-hero-inner { padding: 2.5rem 1rem; }
    .kw-lp-hero-h1 { font-size: 1.75rem; }
    .kw-lp-hero-sub { font-size: 1rem; }
    .kw-lp-hero-actions { flex-direction: column; align-items: center; }
    .kw-lp-btn { width: 100%; text-align: center; }

    .kw-lp-sect { padding: 3rem 0; }
    .kw-lp-sect-title { font-size: 1.4rem; }
    .kw-lp-stats { grid-template-columns: 1fr 1fr; gap: 1rem; }
    .kw-lp-features { grid-template-columns: 1fr; }
    .kw-lp-testimonials { grid-template-columns: 1fr; }
    .kw-lp-awards { grid-template-columns: 1fr 1fr; }
    .kw-lp-trust-strip { grid-template-columns: 1fr 1fr; gap: 1rem; }

    .kc-listing-intro__title { font-size: 1.35rem; }
    .kc-hero-split { padding: 1rem 0; }
    .kc-hero-split__heading { font-size: 1.5rem; }
    .kc-make-tiles { grid-template-columns: repeat(2, 1fr); }
    .kc-catalogue__duo { grid-template-columns: repeat(2, 1fr); gap: .75rem; }

    .prx-product-main { padding: 0; }
    .prx-product-title { font-size: 1.25rem; }
    .prx-trust-strip { grid-template-columns: 1fr; gap: .75rem; }
    .prx-spec-grid { grid-template-columns: 1fr; }
    .prx-guarantees { grid-template-columns: 1fr; }
    .prx-compare-table tbody th { width: 38%; }
    .prx-compare-table thead th,
    .prx-compare-table tbody th,
    .prx-compare-table tbody td { padding: .6rem .65rem; font-size: .82rem; }
    .prx-thumb { width: 52px; height: 52px; }

    .vf-banner-h1 { font-size: 1.5rem; }
    .vf-makes-grid { grid-template-columns: repeat(2, 1fr); }

    .ct-channels { grid-template-columns: 1fr; }
    .ct-form-card { padding: 1.5rem; }
    .ct-row-split { grid-template-columns: 1fr; }

    .kco-split { grid-template-columns: 1fr; }
    .kco-panel { padding: 1.5rem; }

    .nf-stage::before { font-size: 8rem; }
    .nf-heading { font-size: 1.5rem; }

    .kw-footer-top { grid-template-columns: 1fr; gap: 2rem; }

    .kw-sp-heading { font-size: 1.5rem; }

    .cart-item { gap: .75rem; padding: .85rem; align-items: center; }
    .cart-item-image img { width: 64px; height: 64px; }
    .cart-item-details h3 { font-size: .95rem; }
    .cart-item-attr { font-size: .78rem; }
    .cart-item-actions { align-items: flex-end; gap: 6px; }
    .cart-summary { max-width: 100%; }
}

/* ================================================================
   RESPONSIVE — SMALL (max 400px)
   ================================================================ */
@media (max-width: 400px) {
    .kw-lp-hero-h1 { font-size: 1.45rem; }
    .kw-lp-stats { grid-template-columns: 1fr; }
    .kw-lp-awards { grid-template-columns: 1fr; }
    .kw-lp-trust-strip { grid-template-columns: 1fr; }
    .kc-make-tiles { grid-template-columns: 1fr; }
    .vf-makes-grid { grid-template-columns: 1fr; }
    .nf-cat-list { grid-template-columns: 1fr; }
}

/* ================================================================
   UTILITY & ACCESSIBILITY
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Keyboard focus outline */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Scrollbar styling for dark theme */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--color-surface); }
::-webkit-scrollbar-thumb {
    background: var(--color-surface-soft);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--color-primary-soft-strong); }

/* Selection */
::selection {
    background: var(--color-accent);
    color: var(--color-on-dark);
}