:root {
    --jj-deep: #0b1f4d;
    --jj-blue: #0b1f4d;
    --jj-blue-soft: #eef3fb;
    --jj-ink: #0f172a;
    --jj-copy: #334155;
    --jj-muted: #64748b;
    --jj-line: #dbe5f3;
    --jj-panel: #ffffff;
    --jj-soft: #f5f8fc;
    --jj-radius-sm: 10px;
    --jj-radius-md: 16px;
    --jj-radius-lg: 24px;
    --jj-shadow-sm: 0 10px 26px rgba(11, 31, 77, .08);
    --jj-shadow-md: 0 20px 55px rgba(11, 31, 77, .13);
    --jj-fast: 180ms ease;
}

body {
    font-family: "Figtree", "Nunito", sans-serif;
    background:
        radial-gradient(circle at 8% 0%, rgba(11, 31, 77, .11), transparent 34%),
        linear-gradient(180deg, #f8fbff 0%, #ffffff 38%, #f6f8fb 100%);
}

a {
    text-underline-offset: 3px;
}

.jj-site-header {
    box-shadow: 0 6px 22px rgba(11, 31, 77, .06);
}

.jj-topbar {
    min-height: 30px;
    background: var(--jj-deep) !important;
    font-size: .78rem;
}

.jj-topbar a,
.jj-topbar .topbar-secondary-link {
    color: rgba(255, 255, 255, .82);
    font-weight: 750;
    text-decoration: none;
    transition: color var(--jj-fast), opacity var(--jj-fast);
}

.jj-topbar a:hover,
.jj-topbar .topbar-secondary-link:hover {
    color: #ffffff;
}

.jj-topbar-pill {
    color: rgba(255, 255, 255, .9);
    font-weight: 800;
}

.navbar {
    min-height: 66px;
}

.navbar-brand {
    color: var(--jj-deep) !important;
    letter-spacing: -.035em;
}

.navbar-brand i,
.nav-link:hover,
.nav-link:focus {
    color: var(--jj-blue) !important;
}

.nav-link {
    border-radius: 999px;
    padding-inline: .86rem !important;
    transition: background var(--jj-fast), color var(--jj-fast);
}

.nav-link:hover,
.nav-link:focus {
    background: var(--jj-blue-soft);
}

.btn-primary,
.jj-home-search__button,
.jj-header-search__button,
.prod-btn-primary,
.cta-btn-primary,
.jj-locale-save,
.jj-account-primary-action {
    background: linear-gradient(135deg, var(--jj-blue), var(--jj-deep)) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 12px 24px rgba(11, 31, 77, .22) !important;
}

.btn-primary:hover,
.jj-home-search__button:hover,
.jj-header-search__button:hover,
.prod-btn-primary:hover,
.cta-btn-primary:hover {
    box-shadow: 0 16px 34px rgba(11, 31, 77, .30) !important;
}

.btn-outline-primary {
    color: var(--jj-blue) !important;
    border-color: rgba(11, 31, 77, .25) !important;
    background: rgba(234, 242, 255, .75) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #fff !important;
    background: var(--jj-blue) !important;
}

.card,
.customer-space-panel,
.customer-space-sidebar,
.pdp-commercial-card,
.pdp-info-card,
.collection-card {
    border-color: var(--jj-line) !important;
    box-shadow: var(--jj-shadow-sm) !important;
}

.section-title,
.pdp-title,
.collection-hero h1,
.customer-space-panel-header h1,
.customer-space-panel-header h2 {
    color: var(--jj-deep) !important;
    letter-spacing: -.045em;
}

.cat-tile:hover,
.filter-check-row:hover,
.filter-radio-row:hover {
    background: var(--jj-blue-soft) !important;
    color: var(--jj-deep) !important;
    border-color: rgba(11, 31, 77, .16);
}

.cat-tile-icon,
.jj-header-search__category-icon,
.jj-home-search__category-icon,
.customer-space-nav i,
.pdp-service-grid i {
    color: var(--jj-blue) !important;
}

.section-header {
    margin-bottom: 22px !important;
}

.section-link {
    color: var(--jj-blue) !important;
    font-weight: 850 !important;
}

.cat-tile,
.prod-card,
.collection-card,
.pdp-product-card {
    border-color: var(--jj-line) !important;
    border-radius: var(--jj-radius-md) !important;
    box-shadow: 0 8px 20px rgba(11, 31, 77, .055);
}

.prod-card:hover,
.collection-card:hover,
.pdp-product-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--jj-shadow-md) !important;
}

