:root {
    --bg: #f5f6f8;
    --surface: #ffffff;
    --surface-soft: #edf1f5;
    --line: #d9dee6;
    --text: #1a1e34;
    --muted: #6a7486;
    --accent: #d92a2a;
    --accent-dark: #b81f1f;
    --dark: #121723;
    --dark-2: #202638;
    --ok: #15803d;
    --radius: 18px;
    --shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.d-none {
   display: none;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    color: var(--text);
    background: var(--bg);
}

.admin-body,
.admin-login-body {
    background: #eef2f7;
}

.admin-shell {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    min-height: 100vh;
}

.admin-sidebar {
    display: grid;
    align-content: start;
    gap: 16px;
    padding: 20px 16px;
    background: #0d1726;
    color: #fff;
}

.admin-brand {
    font-weight: 800;
    font-size: 1.1rem;
}

.admin-nav {
    display: grid;
    gap: 6px;
}

.admin-nav a {
    padding: 9px 11px;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.94rem;
}

.admin-nav a:hover,
.admin-nav a:focus-visible {
    background: rgba(255, 255, 255, 0.11);
}

.admin-nav a.is-active {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-weight: 700;
}

.admin-main {
    padding: 20px;
}

.admin-page {
    display: grid;
    gap: 16px;
}

.admin-page__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.admin-page__header h1,
.admin-card h2,
.admin-login-card h1 {
    margin: 0;
}

.admin-intro {
    max-width: 78ch;
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 0.94rem;
}

.admin-kpis,
.admin-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.admin-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-grid--sidebar {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}

.admin-kpi,
.admin-card,
.admin-login-card {
    padding: 16px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.admin-kpi span {
    display: block;
    color: var(--muted);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.admin-kpi strong {
    display: block;
    margin-top: 8px;
    font-size: 1.8rem;
}

.admin-card ul {
    margin: 10px 0 0;
    padding-left: 18px;
    display: grid;
    gap: 6px;
}

.admin-table-card {
    overflow: hidden;
    padding: 0;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.admin-table th {
    background: #f6f8fb;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.shipping-config-table {
    display: grid;
    gap: 8px;
    margin: 16px 0;
}

.shipping-config-table .admin-form-actions {
    align-items: center;
    justify-content: space-between;
}

.shipping-config-table table {
    min-width: 680px;
}

.admin-table-input {
    width: 100%;
    min-height: 30px;
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
}

.shipping-config-source {
    display: none;
}

.checkout-validation-summary {
    margin: 10px 0 16px;
    color: var(--muted);
    font-size: 0.92rem;
}

.checkout-field-error {
    display: block;
    margin-top: 4px;
    color: #b42318;
    font-size: 0.78rem;
    font-weight: 600;
}

input[aria-invalid="true"],
select[aria-invalid="true"] {
    border-color: #d92d20;
    box-shadow: 0 0 0 2px rgba(217, 45, 32, 0.1);
}

.admin-login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.admin-login-card {
    width: min(460px, 100%);
    display: grid;
    gap: 14px;
}

.admin-login-card label {
    display: grid;
    gap: 8px;
    font-weight: 700;
}

.admin-form {
    display: grid;
    gap: 14px;
}

.admin-form-grid {
    display: grid;
    gap: 12px;
}

.admin-form-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-form label {
    display: grid;
    gap: 8px;
    font-weight: 700;
}

.admin-form input,
.admin-form select,
.admin-form textarea {
    width: 100%;
}

.admin-form-actions {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
}

.admin-callout-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.admin-callout-grid--compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-callout {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: #f8fafc;
}

.admin-callout p {
    margin: 0;
    color: var(--muted);
}

.admin-settings-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.admin-settings-preview-card {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: #fff;
}

.admin-settings-preview-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.admin-settings-preview-card__header a {
    font-size: 0.92rem;
}

.admin-settings-preview-frame {
    display: grid;
    place-items: center;
    min-height: 170px;
    padding: 20px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background:
        linear-gradient(45deg, rgba(148, 163, 184, 0.08) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(148, 163, 184, 0.08) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(148, 163, 184, 0.08) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(148, 163, 184, 0.08) 75%);
    background-size: 18px 18px;
    background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}

.admin-settings-preview-frame img {
    max-width: 100%;
    max-height: 120px;
    object-fit: contain;
}

.admin-settings-preview-frame p,
.admin-settings-preview-path {
    margin: 0;
    color: var(--muted);
}

.admin-settings-preview-path {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.admin-body input,
.admin-body select,
.admin-body textarea {
    min-height: 32px;
    padding: 6px 10px;
}

.admin-body textarea {
    min-height: 96px;
}

.admin-body .button {
    min-height: 32px;
    padding: 0 12px;
    border-radius: 10px;
}

.admin-body .button--ghost.is-active {
    background: rgba(15, 23, 42, 0.12);
    color: #0f172a;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
}

.admin-product-supplier-card {
    padding: 22px;
}

.admin-supplier-history-list {
    margin-top: 18px;
}

.admin-supplier-history-item {
    gap: 14px;
    padding: 16px;
}

.admin-supplier-form-check {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 10px;
}

.admin-supplier-add-toggle {
    margin-top: 18px;
    padding-top: 6px;
}

.admin-card--nested {
    margin-top: 18px;
    background: rgba(255, 255, 255, 0.7);
}

.admin-products-toolbar,
.admin-products-search,
.admin-product-cell,
.admin-source-list,
.admin-source-list__item {
    display: grid;
    gap: 10px;
}

.admin-products-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}

.admin-products-search {
    grid-template-columns: minmax(240px, 1.6fr) minmax(180px, 0.8fr);
    gap: 16px;
}

.admin-products-results,
.admin-muted-note {
    margin: 0;
    color: var(--muted);
}

.admin-product-cell {
    gap: 6px;
}

.admin-source-list {
    gap: 8px;
}

.admin-source-list__item {
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fafc;
}

.admin-source-list__item small {
    color: var(--muted);
}

.admin-wysiwyg {
    display: grid;
    gap: 10px;
}

.admin-editor-mode-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.admin-editor-mode-toggle .button.is-active {
    background: #0f172a;
    color: #fff;
    border-color: #0f172a;
}

.admin-wysiwyg__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-wysiwyg__button {
    min-height: 40px;
}

.admin-wysiwyg__editor {
    min-height: 280px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
    overflow: auto;
}

.admin-wysiwyg__editor:focus {
    outline: 2px solid rgba(15, 118, 110, 0.2);
    border-color: #0f766e;
}

.admin-form textarea[data-css-source] {
    min-height: 220px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

.admin-css-editor {
    min-height: 420px;
    font-size: 12px;
    line-height: 1.5;
    tab-size: 4;
    background: #0f172a;
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.32);
}

.admin-css-editor:focus {
    border-color: rgba(59, 130, 246, 0.72);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

.admin-modal-open {
    overflow: hidden;
}

.admin-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 24px;
}

.admin-modal[hidden] {
    display: none;
}

.admin-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 23, 42, 0.72);
}

.admin-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(1240px, 100%);
    max-height: calc(100vh - 48px);
    display: grid;
    gap: 18px;
    padding: 22px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.3);
}

.admin-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.admin-modal__body {
    overflow: auto;
}

.admin-preview-frame-wrap {
    width: 100%;
    display: grid;
    justify-content: center;
}

.admin-preview-frame {
    width: min(100%, 1200px);
    height: 78vh;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
}

.admin-preview-frame-wrap[data-preview-device='mobile'] .admin-preview-frame {
    width: 430px;
    max-width: 100%;
}

.admin-override-grid,
.admin-history-list {
    display: grid;
    gap: 12px;
}

.admin-override-row {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fafc;
    align-items: start;
}

.admin-history-item {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f8fafc;
}

.admin-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 12px 0;
}

.admin-detail-list {
    margin: 10px 0 0;
    display: grid;
    gap: 10px;
}

.admin-detail-list div {
    display: grid;
    gap: 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}

.admin-detail-list div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.admin-detail-list dt {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.admin-detail-list dd {
    margin: 0;
    font-size: 0.95rem;
}

.admin-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-status-pill--active,
.admin-status-pill--paid,
.admin-status-pill--live,
.admin-status-pill--configured {
    border-color: rgba(21, 128, 61, 0.24);
    background: rgba(21, 128, 61, 0.12);
    color: #166534;
}

.admin-status-pill--sandbox,
.admin-status-pill--pending {
    border-color: rgba(37, 99, 235, 0.24);
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
}

.admin-status-pill--disabled,
.admin-status-pill--missing {
    border-color: rgba(123, 124, 127, 0.24);
    background: rgba(123, 124, 127, 0.12);
    color: #4b5563;
}

.admin-history-toggle {
    display: grid;
    gap: 14px;
}

.admin-history-toggle summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #0f172a;
    font-weight: 600;
}

.admin-history-toggle summary::-webkit-details-marker {
    display: none;
}

.admin-history-toggle summary::before {
    content: '+';
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #f8fafc;
    color: #0f766e;
    font-size: 16px;
    line-height: 1;
}

.admin-history-toggle[open] summary::before {
    content: '−';
}

.admin-page-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.admin-page-gallery {
    display: grid;
    gap: 12px;
}

.admin-page-gallery__item {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f8fafc;
}

.admin-page-gallery__item img {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #fff;
}

.build-page__managed-mobile {
    display: none;
}

.admin-form-check {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-form-check--stacked {
    display: grid;
    justify-content: flex-start;
}

.admin-inline-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.admin-stock-pill,
.admin-flag-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    font-size: 0.86rem;
    font-weight: 700;
}

.admin-stock-pill--in-stock {
    border-color: rgba(47, 190, 56, 0.28);
    background: rgba(47, 190, 56, 0.12);
    color: #1f7a28;
}

.admin-stock-pill--out {
    border-color: rgba(123, 124, 127, 0.24);
    background: rgba(123, 124, 127, 0.12);
    color: #4b5563;
}

.admin-flag-pill--manual {
    border-color: rgba(15, 118, 110, 0.24);
    background: rgba(15, 118, 110, 0.12);
    color: #0f766e;
}

.admin-flag-pill--unlimited {
    border-color: rgba(37, 99, 235, 0.24);
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
}

.admin-reconciliation-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 960px) {
    .admin-shell,
    .admin-kpis,
    .admin-grid {
        grid-template-columns: 1fr;
    }

    .admin-form-grid--two {
        grid-template-columns: 1fr;
    }

    .admin-reconciliation-grid {
        grid-template-columns: 1fr;
    }

    .admin-page-gallery-grid {
        grid-template-columns: 1fr;
    }

    .admin-callout-grid {
        grid-template-columns: 1fr;
    }

    .admin-callout-grid--compact {
        grid-template-columns: 1fr 1fr;
    }

    .admin-settings-preview-grid {
        grid-template-columns: 1fr;
    }

    .admin-products-toolbar,
    .admin-products-search {
        grid-template-columns: 1fr;
    }

    .admin-product-supplier-card {
        padding: 18px;
    }

    .admin-modal {
        padding: 12px;
    }

    .admin-modal__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-preview-frame {
        height: 70vh;
    }


    .admin-override-row {
        grid-template-columns: 1fr;
    }

    .home-managed-intro__desktop {
        display: none;
    }

    .build-page__managed-desktop {
        display: none;
    }

    .build-page__managed-mobile {
        display: block;
    }

    .home-managed-intro__mobile {
        display: block;
    }

    .admin-main {
        padding: 18px;
    }
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
}

.container {
    width: min(1380px, calc(100% - 28px));
    margin: 0 auto;
}

.announcement-bar {
    background: var(--dark);
    color: #fff;
    font-size: 0.92rem;
}

