/* Closed-preview catalogue navigation, 2026-11-10.
 * Every rule requires a new ad-catalog-node/row: legacy catalogues, search,
 * filters and the surrounding page are outside this stylesheet.
 *
 * Renderer contract:
 * li.ad-catalog-node[data-ad-site=main|truck][data-ad-mode=...][data-ad-depth]
 *   > .ad-catalog-row > .ad-catalog-number + .ad-catalog-label + .ad-catalog-icon
 * Truck brand uses > details.truck-brand-node > summary.ad-catalog-row.
 * A branch is-open/native active; a terminal link is-current/aria-current=page.
 * The native mobile general catalogue still owns its paged UL positioning,
 * transitions, .showed state and back controls. Do not restyle those ULs here.
 *
 * Scoped !important resets intentionally defeat these legacy rules:
 * .cat li.active .subcat-title; .cat .cat-level3 li a:before;
 * .cat .cat-level3 ul { display:none!important }; .cat li i;
 * .brand_search ...active .brand-category-label (including mobile !important);
 * body .catalog_menu ul li/a; .catalog_menu li.opened > ul::after;
 * .truck-brand-node > summary::after and native summary markers.
 */

li.ad-catalog-node[data-ad-site][data-ad-mode][data-ad-depth] {
    --ad-accent: #a12222;
    --ad-accent-hover: #861b1b;
    --ad-soft: #f8e9e9;
    --ad-soft-border: #e5caca;
    --ad-pale: #fcf5f5;
    --ad-row-bg: #fff;
    --ad-row-fg: #27313a;
    --ad-row-border: #dedfe1;
    --ad-hover-bg: #fcf5f5;
    --ad-hover-fg: #a12222;
    --ad-focus: #a12222;
    --ad-row-height: 40px;
    --ad-row-pad-y: 8px;
    --ad-indent: 12px;
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    list-style: none;
    background: transparent !important;
    color: #27313a;
}

li.ad-catalog-node[data-ad-site="truck"][data-ad-mode][data-ad-depth] {
    --ad-accent: #073a53;
    --ad-accent-hover: #052d40;
    --ad-soft: #eaf2f6;
    --ad-soft-border: #cbdce5;
    --ad-pale: #f4f8fa;
    --ad-hover-bg: #f4f8fa;
    --ad-hover-fg: #073a53;
    --ad-focus: #073a53;
}

/* Each child LI resets row colours above. An open parent cannot tint its
 * descendants: only the direct row consumes that parent's state variables. */
li.ad-catalog-node[data-ad-site][data-ad-mode][data-ad-depth].is-open,
li.ad-catalog-node[data-ad-site][data-ad-mode][data-ad-depth].active,
li.ad-catalog-node[data-ad-site][data-ad-mode="truckbrand"][data-ad-depth] > details.truck-brand-node[open] {
    --ad-row-bg: var(--ad-pale);
    --ad-row-fg: var(--ad-accent);
    --ad-row-border: var(--ad-soft-border);
}

li.ad-catalog-node[data-ad-site][data-ad-mode][data-ad-depth="2"].is-open,
li.ad-catalog-node[data-ad-site][data-ad-mode][data-ad-depth="2"].active,
li.ad-catalog-node[data-ad-site][data-ad-mode="truckbrand"][data-ad-depth="2"] > details.truck-brand-node[open] {
    --ad-row-bg: var(--ad-soft);
}

li.ad-catalog-node[data-ad-site][data-ad-mode][data-ad-depth="1"].is-open,
li.ad-catalog-node[data-ad-site][data-ad-mode][data-ad-depth="1"].active,
li.ad-catalog-node[data-ad-site][data-ad-mode="truckbrand"][data-ad-depth="1"] > details.truck-brand-node[open] {
    --ad-row-bg: var(--ad-accent);
    --ad-row-fg: #fff;
    --ad-row-border: var(--ad-accent);
    --ad-hover-bg: var(--ad-accent-hover);
    --ad-hover-fg: #fff;
    --ad-focus: #fff;
}