.prod-name,
.card-title,
.collection-card h3 {
    color: var(--jj-ink) !important;
    font-weight: 850 !important;
}

.prod-price-main,
.collection-price-main,
.pdp-current-price {
    color: var(--jj-deep) !important;
}

.prod-badge,
.marketing-badge,
.collection-badge {
    background: var(--jj-blue) !important;
    color: #fff !important;
}

.jj-home-search__form,
.jj-header-search__form {
    border-color: var(--jj-blue) !important;
    box-shadow: 0 14px 36px rgba(11, 31, 77, .09) !important;
}

.jj-home-search__form:focus-within,
.jj-header-search__form:focus-within {
    border-color: var(--jj-deep) !important;
    box-shadow: 0 18px 42px rgba(11, 31, 77, .16) !important;
}

.search-catalog-layout {
    align-items: flex-start;
}

.search-filter-sidebar,
.collection-filter-sidebar {
    position: sticky;
    top: 92px;
    padding: 18px;
    border: 1px solid var(--jj-line) !important;
    border-radius: var(--jj-radius-lg);
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--jj-shadow-sm);
}

.filter-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 4px 0 16px;
    border-bottom: 1px solid #edf2f7;
}

.filter-panel-kicker {
    margin: 0 0 2px;
    color: var(--jj-blue);
    font-size: .68rem;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.filter-panel-head h2 {
    margin: 0;
    color: var(--jj-deep);
    font-size: 1.08rem;
    font-weight: 950;
    letter-spacing: -.04em;
}

.filter-panel-count {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--jj-deep);
    color: #fff;
    font-size: .82rem;
    font-weight: 950;
}

.filter-panel-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 0;
    border-bottom: 1px solid #edf2f7;
}

.filter-stock-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: var(--jj-ink);
    font-size: .86rem;
    font-weight: 850;
    cursor: pointer;
}

.filter-clear-link {
    color: var(--jj-blue);
    font-size: .8rem;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.filter-list-search {
    border-radius: 999px !important;
    background: #f8fbff;
    font-size: .82rem;
}

.filter-see-more {
    margin-top: 7px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--jj-blue);
    font-size: .8rem;
    font-weight: 900;
}

.filter-limited-hidden,
.filter-search-hidden {
    display: none !important;
}

.filter-empty-note {
    margin: 6px 0 0;
    color: var(--jj-muted);
    font-size: .82rem;
}

.mobile-filter-footer {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 10px;
    padding: 12px;
    margin-top: auto;
    border-top: 1px solid var(--jj-line);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(12px);
}

.search-filter-sidebar-title,
.collection-filter-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--jj-deep) !important;
    font-size: .82rem !important;
    font-weight: 950 !important;
    letter-spacing: .08em;
}

.desktop-filter-section {
    margin-bottom: 0 !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid #edf2f7 !important;
}

.desktop-filter-section:last-child {
    border-bottom: 0 !important;
}

.desktop-filter-toggle {
    min-height: 34px;
    color: var(--jj-ink) !important;
    font-weight: 900 !important;
}

.filter-check-row,
.filter-radio-row {
    min-height: 38px;
    border: 1px solid transparent;
    color: var(--jj-copy);
    font-weight: 750;
    transition: background var(--jj-fast), border-color var(--jj-fast), color var(--jj-fast);
}

.form-check-input {
    border-color: #b6c4d8;
}

.form-check-input:checked {
    background-color: var(--jj-blue);
    border-color: var(--jj-blue);
}

.search-filter-drawer,
.collection-filter-drawer {
    z-index: 4100 !important;
}

.offcanvas-backdrop.show {
    z-index: 4090 !important;
}

.search-sort-popover,
.search-sort-sheet {
    z-index: 3900 !important;
}

.search-active-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: -4px 0 18px;
}

.search-active-filter {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(11, 31, 77, .22);
    background: var(--jj-blue-soft);
    color: var(--jj-deep);
    font-size: .82rem;
    font-weight: 850;
    text-decoration: none;
}

.search-active-filter:hover,
.search-active-filter:focus {
    background: #e8eef8;
    color: var(--jj-deep);
}

.search-active-clear {
    color: var(--jj-muted);
    font-size: .82rem;
    font-weight: 850;
    text-decoration: none;
}

.search-active-clear:hover {
    color: var(--jj-blue);
}

#searchProductsGrid > [class*="col-"] .card {
    border-radius: var(--jj-radius-md);
    overflow: hidden;
    transition: transform var(--jj-fast), box-shadow var(--jj-fast), border-color var(--jj-fast);
}

#searchResultsContainer {
    position: relative;
}