.announcement-bar .container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    text-align: center;
}

.home-managed-intro__mobile {
    display: none;
}

.home-managed-intro__desktop {
   margin-top: 20px;
}

.home-managed-intro__desktop,
.home-managed-intro__mobile {
    padding: 18px 22px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.site-header {
    position: relative;
    z-index: 50;
    background: rgba(245, 246, 248, 0.96);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(217, 222, 230, 0.85);
}

.wrapper-header,
.header-shortcuts,
.header-search-meta,
.header-search-links,
.subnav__inner,
.vehicle-picker__heading,
.vehicle-picker__actions,
.hero__actions,
.section-heading,
.status-list,
.site-footer__grid,
.cart-line,
.cart-line__actions,
.summary-row,
.summary-line,
.pagination,
.brand-strip {
    display: flex;
    gap: 16px;
}

.wrapper-header,
.section-heading,
.summary-row,
.summary-line,
.cart-line {
    align-items: center;
    justify-content: space-between;
}

.wrapper-header {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 12px 0 14px;
}

.wrapper-header > * {
    min-width: 0;
}

.brand-column {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 0;
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.mobile-menu-toggle span {
    width: 100%;
    height: 3px;
    border-radius: 999px;
    background: var(--text);
}

.site-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border-radius: 20px;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
}

.site-logo img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 135px;
}

.site-footer__brand img {
    width: auto;
    max-height: 135px;
}

.header-shortcuts {
    justify-content: center;
    flex-wrap: wrap;
}

.header-shortcuts--mobile {
    display: none;
}

.header-shortcuts--desktop {
    justify-content: flex-end;
    flex-wrap: nowrap;
    margin-left: auto;
}

.shortcut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--line);
    font-weight: 700;
    box-shadow: var(--shadow);
}

.shortcut--phone,
.shortcut--cart {
    background: linear-gradient(135deg, var(--surface), #fdfdfd);
}

.shortcut__label--compact {
    display: none;
}

.shortcut--cart [data-cart-count] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    margin-left: 10px;
    border-radius: 999px;
    background: var(--dark);
    color: #fff;
}