li.ad-catalog-node[data-ad-site][data-ad-mode][data-ad-depth] > .ad-catalog-row,
li.ad-catalog-node[data-ad-site][data-ad-mode="truckbrand"][data-ad-depth] > details.truck-brand-node > .ad-catalog-row {
    position: relative;
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    gap: 7px;
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
    height: auto !important;
    min-height: var(--ad-row-height) !important;
    margin: 0 !important;
    padding: var(--ad-row-pad-y) 42px var(--ad-row-pad-y) 10px !important;
    border: 1px solid var(--ad-row-border) !important;
    border-top: 0 !important;
    border-radius: 0;
    background: var(--ad-row-bg) !important;
    color: var(--ad-row-fg) !important;
    font-family: inherit;
    font-size: 16px !important;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4 !important;
    text-align: left;
    text-transform: none;
    text-decoration: none !important;
    text-shadow: none;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
    list-style: none;
    cursor: pointer;
    transition: none;
    -webkit-appearance: none;
    appearance: none;
}

/* Terminal rows retain neutral surfaces even when native JS also sets active. */
li.ad-catalog-node[data-ad-site][data-ad-mode][data-ad-depth] > a.ad-catalog-row {
    padding-right: 10px !important;
    background: #fff !important;
    color: #27313a !important;
    border-color: #dedfe1 !important;
    font-weight: 400;
}

li.ad-catalog-node[data-ad-site][data-ad-mode][data-ad-depth="1"] > .ad-catalog-row,
li.ad-catalog-node[data-ad-site][data-ad-mode="truckbrand"][data-ad-depth="1"] > details.truck-brand-node > .ad-catalog-row {
    font-weight: 600;
}

/* Remove old triangles, decorative leaf elbows and summary plus glyphs.
 * The only branch affordance is the explicit, right-aligned icon below. */
li.ad-catalog-node[data-ad-site][data-ad-mode][data-ad-depth]::before,
li.ad-catalog-node[data-ad-site][data-ad-mode][data-ad-depth]::after,
li.ad-catalog-node[data-ad-site][data-ad-mode][data-ad-depth] > .ad-catalog-row::before,
li.ad-catalog-node[data-ad-site][data-ad-mode][data-ad-depth] > .ad-catalog-row::after,
li.ad-catalog-node[data-ad-site][data-ad-mode="truckbrand"][data-ad-depth] > details.truck-brand-node > .ad-catalog-row::before,
li.ad-catalog-node[data-ad-site][data-ad-mode="truckbrand"][data-ad-depth] > details.truck-brand-node > .ad-catalog-row::after,
li.ad-catalog-node[data-ad-site][data-ad-mode="desktop"][data-ad-depth] > ul::before,
li.ad-catalog-node[data-ad-site][data-ad-mode="desktop"][data-ad-depth] > ul::after,
li.ad-catalog-node[data-ad-site][data-ad-mode="brand"][data-ad-depth] > ul::before,
li.ad-catalog-node[data-ad-site][data-ad-mode="brand"][data-ad-depth] > ul::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
}