.search-loading-state {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    display: none;
    align-items: center;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(11, 31, 77, .92);
    color: #fff;
    font-size: .82rem;
    font-weight: 850;
    box-shadow: var(--jj-shadow-sm);
}

#searchResultsContainer.is-loading .search-loading-state {
    display: inline-flex;
}

#searchResultsContainer.is-loading #searchProductsGrid,
#searchResultsContainer.is-loading #searchPaginationWrapper {
    opacity: .52;
    pointer-events: none;
}

.catalog-product-card {
    min-height: 100%;
    border: 1px solid var(--jj-line);
    background: #fff;
}

.catalog-product-media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: linear-gradient(135deg, #f8fbff, #eef4ff);
}

.catalog-product-media img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    transition: transform .28s ease;
}

.catalog-product-card:hover .catalog-product-media img {
    transform: scale(1.045);
}

.catalog-stock-pill {
    position: absolute;
    left: 10px;
    top: 10px;
    padding: 5px 9px;
    border-radius: 999px;
    color: #fff;
    font-size: .68rem;
    font-weight: 950;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .14);
}

.catalog-stock-pill.is-available {
    background: #059669;
}

.catalog-stock-pill.is-unavailable {
    background: #64748b;
}

.catalog-card-brand {
    margin-bottom: 6px;
    color: var(--jj-blue);
    font-size: .68rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.catalog-product-card .card-title {
    min-height: 42px;
    margin-bottom: 8px;
    font-size: .95rem;
    line-height: 1.32;
}

.catalog-product-card .card-title a {
    color: var(--jj-ink);
    text-decoration: none;
}

.catalog-product-card .card-title a:hover {
    color: var(--jj-blue);
}

.catalog-card-refs {
    display: grid;
    gap: 2px;
    min-height: 38px;
}

.catalog-card-price {
    margin-top: auto;
    color: var(--jj-deep);
    font-size: 1.08rem;
    font-weight: 950;
}

.catalog-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
}

.catalog-card-actions .btn-link {
    padding-left: 0;
    color: var(--jj-muted);
    font-weight: 850;
    text-decoration: none;
}

.catalog-card-actions .btn-primary,
.catalog-card-actions .btn-secondary {
    min-width: 132px;
}

.catalog-empty-state {
    display: grid;
    place-items: center;
    min-height: 340px;
    padding: 44px 24px;
    border: 1px dashed #b9c8dc;
    border-radius: var(--jj-radius-lg);
    background:
        radial-gradient(circle at 50% 0%, rgba(11, 31, 77, .12), transparent 34%),
        #fff;
    text-align: center;
}

.catalog-empty-icon {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--jj-blue-soft);
    color: var(--jj-blue);
    font-size: 1.35rem;
}

.catalog-empty-state h2 {
    color: var(--jj-deep);
    font-size: 1.35rem;
    font-weight: 950;
}

.catalog-empty-state p {
    max-width: 420px;
    color: var(--jj-muted);
}

#searchProductsGrid > [class*="col-"] .card:hover {
    transform: translateY(-5px);
    border-color: rgba(11, 31, 77, .22) !important;
    box-shadow: var(--jj-shadow-md) !important;
}

#searchProductsGrid .card-img-top {
    background: var(--jj-soft);
}

#searchProductsGrid .fw-bold {
    color: var(--jj-deep);
}

.pdp-main-image-wrap,
.pdp-commercial-card,
.pdp-info-card,
.customer-space-panel,
.customer-space-sidebar {
    border-radius: var(--jj-radius-lg) !important;
}

.cart-line-modern {
    border: 1px solid #edf2f7;
    border-radius: var(--jj-radius-md);
    padding: 14px;
    background: #fff;
    transition: border-color var(--jj-fast), box-shadow var(--jj-fast);
}

.cart-line-modern:hover {
    border-color: rgba(11, 31, 77, .20);
    box-shadow: 0 10px 26px rgba(11, 31, 77, .07);
}

footer.bg-dark {
    margin-top: 3rem !important;
    padding-top: 2.4rem !important;
    padding-bottom: 1.7rem !important;
    background:
        radial-gradient(circle at 10% 0%, rgba(11, 31, 77, .25), transparent 30%),
        var(--jj-deep) !important;
}

footer h5 {
    font-size: .95rem;
    font-weight: 900;
}

footer p,
footer li,
footer a {
    font-size: .88rem;
}