.header-search-shell {
    position: relative;
    padding: 14px 18px;
    border-radius: 22px;
    background: linear-gradient(180deg, #252c41, #141a2b);
    color: #fff;
    box-shadow: 0 24px 60px rgba(18, 23, 35, 0.25);
}

.site-footer h4,
.summary-card h2,
.detail-card h2,
.hero__finder h2 {
    margin: 0 0 8px;
    font-family: Orbitron, Inter, sans-serif;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.header-search {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

.header-search input,
.header-search button,
input,
select,
textarea {
    border-radius: 14px;
    border: 1px solid var(--line);
}

.header-search input,
input,
select,
textarea {
    width: 100%;
    min-height: 50px;
    padding: 14px 16px;
    background: #fff;
    color: var(--text);
}

.header-search button,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.2s ease;
}

.header-search button,
.button--accent {
    background: var(--accent);
    color: #fff;
}

.header-search button:hover,
.button--accent:hover {
    background: var(--accent-dark);
}

.button--ghost {
    background: var(--surface-soft);
    color: var(--text);
}

.button--dark {
    background: var(--dark);
    color: #fff;
}

.button--link {
    background: transparent;
    color: var(--accent);
    padding: 0;
    min-height: 0;
}

.button--full {
    width: 100%;
}

.header-search-meta {
    margin-top: 10px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.search-suggestions {
    position: absolute;
    top: calc(100% - 10px);
    left: 22px;
    right: 22px;
    z-index: 20;
    padding: 14px;
    border-radius: 22px;
    background: #fff;
    color: var(--text);
    box-shadow: 0 30px 60px rgba(9, 14, 25, 0.22);
}

.search-suggestions__header,
.search-suggestion,
.search-suggestion__content {
    display: flex;
}

.search-suggestions__header {
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 6px 12px;
    color: var(--muted);
}

.search-suggestion {
    align-items: center;
    gap: 14px;
    padding: 12px 8px;
    border-radius: 16px;
}

.search-suggestion:hover {
    background: var(--surface-soft);
}

.search-suggestion__media {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    overflow: hidden;
    border-radius: 14px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    flex: 0 0 70px;
}

.search-suggestion__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.search-suggestion__placeholder {
    padding: 10px;
    text-align: center;
    font-size: 0.78rem;
    color: var(--muted);
}

.search-suggestion__content {
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.search-suggestion__content strong {
    color: var(--text);
}

.search-suggestion__content span {
    color: var(--muted);
    font-size: 0.92rem;
}

.search-suggestion__fitment {
    color: var(--accent) !important;
    font-weight: 700;
}

.search-suggestion__price {
    font-weight: 800;
    color: var(--accent);
}

.search-suggestion--empty {
    cursor: default;
}

.search-suggestions__footer {
    display: inline-flex;
    margin-top: 8px;
    padding: 10px 12px;
    color: var(--accent);
    font-weight: 700;
}

.header-search-state {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.94rem;
}

.header-search-state.is-active {
    background: rgba(217, 42, 42, 0.18);
}

.header-search-state.is-inactive {
    background: rgba(255, 255, 255, 0.14);
}

.header-search-state-toggle {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12);
}

.header-search-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-weight: 700;
}

.header-search-link.is-hidden {
    display: none;
}

.vehicle-picker {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, #101624, #1d2436);
    color: #fff;
}

.vehicle-picker .container {
    padding: 28px 0 34px;
}

.vehicle-picker__heading {
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
}

.vehicle-picker__heading p {
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
}

.close-vehicle-picker {
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-radius: 999px;
    min-height: 48px;
    padding: 0 18px;
}

.vehicle-picker__grid,
.form-grid,
.product-grid,
.chip-grid,
.detail-grid {
    display: grid;
}

.vehicle-picker__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.pf-step,
.filter-card,
.summary-card,
.checkout-card,
.centered-card,
.detail-card,
.product-card,
.hero__grid > div,
.flash,
.cart-line {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.pf-step,
.filter-card,
.summary-card,
.checkout-card,
.centered-card,
.detail-card,
.flash {
    padding: 22px;
}

.pf-step__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-family: Orbitron, Inter, sans-serif;
    font-weight: 700;
}

.vehicle-filter-state,
.pf-step label,
.filter-card label,
.checkout-form label {
    display: grid;
    gap: 8px;
}

.pf-step label {
    color: var(--text);
}

.pf-step__heading {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.pf-step label > span:not(.pf-step__heading),
.pf-step__heading > span:not(.pf-step__index) {
    color: var(--text);
    font-weight: 700;
}

.vehicle-filter-state {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 14px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
}

.vehicle-filter-state label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 600;
}

.vehicle-filter-state input {
    width: 18px;
    min-height: 18px;
    height: 18px;
    padding: 0;
    accent-color: var(--accent);
}

.pf-selection-summary {
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
}

.vehicle-picker__actions {
    margin-top: 18px;
}

.subnav {
    position: relative;
    z-index: 55;
    overflow: visible;
    background: #fff;
    border-top: 1px solid rgba(217, 222, 230, 0.7);
}

.subnav__inner {
    min-height: 46px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.subnav__primary {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    flex-wrap: wrap;
}

.subnav__inner a,
.subnav-menu summary {
    font-weight: 700;
    color: var(--dark-2);
}

.subnav-menu {
    position: relative;
}

.subnav-menu summary {
    list-style: none;
    cursor: pointer;
    font-weight: 700;
    color: var(--dark-2);
}

.subnav-menu summary::-webkit-details-marker {
    display: none;
}

.subnav-menu[open] .subnav-menu__panel {
    display: grid;
}

.subnav-menu__panel {
    position: absolute;
    top: calc(100% + 14px);
    left: 0;
    z-index: 80;
    min-width: 280px;
    display: none;
    gap: 8px;
    padding: 14px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.subnav-menu__panel a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--surface-soft);
}

.subnav-menu__panel small {
    color: var(--muted);
    font-size: 0.82rem;
}

.section {
    padding: 24px 0 42px;
}

.section--tight {
    padding-top: 16px;
}

.section--breadcrumbs {
    padding-bottom: 8px;
}

.section--search-heading {
    padding-top: 10px;
    padding-bottom: 14px;
}

.section--search-results {
    padding-top: 6px;
}

.section--muted {
    background: linear-gradient(180deg, rgba(17, 23, 35, 0.04), rgba(17, 23, 35, 0));
}

.hero {
    padding: 40px 0 28px;
}

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(340px, 0.85fr);
    gap: 24px;
}

.hero__grid > div {
    padding: 32px;
}

.hero h1,
.section h1,
.section h2,
.product-summary h1 {
    margin: 0 0 12px;
    line-height: 1.04;
    overflow-wrap: anywhere;
}

.hero h1 {
    font-size: clamp(2.6rem, 5vw, 4.6rem);
}

.hero__copy,
.lead,
.copy-block,
.centered-card p,
.site-footer p {
    color: var(--muted);
    line-height: 1.7;
}

.eyebrow {
    margin: 0 0 10px;
    font-family: Orbitron, Inter, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
}

.section-heading--search-results {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px 18px;
    margin-bottom: 12px;
}

.section-heading--search-results > div {
    min-width: 0;
}

.section-heading--search-results .eyebrow {
    margin-bottom: 4px;
    font-size: 0.72rem;
    letter-spacing: 0.09em;
}

.section-heading--search-results h1 {
    margin: 0;
    font-size: clamp(1.55rem, 2.3vw, 2.2rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.section-heading--search-results > p:last-child {
    margin: 2px 0 0;
    align-self: center;
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
}

.breadcrumbs {
    display: block;
    max-width: 100%;
    overflow: hidden;
    margin-bottom: 0;
    color: var(--muted);
    font-size: 0.95rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.breadcrumbs > * + * {
    margin-left: 10px;
}

.section--search-heading .breadcrumbs {
    margin-bottom: 10px;
}

.breadcrumbs strong,
.breadcrumbs a:hover {
    color: var(--text);
}

.chip-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.chip {
    display: grid;
    gap: 6px;
    padding: 20px;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.chip--brand {
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: start;
    gap: 12px;
    text-align: center;
    min-height: 190px;
}

.chip__media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 96px;
    padding: 14px 12px;
    border-radius: calc(var(--radius) - 6px);
    background: linear-gradient(180deg, #fbfcff 0%, #f3f6fb 100%);
    border: 1px solid rgba(33, 36, 61, 0.08);
}

.chip__media img {
    max-width: 100%;
    max-height: 62px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.chip__media-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: #111723;
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    text-transform: uppercase;
}

.chip__content {
    display: grid;
    gap: 6px;
    min-width: 0;
    justify-items: center;
}

.chip__content strong,
.chip__content span {
    overflow-wrap: anywhere;
}

.chip__content strong {
    line-height: 1.25;
}

.chip__content span {
    color: var(--muted);
    font-size: 0.92rem;
}

.brand-directory__toolbar {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-top: 18px;
}

.brand-directory__search {
    display: grid;
    gap: 6px;
    min-width: min(100%, 360px);
}

.brand-directory__search span {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.brand-directory__search input {
    min-height: 48px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: #fff;
}

.brand-directory__summary {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 0.95rem;
}

.product-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.product-card {
    overflow: hidden;
}

.product-card__image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    background: linear-gradient(180deg, #fff, #f7f9fb);
}

.product-card__image img,
.product-gallery__primary img,
.cart-line__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-gallery__primary img {
    border-radius: inherit;
}

.product-card__body {
    display: grid;
    gap: 8px;
    padding: 16px;
}

.product-card__topline,
.empty-state__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.product-card__topline .eyebrow {
    margin: 0;
}

.product-card__source {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(17, 23, 35, 0.06);
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.search-hit-card {
    display: grid;
    gap: 0;
}

.search-hit-card__category {
    padding: 6px 12px;
    border-bottom: 1px solid var(--line);
    background: rgba(17, 23, 35, 0.03);
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.search-hit-card__layout {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
}

.search-hit-card__image {
    min-height: 180px;
    border-right: 1px solid var(--line);
}

.search-hit-card__body {
    gap: 8px;
    padding: 12px 14px;
}

.search-hit-card__brand-row,
.search-hit-card__meta-row,
.search-hit-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.search-hit-card__brand-logo {
    max-width: 88px;
    max-height: 24px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.search-hit-card__meta-row {
    color: var(--muted);
    font-size: 0.84rem;
}

.search-hit-card__pricing {
    display: grid;
    gap: 6px;
}

.search-hit-card__action {
    width: min(190px, 100%);
}

.search-hit-card__action .button,
.search-hit-card__action .ajax-cart-form,
.search-hit-card__action .ajax-cart-form button {
    width: 100%;
}

.badge {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(217, 42, 42, 0.1);
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 700;
}

.badge--external {
    left: auto;
    right: 14px;
    background: rgba(18, 23, 35, 0.9);
    color: #fff;
}

.product-card__sku,
.summary-note,
.stock,
.product-card__summary {
    color: var(--muted);
}

.product-card h3 {
    margin: 0;
    line-height: 1.35;
    font-size: 1.08rem;
}

.product-card h3 a {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.product-view-toolbar {
    display: flex;
    justify-content: flex-end;
    margin: 10px 0;
}

.product-view-toggle {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
}

.product-view-toggle__button {
    min-height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;
}

.product-view-toggle__button.is-active {
    background: var(--text);
    color: #fff;
}

.product-listing[data-product-view="list"] .product-grid {
    grid-template-columns: 1fr;
}

.product-listing[data-product-view="list"] .product-card {
    display: block;
}

.product-listing[data-product-view="list"] .product-card__image,
.product-listing[data-product-view="list"] .search-hit-card__image {
    display: none;
}

.product-listing[data-product-view="list"] .product-card__body {
    align-content: center;
}

.product-listing[data-product-view="gallery"] .ais-Hits-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.product-listing[data-product-view="gallery"] .ais-Hits-item {
    min-width: 0;
}

.product-listing[data-product-view="gallery"] .search-hit-card__layout {
    display: block;
}

.product-listing[data-product-view="gallery"] .search-hit-card__image {
    min-height: 230px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
}

.product-listing[data-product-view="list"] .ais-Hits-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.product-listing[data-product-view="list"] .search-hit-card__layout {
    display: block;
}

@media (max-width: 600px) {
    .product-view-toggle__button {
        padding: 0 10px;
    }
}

.product-summary .product-card__sku {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin: 0;
    padding: 6px 12px;
    border: 1px solid rgba(217, 42, 42, 0.14);
    border-radius: 999px;
    background: rgba(217, 42, 42, 0.06);
    color: #7b2030;
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.product-summary__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 18px;
}

.product-summary__meta-pill {
    min-height: 34px;
    padding: 8px 14px;
    background: rgba(18, 23, 35, 0.05);
    color: var(--text);
    font-weight: 700;
}

.product-summary__lead-pill {
    display: inline-flex;
    align-items: center;
    margin: 0;
    max-width: min(100%, 62ch);
    padding: 8px 14px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font-size: 0.96rem;
    line-height: 1.35;
}

.price-block {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.price-block strong {
    font-size: 1.2rem;
}

.price-block span {
    color: var(--muted);
    text-decoration: line-through;
}

.price-block--large strong {
    font-size: 2.25rem;
}

.price-promo-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.sale-deadline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 14px;
    padding: 12px 18px;
    border-radius: 22px;
    background: linear-gradient(135deg, #e23b3b 0%, #b31212 100%);
    color: #fff;
    box-shadow: 0 16px 34px rgba(179, 18, 18, 0.26);
    flex-wrap: wrap;
}

.sale-deadline__eyebrow {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
}

.sale-deadline__countdown {
    font-size: 1.15rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sale-deadline__time {
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
}

.sale-deadline.is-expired {
    background: linear-gradient(135deg, #7f1d1d 0%, #5d1313 100%);
}

.stock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--surface-soft);
    font-size: 0.82rem;
}

.stock--eta {
    color: #fff;
    text-shadow: 0 1px 1px rgba(15, 23, 42, 0.2);
}

.stock--ok {
    color: var(--ok);
    background: rgba(21, 128, 61, 0.08);
}

.stock--warn {
    color: #b45309;
    background: rgba(217, 119, 6, 0.1);
}

.product-status-list {
    display: grid;
    gap: 12px;
    justify-items: start;
    margin-top: 18px;
}

.product-status-list .stock {
    max-width: 100%;
}

.product-status-list .stock--primary {
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    text-align: center;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.product-status-list .stock--detail {
    display: block;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    color: #334155;
    font-size: 0.92rem;
    line-height: 1.6;
}

.catalog-layout--search > div:last-child {
    min-width: 0;
    flex: 1;
}

.product-grid--search {
    grid-template-columns: 1fr;
    gap: 10px;
}

.catalog-layout {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.catalog-layout--search {
    gap: 14px;
}

.catalog-toolbar,
.results-toolbar,
.filter-card__heading,
.catalog-toolbar__summary {
    display: flex;
    gap: 14px;
}

.catalog-toolbar,
.results-toolbar,
.filter-card__heading {
    align-items: center;
    justify-content: space-between;
}

.catalog-toolbar {
    margin-top: 16px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.catalog-toolbar__summary {
    flex-wrap: wrap;
    align-items: baseline;
    color: var(--muted);
}

.catalog-toolbar__title {
    margin: 0 10px 0 0;
    color: var(--text);
    font-size: clamp(1.1rem, 1.5vw, 1.45rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.catalog-toolbar__summary strong,
.results-toolbar strong {
    color: var(--text);
}

.active-filter-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.active-filter {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--muted);
    font-weight: 700;
    font-size: 0.86rem;
}

.catalog-sidebar {
    width: min(230px, 100%);
    flex: 0 0 230px;
}

.search-filter-toggle {
    display: none;
    width: 100%;
    margin-bottom: 12px;
}

.filter-card {
    display: grid;
    gap: 10px;
    padding: 16px;
}

.catalog-sidebar label span {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.catalog-sidebar input,
.catalog-sidebar select {
    min-height: 42px;
    padding: 10px 12px;
}

.catalog-sidebar .button {
    min-height: 42px;
}

.filter-card__heading {
    align-items: flex-start;
}

.filter-card__heading h2 {
    margin-bottom: 6px;
}

.filter-card__heading p {
    margin: 0;
    color: var(--muted);
    font-size: 0.94rem;
}

.filter-card__heading a {
    font-weight: 700;
    color: var(--accent);
}

.filter-lock {
    display: flex;
    align-items: center;
    min-height: 50px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--surface-soft);
    color: var(--text);
    font-weight: 700;
}

.fitment-summary {
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(217, 42, 42, 0.08);
    color: var(--accent-dark);
}

.fitment-summary--hero,
.fitment-summary--product {
    margin-top: 16px;
}

.fitment-summary--product.is-match {
    background: rgba(21, 128, 61, 0.08);
    color: var(--ok);
}

.fitment-summary__meta {
    display: block;
    margin-top: 6px;
    font-size: 0.92rem;
}

.results-toolbar {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(17, 23, 35, 0.04);
    color: var(--muted);
}

.results-toolbar__count,
.results-toolbar__sort {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.pagination {
    flex-wrap: wrap;
    margin-top: 14px;
}

.section--search-heading .section-heading {
    align-items: end;
    margin-bottom: 0;
}

.section--search-heading .section-heading h1 {
    font-size: clamp(1.85rem, 3vw, 2.45rem);
    margin-bottom: 6px;
}

.section--search-heading .section-heading > p:last-child {
    margin: 0;
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--muted);
}

.pagination a {
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #fff;
}

.pagination a.is-active {
    background: var(--dark);
    color: #fff;
}

.pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 10px 6px;
    color: var(--muted);
    font-weight: 700;
}

.product-detail {
    display: flex;
    align-items: flex-start;
    gap: 28px;
}

.product-gallery,
.product-summary {
    min-width: 0;
    flex: 1;
}

.product-summary-intro {
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}

.product-summary-intro--mobile {
    display: none;
    width: 100%;
}

.product-summary-intro--desktop {
    display: block;
    margin-bottom: 18px;
}

.product-brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.product-brand-mark img {
    max-width: 120px;
    max-height: 32px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.product-brand-mark .eyebrow {
    margin: 0;
}

@media (min-width: 721px) {
    .product-brand-mark img {
        max-height: 50px;
        height: 50px;
    }
}

.product-gallery__primary,
.empty-image {
    min-height: 520px;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid var(--line);
    overflow: hidden;
}

.product-gallery__thumbs {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    overflow-x: auto;
}

.product-gallery__thumb {
    width: 88px;
    height: 88px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    flex: 0 0 88px;
}

.product-gallery__thumb.is-active {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(217, 42, 42, 0.14);
}

.product-gallery__thumb img {
    width: 88px;
    height: 88px;
    border-radius: 16px;
    object-fit: contain;
}

.buy-box {
    display: flex;
    align-items: end;
    gap: 14px;
    margin-top: 24px;
}

.buy-box label {
    min-width: 140px;
}

.accepted-payments {
    display: grid;
    gap: 12px;
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
}

.accepted-payments__label {
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.payment-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    gap: 18px;
    flex-wrap: wrap;
    text-align: center;
}

.payment-icon {
    flex: 0 0 auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.detail-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    min-width: 0;
}

.detail-grid > * {
    min-width: 0;
    max-width: 100%;
}

.compatibility-copy,
.detail-card {
    line-height: 1.7;
}

.detail-card--tabs {
    padding: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.detail-tabs {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
    padding: 20px 20px;
}

.detail-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 34px;
    border: 1px solid #cdd4df;
    border-radius: 999px;
    background: linear-gradient(180deg, #f3f5f8 0%, #e8edf3 100%);
    color: #66738b;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.detail-tab:hover {
    color: var(--dark);
    border-color: #bfc8d6;
    box-shadow: 0 10px 24px rgba(18, 27, 48, 0.08);
    transform: translateY(-1px);
}

.detail-tab:focus-visible {
    outline: 2px solid rgba(14, 77, 168, 0.28);
    outline-offset: 3px;
}

.detail-tab.is-active {
    background: var(--dark);
    color: #fff;
    border-color: var(--dark);
    box-shadow: 0 12px 24px rgba(10, 18, 38, 0.2);
}

.detail-panel {
    display: block;
    padding: 24px 24px 28px;
    border-top: 1px solid var(--line);
    scroll-margin-top: 110px;
}

.detail-panel.is-active {
    background: rgba(17, 23, 35, 0.02);
}

.detail-subsection + .detail-subsection {
    margin-top: 28px;
}

.detail-subsection h3 {
    margin-bottom: 12px;
}

.compatibility-highlight {
    margin-top: 16px;
    margin-bottom: 12px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(21, 128, 61, 0.06);
}

.compatibility-highlight--all {
    background: rgba(17, 23, 35, 0.04);
}

.compatibility-highlight--warning {
    background: rgba(217, 119, 6, 0.08);
    color: #92400e;
}

.fitment-list,
.site-footer ul {
    margin: 0;
    padding-left: 18px;
}

.fitment-list {
    columns: 2;
}

.fitment-list li {
    break-inside: avoid;
    margin-bottom: 10px;
}

.fitment-list__meta {
    display: block;
    color: var(--muted);
    font-size: 0.92rem;
}

.spec-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}

.spec-grid dt {
    font-weight: 700;
}

.spec-grid dd {
    margin: 0;
    color: var(--muted);
}

.reference-table,
.compatibility-table {
    width: 100%;
    border-collapse: collapse;
}

.reference-table th,
.reference-table td,
.compatibility-table th,
.compatibility-table td {
    padding: 12px 14px;
    border: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.reference-table th,
.compatibility-table th {
    background: var(--surface-soft);
    font-weight: 700;
}

.reference-table th {
    width: 240px;
}

.reference-table-wrap {
    overflow-x: auto;
}

.brochure-list {
    margin: 0;
    padding-left: 18px;
}

.product-status-meta {
    margin-top: 20px;
    color: var(--muted);
}

.compatibility-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 18px 0 14px;
}

.compatibility-nav__button {
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-weight: 700;
    cursor: pointer;
}

.compatibility-nav__button:disabled {
    opacity: 0.45;
    cursor: default;
}

.compatibility-nav__meta,
.compatibility-disclaimer {
    color: var(--muted);
}

.compatibility-table-wrap {
    overflow-x: auto;
}

.product-compatibility.is-loading .compatibility-table-wrap {
    opacity: 0.5;
    transition: opacity 0.18s ease;
}

.cart-layout,
.checkout-layout {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.cart-layout > :first-child,
.checkout-layout > :first-child {
    flex: 1;
}

.summary-card {
    width: min(360px, 100%);
    position: sticky;
    top: 128px;
}

.cart-table {
    display: grid;
    gap: 14px;
}

.cart-line {
    padding: 18px;
}

.cart-line__media {
    width: 96px;
    height: 96px;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--line);
}

.cart-line__content {
    flex: 1;
}

.cart-line__content h2 {
    margin: 0 0 6px;
    font-size: 1.1rem;
}

.cart-line__total {
    min-width: 110px;
    text-align: right;
    font-weight: 700;
}

.summary-line,
.summary-row {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

.form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.checkout-form {
    display: grid;
    gap: 16px;
}

.checkout-option-block {
    display: grid;
    gap: 14px;
    padding-top: 6px;
}

.checkout-option-list,
.checkout-provider-card,
.checkout-method-pill-list {
    display: grid;
    gap: 12px;
}

.checkout-option-card,
.checkout-provider-card {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.75);
}

.checkout-option-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: flex-start;
}

.checkout-option-card input,
.checkout-provider-card input,
.checkout-method-pill input {
    margin-top: 2px;
}

.checkout-option-card__content,
.checkout-provider-card__header {
    display: grid;
    gap: 4px;
}

.checkout-option-card__content {
    padding-left: 8px;
}

.checkout-option-card__price {
    font-weight: 700;
    white-space: nowrap;
}

.checkout-method-pill-list {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.checkout-method-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 76px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    grid-template-rows: 25px 20px;
    column-gap: 10px;
    row-gap: 3px;
    align-items: center;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.checkout-method-pill:hover:not(.is-unavailable) {
    border-color: #8ebcf4;
    box-shadow: 0 3px 10px rgba(20, 115, 230, 0.08);
}

.checkout-method-pill > input {
    grid-row: 1 / span 2;
    width: 18px !important;
    min-width: 18px;
    max-width: 18px;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px;
    margin: 0;
    padding: 0 !important;
    box-sizing: border-box;
    appearance: none;
    border: 1px solid #7d8491;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 4px #fff;
}

.checkout-method-pill > input:checked {
    border-color: #1473e6;
    background: #1473e6;
}

.checkout-method-pill__icon {
    width: auto;
    height: 24px;
    max-width: 74px;
    object-fit: contain;
    align-self: end;
}

.checkout-method-pill__label {
    grid-column: 2;
    grid-row: 2;
    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 650;
    line-height: 1.1;
}

.checkout-method-pill__brands {
    display: flex;
    align-items: center;
    gap: 3px;
    grid-column: 2;
    grid-row: 1;
    align-self: end;
}

.checkout-method-pill__brands img {
    width: auto;
    height: 18px;
    max-width: 30px;
    object-fit: contain;
}

.checkout-method-pill.is-unavailable {
    cursor: not-allowed;
    opacity: 0.5;
    filter: grayscale(0.35);
}

.checkout-method-pill.is-selected {
    border-color: #1473e6;
    background: #eef6ff;
    box-shadow: 0 0 0 2px rgba(20, 115, 230, 0.12);
}

.checkout-method-pill[hidden] {
    display: none;
}

.checkout-gateway-note {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
}

.paypal-gateway-panel {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}

.paypal-card-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.checkout-card-form {
    display: grid;
    gap: 12px;
}

.checkout-card-form label {
    display: grid;
    gap: 6px;
    color: var(--ink);
    font-weight: 600;
}

.checkout-card-form input {
    width: 100%;
    min-height: 46px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.checkout-card-form input:focus {
    border-color: #1473e6;
    outline: 2px solid rgba(20, 115, 230, 0.15);
}

.checkout-card-brands {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkout-card-brands img {
    width: auto;
    height: 24px;
    max-width: 52px;
    object-fit: contain;
}

#paypal-card-submit {
    justify-self: start;
}

.summary-card--inline {
    position: static;
    width: 100%;
    margin: 18px 0;
}

.flash {
    margin-top: 16px;
}

.flash--success {
    border-color: rgba(21, 128, 61, 0.2);
    background: rgba(21, 128, 61, 0.08);
}

.flash--warning {
    border-color: rgba(217, 119, 6, 0.2);
    background: rgba(217, 119, 6, 0.08);
}

.centered-card {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.empty-state {
    padding: 36px;
    border-radius: var(--radius);
    background: #fff;
    border: 1px dashed var(--line);
    color: var(--muted);
}

.empty-state__actions {
    margin-top: 18px;
}

.brand-strip {
    flex-wrap: wrap;
}

.brand-strip a {
    padding: 12px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
}

.brand-hero {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 22px;
    padding: 20px;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.brand-hero img {
    max-width: 160px;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.brand-hero h2 {
    margin: 0 0 8px;
}

.site-footer {
    padding: 36px 0 52px;
    background: #fff;
    border-top: 1px solid var(--line);
}

.site-footer__grid {
    align-items: flex-start;
    justify-content: space-between;
}

.site-footer__brand {
    max-width: 320px;
}

.payment-strip {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.payment-strip img {
    height: 28px;
    width: auto;
    padding: 5px 8px;
    border-radius: 12px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
}

@media (max-width: 1100px) {
    .wrapper-header {
        grid-template-columns: 240px minmax(0, 1fr);
    }

    .subnav__inner {
        align-items: flex-start;
    }

    .subnav__primary {
        gap: 14px;
    }
}

@media (max-width: 980px) {
    .wrapper-header {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 14px;
    }

    .header-search-shell {
        padding: 12px 14px;
    }

    .header-search-meta {
        gap: 10px;
    }

    .header-shortcuts--desktop .shortcut {
        min-height: 32px;
        padding: 0 12px;
        font-size: 0.84rem;
    }

    .header-shortcuts--desktop .shortcut--phone {
        display: none;
    }

    .subnav__inner {
        gap: 14px;
    }

    .subnav__primary {
        gap: 12px;
    }

    .vehicle-picker__grid,
    .hero__grid,
    .detail-grid,
    .site-footer__grid,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .catalog-layout,
    .product-detail,
    .cart-layout,
    .checkout-layout {
        flex-direction: column;
    }

    .product-detail,
    .cart-layout,
    .checkout-layout {
        align-items: stretch;
    }

    .site-footer__grid {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }

    .catalog-sidebar,
    .summary-card {
        width: 100%;
        position: static;
    }

    .catalog-toolbar,
    .results-toolbar,
    .filter-card__heading {
        flex-direction: column;
        align-items: flex-start;
    }

    .search-hit-card__layout {
        grid-template-columns: 180px minmax(0, 1fr);
    }

    .search-hit-card__action {
        width: 100%;
    }

    .search-filter-toggle {
        display: inline-flex;
    }

    .filter-card {
        gap: 0;
    }

    [data-search-filter-panel] {
        display: grid;
        gap: 14px;
    }

    [data-search-filter-panel][hidden] {
        display: none;
    }

    .fitment-list {
        columns: 1;
    }

    .brand-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .brand-directory__toolbar {
        align-items: stretch;
    }

    .brand-directory__search {
        min-width: 100%;
    }

    .product-gallery__primary,
    .empty-image {
        min-height: 420px;
    }

    .product-summary-intro--mobile {
        display: block;
        margin-top: 20px;
        margin-bottom: 0;
    }

    .product-summary-intro--desktop {
        display: none;
    }

    .product-summary h1 {
        font-size: 1.6rem;
    }

    .product-summary__meta {
        margin-bottom: 0;
    }

    .product-summary__meta-pill,
    .product-summary__lead-pill {
        display: none;
    }
}

@media (max-width: 720px) {
    .container {
        width: min(100% - 20px, 1280px);
    }

    .announcement-bar {
        font-size: 0.82rem;
    }

    .announcement-bar .container {
        min-height: 34px;
    }

    .section {
        padding: 0;
    }

    .hero h1 {
        font-size: 2.35rem;
    }

    .vehicle-picker__actions,
    .hero__actions,
    .buy-box,
    .cart-line,
    .cart-line__actions,
    .empty-state__actions,
    .product-card__topline,
    .search-hit-card__brand-row,
    .search-hit-card__meta-row,
    .search-hit-card__footer {
        flex-direction: column;
        align-items: stretch;
        display: flex;
    }

    .header-search {
        grid-template-columns: 1fr;
    }

    .search-hit-card__layout {
        grid-template-columns: 1fr;
    }

    .search-hit-card__image {
        min-height: 220px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .mobile-menu-toggle {
        display: inline-flex;
    }

    .wrapper-header {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "brand shortcuts"
            "search search";
        gap: 10px 12px;
        padding: 10px 0 12px;
        align-items: center;
    }

    .brand-column {
        grid-area: brand;
        gap: 10px;
    }

    .header-shortcuts--mobile {
        display: flex;
    }

    .header-shortcuts--desktop {
        display: none;
    }

    .header-shortcuts {
        grid-area: shortcuts;
        justify-content: flex-end;
        gap: 8px;
        flex-wrap: nowrap;
    }

    .shortcut {
        min-height: 32px;
        padding: 0 12px;
        font-size: 0.86rem;
        box-shadow: none;
    }

    .shortcut--phone {
        display: none;
    }

    .shortcut__label--full {
        display: none;
    }

    .shortcut__label--compact {
        display: inline;
    }

    .shortcut--cart [data-cart-count] {
        min-width: 24px;
        min-height: 24px;
        margin-left: 8px;
    }

    .site-logo {
        padding: 8px 12px;
        border-radius: 16px;
    }

    .site-logo img {
        max-height: 40px;
    }

    .mobile-menu-toggle {
        width: 40px;
        height: 40px;
        padding: 9px;
        border-radius: 12px;
    }

    .header-search-shell {
        grid-area: search;
        padding: 10px 12px 12px;
        border-radius: 18px;
        box-shadow: 0 16px 36px rgba(18, 23, 35, 0.2);
    }

    .header-search {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
    }

    .header-search input,
    .header-search button {
        min-height: 46px;
    }

    .header-search input {
        padding: 12px 14px;
    }

    .header-search button {
        padding: 0 16px;
    }

    .header-search-meta {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        margin-top: 8px;
    }

    .header-search-state {
        min-height: 38px;
        min-width: 0;
        padding: 7px 12px;
        gap: 8px;
        font-size: 0.84rem;
    }

    .header-search-state-label--full {
        display: none;
    }

    .header-search-state-label--compact {
        display: block;
    }

    .header-search-state-label {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .header-search-links {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: 8px;
        justify-content: flex-end;
    }

    .header-search-link {
        min-height: 36px;
        padding: 0 12px;
        font-size: 0.84rem;
        white-space: nowrap;
    }

    .subnav {
        display: none;
    }

    .subnav.is-mobile-open {
        display: block;
    }

    .subnav__inner {
        align-items: stretch;
        justify-content: flex-start;
        flex-direction: column;
        padding: 12px 0 16px;
    }

    .subnav__primary {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .subnav__primary > a,
    .subnav-menu summary {
        display: flex;
        align-items: center;
        min-height: 48px;
        padding: 0 6px;
    }

    .subnav-menu {
        width: 100%;
    }

    .product-gallery__primary,
    .empty-image {
        min-height: 320px;
    }

    .product-gallery__thumb {
        width: 72px;
        height: 72px;
        flex-basis: 72px;
    }

    .product-gallery__thumb img {
        width: 72px;
        height: 72px;
    }

    .detail-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 8px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .detail-tabs::-webkit-scrollbar {
        display: none;
    }

    .detail-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        min-height: 50px;
        padding: 0 24px;
        font-size: 0.98rem;
    }

    .detail-panel {
        padding: 20px 16px 24px;
        scroll-margin-top: 92px;
    }

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

    .reference-table th {
        width: 160px;
    }

    .subnav-menu__panel {
        position: static;
        min-width: 0;
        margin-top: 10px;
    }

}

@media (max-width: 420px) {
    html,
    body {
        overflow-x: clip;
    }

    .container {
        width: min(100% - 16px, 1280px);
    }

    .site-logo img {
        max-width: 100%;
        max-height: 36px;
    }

    .wrapper-header {
        gap: 8px 10px;
    }

    .brand-column {
        gap: 8px;
    }

    .shortcut {
        min-height: 36px;
        padding: 0 10px;
        font-size: 0.8rem;
    }

    .shortcut--cart [data-cart-count] {
        min-width: 22px;
        min-height: 22px;
        margin-left: 6px;
    }

    .header-search-shell {
        padding: 9px 10px 10px;
        border-radius: 16px;
    }

    .header-search-meta {
        gap: 6px;
    }

    .header-search-state {
        padding: 7px 10px;
        font-size: 0.8rem;
    }

    .header-search-link {
        min-height: 34px;
        padding: 0 10px;
        font-size: 0.8rem;
    }

    .header-search button {
        padding: 0 14px;
        font-size: 0.82rem;
    }

    .product-summary h1 {
        font-size: 1.6rem;
    }

    .product-brand-mark {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 10px;
    }

    .product-summary__meta {
        gap: 8px;
        margin-bottom: 0;
    }

    .product-summary .product-card__sku,
    .product-summary__meta-pill,
    .product-summary__lead-pill {
        max-width: 100%;
        min-width: 0;
    }

    .product-summary .product-card__sku,
    .product-summary__lead-pill,
    .product-status-list .stock,
    .compatibility-copy p,
    .compatibility-copy li,
    .compatibility-copy td,
    .compatibility-copy th {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .product-summary__lead-pill {
        border-radius: 18px;
        font-size: 0.92rem;
        line-height: 1.45;
    }

    .sale-deadline {
        width: 100%;
        gap: 8px;
        padding: 11px 14px;
        border-radius: 18px;
    }

    .sale-deadline__eyebrow,
    .sale-deadline__countdown,
    .sale-deadline__time {
        white-space: normal;
    }

    .sale-deadline__countdown {
        font-size: 1rem;
    }

    .sale-deadline__time {
        font-size: 0.82rem;
    }

    .price-block--large strong {
        font-size: 1.95rem;
    }

    .buy-box {
        gap: 12px;
    }

    .buy-box label {
        min-width: 0;
        width: 100%;
    }

    .accepted-payments {
        padding: 14px 14px 15px;
        border-radius: 16px;
    }

    .payment-icon-container {
        gap: 12px 14px;
    }

    .payment-icon {
        max-width: 100%;
    }

    .product-gallery__primary,
    .empty-image {
        min-height: 260px;
        overflow: hidden;
    }

    .product-gallery__primary img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }

    .detail-tabs {
        gap: 10px;
        padding: 16px 16px 10px;
    }

    .detail-tab {
        min-height: 42px;
        padding: 0 18px;
        font-size: 0.92rem;
    }

    .detail-panel {
        padding: 18px 14px 22px;
    }

    .detail-card,
    .detail-card--tabs {
        width: 100%;
        max-width: 100%;
    }

    .compatibility-copy,
    .compatibility-copy * {
        max-width: 100%;
    }

    .compatibility-copy img,
    .compatibility-copy iframe,
    .compatibility-copy video,
    .compatibility-copy embed,
    .compatibility-copy object {
        max-width: 100%;
        height: auto;
    }

    .compatibility-copy table,
    .compatibility-copy pre {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    #sfwdt,
    #sfwdt .sf-toolbarreset {
        max-width: 100vw !important;
        overflow-x: auto !important;
    }
}

/* StreetFX search results parity */
.streetfx-search-results {
    font-family: Verdana, Inter, sans-serif;
    color: #21243d;
    font-size: 0.85rem;
}

.streetfx-search-results .ais-Hits-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 680px) {
    .streetfx-search-results .ais-Hits-list {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (min-width: 1300px) {
    .streetfx-search-results .ais-Hits-list {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

.streetfx-search-results .ais-Hits-item {
    list-style: none;
    margin: 0;
}

.streetfx-search-results .hit.thumbnail {
    margin: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.streetfx-search-results .product-introduction {
    height: 100%;
    padding: 0.55rem;
    border: 1px solid rgba(0, 0, 0, 0.125);
    background: #fff;
}

.streetfx-search-results .hit-category {
    margin-bottom: 8px;
    color: #21243d;
    opacity: 0.7;
    font-size: 10px;
    line-height: 1.15;
    text-transform: uppercase;
}

.streetfx-search-results .savings-container-results {
    min-height: 20px;
}

.streetfx-search-results .badge-danger {
    position: static;
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 0 8px;
    border-radius: 0;
    background: #ec1c24;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.streetfx-search-results .hit-image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 176px;
    max-height: 220px;
    max-width: 300px;
    margin: 0 auto 8px;
    overflow: hidden;
}

.streetfx-search-results .hit-image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.streetfx-search-results .hit-image-fallback {
    color: #7b7c7f;
    font-size: 12px;
    text-transform: uppercase;
    text-align: center;
}

.streetfx-search-results .hit-info-container {
    overflow-wrap: break-word;
    word-break: break-word;
}

.streetfx-search-results .brands-wrapper {
    min-height: 28px;
    margin-bottom: 4px;
}

.streetfx-search-results .brands-wrapper p {
    margin: 0;
}

.streetfx-search-results .search-brand-link {
    display: inline-flex;
    align-items: center;
}

.streetfx-search-results .brand-logo {
    width: auto;
    height: auto;
    max-height: 28px;
    max-width: 85px !important;
}

.streetfx-search-results .search-brand-text {
    display: inline-flex;
    color: #21243d;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.brand-directory__pagination {
    margin-top: 28px;
}

.brand-directory__pagination .ais-Pagination-list {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

.brand-directory__pagination .ais-Pagination-item,
.brand-directory__pagination .ais-Pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.brand-directory__pagination .ais-Pagination-item {
    min-width: 42px;
    min-height: 42px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
}

.brand-directory__pagination .ais-Pagination-item--selected {
    border-color: rgba(17, 23, 35, 0.14);
    background: #111723;
}

.brand-directory__pagination .ais-Pagination-item--selected a {
    color: #fff;
}

.brand-directory__pagination .ais-Pagination-item--previousPage,
.brand-directory__pagination .ais-Pagination-item--nextPage {
    padding: 0 10px;
}

.brand-directory__pagination .ais-Pagination-item--disabled {
    opacity: 0.45;
    pointer-events: none;
}

.brand-directory__pagination .ais-Pagination-link {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    color: var(--text);
}

.streetfx-search-results .sku {
    margin: 0 0 6px;
    color: #7b7c7f;
    font-size: 12px;
}

.streetfx-search-results .sku span {
    color: #7b7c7f;
}

.streetfx-search-results .warehouse-qty {
    margin: 0 0 6px;
}

.streetfx-search-results .warehouse-qty span {
    display: inline-flex;
    padding: 2px 10px;
    color: #fff;
    background-color: #2fbe38;
    font-size: 12px;
    font-weight: 700;
}

.streetfx-search-results .hit-info-container h1 {
    margin: 0 0 8px;
    font-family: Inter, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.28;
    font-weight: 400;
}

.streetfx-search-results .hit-info-container h1 a {
    color: #21243d;
}

.streetfx-search-results .price {
    margin: 0;
    font-family: Inter, Arial, sans-serif;
    line-height: normal;
}

.streetfx-search-results .price strong {
    color: #21243d;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.streetfx-search-results .price strong span {
    margin-right: 1px;
    font-size: 13px;
}

.streetfx-search-results .org-price {
    margin-left: 6px;
    color: #7b7c7f;
    font-size: 12px;
}

.streetfx-search-results .search-fitment-note {
    margin: 4px 0 0;
    color: #7b7c7f;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.streetfx-search-results .search-hit-actions {
    margin-top: 5px;
}

.streetfx-search-results .buying-options,
.streetfx-search-results .buying-options a,
.streetfx-search-results .buying-options button {
    display: flex;
    width: 100%;
    border: none;
    background: transparent;
    padding: 0;
}

.streetfx-search-results .buying-options .btn_wrapper {
    display: inline-flex;
    width: 100%;
    padding: 10px 0;
    justify-content: center;
    align-items: center;
    background: #002d2d;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.streetfx-search-results .buying-options a .btn_wrapper {
    background: #7b7c7f;
}

.section--search-results .catalog-layout--search {
    gap: 20px;
    align-items: flex-start;
}

.section--search-results .catalog-sidebar {
    width: min(348px, 100%);
    flex: 0 0 348px;
}

.section--search-results .ais-Pagination {
    margin-top: 20px;
}

.section--search-results .ais-Pagination-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.section--search-results .ais-Pagination-item,
.section--search-results .ais-Pagination-link {
    display: flex;
    align-items: center;
    justify-content: center;
}

.section--search-results .ais-Pagination-item {
    width: 38px;
    height: 38px;
    background-color: rgba(65, 66, 71, 0.08);
    color: #414247;
    border-radius: 4px;
}

.section--search-results .ais-Pagination-item--selected {
    background-color: #ec1c24;
    background-image: linear-gradient(rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0));
}

.section--search-results .ais-Pagination-item--selected a {
    color: #fff;
    font-weight: 700;
}

.section--search-results .ais-Pagination-item--previousPage,
.section--search-results .ais-Pagination-item--nextPage {
    background: transparent;
}

.section--search-results .ais-Pagination-item--disabled {
    opacity: 0.33;
}

.section--search-results .ais-Pagination-link {
    width: 100%;
    height: 100%;
}

@media (max-width: 720px) {
    .streetfx-search-results .ais-Hits-list {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .streetfx-search-results .hit-image-container {
        min-height: 140px;
    }

    .streetfx-search-results .hit-info-container h1 {
        font-size: 13px;
    }
}

[data-search-live-root] {
    position: relative;
    transition: opacity 0.18s ease;
}

[data-search-live-root].is-loading {
    opacity: 0.62;
    pointer-events: none;
}

.search-results-column {
    min-width: 0;
    flex: 1;
}

.search-results-mobile-bar {
    display: none;
    margin-bottom: 14px;
}

.filters-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    border: 0;
    background: #ec1c24;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-transform: none;
}

.search-facet-sidebar {
    width: min(348px, 100%);
    flex: 0 0 348px;
    padding: 14px 12px 12px;
    border-radius: 12px;
    background: #f3f5f8;
    border: 1px solid rgba(33, 36, 61, 0.08);
    box-shadow: 0 6px 16px rgba(18, 23, 35, 0.04);
}

.search-facet-sidebar__header {
    display: none;
}

.search-facet-sidebar__inner {
    gap: 18px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.search-facet-sidebar__inner form {
    display: grid;
    gap: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(33, 36, 61, 0.08);
}

.search-facet-sidebar__form-fields {
    display: grid;
    gap: 8px;
}

.search-facet-sidebar__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.search-facet-sidebar__actions .button,
.search-facet-sidebar__actions .streetfx-ClearRefinements,
.search-facet-sidebar__actions .streetfx-ClearRefinements-button {
    width: 100%;
    min-height: 46px;
    font-size: 0.92rem;
    font-weight: 800;
}

.search-facet-sidebar__actions .streetfx-ClearRefinements-button {
    justify-content: center;
    padding: 0 14px;
    border: 1px solid rgba(65, 66, 71, 0.16);
    border-radius: 999px;
    background: #f5f6f8;
    color: #4e5360;
}

.search-facet-sidebar__footer {
    display: none;
}

.ais-Panel {
    display: grid;
    gap: 10px;
}

.ais-Panel-header {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 0 0 10px;
    border-left: 4px solid #ec1c24;
    background: transparent;
    color: #5b6170;
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.ais-HierarchicalMenu-list,
.ais-RefinementList-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ais-HierarchicalMenu-item,
.ais-RefinementList-item {
    margin: 0;
}

.ais-HierarchicalMenu-link,
.ais-RefinementList-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 42px;
    padding: 9px 10px 9px 12px;
    border: 1px solid rgba(33, 36, 61, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    color: #414247;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.ais-HierarchicalMenu-link {
    display: flex;
}

.ais-RefinementList-label {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) max-content;
    column-gap: 8px;
    row-gap: 0;
    text-transform: none;
}

.ais-HierarchicalMenu-link span:first-child,
.ais-RefinementList-labelText {
    flex: 1;
}

.ais-RefinementList-labelText {
    display: block;
    min-width: 0;
    color: #414247;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.15;
    text-transform: uppercase;
}

.ais-HierarchicalMenu-count,
.ais-RefinementList-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eceef2;
    color: #666872;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.ais-RefinementList-count {
    justify-self: end;
    align-self: center;
}

.catalog-sidebar .ais-RefinementList-checkbox {
    appearance: none;
    display: block;
    width: 12px;
    min-width: 12px;
    max-width: 12px;
    height: 12px;
    min-height: 12px;
    margin: 0;
    padding: 0;
    border: 1px solid #bcc4d0;
    background: #fff;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.95);
    justify-self: center;
    align-self: center;
    transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.catalog-sidebar .ais-RefinementList-checkbox:checked {
    background: #ec1c24;
    border-color: #ec1c24;
    box-shadow: inset 0 0 0 2px #fff;
}

.catalog-sidebar .ais-RefinementList-checkbox:hover {
    border-color: #9ea8b6;
}

.catalog-sidebar .ais-RefinementList-checkbox:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(236, 28, 36, 0.14);
}

.ais-HierarchicalMenu-link:hover,
.ais-RefinementList-label:hover {
    border-color: rgba(236, 28, 36, 0.22);
    background: #fff;
}

.ais-HierarchicalMenu-item--selected .ais-HierarchicalMenu-link,
.ais-RefinementList-item--selected .ais-RefinementList-label {
    color: #ec1c24;
    border-color: rgba(236, 28, 36, 0.26);
    background: rgba(236, 28, 36, 0.05);
}

.ais-RefinementList-item--selected .ais-RefinementList-labelText,
.ais-RefinementList-item--selected .ais-RefinementList-count {
    color: #ec1c24;
}

.ais-RefinementList-item--selected .ais-RefinementList-count {
    background: rgba(236, 28, 36, 0.08);
}

.ais-HierarchicalMenu-showMore,
.ais-RefinementList-showMore {
    width: 100%;
    min-height: 40px;
    border: 1px solid rgba(65, 66, 71, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.7);
    color: #555766;
    font-weight: 700;
}

.streetfx-current-category {
    margin-top: 4px;
    margin-bottom: 6px;
    padding: 0 2px 0 10px;
    color: #7b7c7f;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.35;
    text-transform: uppercase;
}

.search-results-column .catalog-toolbar {
    margin-top: 0;
}

.search-results-column .active-filter-strip {
    margin-top: 12px;
    margin-bottom: 14px;
}

@media (max-width: 900px) {
    .section-heading--search-results {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .section-heading--search-results > p:last-child {
        white-space: normal;
    }
}

.streetfx-ClearRefinements-button {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: #ec1c24;
    font-size: 0.86rem;
    font-weight: 700;
}

.streetfx-ClearRefinements-button--disabled {
    opacity: 0.42;
}

.clear-filters {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 980px) {
    .search-results-mobile-bar {
        display: block;
    }

    .search-facet-sidebar {
        position: fixed;
        inset: 0 0 0 auto;
        z-index: 70;
        width: min(360px, 100%);
        max-width: 100%;
        background: #f2f2f3;
        transform: translateX(102%);
        transition: transform 0.22s ease;
        overflow-y: auto;
        box-shadow: -18px 0 45px rgba(18, 23, 35, 0.2);
    }

    .search-facet-sidebar.is-overlay-open {
        transform: translateX(0);
    }

    .search-facet-sidebar__header {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        background: #ec1c24;
        color: #fff;
        font-weight: 700;
    }

    .search-facet-sidebar__inner {
        padding: 16px;
    }

    .search-facet-sidebar__actions {
        grid-template-columns: 1fr;
    }

    .search-facet-sidebar__footer {
        position: sticky;
        bottom: 0;
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        gap: 12px;
        padding: 12px 16px 18px;
        background: #f2f2f3;
        border-top: 1px solid rgba(65, 66, 71, 0.12);
    }

    .search-facet-sidebar__footer .streetfx-ClearRefinements-button {
        width: 100%;
        justify-content: center;
        min-height: 44px;
        border-radius: 8px;
        background: #6f7283;
        color: #fff;
    }

    .search-facet-sidebar__footer .button {
        width: 100%;
        min-height: 44px;
        border-radius: 8px;
    }

    body.is-search-overlay-open {
        overflow: hidden;
    }
}

/* Homepage rebuild */
.page-home .section {
    padding: 0 0 30px;
}

.section-heading--home {
    margin-bottom: 18px;
}

.home-hero {
    padding: 18px 0 30px;
}

.home-carousel {
    position: relative;
    overflow: hidden;
    background: #10141f;
}

.home-carousel--mobile {
    display: none;
}

.home-carousel__viewport {
    position: relative;
}

.home-carousel__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.32s ease;
}

.home-carousel__slide.is-active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
}

.home-carousel__link {
    display: block;
}

.home-carousel__media,
.home-carousel__media img {
    width: 100%;
}

.home-carousel__media img {
    display: block;
    height: auto;
}

.category-showcase,
.brand-showcase,
.home-carousel__indicators {
    display: flex;
    gap: 14px;
}

.home-carousel__indicators {
    position: absolute;
    left: 50%;
    bottom: 24px;
    z-index: 2;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
    transform: translateX(-50%);
}

.home-carousel__arrow,
.home-carousel__dot {
    border: 0;
    cursor: pointer;
}

.home-carousel__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-weight: 700;
    font-size: 1.4rem;
    transform: translateY(-50%);
}

.home-carousel__arrow--prev {
    left: 20px;
}

.home-carousel__arrow--next {
    right: 20px;
}

.home-carousel__dot {
    width: 12px;
    height: 12px;
    padding: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
    color: transparent;
    font-size: 0;
}

.home-carousel__dot.is-active {
    background: #fff;
}

.category-showcase,
.brand-showcase {
    flex-wrap: wrap;
}

.category-showcase__card,
.brand-showcase__card {
    border-radius: 24px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.category-showcase__card {
    display: grid;
    align-content: start;
    flex: 1 1 300px;
    min-width: 0;
    padding: 24px;
    gap: 12px;
}

.category-showcase__meta p,
.brand-showcase__count {
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.category-showcase__card h3,
.brand-showcase__name {
    margin: 0;
    font-weight: 800;
}

.category-showcase__list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.category-showcase__list a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 16px;
    background: var(--surface-soft);
}

.category-showcase__list span {
    font-weight: 700;
}

.category-showcase__list small {
    color: var(--muted);
    font-size: 0.8rem;
}

.category-showcase__empty {
    margin: 0;
    color: var(--muted);
}

.category-showcase__viewall {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent);
    font-weight: 800;
}

.brand-showcase__card {
    display: grid;
    flex: 1 1 180px;
    min-width: 0;
    justify-items: center;
    align-content: start;
    gap: 10px;
    padding: 18px 18px 20px;
    text-align: center;
}

.brand-showcase__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 86px;
    padding: 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, #fbfcff 0%, #f2f5fa 100%);
    border: 1px solid rgba(33, 36, 61, 0.08);
}

.brand-showcase__logo img {
    max-width: 100%;
    max-height: 58px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.title-container {
    margin-bottom: 22px;
}

.title-2 {
    display: inline-block;
    margin: 0;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.more-builds-section {
    padding: 10px 0 4px;
}

.widget-buildslist-cvr {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.bulid,
.bulid-list {
    flex: 1 1 calc(33.333% - 14px);
    min-width: 220px;
}

.bulid-list {
    display: grid;
    align-content: start;
    gap: 14px;
}

.bulid-wrapper {
    display: grid;
    align-content: start;
    gap: 16px;
    height: 100%;
    padding: 20px;
    background: #f0f0f0;
    border-radius: 22px;
}

.buil-list-code {
    width: 100%;
}

.buil-list-code::before {
    display: none;
}

.buil-list-code a {
    color: #10141f;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.04;
    text-decoration: none;
}

.build-img {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    min-height: 0;
    overflow: hidden;
    border-radius: 18px;
    background: #10141f;
}

.build-img a,
.build-img img {
    display: block;
    width: 100%;
    height: 100%;
}

.build-img img {
    object-fit: cover;
    transition: transform 0.28s ease;
}

.bulid:hover .build-img img,
.bulid-list:hover .build-img img {
    transform: scale(1.06);
}

.more-builds-section.single .buil-list-code,
.more-builds-section.single .build-img {
    width: 100%;
}

.more-builds-section.single .buil-list-code a {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
}

.build-page__intro {
    margin-bottom: 24px;
}

.build-page__intro .lead {
    max-width: 820px;
}

.build-page__gallery {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.build-page__image {
    min-height: 220px;
    overflow: hidden;
    border-radius: 22px;
    background: #10141f;
}

.build-page__image.is-featured {
    grid-row: span 2;
    min-height: 456px;
}

.build-page__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.build-page__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
    gap: 24px;
}

.build-page__panel {
    padding: 24px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.build-page__panel p:last-child {
    margin-bottom: 0;
}

.build-page__specs {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 20px;
}

.build-page__specs li {
    color: var(--text);
    line-height: 1.6;
}

@media (max-width: 1100px) {
    .bulid,
    .bulid-list {
        flex-basis: calc(50% - 10px);
    }
}

@media (max-width: 720px) {
    .home-hero {
        padding-top: 14px;
    }

    .home-carousel--desktop {
        display: none;
    }

    .home-carousel--mobile {
        display: block;
    }

    .home-carousel__indicators {
        bottom: 14px;
    }

    .home-carousel__arrow {
        width: 36px;
        height: 36px;
        font-size: 1.2rem;
    }

    .home-carousel__arrow--prev {
        left: 10px;
    }

    .home-carousel__arrow--next {
        right: 10px;
    }

    .category-showcase__card,
    .brand-showcase__card,
    .bulid,
    .bulid-list {
        flex-basis: 100%;
    }

    .category-showcase__card {
        padding: 18px;
    }

    .bulid-wrapper {
        gap: 14px;
        padding: 18px;
    }

    .buil-list-code,
    .build-img {
        width: 100%;
    }

    .buil-list-code a {
        font-size: 1.3rem;
    }

    .build-page__gallery,
    .build-page__content {
        grid-template-columns: 1fr;
    }

    .build-page__image.is-featured {
        grid-row: span 1;
        min-height: 280px;
    }
}

@media (max-width: 420px) {
    .home-carousel__copy,
    .build-page__panel p {
        line-height: 1.6;
    }

    .home-carousel__dot {
        width: 32px;
        height: 32px;
        font-size: 0.82rem;
    }

    .category-showcase__list a {
        padding: 10px 12px;
    }
}

.portal-shell {
    padding-bottom: 56px;
}

.portal-stack {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.portal-hero {
    margin-top: 16px;
    padding: 28px;
    border-radius: 26px;
    background: linear-gradient(118deg, #071321 0%, #0b2240 42%, #124978 100%);
    color: #fff;
    box-shadow: var(--shadow);
}

.portal-hero .eyebrow,
.portal-lookup-card .eyebrow {
    color: #8fc9ff;
}

.portal-hero h1 {
    max-width: 12ch;
    color: #fff;
}

.portal-hero--compact {
    padding: 12px 16px;
}

.portal-hero--compact .portal-hero__grid {
    grid-template-columns: minmax(0, 1.9fr) minmax(220px, 0.48fr);
    gap: 12px;
}

.portal-hero--compact h1 {
    max-width: none;
    margin-bottom: 0;
    font-size: 1.55rem;
}

.portal-hero--compact .portal-lookup-panel__toggle {
    padding: 11px 14px;
    font-size: 0.88rem;
}

.portal-hero--compact .portal-lookup-card {
    padding: 14px;
}

.portal-hero--compact .portal-hero__copy-column {
    gap: 6px;
}

.portal-hero--compact .portal-actions {
    margin-top: 6px;
    gap: 10px;
}

.portal-hero__copy {
    max-width: 58ch;
    color: rgba(240, 247, 255, 0.82);
}

.portal-hero__copy-column {
    display: grid;
    gap: 10px;
}

.portal-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.8fr);
    gap: 24px;
    align-items: start;
}

.portal-lookup-panel {
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    overflow: hidden;
}

.portal-lookup-panel__toggle {
    cursor: pointer;
    list-style: none;
    padding: 16px 20px;
    color: #fff;
    font-weight: 800;
}

.portal-lookup-panel__toggle::-webkit-details-marker {
    display: none;
}

.portal-lookup-panel__toggle::after {
    content: "+";
    float: right;
    color: #8fc9ff;
}

.portal-lookup-panel[open] .portal-lookup-panel__toggle::after {
    content: "-";
}

.portal-lookup-card {
    padding: 22px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(6px);
}

.portal-lookup-form {
    display: grid;
    gap: 14px;
}

.portal-lookup-form label {
    display: grid;
    gap: 8px;
    color: #fff;
    font-weight: 700;
}

.portal-lookup-row {
    display: grid;
    grid-template-columns: minmax(150px, 0.75fr) minmax(0, 1fr);
    gap: 14px;
}

.portal-lookup-form input,
.portal-lookup-form select {
    background: rgba(255, 255, 255, 0.96);
}

.portal-hint {
    margin: 0;
    color: rgba(240, 247, 255, 0.76);
    font-size: 0.92rem;
}

.portal-status-row,
.portal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

.portal-actions .button--ghost {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.portal-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 800;
}

.portal-status-pill--success {
    background: rgba(21, 128, 61, 0.14);
    color: #13753f;
}

.portal-status-pill--warning {
    background: rgba(217, 119, 6, 0.14);
    color: #a35b07;
}

.portal-status-pill--info {
    background: rgba(37, 99, 235, 0.12);
    color: #1956b8;
}

.portal-status-pill--neutral {
    background: rgba(148, 163, 184, 0.16);
    color: #3c4f66;
}

.portal-muted,
.portal-kpi small,
.portal-timeline__item p,
.portal-timeline__item small,
.portal-item-card__copy p,
.portal-item-card__meta,
.portal-shipment summary span,
.portal-awaiting__list span,
.portal-awaiting__list small {
    color: var(--muted);
}

.portal-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.portal-help-hub {
    margin-top: 12px;
}

.portal-kpi {
    padding: 18px 20px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.portal-kpi__label {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.portal-kpi strong {
    display: block;
    font-size: 1.06rem;
    line-height: 1.25;
}

.portal-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(240px, 0.56fr);
    gap: 18px;
    margin-top: 18px;
    align-items: start;
}

.portal-grid--empty {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 22px;
}

.portal-grid--empty > .portal-section {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.portal-grid--empty .portal-tile-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.portal-grid--empty .portal-tile {
    height: 100%;
    padding: 18px 20px;
}

.portal-grid--empty .portal-tile strong {
    color: var(--text);
}

.portal-grid--empty .portal-tile span {
    line-height: 1.5;
}

.portal-main,
.portal-sidebar {
    display: grid;
    gap: 18px;
}

/* The portal sidebar has multiple stacked cards, so a shared sticky summary
   would make the request-centre card overlap the payment overview. */
.page-order-portal .portal-sidebar .summary-card {
    position: static;
}

.portal-section__header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: start;
    margin-bottom: 16px;
}

.portal-section__header h2,
.portal-section h2 {
    margin: 0;
}

.portal-timeline {
    display: grid;
    gap: 14px;
}

.portal-timeline__item {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.portal-timeline__dot {
    width: 14px;
    height: 14px;
    margin-top: 6px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 0 5px rgba(236, 28, 36, 0.12);
}

.portal-timeline__item p,
.portal-timeline__item small,
.portal-notice p {
    margin: 6px 0 0;
}

.portal-tracking-summary {
    display: grid;
    gap: 4px;
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(37, 99, 235, 0.06);
    border: 1px solid rgba(37, 99, 235, 0.12);
}

.portal-tracking-summary span {
    color: var(--muted);
}

.portal-tracking-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.portal-tracking-tab {
    border: 1px solid var(--line);
    background: var(--surface-soft);
    color: var(--text);
    border-radius: 999px;
    padding: 9px 14px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.portal-tracking-tab.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.portal-tracking-panel {
    display: none;
}

.portal-tracking-panel.is-active {
    display: block;
}

.portal-tracking-shipment {
    display: grid;
    gap: 16px;
}

.portal-tracking-shipment__header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: start;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: var(--surface-soft);
}

.portal-tracking-shipment__header p {
    margin: 6px 0 0;
    color: var(--muted);
}

.portal-tracking-shipment__meta {
    display: grid;
    gap: 6px;
    justify-items: end;
    text-align: right;
}

.portal-tracking-items {
    display: grid;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: var(--surface-soft);
}

.portal-tracking-item-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.portal-tracking-item-chips span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.9rem;
}

.portal-shipment-list {
    display: grid;
    gap: 12px;
}

.portal-shipment {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-soft);
    overflow: hidden;
}

.portal-shipment summary {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
}

.portal-shipment summary::-webkit-details-marker {
    display: none;
}

.portal-shipment summary strong,
.portal-shipment__body strong,
.portal-awaiting h3,
.portal-item-card__copy h3 {
    color: var(--text);
}

.portal-shipment summary > div {
    display: grid;
    gap: 4px;
}

.portal-shipment__body {
    padding: 0 18px 18px;
}

.portal-shipment__body ul {
    margin: 12px 0 0;
    padding-left: 18px;
}

.portal-awaiting {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.portal-awaiting__list {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.portal-awaiting__list article {
    display: grid;
    gap: 3px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
}

.portal-item-list,
.portal-tile-list {
    display: grid;
    gap: 12px;
}

.portal-item-card {
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr);
    gap: 16px;
    padding: 16px;
    border-radius: 16px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
}

.portal-item-card__media {
    display: grid;
    place-items: center;
    overflow: hidden;
    min-height: 94px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--line);
}

.portal-item-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.portal-item-card__media span {
    color: var(--muted);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
}

.portal-item-card__content {
    display: flex;
    justify-content: space-between;
    gap: 14px;
}

.portal-item-card__copy h3 {
    margin: 0;
    font-size: 1rem;
}

.portal-item-card__copy p {
    margin: 6px 0;
}

.portal-item-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    align-items: center;
    font-size: 0.92rem;
}

.portal-item-card__price {
    white-space: nowrap;
    font-size: 1rem;
}

.portal-notice {
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid var(--line);
}

.portal-notice--info {
    background: rgba(37, 99, 235, 0.06);
    border-color: rgba(37, 99, 235, 0.12);
}

.portal-notice--warning {
    background: rgba(217, 119, 6, 0.08);
    border-color: rgba(217, 119, 6, 0.16);
}

.portal-tile {
    display: grid;
    gap: 6px;
    padding: 16px 18px;
    border-radius: 16px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    color: inherit;
}

.portal-tile--button,
.portal-help-card--button {
    width: 100%;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.portal-tile--static {
    cursor: default;
}

.portal-help-hub__intro,
.portal-panel-copy {
    margin: 0 0 16px;
    color: var(--muted);
}

.portal-help-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-top: 8px;
}

.portal-help-card {
    display: grid;
    gap: 8px;
    padding: 16px 18px;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, var(--surface-soft) 100%);
    border: 1px solid var(--line);
    color: inherit;
    box-shadow: var(--shadow);
}

.portal-help-card strong {
    color: var(--text);
}

.portal-help-card span {
    color: var(--muted);
    font-size: 0.94rem;
    line-height: 1.45;
}

.portal-action-card {
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-areas:
        "icon title"
        "text text";
    align-items: start;
    gap: 10px 12px;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.portal-action-card strong {
    grid-area: title;
}

.portal-action-card span:not(.portal-action-card__icon) {
    grid-area: text;
}

.portal-action-card:hover,
.portal-action-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(236, 28, 36, 0.22);
    box-shadow: 0 16px 30px rgba(8, 20, 36, 0.12);
}

.portal-action-card.is-active {
    border-color: rgba(236, 28, 36, 0.32);
    background: linear-gradient(180deg, rgba(236, 28, 36, 0.08) 0%, rgba(255, 255, 255, 1) 100%);
    box-shadow: 0 0 0 3px rgba(236, 28, 36, 0.1), 0 18px 34px rgba(8, 20, 36, 0.1);
}

.portal-action-card__icon {
    grid-area: icon;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(7, 19, 33, 0.06);
    border: 1px solid rgba(7, 19, 33, 0.08);
    font-size: 1.25rem;
    line-height: 1;
}

.portal-action-card.is-active .portal-action-card__icon {
    background: rgba(236, 28, 36, 0.1);
    border-color: rgba(236, 28, 36, 0.18);
}

.portal-panel-list {
    display: grid;
    gap: 12px;
}

.portal-panel-row {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
}

.portal-panel-row strong {
    color: var(--text);
}

.portal-panel-row span,
.portal-panel-row a {
    color: var(--muted);
}

.portal-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    margin-bottom: 16px;
}

.portal-section--switchable {
    transition: opacity 0.18s ease;
}

.portal-section--switchable.is-hidden {
    display: none;
}

.portal-workflow-root {
    display: grid;
    gap: 16px;
}

.portal-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.portal-choice-card {
    display: grid;
    gap: 8px;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, #ffffff 0%, var(--surface-soft) 100%);
    text-align: left;
    font: inherit;
    color: inherit;
    box-shadow: var(--shadow);
    cursor: pointer;
}

.portal-choice-card strong,
.portal-request-main h3,
.portal-request-main h4,
.portal-request-side h4,
.portal-request-item__body strong,
.portal-request-side-item strong {
    color: var(--text);
}

.portal-choice-card span,
.portal-request-sub {
    color: var(--muted);
}

.portal-request-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.7fr);
    gap: 18px;
}

.portal-request-main,
.portal-request-side {
    padding: 18px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: var(--surface-soft);
}

.portal-request-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}

.portal-request-header h3 {
    margin: 0;
}

.portal-request-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
}

.portal-request-steps li {
    display: grid;
    gap: 6px;
    justify-items: center;
    text-align: center;
    font-size: 0.82rem;
    color: var(--muted);
}

.portal-request-steps li span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #dbe4ee;
    color: #35526d;
    font-weight: 800;
}

.portal-request-steps li.is-current span,
.portal-request-steps li.is-done span {
    background: var(--accent);
    color: #fff;
}

.portal-request-steps li.is-done {
    color: #0b7a45;
}

.portal-request-items,
.portal-request-fields,
.portal-request-side-list,
.portal-evidence-list {
    display: grid;
    gap: 12px;
}

.portal-request-item,
.portal-request-card,
.portal-request-side-item {
    padding: 16px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: #fff;
}

.portal-request-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
}

.portal-request-item.is-selected {
    border-color: rgba(236, 28, 36, 0.35);
    box-shadow: 0 0 0 3px rgba(236, 28, 36, 0.08);
}

.portal-request-item.is-disabled {
    opacity: 0.68;
}

.portal-request-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    color: var(--muted);
    font-size: 0.92rem;
}

.portal-request-qty {
    display: flex;
    align-items: center;
    gap: 10px;
}

.portal-request-qty input {
    width: 88px;
}

.portal-reason-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
    margin-bottom: 14px;
}

.portal-reason-btn {
    display: grid;
    gap: 6px;
    padding: 14px 15px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--surface-soft);
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.portal-reason-btn.is-active {
    border-color: rgba(236, 28, 36, 0.35);
    background: rgba(236, 28, 36, 0.07);
}

.portal-reason-btn--alt {
    border-style: dashed;
}

.portal-request-field {
    display: grid;
    gap: 8px;
}

.portal-request-field span {
    font-weight: 700;
    color: var(--text);
}

.portal-request-optional {
    color: var(--muted);
    font-weight: 500;
}

.portal-request-help,
.portal-request-field small {
    color: var(--muted);
}

.portal-request-field textarea {
    min-height: 110px;
    resize: vertical;
}

.portal-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}

.portal-upload-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--text);
    flex-wrap: wrap;
}

.portal-upload-chip button {
    border: 0;
    background: transparent;
    color: var(--accent);
    font-weight: 700;
    cursor: pointer;
}

.portal-evidence-card {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: #fff;
}

.portal-evidence-card__thumb {
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 1;
    background: var(--surface-soft);
}

.portal-evidence-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portal-evidence-card__meta {
    display: grid;
    gap: 5px;
}

.portal-evidence-card__meta small {
    color: var(--muted);
    text-transform: capitalize;
}

.portal-evidence-card__meta button {
    justify-self: start;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--accent);
    font-weight: 700;
    cursor: pointer;
}

.portal-confirm-list {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.portal-confirm-list label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--text);
}

.portal-request-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

.portal-request-draft {
    padding: 16px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: #0c1d33;
    color: #dbeafe;
}

.portal-request-draft pre {
    margin: 12px 0 0;
    white-space: pre-wrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.88rem;
}

.portal-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (max-width: 1024px) {
    .portal-hero__grid,
    .portal-grid,
    .portal-kpis,
    .portal-help-grid,
    .portal-choice-grid,
    .portal-request-shell {
        grid-template-columns: 1fr;
    }

    .portal-item-card__content,
    .portal-shipment summary,
    .portal-tracking-shipment__header {
        grid-template-columns: 1fr;
        display: grid;
    }

    .portal-grid--empty .portal-tile-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .portal-hero {
        padding: 22px;
        border-radius: 22px;
    }

    .portal-hero--compact {
        padding: 18px;
    }

    .portal-hero--compact .portal-hero__grid {
        grid-template-columns: 1fr;
    }

    .portal-item-card {
        grid-template-columns: 1fr;
    }

    .portal-item-card__media {
        min-height: 150px;
    }

    .portal-status-row,
    .portal-actions,
    .portal-item-card__meta {
        align-items: flex-start;
    }

    .portal-lookup-row,
    .portal-reason-grid,
    .portal-request-steps {
        grid-template-columns: 1fr;
    }

    .portal-evidence-card {
        grid-template-columns: 1fr;
    }
}

.portal-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    margin-top: 6px;
}

.portal-event-meta a,
.portal-inline-link {
    color: var(--accent);
    font-weight: 700;
}

.portal-sidebar .portal-tile-list {
    margin-top: 8px;
}

.portal-shipment__header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 12px;
}

.portal-shipment-events {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.portal-shipment-event {
    padding: 12px 14px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--line);
}

.portal-shipment-event p,
.portal-shipment-event small {
    margin: 5px 0 0;
    color: var(--muted);
}

.brand-directory {
    padding: 28px 0 84px;
}

.brand-directory__hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 28px;
    margin: 34px 0 26px;
    padding: clamp(28px, 5vw, 64px);
    border-radius: 24px;
    background: var(--dark);
    color: #fff;
}

.brand-directory__hero h1 {
    margin: 8px 0 12px;
    color: #fff;
    font-size: clamp(2.2rem, 5vw, 4.7rem);
    line-height: .98;
}

.brand-directory__hero p:last-child {
    max-width: 620px;
    margin: 0;
    color: rgba(255,255,255,.72);
    font-size: 1.05rem;
}

.brand-directory__hero-stat {
    display: grid;
    gap: 3px;
    min-width: 150px;
    text-align: right;
}

.brand-directory__hero-stat strong {
    font: 800 2.2rem/1 Inter, sans-serif;
}

.brand-directory__hero-stat span,
.brand-directory__hint,
.brand-directory__summary {
    color: var(--muted);
}

.brand-directory__hero-stat span {
    font-size: .8rem;
}

.brand-directory__controls {
    display: grid;
    grid-template-columns: minmax(240px, 1.6fr) repeat(2, minmax(170px, 1fr)) auto;
    gap: 12px;
    align-items: end;
}

.brand-directory__controls label {
    display: grid;
    gap: 6px;
}

.brand-directory__controls label > span {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.brand-directory__controls input,
.brand-directory__controls select {
    width: 100%;
    min-height: 44px;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
}

.brand-directory__hint {
    margin: 12px 0 18px;
    font-size: .86rem;
}

.brand-directory__letters {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 0;
    background: rgba(245,246,248,.94);
    backdrop-filter: blur(10px);
}

.brand-directory__letters a {
    display: inline-grid;
    place-items: center;
    min-width: 31px;
    height: 31px;
    padding: 0 7px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    font-size: .78rem;
    font-weight: 800;
}

.brand-directory__letters a:hover,
.brand-directory__letters a:focus-visible {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.brand-directory__summary {
    margin: 8px 0 20px;
    font-size: .9rem;
}

.brand-directory__groups {
    display: grid;
    gap: 30px;
}

.brand-directory__group {
    scroll-margin-top: 70px;
}

.brand-directory__group-heading {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;
    padding-bottom: 9px;
    border-bottom: 2px solid var(--text);
}

.brand-directory__group-heading h2 {
    margin: 0;
    color: var(--accent);
    font: 800 1.95rem/1 Inter, sans-serif;
}

.brand-directory__group-heading span {
    color: var(--muted);
    font-size: .8rem;
}

.brand-directory__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.brand-directory__list li[hidden],
.brand-directory__group[hidden] {
    display: none;
}

.brand-directory__list a {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--text);
    font-weight: 700;
}

.brand-directory__list a:hover {
    border-color: var(--line);
    background: #fff;
    box-shadow: 0 8px 20px rgba(15,23,42,.06);
}

.brand-directory__logo {
    display: grid;
    flex: 0 0 34px;
    place-items: center;
    width: 34px;
    height: 34px;
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
}

.brand-directory__logo img {
    width: 100%;
    height: 100%;
    padding: 4px;
    object-fit: contain;
}

.brand-directory__logo > span {
    color: var(--muted);
    opacity: .45;
    font-weight: 800;
    text-transform: uppercase;
}

.brand-directory__list small {
    margin-left: auto;
    color: var(--muted);
}

.brand-directory__empty {
    margin-top: 24px;
}

@media (max-width: 900px) {
    .brand-directory__controls {
        grid-template-columns: 1fr 1fr;
    }

    .brand-directory__search {
        grid-column: 1 / -1;
    }

    .brand-directory__controls .button {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .brand-directory__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .brand-directory__hero {
        display: block;
        margin-top: 24px;
    }

    .brand-directory__hero-stat {
        margin-top: 24px;
        text-align: left;
    }

    .brand-directory__controls {
        grid-template-columns: 1fr;
    }

    .brand-directory__search {
        grid-column: auto;
    }

    .brand-directory__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Keep legacy catalogue result cards table-like in List mode. */
.product-listing[data-product-view="list"] .streetfx-search-results .ais-Hits-list {
    grid-template-columns: 1fr;
    gap: 8px;
}

.product-listing[data-product-view="list"] .streetfx-search-results .product-introduction {
    display: grid;
    grid-template-rows: auto auto;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
}

.product-listing[data-product-view="list"] .streetfx-search-results .hit-category {
    margin: 0;
    padding: 8px 14px 0;
}

.product-listing[data-product-view="list"] .streetfx-search-results .hit-image-container {
    display: none;
}

.product-listing[data-product-view="list"] .streetfx-search-results .hit-info-container {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) minmax(150px, auto);
    grid-template-areas:
        "brand title footer"
        "sku title footer"
        "eta eta footer";
    align-items: start;
    gap: 4px 16px;
    padding: 8px 14px 12px;
}

.product-listing[data-product-view="list"] .streetfx-search-results .brands-wrapper {
    grid-area: brand;
    min-height: 0;
    margin: 0;
}

.product-listing[data-product-view="list"] .streetfx-search-results .sku {
    grid-area: sku;
    margin: 0;
}

.product-listing[data-product-view="list"] .streetfx-search-results .warehouse-qty {
    grid-area: eta;
    margin: 0 !important;
}

.product-listing[data-product-view="list"] .streetfx-search-results .hit-info-container h1 {
    grid-area: title;
    margin: 0;
}

.product-listing[data-product-view="list"] .streetfx-search-results .hit-info-container > footer {
    grid-area: footer;
    align-self: start;
    margin: 0;
}

@media (max-width: 720px) {
    .product-listing[data-product-view="list"] .streetfx-search-results .hit-info-container {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "brand footer"
            "title footer"
            "sku footer"
            "eta footer";
    }
}