li.ad-catalog-node[data-ad-site][data-ad-mode="truckbrand"][data-ad-depth] > details.truck-brand-node {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

li.ad-catalog-node[data-ad-site][data-ad-mode="truckbrand"][data-ad-depth] > details.truck-brand-node > summary.ad-catalog-row::-webkit-details-marker {
    display: none;
}

li.ad-catalog-node[data-ad-site][data-ad-mode="truckbrand"][data-ad-depth] > details.truck-brand-node > summary.ad-catalog-row::marker {
    content: "";
}

/* Labels can wrap without pushing the number or icon out of its own row. */
li.ad-catalog-node[data-ad-site][data-ad-mode][data-ad-depth] > .ad-catalog-row > .ad-catalog-label,
li.ad-catalog-node[data-ad-site][data-ad-mode="truckbrand"][data-ad-depth] > details.truck-brand-node > .ad-catalog-row > .ad-catalog-label,
li.ad-catalog-node[data-ad-site][data-ad-mode="brand"][data-ad-depth] > .ad-catalog-row.brand-category-toggle > .ad-catalog-label.brand-category-label {
    display: block;
    flex: 1 1 auto !important;
    order: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: inherit !important;
    font: inherit;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* General catalogues: quieter root labels, with their numbers still bold.
 * Brand/truckbrand root labels retain the previous weight of 600. Explicit
 * label weight also covers a selected root link without changing its colour. */
li.ad-catalog-node[data-ad-site][data-ad-mode="desktop"][data-ad-depth="1"] > .ad-catalog-row,
li.ad-catalog-node[data-ad-site][data-ad-mode="mobile"][data-ad-depth="1"] > .ad-catalog-row,
li.ad-catalog-node[data-ad-site][data-ad-mode="desktop"][data-ad-depth="1"] > .ad-catalog-row > .ad-catalog-label,
li.ad-catalog-node[data-ad-site][data-ad-mode="mobile"][data-ad-depth="1"] > .ad-catalog-row > .ad-catalog-label {
    font-weight: 400;
}

li.ad-catalog-node[data-ad-site][data-ad-mode][data-ad-depth] > .ad-catalog-row > .ad-catalog-number,
li.ad-catalog-node[data-ad-site][data-ad-mode="truckbrand"][data-ad-depth] > details.truck-brand-node > .ad-catalog-row > .ad-catalog-number {
    display: block;
    flex: 0 0 2.5ch !important;
    order: 0;
    align-self: flex-start;
    width: 2.5ch;
    margin: 0;
    padding: 0;
    color: inherit !important;
    font: inherit;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

li.ad-catalog-node[data-ad-site][data-ad-mode][data-ad-depth] > .ad-catalog-row > .ad-catalog-icon,
li.ad-catalog-node[data-ad-site][data-ad-mode="truckbrand"][data-ad-depth] > details.truck-brand-node > .ad-catalog-row > .ad-catalog-icon {
    position: absolute !important;
    display: block !important;
    top: 50% !important;
    right: 10px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: auto !important;
    box-sizing: border-box;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid currentColor !important;
    border-radius: 1px;
    background: transparent !important;
    color: inherit !important;
    font: inherit;
    line-height: 1 !important;
    opacity: 1 !important;
    transform: translateY(-50%);
    pointer-events: none;
    transition: none !important;
}

li.ad-catalog-node[data-ad-site][data-ad-mode][data-ad-depth] > .ad-catalog-row > .ad-catalog-icon::before,
li.ad-catalog-node[data-ad-site][data-ad-mode][data-ad-depth] > .ad-catalog-row > .ad-catalog-icon::after,
li.ad-catalog-node[data-ad-site][data-ad-mode="truckbrand"][data-ad-depth] > details.truck-brand-node > .ad-catalog-row > .ad-catalog-icon::before,
li.ad-catalog-node[data-ad-site][data-ad-mode="truckbrand"][data-ad-depth] > details.truck-brand-node > .ad-catalog-row > .ad-catalog-icon::after {
    position: absolute !important;
    display: block !important;
    content: "" !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: 12px !important;
    height: 2px !important;
    border: 0 !important;
    margin: 0 !important;
    background: currentColor !important;
    transform: translate(-50%, -50%) !important;
}

li.ad-catalog-node[data-ad-site][data-ad-mode][data-ad-depth] > .ad-catalog-row > .ad-catalog-icon::after,
li.ad-catalog-node[data-ad-site][data-ad-mode="truckbrand"][data-ad-depth] > details.truck-brand-node > .ad-catalog-row > .ad-catalog-icon::after {
    width: 2px !important;
    height: 12px !important;
}

li.ad-catalog-node[data-ad-site][data-ad-mode][data-ad-depth] > .ad-catalog-row[aria-expanded="true"] > .ad-catalog-icon::after,
li.ad-catalog-node[data-ad-site][data-ad-mode][data-ad-depth].is-open > .ad-catalog-row > .ad-catalog-icon::after,
li.ad-catalog-node[data-ad-site][data-ad-mode="truckbrand"][data-ad-depth] > details.truck-brand-node[open] > .ad-catalog-row > .ad-catalog-icon::after {
    display: none !important;
}

/* Visibility belongs to this one node, never to any open ancestor. */
li.ad-catalog-node[data-ad-site][data-ad-mode="desktop"][data-ad-depth] > ul,
li.ad-catalog-node[data-ad-site][data-ad-mode="brand"][data-ad-depth] > ul,
li.ad-catalog-node[data-ad-site][data-ad-mode="truckbrand"][data-ad-depth] > details.truck-brand-node > ul {
    box-sizing: border-box;
    display: none !important;
    width: auto;
    margin: 0 !important;
    padding: 0 0 0 var(--ad-indent) !important;
    border: 0 !important;
    background: transparent !important;
    list-style: none;
}

li.ad-catalog-node[data-ad-site][data-ad-mode="desktop"][data-ad-depth].is-open > ul,
li.ad-catalog-node[data-ad-site][data-ad-mode="desktop"][data-ad-depth].active > ul,
li.ad-catalog-node[data-ad-site][data-ad-mode="brand"][data-ad-depth].is-open > ul,
li.ad-catalog-node[data-ad-site][data-ad-mode="brand"][data-ad-depth].active > ul,
li.ad-catalog-node[data-ad-site][data-ad-mode="truckbrand"][data-ad-depth] > details.truck-brand-node[open] > ul {
    display: block !important;
}

li.ad-catalog-node[data-ad-site][data-ad-mode][data-ad-depth].is-current > a.ad-catalog-row,
li.ad-catalog-node[data-ad-site][data-ad-mode][data-ad-depth] > a.ad-catalog-row[aria-current="page"] {
    background: #fff !important;
    color: var(--ad-accent) !important;
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--ad-accent);
}

li.ad-catalog-node[data-ad-site][data-ad-mode][data-ad-depth] > .ad-catalog-row:focus,
li.ad-catalog-node[data-ad-site][data-ad-mode="truckbrand"][data-ad-depth] > details.truck-brand-node > .ad-catalog-row:focus {
    outline: 2px solid var(--ad-focus) !important;
    outline-offset: -3px;
}

li.ad-catalog-node[data-ad-site][data-ad-mode][data-ad-depth] > a.ad-catalog-row:focus {
    outline-color: var(--ad-accent) !important;
}

li.ad-catalog-node[data-ad-site][data-ad-mode][data-ad-depth] > .ad-catalog-row:active,
li.ad-catalog-node[data-ad-site][data-ad-mode="truckbrand"][data-ad-depth] > details.truck-brand-node > .ad-catalog-row:active {
    background: var(--ad-hover-bg) !important;
    color: var(--ad-hover-fg) !important;
}

@media (hover: hover) {
    li.ad-catalog-node[data-ad-site][data-ad-mode][data-ad-depth] > .ad-catalog-row:hover,
    li.ad-catalog-node[data-ad-site][data-ad-mode="truckbrand"][data-ad-depth] > details.truck-brand-node > .ad-catalog-row:hover {
        background: var(--ad-hover-bg) !important;
        color: var(--ad-hover-fg) !important;
    }
}

/* The .mobile class is server-generated; narrow desktop windows get the same
 * larger touch targets and modest indentation without changing navigation. */
body.mobile li.ad-catalog-node[data-ad-site][data-ad-mode][data-ad-depth] {
    --ad-row-height: 46px;
    --ad-row-pad-y: 11px;
    --ad-indent: 8px;
}

@media (max-width: 760px) {
    li.ad-catalog-node[data-ad-site][data-ad-mode][data-ad-depth] {
        --ad-row-height: 46px;
        --ad-row-pad-y: 11px;
        --ad-indent: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    li.ad-catalog-node[data-ad-site][data-ad-mode][data-ad-depth] > .ad-catalog-row,
    li.ad-catalog-node[data-ad-site][data-ad-mode="truckbrand"][data-ad-depth] > details.truck-brand-node > .ad-catalog-row {
        transition: none !important;
    }
}

@media (forced-colors: active) {
    li.ad-catalog-node[data-ad-site][data-ad-mode][data-ad-depth].is-current > a.ad-catalog-row,
    li.ad-catalog-node[data-ad-site][data-ad-mode][data-ad-depth] > a.ad-catalog-row[aria-current="page"] {
        border-left: 3px solid Highlight !important;
        box-shadow: none;
    }
    li.ad-catalog-node[data-ad-site][data-ad-mode][data-ad-depth] > .ad-catalog-row:focus,
    li.ad-catalog-node[data-ad-site][data-ad-mode="truckbrand"][data-ad-depth] > details.truck-brand-node > .ad-catalog-row:focus {
        outline-color: Highlight !important;
    }
}