@media (max-width: 991.98px) {
    .navbar {
        min-height: auto;
    }

    .search-filter-sidebar,
    .collection-filter-sidebar {
        position: static;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* TD SYNNEX-like public search page: this block is intentionally scoped so the
   global JJStore filter card styles do not leak into the catalog search. */
.td-synnex-search {
    padding-top: 28px !important;
}

.td-synnex-search .search-active-filters {
    display: none !important;
}

.td-synnex-search .search-catalog-layout {
    --bs-gutter-x: 16px;
}

.td-synnex-search .search-catalog-layout > aside {
    width: 264px;
    flex: 0 0 264px;
}

.td-synnex-search .search-catalog-layout > .col-lg-9 {
    width: calc(100% - 264px);
    flex: 0 0 calc(100% - 264px);
}

.td-synnex-search .search-filter-sidebar {
    position: static !important;
    top: auto !important;
    padding: 0 10px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.td-synnex-search .filter-within-box {
    margin-bottom: 14px;
}

.td-synnex-search .filter-within-box .form-label {
    margin-bottom: 6px;
    color: #111;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: none;
}

.td-synnex-search .filter-within-box .input-group {
    width: 100%;
}

.td-synnex-search .filter-within-box .form-control {
    min-height: 35px;
    padding: 4px 9px;
    border: 1px solid #d5dbe3;
    border-right: 0;
    border-radius: 0 !important;
    background: #fff;
    color: #111;
    font-size: 18px;
    box-shadow: none !important;
}

.td-synnex-search .filter-within-box .input-group-text {
    width: 38px;
    min-height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d5dbe3;
    border-left: 0;
    border-radius: 0 !important;
    background: #fff;
    color: #6b7280;
    font-size: 18px;
}

.td-synnex-search .filter-panel-actions {
    justify-content: flex-start;
    gap: 4px;
    padding: 2px 0 10px;
    border: 0 !important;
}

.td-synnex-search .filter-panel-actions .filter-clear-link {
    display: none !important;
}

.td-synnex-search .filter-stock-toggle {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #111;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

.td-synnex-search .filter-stock-toggle .form-check-input {
    position: absolute;
    right: 0;
    width: 28px;
    height: 16px;
    margin: 0;
    opacity: 0;
}

.td-synnex-search .filter-stock-toggle::after {
    content: "\00d7";
    width: 28px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 4px;
    margin-left: auto;
    border: 1px solid var(--jj-blue);
    border-radius: 999px;
    color: var(--jj-blue);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

.td-synnex-search .filter-stock-toggle:has(.form-check-input:checked)::after {
    content: "\2713";
    justify-content: flex-end;
    padding-left: 0;
    padding-right: 4px;
    background: var(--jj-blue);
    color: #fff;
}

.td-synnex-search .filter-advanced-title {
    margin-bottom: 4px;
    color: #111;
    font-size: 13px;
    font-weight: 850;
    text-transform: uppercase;
}

.td-synnex-search .advanced-filter-dot {
    width: 7px;
    height: 7px;
    display: inline-flex;
    border-radius: 999px;
    background: var(--jj-blue);
}

.td-synnex-search .sidebar-category-nav {
    margin: 4px 0 12px;
}

.td-synnex-search .sidebar-category-link {
    min-height: 34px;
    padding: 5px 0;
    gap: 9px;
    color: #111;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
}

.td-synnex-search .sidebar-category-link i {
    width: 12px;
    flex: 0 0 12px;
    margin-top: 3px;
    color: #111;
    font-size: 10px;
}

.td-synnex-search .catalog-category-navigation {
    margin: 8px 0 14px;
    color: #242b33;
}

.td-synnex-search .catalog-category-root__toggle {
    width: 100%;
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 0;
    border: 0;
    background: transparent;
    color: #1f2933;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
}

.td-synnex-search .catalog-category-root__toggle i {
    width: 12px;
    flex: 0 0 12px;
    font-size: 10px;
    transition: transform .18s ease;
}

.td-synnex-search .catalog-category-root__toggle.collapsed i {
    transform: rotate(-90deg);
}

.td-synnex-search .catalog-category-root__content {
    padding: 5px 0 0 10px;
}

.td-synnex-search .catalog-category-node__link {
    min-height: 30px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px 6px 0;
    color: #343a40;
    font-size: 13px;
    line-height: 1.35;
    text-decoration: none;
}

.td-synnex-search .catalog-category-node__link.is-group {
    min-height: 34px;
    font-size: 15px;
    font-weight: 800;
}

.td-synnex-search .catalog-category-node__link.is-leaf {
    font-weight: 400;
}

.td-synnex-search .catalog-category-node__link:hover,
.td-synnex-search .catalog-category-node__link:focus,
.td-synnex-search .catalog-category-node__link.is-active {
    background: #eef2f3;
    color: var(--jj-blue);
}

.td-synnex-search .catalog-category-node__name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.td-synnex-search .catalog-category-node__count {
    flex: 0 0 auto;
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
}

.td-synnex-search .catalog-category-node__link.is-group .catalog-category-node__count {
    font-size: 13px;
}

.td-synnex-search .catalog-category-node__children {
    padding-left: 0;
}

.td-synnex-search .catalog-category-node--level-2 > .catalog-category-node__link {
    padding-left: 0;
}

.td-synnex-search .catalog-category-node--level-3 > .catalog-category-node__link,
.td-synnex-search .catalog-category-node--level-4 > .catalog-category-node__link {
    padding-left: 12px;
}

.td-synnex-search .desktop-filter-section {
    padding: 11px 0 12px !important;
    border: 0 !important;
}

.td-synnex-search .desktop-filter-toggle {
    min-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    padding: 0 !important;
    color: #111 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.25;
}

.td-synnex-search .desktop-filter-toggle i {
    width: 12px;
    flex: 0 0 12px;
    margin-top: 0;
    color: #111;
    font-size: 10px;
}

.td-synnex-search .filter-list {
    padding: 5px 0 0 10px !important;
}

.td-synnex-search .filter-check-row,
.td-synnex-search .filter-radio-row {
    min-height: 30px;
    padding: 6px 8px 6px 0;
    border: 0 !important;
    border-radius: 0;
    color: #111;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.25;
}

.td-synnex-search .filter-check-row:hover,
.td-synnex-search .filter-radio-row:hover {
    background: transparent;
    color: var(--jj-blue);
}

.td-synnex-search .filter-check-row .form-check-input,
.td-synnex-search .filter-radio-row .form-check-input {
    width: 16px;
    height: 16px;
    margin-top: 1px;
    border-radius: 2px;
    border-color: #9aa6b2;
}

.td-synnex-search .filter-check-row .text-muted,
.td-synnex-search .filter-radio-row .text-muted {
    color: #4b5563 !important;
    font-size: 12px;
}

.td-synnex-search .search-filter-drawer .accordion-button {
    min-height: 34px;
    justify-content: flex-start;
    padding: 5px 0;
    border: 0;
    background: transparent;
    color: #111;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
}

.td-synnex-search .search-filter-drawer .accordion-button::after {
    order: -1;
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    margin: 0 9px 0 0;
    background-size: 12px;
}

.td-synnex-search .search-filter-drawer .accordion-item {
    border: 0;
    background: transparent;
}

.td-synnex-search .search-filter-drawer .accordion-body {
    padding: 5px 0 0 10px;
}

.td-synnex-search .desktop-filter-section .input-group-text,
.td-synnex-search .desktop-filter-section .form-control {
    min-height: 34px;
    border-radius: 0 !important;
    font-size: 15px;
}

.td-synnex-search .desktop-filter-section .form-label {
    color: #334155;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .08em;
}

.td-synnex-search .td-price-range-visual {
    position: relative;
    height: 34px;
    margin: 12px 22px 4px;
}

.td-synnex-search .td-price-range-visual::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 15px;
    height: 7px;
    border-radius: 999px;
    background: var(--jj-blue);
}

.td-synnex-search .td-price-range-visual span {
    position: absolute;
    top: 4px;
    width: 22px;
    height: 22px;
    border: 2px solid var(--jj-blue);
    border-radius: 50%;
    background: #fff;
}

.td-synnex-search .td-price-range-visual span:first-child {
    left: -11px;
}

.td-synnex-search .td-price-range-visual span:last-child {
    right: -11px;
}

.td-synnex-search .td-dual-range {
    position: relative;
    height: 22px;
    margin: 6px 8px 3px;
}

.td-synnex-search .td-dual-range__track {
    position: absolute;
    inset: 9px 0 auto;
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: #d7dee7;
}

.td-synnex-search .td-dual-range__track span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    border-radius: inherit;
    background: var(--jj-blue);
}

.td-synnex-search .td-dual-range input[type="range"] {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 22px;
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    pointer-events: none;
}

.td-synnex-search .td-dual-range input[type="range"]:last-child {
    z-index: 3;
}

.td-synnex-search .td-dual-range input[type="range"]::-webkit-slider-runnable-track {
    height: 3px;
    background: transparent;
}

.td-synnex-search .td-dual-range input[type="range"]::-webkit-slider-thumb {
    width: 14px;
    height: 14px;
    margin-top: -5.5px;
    border: 2px solid var(--jj-blue);
    border-radius: 50%;
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .16);
    cursor: grab;
    pointer-events: auto;
}

.td-synnex-search .td-dual-range input[type="range"]::-moz-range-track {
    height: 3px;
    border: 0;
    background: transparent;
}

.td-synnex-search .td-dual-range input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: 2px solid var(--jj-blue);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .16);
    cursor: grab;
    pointer-events: auto;
}

