html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link { color: #006bb7; }

.btn-primary { color:#fff; background-color:#1b6ec2; border-color:#1861ac; }
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow:0 0 0 0.1rem #fff,0 0 0 0.25rem #258cfb; }

h1:focus { outline:none; }

.blazor-error-boundary { background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem,#b32121; padding:1rem 1rem 1rem 3.7rem; color:#fff; }

/* Home page section kicker (matches aw-kicker / pp-kicker pattern) */
.hp-kicker {
    display: inline-block;
    color: #76b900;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* Shared gradient background for product & canine cards */
/* Visible border immediately (no hover needed) */
.product-card, .canine-card { background:linear-gradient(180deg,#0b0d14 0%,#0b1528 55%,#091a33 100%); border:1px solid rgba(255,255,255,.25)!important; }
/* Slightly brighter on hover for feedback */
.product-card:hover, .canine-card:hover { border-color:rgba(255,255,255,.45)!important; }

/* Product & Contact badge shared base look */
.product-badge, .contact-badge {
    background: linear-gradient(180deg,#0d57b8 0%,#0043a3 55%,#003477 100%);
    color:#fff;
    border-radius:12px; /* rounded rectangle */
    border:1px solid #063c87;
    box-shadow:0 0 0 1px rgba(255,255,255,0.07) inset,
               0 2px 4px rgba(0,0,0,.6),
               0 4px 12px -2px rgba(0,64,170,.55),
               0 0 0 4px rgba(0,64,170,.15);
    letter-spacing:.5px;
    text-transform:uppercase;
    font-weight:600;
    line-height:1.1;
    padding:.55rem 1.25rem;
    position:relative;
    display:inline-block;
    text-decoration:none;
}
/* Darker gradient just for product badge */
.product-badge { 
    background: linear-gradient(180deg,#08346f 0%,#032b5d 55%,#021f45 100%);
    border-color:#042954;
    box-shadow:0 0 0 1px rgba(255,255,255,0.06) inset,
               0 2px 4px rgba(0,0,0,.7),
               0 4px 12px -2px rgba(0,42,120,.55),
               0 0 0 4px rgba(0,42,120,.22);
}
/* Keep contact highlight at top (original) */
.contact-badge::before { 
    content:"";
    position:absolute; inset:1px 1px auto 1px; height:45%; border-radius:10px;
    background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));
    pointer-events:none;
}
/* Bottom highlight for product */
.product-badge::before { 
    content:"";
    position:absolute; inset:auto 1px 1px 1px; height:45%; border-radius:10px;
    background:linear-gradient(0deg,rgba(255,255,255,.35),rgba(255,255,255,0));
    pointer-events:none;
}
.product-badge:hover, .contact-badge:hover { box-shadow:0 0 0 1px rgba(255,255,255,0.09) inset,
                                 0 3px 6px rgba(0,0,0,.65),
                                 0 4px 14px -2px rgba(0,90,255,.65),
                                 0 0 0 4px rgba(0,80,190,.25); }
.product-badge:active, .contact-badge:active { transform:translateY(1px); box-shadow:0 0 0 1px rgba(255,255,255,0.05) inset,0 2px 4px rgba(0,0,0,.55),0 2px 8px -2px rgba(0,60,170,.5),0 0 0 3px rgba(0,64,170,.2); }

/* Products nav link bigger */
.products-link { font-size:1.05rem; font-weight:600; }

/* Tagline styling for canine cards */
.canine-tagline { font-size:.72rem; line-height:1.15rem; background:linear-gradient(90deg,rgba(0,0,0,.85),rgba(0,0,0,.55)); border-radius:.35rem; color:#d5dbe3; }
.canine-tagline span { color:#b9c4d3; }

/* Hover animation */
.product-card, .canine-card { transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease; will-change:transform; }
.product-card:hover, .canine-card:hover { transform:translateY(-4px); box-shadow:0 .75rem 1.5rem -0.25rem rgba(0,0,0,.6); }
.product-card:focus-visible, .canine-card:focus-visible { outline:2px solid #258cfb; outline-offset:2px; }
.product-card img, .canine-card img { transition:transform .5s ease; }
.product-card:hover img, .canine-card:hover img { transform:scale(1.06); }
    
/* Desktop-only fixed footer */
@media (min-width: 992px) {
  .footer-desktop-fixed { position:fixed; left:0; right:0; bottom:0; z-index:1030; }
}
/* Small baseline zoom for images with excessive transparent padding */
.canine-card .image-zoom-sm { transform:scale(1.62); transition:transform .5s ease; }
.canine-card:hover .image-zoom-sm { transform:scale(1.72); }

/* ============================================================
   Shared theme for Unit pages (Badgers, Coyotes, Grey Wolves,
   Wild Dogs, Wolverines). Mirrors the AboutWolf visual language:
   dark hero with glow, green chips/kickers, glass cards, and
   gradient pill buttons. The site-wide dark gradient backdrop
   comes from .layout-shell globally.
   ============================================================ */
.unit-hero {
    position: relative;
}

/* Rounded, inset hero card — matches the .cat-shell / .unit-panel theme
   instead of the old full-bleed banner. The banner image and dark overlay
   now live on the inner container so the corners can be clipped. */
.unit-hero > .container {
    position: relative;
    z-index: 1;
    overflow: hidden;
    isolation: isolate;
    padding: 2.75rem 2rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.5rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
    background-color: #050d18;
    background-image:
        linear-gradient(90deg, rgba(5, 13, 24, 0.97) 0%, rgba(7, 19, 31, 0.92) 45%, rgba(4, 9, 15, 0.82) 100%),
        var(--unit-hero-image);
    background-position: center, center right;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
}

.unit-breadcrumb {
    --bs-breadcrumb-divider: "/";
}

.unit-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.65);
}

.unit-chip,
.unit-kicker {
    display: inline-block;
    color: #76b900;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.unit-chip {
    padding: 0.45rem 0.75rem;
    border: 1px solid rgba(118, 185, 0, 0.35);
    border-radius: 999px;
    background: rgba(118, 185, 0, 0.08);
}

.unit-lead,
.unit-feature-card p,
.unit-panel p,
.unit-cta-card p {
    color: rgba(226, 232, 240, 0.80) !important;
}

.unit-btn-primary,
.unit-btn-secondary {
    border-radius: 999px;
    border-width: 1px;
}

.unit-btn-primary {
    color: #031018;
    background: linear-gradient(135deg, #76b900 0%, #9fd63b 100%);
    border-color: #9fd63b;
}

.unit-btn-primary:hover {
    color: #031018;
    background: linear-gradient(135deg, #88c71f 0%, #b0df58 100%);
    border-color: #b0df58;
}

.unit-btn-secondary {
    color: #dbeafe;
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(66, 165, 245, 0.35);
}

.unit-btn-secondary:hover {
    color: #fff;
    background: rgba(66, 165, 245, 0.12);
    border-color: rgba(66, 165, 245, 0.55);
}

.unit-feature-card,
.unit-panel,
.unit-cta-card,
.unit-pill {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 1.25rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(8px);
}

.unit-feature-card {
    padding: 1.5rem;
}

.unit-panel,
.unit-cta-card {
    padding: 1.75rem;
}

.unit-feature-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    font-size: 1.35rem;
    color: #9fd63b;
    background: rgba(118, 185, 0, 0.12);
    border: 1px solid rgba(118, 185, 0, 0.22);
}

.unit-list {
    color: rgba(226, 232, 240, 0.78);
}

.unit-list li {
    margin-bottom: 0.5rem;
}

.unit-list li::marker {
    color: #76b900;
}

.unit-hero-visual {
    position: relative;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}

.unit-hero-glow {
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(33, 150, 243, 0.28) 0%, rgba(33, 150, 243, 0.08) 45%, transparent 72%);
    filter: blur(10px);
    z-index: 0;
}

.unit-hero-image {
    position: relative;
    z-index: 1;
    max-height: 280px;
    object-fit: contain;
    filter: drop-shadow(0 25px 45px rgba(0, 0, 0, 0.5));
}

.unit-pill {
    padding: 0.6rem 1rem;
    font-weight: 600;
    color: #e2e8f0;
    text-align: center;
    border-radius: 999px;
}

.unit-contact-label {
    color: rgba(226, 232, 240, 0.72);
}

@media (min-width: 992px) {
    .py-lg-6 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }
}

@media (max-width: 575.98px) {
    .unit-panel,
    .unit-cta-card,
    .unit-feature-card {
        padding: 1.25rem;
    }
}

/* Prevent the onWebChat launcher container from blocking unrelated hover/click targets. */
#onwebchat_chatimage_div {
    pointer-events: none !important;
}

#onwebchat_chatimage_div img,
#onwebchat_chatimage_div button,
#onwebchat_chatimage_div a,
#onwebchat_chatimage_div [role="button"],
#onwebchat_chatimage_div [onclick] {
    pointer-events: auto !important;
}

/* ============================================================
   Shared product-category data table (3U/6U VPX, XMC, VNX+,
   Dev & RTM). Themed to match the frosted-glass navy
   CategoryPageHeader (deep-navy gradient + blue/green accents).
   The header stays sticky and pins to the top of the viewport
   (top:0) while scrolling — the site header is position:relative and
   scrolls away, and no overflow container is used so the
   viewport-relative sticky keeps working.
   ============================================================ */
.category-table {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse; /* flush sticky header — no gap above it */
    overflow: visible; /* keep viewport sticky header working */
    background: linear-gradient(180deg, rgba(10, 22, 38, 0.65) 0%, rgba(7, 18, 30, 0.65) 100%);
    --bs-table-bg: transparent;
    --bs-table-color: rgba(226, 232, 240, 0.85);
}
.category-table th,
.category-table td { border: 0; }

/* Horizontal scroll container: the wide table scrolls on the X axis only.
   No max-height/overflow-y, so the table grows to its full height and the
   page handles vertical scrolling (and the thead stays sticky to the
   viewport as before). */
.category-table-scroll {
    overflow-x: auto;
    border-radius: 0.5rem;
}
.category-table-scroll::-webkit-scrollbar { height: 8px; }
.category-table-scroll::-webkit-scrollbar-thumb {
    background: rgba(66, 165, 245, 0.45);
    border-radius: 4px;
}
.category-table-scroll::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); }

/* Sticky, opaque themed header. The site header (.sth-header) is
   position:relative and scrolls away, so the table header pins to the
   top of the viewport (top:0) — any positive offset would leave a gap
   where rows show through above the pinned header. */
.category-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #0a1726; /* opaque is required for a sticky header */
    color: rgba(226, 232, 240, 0.92);
    font-size: .7rem;
    letter-spacing: .5px;
    text-transform: uppercase;
    vertical-align: top;
    padding: .6rem .55rem;
    box-shadow: inset 0 -1px 0 rgba(66, 165, 245, 0.30);
}
.category-table thead th.open-col { z-index: 50; }
.category-table .dropdown-menu.filter-dropdown-menu { z-index: 2000; }
.category-table thead th .filter-dropdown-menu { top: 100% !important; margin-top: 12px; }

/* Sort + filter controls */
.category-table .sort-btn {
    background: none;
    border: 0;
    padding: 0;
    color: rgba(226, 232, 240, 0.92);
    font-weight: 600;
    font-size: .7rem;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .5px;
    line-height: 1.1;
    transition: color .15s ease;
}
.category-table .sort-btn:hover { color: #42a5f5; text-decoration: none; }
.category-table .column-search-toggle,
.category-table .column-filter-toggle { font-size: .7rem; line-height: 1; vertical-align: top; }
.category-table .column-filter-toggle { color: rgba(226, 232, 240, 0.55); }
.category-table .column-filter-toggle:hover { color: #76b900; }
.category-table thead .badge.bg-info { background-color: #76b900 !important; color: #06210a !important; }
.category-table .table-col-search { font-size: .65rem; }
.category-table .table-col-search:focus { box-shadow: 0 0 0 .15rem rgba(66, 165, 245, 0.35); }

/* Body cells + zebra striping (deep navy, frosted) */
.category-table tbody td {
    font-size: .75rem;
    vertical-align: middle;
    padding: .5rem .55rem;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    transition: background-color .15s ease, box-shadow .15s ease;
}
.category-table tbody tr:first-child > td { border-top: 0; }
.category-table tbody tr:nth-child(odd) > td { background-color: rgba(9, 17, 28, 0.55); }
.category-table tbody tr:nth-child(even) > td { background-color: rgba(13, 25, 40, 0.55); }
.category-table tbody tr.product-row { cursor: pointer; }
.category-table tbody tr.product-row:hover > td {
    background-color: rgba(33, 150, 243, 0.12) !important;
    box-shadow: inset 0 1px 0 rgba(66, 165, 245, 0.25), inset 0 -1px 0 rgba(66, 165, 245, 0.25);
}

/* Wolf No. links use the theme accent colors */
.category-table a.link-primary { color: #42a5f5 !important; }
.category-table a.link-primary:hover { color: #76b900 !important; }

.category-table .breadcrumb { --bs-breadcrumb-divider: "/"; }
.category-table .breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, 0.65); }

/* Responsive: tighten typography/spacing on smaller screens without
   adding an overflow container (which would break the sticky header). */
@media (max-width: 991.98px) {
    .category-table thead th { padding: .5rem .4rem; }
    .category-table tbody td { padding: .45rem .4rem; font-size: .7rem; }
}
@media (max-width: 575.98px) {
    .category-table thead th { font-size: .62rem; padding: .4rem .3rem; }
    .category-table .sort-btn { font-size: .62rem; }
    .category-table tbody td { font-size: .66rem; padding: .4rem .3rem; }
}

.filter-dropdown-menu { font-size:.65rem; text-transform:none; letter-spacing:normal; }
.filter-dropdown-menu .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    line-height: 1;
    padding: 0;
}
.filter-dropdown-menu .form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 0;
    margin-left: 0;
}
.filter-dropdown-menu .form-check-label {
    margin: 0;
    line-height: 1;
    display: flex;
    align-items: center;
}
.filter-dropdown-menu .filter-group-item {
    padding-left: .75rem;
}
.filter-dropdown-menu .form-check-input { width:.9rem; height:.9rem; margin:0; align-self:center; margin-left:0; }
.filter-dropdown-menu::-webkit-scrollbar { width:6px; }
.filter-dropdown-menu::-webkit-scrollbar-thumb { background:#333; border-radius:3px; }