.td-synnex-search .td-dual-range input[type="range"]:focus-visible {
    outline: none;
}

.td-synnex-search .td-dual-range input[type="range"]:focus-visible::-webkit-slider-thumb {
    outline: 3px solid rgba(0, 96, 96, .25);
    outline-offset: 2px;
}

.td-synnex-search .td-dual-range input[type="range"]:active::-webkit-slider-thumb {
    cursor: grabbing;
}

.td-synnex-search .td-price-inputs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    width: 100%;
}

.td-synnex-search .td-price-inputs .form-control {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: 4px 6px;
    border: 1px solid #d5dbe3;
    border-radius: 0 !important;
    color: #111;
    font-size: 17px;
    text-align: left;
    box-shadow: none !important;
}

@media (max-width: 991.98px) {
    .td-synnex-search .search-catalog-layout > aside,
    .td-synnex-search .search-catalog-layout > .col-lg-9 {
        width: 100%;
        flex: 0 0 100%;
    }
}

/* Public header refactor inspired by professional IT distributor portals. */
.jj-public-header {
    background: #fff;
    border-bottom: 0;
    box-shadow: 0 10px 24px rgba(11, 31, 77, .08);
}

.jj-public-header-main {
    position: relative;
    z-index: 4300;
    background: #fff;
    border-bottom: 1px solid rgba(219, 229, 243, .95);
}

.jj-public-header-row {
    min-height: 74px;
    display: grid;
    grid-template-columns: auto minmax(280px, 1fr) auto;
    align-items: center;
    gap: 24px;
}

.jj-public-header-brand {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    color: var(--jj-deep) !important;
    font-size: 1.38rem;
    font-weight: 950;
    letter-spacing: -.05em;
    white-space: nowrap;
}

.jj-public-header-brand i { color: var(--jj-blue) !important; }

.jj-public-header-main .jj-header-search-wrap {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    flex: 1 1 auto;
}

.jj-public-header-main .jj-header-search__form {
    min-height: 40px;
    border-width: 1px;
    border-color: #cfd8e6 !important;
    border-radius: 999px;
    background: #f8fafc;
    box-shadow: none !important;
}

.jj-public-header-main .jj-header-search__form:focus-within {
    background: #fff;
    border-color: var(--jj-blue) !important;
    box-shadow: 0 0 0 4px rgba(11, 31, 77, .10) !important;
}

.jj-public-header-main .jj-header-search__button {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    background: var(--jj-deep) !important;
    box-shadow: none !important;
}

.jj-public-header-actions {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    white-space: nowrap;
}

.jj-public-register-btn {
    min-height: 38px;
    padding: .42rem .8rem;
    border-radius: 999px !important;
    font-size: .8rem;
    font-weight: 900;
}

.jj-public-mobile-toggle {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: var(--jj-blue-soft);
    color: var(--jj-deep);
}

.jj-public-catalog-nav {
    position: relative;
    z-index: 3000;
    background: var(--jj-deep);
}

.jj-public-catalog-nav .container {
    position: relative;
}

.jj-public-catalog-scroll {
    min-height: 42px;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 2px;
    overflow: visible;
}

.jj-public-catalog-item { position: relative; }

.jj-public-catalog-item.has-menu {
    position: static;
}

.jj-public-catalog-link {
    height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    color: rgba(255, 255, 255, .94);
    font-size: .92rem;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--jj-fast), color var(--jj-fast);
}

.jj-public-catalog-link:hover,
.jj-public-catalog-link:focus,
.jj-public-catalog-link:focus-visible,
.jj-public-catalog-item:hover .jj-public-catalog-link,
.jj-public-catalog-item:focus-within .jj-public-catalog-link {
    background: rgba(255, 255, 255, .10);
    color: #fff;
}

.jj-public-catalog-link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -3px;
}

.jj-public-catalog-link i { font-size: .65rem; opacity: .78; }

.jj-public-catalog-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    width: 100%;
    max-width: 100%;
    padding: 22px 24px 18px;
    border: 1px solid rgba(11, 31, 77, .14);
    border-top: 0;
    border-radius: 0 0 2px 2px;
    background: #fff;
    box-shadow: 0 18px 34px rgba(11, 31, 77, .14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity var(--jj-fast), transform var(--jj-fast), visibility var(--jj-fast);
}

.jj-public-catalog-dropdown.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.jj-public-catalog-dropdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #eef2f7;
}

.jj-public-catalog-dropdown-head strong {
    color: var(--jj-deep);
    font-size: 1rem;
    font-weight: 950;
}

.jj-public-catalog-dropdown-head a,
.jj-public-catalog-group-title,
.jj-public-catalog-sub a { text-decoration: none; }

.jj-public-catalog-dropdown-head a {
    color: var(--jj-blue);
    font-size: .78rem;
    font-weight: 900;
}

.jj-public-catalog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
}

.jj-public-catalog-grid--mega {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 26px;
}

.jj-public-catalog-column {
    min-width: 0;
}

.jj-public-catalog-group-title,
.jj-public-catalog-sub a,
.jj-public-mobile-link,
.jj-public-mobile-direct,
.jj-public-mobile-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.jj-public-catalog-group-title {
    min-height: 26px;
    margin: 0;
    padding: 0;
    border-radius: 0;
    color: var(--jj-ink);
    font-size: .92rem;
    font-weight: 900;
}

.jj-public-catalog-group-title:hover,
.jj-public-catalog-sub a:hover {
    background: transparent;
    color: var(--jj-deep);
}

.jj-public-catalog-group-title small,
.jj-public-catalog-sub small,
.jj-public-mobile-link small {
    color: var(--jj-muted);
    font-size: .72rem;
    font-weight: 850;
}

.jj-public-catalog-sub {
    display: grid;
    gap: 4px;
    padding-left: 0;
    margin-top: 4px;
}

.jj-public-catalog-sub a {
    min-height: 22px;
    padding: 0;
    border-radius: 0;
    color: var(--jj-copy);
    font-size: .86rem;
    font-weight: 500;
}

.jj-public-mobile-panel {
    border-top: 1px solid var(--jj-line);
    background: #fff;
}

.jj-public-mobile-catalog .accordion-item { border-color: #eef2f7; }

.jj-public-mobile-catalog .accordion-button,
.jj-public-mobile-direct {
    min-height: 44px;
    padding: 12px 0;
    background: #fff;
    color: var(--jj-ink);
    font-weight: 900;
    box-shadow: none;
}

.jj-public-mobile-catalog .accordion-body { padding: 4px 0 12px; }

.jj-public-mobile-link,
.jj-public-mobile-all,
.jj-public-mobile-direct {
    border-radius: 10px;
    color: var(--jj-copy);
    text-decoration: none;
}

.jj-public-mobile-link,
.jj-public-mobile-all {
    min-height: 36px;
    padding: 8px 10px;
}

.jj-public-mobile-link-child {
    padding-left: 24px;
    color: var(--jj-muted);
}

.jj-public-mobile-link:hover,
.jj-public-mobile-all:hover,
.jj-public-mobile-direct:hover {
    background: var(--jj-blue-soft);
    color: var(--jj-deep);
}

@media (max-width: 1199.98px) {
    .jj-public-header-row { gap: 14px; }
    .jj-public-header-actions { gap: 2px; }
    .jj-public-register-btn { display: none; }
}

@media (max-width: 991.98px) {
    .jj-public-header-row {
        min-height: auto;
        grid-template-columns: 1fr auto;
        gap: 10px;
        padding: 10px 0;
    }

    .jj-public-header-main .jj-header-search-wrap {
        grid-column: 1 / -1;
        grid-row: 2;
        max-width: none;
        order: initial;
        margin: 0;
    }

    .jj-public-header-actions { justify-self: end; }
    .jj-locale-trigger span { display: none; }
    .jj-mini-cart-trigger { margin-right: 0 !important; }
}

@media (max-width: 575.98px) {
    .jj-public-header .jj-account-dropdown-guest .jj-account-trigger {
        width: 40px;
        min-width: 40px;
        max-width: 40px;
        padding: 0;
        justify-content: center;
    }

    .jj-public-header .jj-account-dropdown-guest .jj-account-label,
    .jj-public-header .jj-account-dropdown-guest .jj-account-chevron {
        display: none;
    }

    .jj-public-header .jj-locale-dropdown {
        margin-right: 0;
    }
}


/* -- Header brands multi-level menu ------------------ */
.jj-public-catalog-button {
    border: 0;
    background: transparent;
    appearance: none;
    cursor: pointer;
}

.jj-brands-nav-item {
    isolation: isolate;
}

.jj-brands-mega {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 3200;
    display: grid;
    grid-template-columns: 320px minmax(620px, 1fr);
    min-width: min(1120px, calc(100vw - 32px));
    min-height: 455px;
    max-width: calc(100vw - 32px);
    border: 1px solid var(--jj-line);
    border-top: 0;
    border-radius: 0 0 18px 18px;
    background: #fff;
    box-shadow: 0 24px 54px rgba(11, 31, 77, .18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity var(--jj-fast), transform var(--jj-fast), visibility var(--jj-fast);
}

.jj-brands-mega.is-open,
.jj-brands-nav-item:hover .jj-brands-mega,
.jj-brands-nav-item:focus-within .jj-brands-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.jj-brands-mega.opens-left {
    left: auto;
    right: 0;
}

.jj-brands-mega__primary,
.jj-brands-mega__secondary {
    padding: 18px;
}

.jj-brands-mega__primary {
    border-right: 1px solid #edf2f7;
}

.jj-brands-mega__title {
    padding: 4px 10px 12px;
    color: var(--jj-deep);
    font-size: .82rem;
    font-weight: 950;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.jj-brands-mega__row {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--jj-copy);
    font-size: .9rem;
    font-weight: 850;
    text-align: left;
    transition: background var(--jj-fast), color var(--jj-fast), transform var(--jj-fast);
}

.jj-brands-mega__row span {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.jj-brands-mega__row i:first-child {
    width: 18px;
    color: var(--jj-deep);
    opacity: .82;
    text-align: center;
}

.jj-brands-mega__row i:last-child {
    font-size: .68rem;
    opacity: .58;
}

.jj-brands-mega__row:hover,
.jj-brands-mega__row:focus,
.jj-brands-mega__row.is-active {
    background: var(--jj-blue-soft);
    color: var(--jj-deep);
    outline: none;
}

.jj-brands-mega__row:focus-visible,
.jj-brands-mega__links a:focus-visible {
    outline: 2px solid rgba(11, 31, 77, .35);
    outline-offset: 2px;
}

.jj-brands-mega__secondary {
    min-height: 100%;
}

.jj-brands-mega__branch {
    display: none;
}

.jj-brands-mega__branch.is-active {
    display: block;
}

.jj-brands-mega__branch-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 4px 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid #edf2f7;
}

.jj-brands-mega__branch-head strong {
    color: var(--jj-deep);
    font-size: .95rem;
    font-weight: 950;
}

.jj-brands-mega__branch-head a {
    color: var(--jj-deep);
    font-size: .76rem;
    font-weight: 900;
    text-decoration: none;
}

.jj-brands-mega__links {
    display: grid;
    gap: 3px;
}

.jj-brands-mega__branch[data-branch-key="brands"] .jj-brands-mega__links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 26px;
}

.jj-brands-mega__links a,
.jj-brands-mega__empty {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--jj-copy);
    font-size: .88rem;
    font-weight: 800;
    text-decoration: none;
    transition: background var(--jj-fast), color var(--jj-fast), transform var(--jj-fast);
}

.jj-brands-mega__links a:hover,
.jj-brands-mega__links a:focus,
.jj-brands-mega__links a.is-all {
    background: var(--jj-blue-soft);
    color: var(--jj-deep);
}

.jj-brands-mega__links a:hover {
    transform: translateX(2px);
}

.jj-brands-mega__links small {
    color: var(--jj-muted);
    font-size: .72rem;
    font-weight: 850;
}

.jj-brands-mega__empty {
    color: var(--jj-muted);
}

.jj-public-mobile-nested {
    border-top: 1px solid #eef2f7;
    margin-top: 8px;
    max-width: 100%;
    overflow-x: hidden;
}

.jj-public-mobile-nested .accordion-button {
    min-height: 42px;
    padding: 10px 4px;
    font-size: .9rem;
}

.jj-public-mobile-all-link {
    color: var(--jj-deep) !important;
    font-weight: 950 !important;
}

.brand-index-card {
    min-height: 104px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--jj-line);
    border-radius: 18px;
    background: #fff;
    color: var(--jj-deep);
    text-decoration: none;
    box-shadow: var(--jj-shadow-sm);
    transition: transform var(--jj-fast), box-shadow var(--jj-fast), border-color var(--jj-fast);
}

.brand-index-card:hover,
.brand-index-card:focus {
    transform: translateY(-3px);
    border-color: rgba(11, 31, 77, .28);
    box-shadow: var(--jj-shadow-md);
    color: var(--jj-deep);
}

.brand-index-card__name {
    font-size: 1rem;
    font-weight: 950;
}

.brand-index-card small {
    color: var(--jj-muted);
    font-weight: 800;
}