/**
 * default/main-header.css
 * Aspeto do cabeçalho do site. O markup vive em
 * app/Core/View/partials/main_header.php.
 *
 * PORQUÊ AQUI E NÃO NO styles.css. O cabeçalho é o mesmo no site e em todos os
 * portais e landings de campanha (decisão do Jorge, 2026-09-03), e nenhum
 * portal carrega o styles.css do site: são 6900 linhas de que só estas
 * interessam. Enquanto o bloco viveu lá, levá-lo a outro sítio era copiá-lo, e
 * uma cópia diverge sempre.
 *
 * Vive no webroot público, e não ao lado do partial, porque tem de ser servida
 * por HTTP também aos outros hosts. É o mesmo caminho por onde os portais já
 * vão buscar os ícones Phosphor.
 *
 * No site público entra no mesmo agrupamento (CssBundle), imediatamente antes
 * do styles.css: era daí que vinha, e a ordem da cascata é para manter.
 *
 * As variáveis (--main-header-height, --main-background-color e afins) vêm de
 * quem hospeda o cabeçalho. O partial declara os valores de recurso, para o
 * cabeçalho não ficar sem desenho onde essas variáveis não existem.
 */

/* ── Variáveis do cabeçalho ──
   Declaradas no próprio elemento e não no `:root`: no site público o
   `default.css` já as define lá, e um segundo `:root` a dizer o mesmo é uma
   fonte a mais. Aqui garantem que o cabeçalho tem desenho nos portais, que não
   carregam o `default.css`. Os valores são os mesmos, incluindo o degrau de
   altura no desktop. */
#main-header,
#main-nav-container,
#search_slide_container,
#slide_form_container,
#cart_slide_container {
    --main-background-color: #000000;
    --main-header-height: 50px;
    --header-max-width: 1280px;
    --header-link-color: #b4b8bb;
    --main-font-family: 'Inter', sans-serif;
}
@media (min-width: 992px) {
    #main-header,
    #main-nav-container,
    #search_slide_container,
    #slide_form_container,
    #cart_slide_container {
        --main-header-height: 70px;
    }
}

/* ---------- Header service error (fallback quando os serviços do header falham) ---------- */
.header-service-error {
    color: red;
    font-weight: bold;
}

/* Logo claro sobre fundo escuro (páginas de modelo: eclipse-cross EV, swell-crooks) */
.logo-inverted {
    filter: invert(100%);
}

/* ── Modo só logótipo (portais e landings de campanha) ──
   Sem menus, sem ações e sem o hover a branco. O hover existe para o menu se
   ler quando ele abre; sem menu, só piscava a barra a quem passasse o rato.
   A marca fica ao centro, que é onde ela está no site. */
#main-header.is-logo-only {
    justify-content: center;
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
#main-header.is-logo-only:hover,
#main-header.is-logo-only.is-open {
    background: transparent;
    box-shadow: none;
}
#main-header.is-logo-only:hover .main-nav-logo .main-logo svg path,
#main-header.is-logo-only.is-open .main-nav-logo .main-logo svg path { fill: #fff !important; }
#main-header.is-logo-only .main-nav-logo {
    position: static;
    transform: none;
    display: flex;
    align-items: center;
}

/* ---------- Header Container ---------- */
#main-header {
    position: fixed;
    display: flex;
    margin: 0;
    padding: 0;
    width: 100vw;
    height: var(--main-header-height);
    top: 0;
    left: 0;
    background-color: var(--main-background-color);
    transition: all 0.5s;
    z-index: 100;
}

/*#main-header::after {
    clear: both;
    content: '';
    display: block;
}*/

#main-header.is-hidden {
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
}

#main-header.is-docked {
    background-color: var(--main-background-color);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    box-shadow: none;
    transition: all 0.5s ease;
}

/* Header branco no hover OU com o menu aberto — em todos os ecrãs (mobile incluído;
   no desktop a media query reforça texto/links). Logo, ícones e hambúrguer a preto. */
#main-header:hover,
#main-header.is-open {
    background: #ffffff;
    box-shadow: none;
}
#main-header:hover .main-nav-logo .main-logo svg path,
#main-header.is-open .main-nav-logo .main-logo svg path { fill: #1c1c1c !important; }
#main-header:hover .main-nav-links-right .acv-ecom-link,
#main-header.is-open .main-nav-links-right .acv-ecom-link,
#main-header:hover .main-nav-links-right .acv-ecom-link .ph-icon,
#main-header.is-open .main-nav-links-right .acv-ecom-link .ph-icon { color: #1c1c1c; }
/* Hambúrguer/X a preto sobre o header branco. */
#main-header:hover #menu-trigger-mobile span::before,
#main-header:hover #menu-trigger-mobile span::after,
#main-header.is-open #menu-trigger-mobile span::before,
#main-header.is-open #menu-trigger-mobile span::after { background-color: #1c1c1c; }

#main-header .desktop-logo {
    display: none;
}

#main-header .header-logo,
#main-header .mobile-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

#main-header .header-logo {
    margin: 0 auto;
}

#main-header .header-logo a,
#main-header .mobile-logo a {
    display: flex;
    justify-content: center;
}

#main-header .header-logo a img,
#main-header .mobile-logo a img {
    max-width: 120px;
}

#main-header .mobile-logo a svg {
    max-width: 120px;
}

#main-header .mobile-logo a svg path {
    fill: #ffffff;
}

/* ---------- Hamburger Menu ---------- */
.hamburger-menu {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0 0 0 20px;
    list-style: none;
}

/* hamburger icon */
#menu-trigger-mobile span,
#menu-trigger-mobile span::before,
#menu-trigger-mobile span::after {
    position: absolute;
    display: inline-block;
    height: 2px;
    width: 24px;
    background-color: #ffffff;
}

/* hamburger icon (line in the center) */
#menu-trigger-mobile span {
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -1px;
    /* Cor (background) acompanha o header (0.5s); a animação do X é rápida (0.2s). */
    transition: background-color 0.5s ease, transform 0.2s ease;
    color: #ffffff;
}

/* hamburger icon (other 2 lines) */
#menu-trigger-mobile span::before,
#menu-trigger-mobile span::after {
    content: '';
    right: 0;
    /* Force Hardware Acceleration in WebKit */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 0% 50%;
    -moz-transform-origin: 0% 50%;
    -ms-transform-origin: 0% 50%;
    -o-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    transition: background-color 0.5s ease, transform 0.2s ease;
}

/* menu icon top line */
#menu-trigger-mobile span::before {
    top: -9px;
}

/* menu icon bottom line */
#menu-trigger-mobile span::after {
    top: 9px;
}

/* hide line in the center */
#menu-trigger-mobile.nav-is-visible span {
    background: rgba(46, 50, 51, 0);
}

/* keep visible other 2 lines */
#menu-trigger-mobile.nav-is-visible span::before,
#menu-trigger-mobile.nav-is-visible span::after {
    background-color: #ffffff;
}

#menu-trigger-mobile.nav-is-visible span::before {
    -webkit-transform: translateX(4px) translateY(1px) rotate(45deg);
    -moz-transform: translateX(4px) translateY(1px) rotate(45deg);
    -ms-transform: translateX(4px) translateY(1px) rotate(45deg);
    -o-transform: translateX(4px) translateY(1px) rotate(45deg);
    transform: translateX(4px) translateY(1px) rotate(45deg);
}

#menu-trigger-mobile.nav-is-visible span::after {
    -webkit-transform: translateX(4px) translateY(0px) rotate(-45deg);
    -moz-transform: translateX(4px) translateY(0px) rotate(-45deg);
    -ms-transform: translateX(4px) translateY(0px) rotate(-45deg);
    -o-transform: translateX(4px) translateY(0px) rotate(-45deg);
    transform: translateX(4px) translateY(0px) rotate(-45deg);
}

/* menu trigger link */
#menu-trigger-mobile {
    display: flex;
    position: relative;
    align-items: center;
    height: 20px;
    color: transparent;
    text-decoration: none;
    overflow: hidden;
    z-index: 3;
}

#menu-trigger-mobile:hover {
    color: transparent;
}

/* ---------- Main Navigation ---------- */

#main-nav-container {
    display: flex;
    position: absolute;
    margin: var(--main-header-height) 0 0 0;
    padding: 30px 0 100px 0;
    width: 100%;
    height: calc(100vh - var(--main-header-height));
    background-color: #f7f7f7;
    overflow-y: auto;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
}

#main-nav-container.nav-is-visible {
    display: block;
    height: calc(100vh - var(--main-header-height));
    overflow: auto;
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
}

.main-nav {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0 20px;
}

/* Header layout helpers (mobile defaults) */
.main-nav-bar {
    display: block;
    width: 100%;
}

.main-nav-logo,
.main-nav-links-right {
    display: none;
}

.desktop-only {
    display: none;
}

.mobile-only {
    display: list-item;
}

.main-nav-links {
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
}

.main-nav-links>li {
    padding: 15px 20px;
    border-bottom: 1px solid #e2e3df;
}

.main-nav-links>li>a {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 30px;
    color: var(--main-background-color);
    text-decoration: none;
    transition: all 0.3s;
}

.submenu {
    display: none;
}

.submenu.is-open {
    display: flex;
    justify-content: center;
}

/* Scrollbar de .submenu.is-open: herda o global de default.css (removido o
   bespoke #ededed/#bababa de 15px, que mostrava uma barra cinzenta inconsistente). */

.submenu .row {
    justify-content: center;
}

.submenu-title {
    display: block;
    margin: 35px 0 0 0;
    padding: 0 20px;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    color: #9e9e9e;
}

/* product cards */

.header-product-card {
    display: flex;
    margin: 0;
    padding: 10px;
}

.header-product-card .product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    float: left;
    overflow: hidden;
    margin: 0;
    width: 100%;
    background-color: transparent;
    cursor: pointer;
    transition: color 0.2s ease-in-out;
}

.header-product-card .product-card .model-label {
    position: absolute;
    display: flex;
    align-items: center;
    padding: 3px 20px;
    left: 0;
    top: 27%;
    /* transform: translate(-50%, -50%); */
    font-size: 9px;
    font-weight: 700;
    color: #ffffff;
    z-index: 1;
}

.header-product-card .product-card .model-label-canter {
    background: var(--main-background-color);
}

/* A etiqueta dos eCanter é preta como a dos Canter. O relâmpago e as letras EV
   já dizem que é elétrico, e o azul era a única cor no menu inteiro. */
.header-product-card .product-card .model-label-ecanter {
    background: var(--main-background-color);
}

.header-product-card .product-card .model-label span {
    margin: 0 0 0 3px;
}

.header-product-card .product-card:hover {
    background-color: #f0f0f0;
}

.header-product-card .product-card .model-image {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    max-width: 100%;
    max-height: 200px;
    object-fit: cover;
}

.header-product-card .product-card .form-card-icon {
    position: relative;
    display: block;
    max-width: 15px;
    object-fit: cover;
}

.header-product-card .product-card .product-card-content {
    display: flex;
    justify-content: center;
    padding: 0;
    text-align: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.header-product-card .product-card .product-card-content::before,
.header-product-card .product-card .product-card-content::after {
    pointer-events: none;
}

.header-product-card .product-card h2 {
    font-size: 10px;
    letter-spacing: 1px;
    font-weight: 600;
    text-transform: uppercase;
    color: #ffffff;
}

.header-product-card .product-card h2,
.header-product-card .product-card p {
    margin: 0;
}

.header-product-card .product-card p {
    font-size: 12px;
    font-weight: 400;
    color: var(--main-background-color);
}

.header-product-card .product-card .price {
    font-size: 12px;
    font-weight: 600;
    color: var(--main-background-color);
}

.header-product-card .product-card .updating-price {
    font-size: 12px;
    font-weight: 400;
    color: var(--main-background-color);
}

.header-product-card .product-card .link-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--main-background-color);
}

.header-product-card .product-card .link-label i {
    margin-left: 3px;
    font-size: 9px;
    color: var(--main-background-color);
}

.header-product-card .product-card a {
    font-size: 10px;
    font-weight: 400;
    color: var(--main-background-color);
}

.header-product-card h2 {
    position: absolute;
    padding: 7px 15px;
    -webkit-transition: -webkit-transform 0.35s, color 0.35s;
    transition: transform 0.35s, color 0.35s;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    color: #ffffff;
    background-color: var(--main-background-color);
    transform: translate3d(0, -50%, 0) translate3d(0, -20px, 0);
}

.header-product-card p {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

.header-product-card p {
    position: absolute;
    top: 10px;
    left: 0;
    padding: 0;
    width: 100%;
    opacity: 0;
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
}

.header-product-card .link-label {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 3px;
    text-decoration: none;
    opacity: 1;
    /*-webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);*/
}

.header-product-card p {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.header-product-card .product-card-content a,
.header-product-card .product-card-content button {
    position: relative;
    display: flex;
    align-items: center;
    z-index: 2;
}

.header-product-card .product-card a.card-link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-indent: 200%;
    white-space: nowrap;
    font-size: 0;
    opacity: 0;
    z-index: 1;
}

/* ── Mosaico do mega-menu (.mm-tile) ──
   Uma fotografia, um véu e uma legenda, num só <a>. Serve os cartões do menu
   Comprar e o destaque dos Carroçamentos, que antes era o `.highlight` preso a
   `.submenu`: essa classe saiu do markup quando o cabeçalho passou ao drill-down
   (`.cd-nav-gallery`), e o destaque ficou meses sem véu, com a fotografia em
   tamanho natural e o texto branco por cima do que calhasse.

   O cartão inteiro é o link. Os cartões de modelo resolvem isto com um <a>
   invisível por cima (`.card-link`), o que dá dois alvos de foco para o mesmo
   destino; aqui há um só, e o teclado percorre o menu na ordem que se vê. */
/* O <li> que segura a grelha. Existe porque um <ul> só aceita <li> por filho, e
   o painel do menu é um <ul>: o mosaico solto lá dentro era markup inválido.

   O seletor traz os dois id porque os <li> do menu são `display: flex` por
   regra da casa, e em linha o título do painel ficava ao lado do mosaico em vez
   de ficar por cima dele. */
#main-header #website-links .mm-tiles-item {
    display: block;
    padding: 8px;
}

.mm-tiles {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mm-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    /* `min-width: 0` porque a proporção dá ao cartão uma largura própria a
       partir da altura, e sem isto ele recusava encolher para a coluna da
       grelha: os cinco cartões saíam por cima uns dos outros. */
    min-width: 0;
    aspect-ratio: 16 / 10;
    padding: 16px;
    text-decoration: none;
    background-color: #1c1c1c;
}

.mm-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

/* O véu é o que garante os 4,5:1 do texto sobre a fotografia, e mede-se na
   parte de baixo do cartão, que é onde a legenda assenta. */
.mm-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .62) 38%, rgba(0, 0, 0, .12) 78%, rgba(0, 0, 0, 0) 100%);
    transition: opacity .3s ease;
}

.mm-tile-body {
    position: relative;
    z-index: 1;
}

.mm-tile-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #ffffff;
}

.mm-tile-note {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    color: rgba(255, 255, 255, .86);
}

.mm-tile:hover img,
.mm-tile:focus-visible img { transform: scale(1.05); }
.mm-tile:hover::after { opacity: .82; }
.mm-tile:focus-visible { outline: 2px solid #ffffff; outline-offset: -4px; }

/* Variante larga: o destaque no fim de um painel (Carroçamentos), com a
   descrição à esquerda e a chamada à direita a partir do tablet. */
.mm-tile--wide {
    aspect-ratio: auto;
    min-height: 0;
    padding: 32px 24px;
    cursor: default;
}

.mm-tile--wide .mm-tile-body {
    display: grid;
    gap: 16px;
    align-items: center;
}

.mm-tile--wide h3 {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
}

.mm-tile--wide p {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, .88);
}

@media (min-width: 640px) {
    .mm-tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
    #main-header #website-links .mm-tiles-item { padding: 0; }
    .mm-tiles { grid-template-columns: repeat(5, 1fr); gap: 12px; }
    /* Um destaque que venha a seguir a uma grelha de modelos precisa de ar por
       cima; sozinho no painel, o padding do painel já chega. */
    #main-header #website-links .categories-display + .mm-tiles-item { padding-top: 24px; }
    /* Cinco colunas numa largura de 1280 dão cartões estreitos, e a proporção
       larga deixava-os com altura de tira. Mais alto do que largo lê-se melhor
       aqui, e é o que dá espaço à legenda de duas linhas. */
    .mm-tile { aspect-ratio: 5 / 4; }
    /* O destaque não tem proporção: a altura é a do texto que lá vive. Sem esta
       linha herdava a dos cartões e ocupava o painel todo. */
    .mm-tile--wide { aspect-ratio: auto; }
    .mm-tile--wide .mm-tile-body { grid-template-columns: 2fr 1fr; gap: 32px; }
    .mm-tile--wide .mm-tile-cta { justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
    #main-header .acv-acc-drop { transition: none; }
    .mm-tile img,
    .mm-tile::after { transition: none; }
    .mm-tile:hover img,
    .mm-tile:focus-visible img { transform: none; }
}

/* app nav */
.app-nav {
    display: flex;
    justify-content: flex-end;
    margin: 0;
    padding: 0 20px 0 0;
}

/* ==================== Desktop ==================== */

@media (min-width: 992px) {

    .hamburger-menu {
        display: none;
    }

    /* ---------- Header Container ---------- */

    #main-header {
        justify-content: center;
        background-color: transparent;
        height: var(--main-header-height);
        box-shadow: none;
    }

    /* Estados do header (estilo opticaspaço):
       • hover OU menu aberto → fundo branco, texto/logo preto (mesmo quando docked).
       • is-docked (sem hover/menu) → fundo preto, texto/logo branco.
       • por defeito (topo) → transparente, texto/logo branco.
       As regras de hover/is-open vêm depois de .is-docked no cascade e ganham. */
    #main-header:hover,
    #main-header.is-open {
        background: #ffffff;
        box-shadow: none;
    }
    #main-header:hover .main-nav-links-left > li > a,
    #main-header.is-open .main-nav-links-left > li > a,
    #main-header:hover .main-nav-links-right .acv-ecom-link,
    #main-header.is-open .main-nav-links-right .acv-ecom-link {
        color: #1c1c1c;
    }
    #main-header:hover .main-nav-links-right .acv-ecom-link .ph-icon,
    #main-header.is-open .main-nav-links-right .acv-ecom-link .ph-icon {
        color: #1c1c1c;
    }
    /* Hover de um link da direita SOBRE o header branco → preto (não branco, que
       era invisível). Vence a regra global .acv-ecom-link:hover{color:#fff}. */
    #main-header:hover .main-nav-links-right .acv-ecom-link:hover,
    #main-header.is-open .main-nav-links-right .acv-ecom-link:hover,
    #main-header:hover .main-nav-links-right .acv-ecom-link:hover .ph-icon,
    #main-header.is-open .main-nav-links-right .acv-ecom-link:hover .ph-icon {
        color: #000000;
    }
    /* O SVG do logo tem fill:#fff inline → precisa de !important para ficar preto. */
    #main-header:hover .main-nav-logo .main-logo svg path,
    #main-header.is-open .main-nav-logo .main-logo svg path {
        fill: #1c1c1c !important;
    }

    #main-header .mobile-logo {
        display: none;
    }

    #main-header .desktop-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    #main-header .desktop-logo a {
        display: flex;
        align-items: center;
        padding: 0;
        max-width: 120px;
    }

    #main-header .desktop-logo a img {
        max-width: 100%;
    }

    #main-header .desktop-logo a svg {
        max-width: 100%;
    }

    #main-header .desktop-logo a svg path {
        fill: #ffffff;
    }

    /* ---------- Main Navigation ---------- */

    #main-nav-container {
        position: initial;
        display: flex;
        margin: 0 20px;
        padding: 0;
        width: 100%;
        max-width: 1024px;
        height: 100%;
        background-color: transparent;
        overflow: inherit;
        transform: none;
        transition: none;
    }

    #main-nav-container .logo {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
        padding: 0;
    }

    #main-nav-container .logo a {
        margin: 0;
        padding: 0;
        text-decoration: none;
    }

    /* Nav Links */
    .main-nav-links {
        display: flex;
        justify-content: space-between;
        margin: 0;
        padding: 0;
        height: 100%;
        align-items: center;
        list-style: none;
    }

    /* New 3-part header alignment (left links / centered logo / right link) */
    #main-header .app-nav {
        display: none;
    }

    .main-nav-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 24px;
    }

    .main-nav-links.main-nav-links-left,
    .main-nav-links.main-nav-links-right {
        flex: 1 1 0;
        min-width: 0;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    .main-nav-links.main-nav-links-left {
        justify-content: flex-end;
    }

    .main-nav-links.main-nav-links-right {
        display: flex;
        justify-content: flex-start;
    }

    .main-nav-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
    }

    .main-nav-logo .main-logo,
    .main-nav-logo .main-logo svg {
        display: block;
        width: auto;
        height: 22px;
        max-width: 220px;
    }

    .desktop-only {
        display: list-item;
    }

    .mobile-only {
        display: none;
    }

    .main-nav-links li:first-child {
        /*margin-right: 50px;*/
    }

    .main-nav-links li {
        display: flex;
        margin: 0 10px;
        padding: 0;
        height: 100%;
        border-bottom: none;
    }

    .main-nav-links li.mobile-only {
        display: none;
    }

    .main-nav-links li.desktop-only {
        display: flex;
    }

    /* main navigation links styles */
    .main-nav-links>li:not(.desktop-logo)>a {
        position: relative;
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0 9px;
        font-size: 12px;
        font-weight: 600;
        color: #ffffff;
        border: none;
        text-decoration: none;
        overflow: visible;
        -webkit-transition: color 0.3s, box-shadow 0.3s;
        -moz-transition: color 0.3s, box-shadow 0.3s;
        transition: color 0.3s, box-shadow 0.3s;
    }

    .main-nav-links>li>a {
        display: flex;
        align-items: center;
        font-size: 15px;
        font-weight: 400;
        color: #ffffff;
        text-decoration: none;
    }

    /* main navigation links styles */
    .main-nav-links>li>a {
        position: relative;
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0 9px;
        font-size: 15px;
        font-weight: 500;
        color: #ffffff;
        border: none;
        text-decoration: none;
        overflow: visible;
        -webkit-transition: color 0.3s, box-shadow 0.3s;
        -moz-transition: color 0.3s, box-shadow 0.3s;
        transition: color 0.3s, box-shadow 0.3s;
    }

    .main-nav-links>li>a:not(.main-logo):hover,
    .link-opened>li>a:not(.link-selected):hover,
    .main-nav-links>li>a.is-selected {
        box-shadow: inset 0 -3px 0 #ffffff;
    }

    .main-nav-links>li>a:after {
        position: absolute;
        right: 100%;
        bottom: -2px;
        left: 0;
        border-radius: 0;
        border-top: 2px solid #ffffff;
        content: "";
    }

    .link-selected {
        color: #ffffff;
    }

    .link-opened>li>a:not(.link-selected) {
        color: #a1a5a8;
    }



    .main-nav-links>li>a.link-selected:after {
        color: #ffffff;
        right: 0;
    }





    /* submenu */
    .submenu {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        /* remove as margens negativas do Bootstrap */
        padding: 1rem;
        /* ajustar conforme seu design */
        width: 100%;
        /* força a largura da viewport */
        max-width: none;
        /* ignora qualquer max-width do container pai */
        background: #fff;
        /* ou o que você precisar */
        z-index: 900;
        /* ou algo abaixo do header */
    }

    .submenu.is-open {
        max-height: calc(100vh - var(--main-header-height) * 2.5);
        overflow-y: auto;
    }

    .submenu ul {
        margin: 0;
        padding: 10px 0;
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
        -moz-column-gap: 10px;
        -webkit-column-gap: 10px;
        column-gap: 10px;
    }

    .submenu ul>li {
        display: block;
        margin: 0;
        padding: 0;
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .submenu ul>li>a {
        position: relative;
        display: inline-block;
        margin: 0;
        padding: 7px 0;
        font-size: 15px;
        font-weight: 300;
        color: #e2e3df;
        text-decoration: none;
        text-transform: none;
        transition: all 0.5s ease;
    }

    .submenu ul>li>a:hover {
        color: #ffffff;
    }

    .submenu ul>li>a:after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        display: block;
        margin-top: 5px;
        right: 0;
        background: #1c1c1c;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
    }

    .submenu ul>li>a:hover:after {
        width: 100%;
        left: 0;
        background: #1c1c1c;
    }

    /* Actions nav when header has hover status */
    #main-header:hover .actions-nav li>a {
        color: #ffffff;
    }

    #main-header:hover .actions-nav li a i {
        color: #ffffff;
    }


















    /* main navigation buttons style */
    #main-header.solid .website-links>li>a {
        position: relative;
        display: flex;
        align-items: center;
        height: var(--header-container-height);
        font-size: 15px;
        font-weight: 400;
        padding: 0 10px;
        color: #333333;
        text-decoration: none;
        overflow: visible;
        border-bottom: none;
        -webkit-transition: color 0.3s, box-shadow 0.3s;
        -moz-transition: color 0.3s, box-shadow 0.3s;
        transition: color 0.3s, box-shadow 0.3s;
    }

    /* O `--main-logo-color` nunca foi definido em ficheiro nenhum, portanto estas
       duas regras não pintavam nada. Ficam com a tinta escura do menu, para não
       trazerem uma cor de volta no dia em que alguém declarar a variável. */
    #main-header.solid .website-links>li>a:hover {
        color: #1c1c1c;
        box-shadow: inset 0 -3px 0 #1c1c1c;
    }

    #main-header.solid .website-links>li>a.selected {
        color: #1c1c1c;
        box-shadow: inset 0 -3px 0 #1c1c1c;
    }

    #main-header.solid .actions-nav li>a {
        color: #333333;
    }

    #main-header.solid .actions-nav li a i {
        color: #333333;
    }

    /* app nav */
    .app-nav {
        display: none;
    }













    /* product cards */

    .header-product-card {
        display: flex;
        margin: 0;
        padding: 10px;
        max-width: 250px;
    }

    .header-product-card .product-card {
        height: auto;
    }

    .header-product-card .product-card:hover {
        background-color: #f0f0f0;
    }

    .header-product-card .product-card .product-card-content {
        display: flex;
        justify-content: center;
        padding: 0;
        text-align: center;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .header-product-card .product-card .product-card-content::before,
    .header-product-card .product-card .product-card-content::after {
        pointer-events: none;
    }

    .header-product-card .product-card h2 {
        font-size: 13px;
        color: var(--main-background-color);
    }

    .header-product-card .product-card h2,
    .header-product-card .product-card p {
        margin: 0;
    }

    .header-product-card .product-card p {
        font-size: 12px;
        font-weight: 400;
        color: var(--main-background-color);
    }

    .header-product-card .product-card .price {
        font-size: 12px;
        font-weight: 600;
        color: var(--main-background-color);
    }

    .header-product-card .product-card .link-label {
        font-size: 12px;
        font-weight: 500;
        color: var(--main-background-color);
    }

    .header-product-card .product-card .link-label i {
        margin-left: 3px;
        font-size: 9px;
        color: var(--main-background-color);
    }

    .header-product-card .product-card a {
        font-size: 10px;
        font-weight: 400;
        color: var(--main-background-color);
    }

    .header-product-card h2 {
        position: absolute;
        bottom: 10px;
        padding: 7px 15px;
        -webkit-transition: -webkit-transform 0.35s, color 0.35s;
        transition: transform 0.35s, color 0.35s;
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
        color: var(--main-background-color);
        background-color: transparent;
    }

    .header-product-card p {
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
    }

    .header-product-card p {
        position: absolute;
        top: 10px;
        left: 0;
        padding: 0;
        width: 100%;
        opacity: 0;
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }

    .header-product-card .link-label {
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 3px;
        opacity: 0;
        text-decoration: none;
        transform: translate3d(0, 50px, 0);
        transition: transform 0.35s, color 0.35s;
    }

    .header-product-card:hover h2 {
        color: #ffffff;
        background-color: var(--main-background-color);
        transform: translate3d(0, -100%, 0) translate3d(0, 10px, 0);
    }

    .header-product-card:hover .link-label {
        opacity: 1;
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0);
    }

    .header-product-card:hover p {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    .header-product-card .product-card-content a,
    .header-product-card .product-card-content button {
        position: relative;
        display: flex;
        align-items: center;
        z-index: 2;
    }

    .header-product-card .product-card a.card-link {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        text-indent: 200%;
        white-space: nowrap;
        font-size: 0;
        opacity: 0;
        z-index: 1;
    }

}

/* ==================== End Desktop ==================== */


/* ===================================================================
   HEADER v2 — menus à esquerda · logótipo ao centro · pesquisa/login/carrinho à direita
   (estrutura tipo opticaspaco; pesquisa global peças + modelos + viaturas)
   Os seletores são prefixados com #main-header para vencerem as regras antigas.
   =================================================================== */

/* ---- Base (todos os ecrãs) ---- */
#main-header { align-items: center; }
#main-header .main-nav-logo { display: flex; align-items: center; justify-content: center; }
#main-header .main-nav-links-right { display: flex; }

/* Bloco de ações da direita — neutraliza o estilo de lista grande do menu mobile */
#main-header .main-nav-links-right {
    align-items: center;
    gap: 2px;
    width: auto;
    list-style: none;
    margin: 0;
}
#main-header .main-nav-links-right > li {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    border-bottom: none;
}
/* Estado normal cinza-claro; hover clareia texto e ícone para branco (sem underline). */
#main-header .main-nav-links-right > li > a,
#main-header .main-nav-links-right .acv-ecom-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--header-link-color);
    box-shadow: none;
    transition: color .3s;
}
#main-header .main-nav-links-right .acv-ecom-link .ph-icon { color: var(--header-link-color); font-size: 20px; transition: color .3s; }
/* Hover: só clareia texto/ícone para branco — sem underline (box-shadow). */
#main-header .main-nav-links-right > li > a:hover,
#main-header .main-nav-links-right .acv-ecom-link:hover { color: #ffffff; opacity: 1; box-shadow: none; }
#main-header .main-nav-links-right .acv-ecom-link:hover .ph-icon { color: #ffffff; }

/* ── Menu da conta ──
   O markup existe desde que a área de cliente entrou e nunca teve folha: as
   quatro ligações ficavam soltas por cima do cabeçalho, em qualquer página de
   quem tinha sessão iniciada, e em telemóvel empurravam o bloco 55px para fora
   do ecrã. É o idioma dos painéis do mega-menu: branco, borda fina, sem sombra.
   Abre com o rato e com o teclado, que é para o que serve o `:focus-within`;
   a ligação de cima leva à área de cliente sem ter de o abrir. */
#main-header .acv-acc-menu { position: relative; display: flex; align-items: center; height: 100%; }
#main-header .acv-acc-drop {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 224px;
    padding: 8px;
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 12px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility 0s .2s;
    z-index: 900;
}
#main-header .acv-acc-menu:hover .acv-acc-drop,
#main-header .acv-acc-menu:focus-within .acv-acc-drop {
    opacity: 1;
    visibility: visible;
    transition: opacity .2s ease;
}
#main-header .acv-acc-drop a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #1c1c1c;
    text-decoration: none;
    white-space: nowrap;
}
#main-header .acv-acc-drop a:hover { background: #f4f4f2; color: #1c1c1c; }
#main-header .acv-acc-drop .ph-icon { font-size: 17px; color: #79828d; }
#main-header .acv-acc-drop hr { margin: 6px 4px; border: 0; border-top: 1px solid #ececec; }

/* ===== MOBILE (default, < 992px) ===== */
#main-header { justify-content: space-between; }
/* Painel deslizante: fixar top/left para o align-items:center do header não o
   reposicionar verticalmente (era empurrado para fora do ecrã). */
#main-header #main-nav-container { top: var(--main-header-height); left: 0; margin: 0; }
/* Zonas esquerda (hambúrguer) e direita (ações) com largura IGUAL (flex:1 1 0)
   → o logo (flex:0 0 auto) fica rigorosamente ao centro do ecrã. */
#main-header .hamburger-menu { flex: 1 1 0; width: auto; justify-content: flex-start; }
#main-header .main-nav-logo { flex: 0 0 auto; }
#main-header .main-nav-links-right { flex: 1 1 0; justify-content: flex-end; padding: 0 12px 0 0; }
#main-header .main-nav-logo .main-logo { display: flex; }
#main-header .main-nav-logo .main-logo svg { width: auto; height: 19px; max-width: 150px; }
#main-header .main-nav-logo .main-logo svg path { fill: #ffffff; }

/* Layout do header em grelha (só mobile): colunas laterais IGUAIS (1fr cada) e o
   logo (auto) rigorosamente ao centro do ecrã. Os elementos absolutos (drawer,
   pesquisa) não ocupam células. */
@media (max-width: 991.98px) {
    #main-header {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }
    #main-header .hamburger-menu { width: auto; justify-content: flex-start; }
    #main-header .main-nav-logo { justify-self: center; }
    #main-header .main-nav-links-right { width: auto; justify-content: flex-end; }

    /* O lado direito lê-se só por ícones. Com as palavras ("Procurar", "Iniciar
       sessão", o nome de quem entrou) o bloco media 344px e saía do ecrã: o
       carrinho e os favoritos ficavam fora dele, e o logótipo era empurrado 67px
       para a esquerda do centro. As contagens também são <span>, e essas ficam:
       daí o `:not(.acv-count)`.

       Sai da vista, não do documento. Com `display:none` o link da conta ficava
       sem nome nenhum para quem ouve a página, porque o nome dele é o texto
       ("Iniciar sessão", ou "Olá" e o primeiro nome) e o ícone é decorativo. É a
       mesma receita do `model-range.css`, e o `.acv-ecom-link` já é `relative`,
       que é o que impede um absoluto destes de deslocar a página. */
    #main-header .main-nav-links-right .acv-ecom-link > span:not(.acv-count) {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* Ficam três ícones: pesquisar, conta e carrinho (decisão do Jorge,
       2026-09-04). Os favoritos e o comparador passam para o menu, nas linhas
       `.mn-drawer-only`. A conta é de aritmética: as colunas laterais da grelha
       são duas frações iguais, e o logótipo só assenta no centro do ecrã
       enquanto a direita couber na sua. Num ecrã de 360 cada lado recebe 114px,
       e três ícones de 32 com 2 de intervalo e 12 de margem dão 112. Cinco
       davam 222, e era isso que empurrava o logótipo 67px para a esquerda e
       mandava o carrinho para fora do ecrã. */
    #main-header .main-nav-links-right .acv-ecom-li--desk { display: none; }

    /* 32px por ícone: 20 do glifo e 6 de cada lado. WCAG 2.2 pede 24 no alvo de
       toque, e a distância entre centros fica em 34. Escrito aqui dentro e não
       na base: com `#main-header` à frente, a regra também vencia no desktop uma
       regra antiga que lá manda, e o bloco inteiro deslocava-se 6px. */
    #main-header .main-nav-links-right .acv-ecom-link { padding: 6px; }

    /* Ao toque não há rato que passe por cima, e o ícone da conta leva à área de
       cliente. O painel não tem aqui o que fazer. */
    #main-header .acv-acc-drop { display: none; }
}

/* ===== DESKTOP (≥ 992px) ===== */
@media (min-width: 992px) {
    /* Fundo full-bleed, mas conteúdo (links + logo) limitado a --header-max-width
       e centrado: o gutter lateral cresce para encostar os links esquerda/direita
       às margens dos 1280px em ecrãs largos. */
    #main-header {
        justify-content: space-between;
        padding-left: max(26px, calc((100% - var(--header-max-width)) / 2));
        padding-right: max(26px, calc((100% - var(--header-max-width)) / 2));
    }

    #main-header #main-nav-container {
        order: 1;
        flex: 1 1 0;
        min-width: 0;
        position: static;
        transform: none;
        height: 100%;
        margin: 0;
        padding: 0;
        max-width: none;
        background: transparent;
        overflow: visible;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    /* flex:1 anula o flex-grow do .col-lg do Bootstrap; flex-start encosta os
       links à esquerda (a regra antiga punha justify-content:flex-end). */
    #main-header .main-nav { display: flex; align-items: center; flex: 1 1 0; width: auto; height: 100%; padding: 0; }
    #main-header .main-nav-links-left {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height: 100%;
        width: auto;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    #main-header .main-nav-links-left > li {
        display: flex;
        align-items: center;
        height: 100%;
        margin: 0;
        padding: 0;
        border-bottom: none;
    }
    #main-header .main-nav-links-left > li > a {
        display: flex;
        align-items: center;
        height: 100%;
        padding: 0 13px;
        font-size: 15px;
        font-weight: 500;
        color: #ffffff;
        text-decoration: none;
        transition: box-shadow .3s, color .3s;
    }
    /* O underline só aparece em hover/selecionado — estados em que o header é
       branco — por isso é escuro (adapta-se à cor de fundo). */
    #main-header .main-nav-links-left > li > a:hover,
    #main-header .main-nav-links-left > li > a.selected,
    #main-header .main-nav-links-left > li > a.is-selected {
        box-shadow: inset 0 -3px 0 #1c1c1c;
        color: #1c1c1c;
    }

    #main-header .main-nav-logo { order: 2; flex: 0 0 auto; }
    #main-header .main-nav-logo .main-logo svg { height: 22px; max-width: 220px; }

    #main-header .main-nav-links-right {
        order: 3;
        flex: 1 1 0;
        min-width: 0;
        justify-content: flex-end;
        gap: 4px;
        height: 100%;
        padding: 0;
    }
    #main-header .main-nav-links-right > li { height: 100%; }
    /* As linhas de favoritos e comparador são a versão de telemóvel destes dois
       ícones. Aqui os ícones estão lá, e as linhas ficariam a dizer o mesmo no
       meio dos menus de catálogo. */
    #main-header .main-nav-links-left > li.mn-drawer-only { display: none; }
}

/* ===================================================================
   HEADER v2 — mega-navegação em cascata (drill-down) estilo opticaspaço
   • Mobile: cada submenu é um painel que desliza da direita; os itens do
     nível anterior saem para a esquerda (moves-out). Voltar via .go-back.
   • Desktop: o submenu abre como painel full-width abaixo do header
     (cd-secondary-nav em colunas; cd-nav-gallery com cards).
   • Sem scrollbars visíveis: os painéis ajustam-se ao conteúdo; só o
     painel (drawer) faz scroll quando necessário, com scrollbar oculta.
   =================================================================== */

/* ===== MOBILE (< 992px): drill-down ===== */
@media (max-width: 991.98px) {
    /* Drawer acima do #backdrop (z 100); sem padding (cada item tem o seu). */
    #main-nav-container { z-index: 105; padding: 0; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; }
    #main-nav-container::-webkit-scrollbar { width: 0; height: 0; }
    /* O <nav> não leva padding em mobile (as linhas têm o seu) — senão o
       conteúdo fica mais largo que o ecrã e o chevron sai para fora. */
    #main-nav-container .main-nav { width: 100%; padding: 0; }

    #website-links, #website-links ul { list-style: none; margin: 0; }
    #website-links { position: relative; padding: 0; overflow: hidden; transition: transform .3s; }
    /* Os <li> não têm border/padding próprios — a linha e o espaçamento vêm do
       <a> (senão duplicava o border herdado de .main-nav-links > li). */
    #website-links li { margin: 0; padding: 0; border: none; }
    /* Submenus colapsados por defeito; só viram painéis quando o drawer abre
       (evita que apareçam no ecrã com o drawer fechado/translatado). */
    #website-links ul { display: none; }

    /* Linhas do menu (topo + cd-secondary-nav). NÃO afeta os cards da galeria. */
    #website-links > li > a,
    #website-links .cd-secondary-nav li > a,
    #website-links .cd-nav-gallery > li > a {
        display: flex;
        align-items: center;
        height: 60px;
        padding: 0 24px;
        font-size: 17px;
        font-weight: 400;
        line-height: 1.2;
        color: #1c1c1c;
        text-decoration: none;
        border-bottom: 1px solid #e7e7e4;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        will-change: transform, opacity;
        transition: transform .3s, opacity .3s, color .25s ease;
    }

    /* Itens dos submenus mais subtis (cinza claro); no hover voltam à cor atual
       (escura). Exceção: .see-all (mantém destaque) e .go-back (controlo). */
    #website-links .cd-secondary-nav li:not(.see-all):not(.go-back) > a { color: #9aa0a6; }
    #website-links .cd-secondary-nav li:not(.see-all):not(.go-back) > a:hover { color: #1c1c1c; }

    /* Submenus = painéis fixos que entram pela direita (relativos ao drawer,
       que tem transform → é o bloco-contentor; top:0 = logo abaixo do header). */
    #main-nav-container.nav-is-visible #website-links ul {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: calc(100vh - var(--main-header-height));
        padding: 0 0 40px;
        background: #f7f7f7;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        transition: transform .3s;
        z-index: 2;
    }
    #main-nav-container.nav-is-visible #website-links ul::-webkit-scrollbar { width: 0; height: 0; }
    /* .is-hidden tem de vencer a regra do painel (que não define transform). */
    #main-nav-container.nav-is-visible #website-links ul.is-hidden { transform: translateX(100%); }

    /* Painel escondido = fora do ecrã à direita. */
    #website-links .is-hidden { transform: translateX(100%); }

    /* Itens do nível anterior saem para a esquerda e desaparecem. */
    #website-links.moves-out > li > a,
    #website-links ul.moves-out > li > a { transform: translateX(-100%); opacity: 0; }

    /* Botão "Toda a loja"/"Ver…" (see-all) em destaque. O destaque é a tinta
       escura e o peso, não a cor: o menu inteiro é escala de cinzas (decisão do
       Jorge, 2026-09-04), e o azul que aqui estava vinha de um `--main-logo-color`
       que nunca chegou a ser definido em lado nenhum. */
    #website-links .see-all a { color: #1c1c1c; font-weight: 600; }

    /* A contagem nas linhas de favoritos e do comparador. É o número que o badge
       do cabeçalho mostra em desktop, aqui à direita do nome e em cinza: o menu
       é todo escala de cinzas, e um círculo de cor abria uma exceção para duas
       linhas. Sem `display` próprio, senão o `hidden` que o `saved-items.js`
       escreve deixava de esconder o zero. */
    #website-links .mn-count { margin-left: auto; padding-left: 12px; color: #9aa0a6; font-variant-numeric: tabular-nums; }

    /* Título opcional do painel da galeria. */
    #website-links .cd-nav-gallery .submenu-title {
        display: block;
        padding: 16px 24px 4px;
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #9aa0a6;
    }

    /* Galeria (Mitsubishi/Fuso): cards a partir da row existente. Em mobile,
       UM modelo por linha (anula o col-6 do Bootstrap). */
    #website-links .cd-nav-gallery .categories-display { margin: 0; padding: 8px; }
    #website-links .cd-nav-gallery .categories-display > .header-product-card {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    /* Chevron "abre submenu" (› à direita) — elemento .nav-caret injetado por JS. */
    #website-links .has-children > a .nav-caret {
        flex: 0 0 auto;
        margin-left: auto;
        width: 8px;
        height: 8px;
        border-top: 2px solid #b0b0b0;
        border-right: 2px solid #b0b0b0;
        transform: rotate(45deg);
    }

    /* Seta "voltar" (‹ à esquerda) do go-back — via ::before (renderiza bem aqui).
       Selector com a classe do painel para vencer a regra de linha (padding:0 24px),
       senão o texto fica por baixo da seta. */
    #website-links .cd-secondary-nav .go-back > a,
    #website-links .cd-nav-gallery .go-back > a { position: relative; padding-left: 52px; font-weight: 600; }
    #website-links .go-back a::before {
        content: '';
        position: absolute;
        left: 26px;
        top: 50%;
        width: 8px;
        height: 8px;
        border-top: 2px solid #555;
        border-left: 2px solid #555;
        transform: translateY(-50%) rotate(-45deg);
    }
}
/* .nav-caret só é visível no painel mobile. */
.nav-caret { display: none; }
@media (max-width: 991.98px) { #website-links .has-children > a .nav-caret { display: block; } }

/* ===== DESKTOP (≥ 992px): dropdown full-width abaixo do header ===== */
@media (min-width: 992px) {
    /* Afordâncias só-mobile escondidas (vence o .main-nav-links li { display:flex }). */
    #website-links .has-children > a::before,
    #website-links .has-children > a::after,
    #website-links .go-back,
    #website-links .see-all { display: none !important; }

    /* Os <li> do submenu NÃO podem herdar o display:flex de .main-nav-links li
       (isso punha o título e a lista de subcategorias lado a lado). */
    #main-header #website-links .cd-secondary-nav li { display: block; }

    /* Os links do topo já são posicionados por .main-nav-links-left.
       Os submenus tornam-se painéis full-width abaixo do header. */
    #main-header #website-links .cd-secondary-nav,
    #main-header #website-links .cd-nav-gallery {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        margin: 0;
        padding: 42px max(26px, calc((100% - var(--header-max-width)) / 2)) 50px;
        list-style: none;
        background: #ffffff;
        border-top: 1px solid #ececec;
        transform: none;
        opacity: 1;
        visibility: visible;
        transition: opacity .25s ease, visibility 0s;
        z-index: 900;
        /* O painel desce de um cabeçalho `position: fixed`, portanto herda o
           contexto fixo: o que passar da altura do ecrã fica fora de alcance e a
           roda do rato não lhe toca. Era o que acontecia no menu Fuso, onde os
           modelos mais o destaque dos carroçamentos passam o ecrã com folga.
           A barra fica fina mas visível, que é o único sinal de que há mais para
           ver num painel que não tem fim à vista. */
        max-height: calc(100vh - var(--main-header-height));
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
    #main-header #website-links .cd-secondary-nav.is-hidden,
    #main-header #website-links .cd-nav-gallery.is-hidden {
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, visibility 0s .25s;
        /* `visibility: hidden` esconde o painel mas o navegador continua a pedir
           as fotografias que lá estão dentro: eram 22 imagens de modelo em TODAS
           as páginas do site, sem ninguém abrir o menu. O alojamento trava aos
           21 pedidos seguidos, e o resto da página ficava sem imagens.

           `content-visibility: hidden` salta a renderização e o carregamento do
           que está cá dentro até o painel abrir. Onde a propriedade não existe,
           é ignorada e tudo se comporta como antes. */
        content-visibility: hidden;
    }

    /* cd-secondary-nav → grelha de colunas (cada categoria-pai = uma coluna). */
    #main-header #website-links .cd-secondary-nav {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px 28px;
        align-items: start;
    }
    #main-header #website-links .cd-secondary-nav > li { min-width: 0; margin-bottom: 18px; }
    #main-header #website-links .cd-secondary-nav > li > a {
        display: block;
        padding: 0 0 12px;
        font-size: 16px;
        font-weight: 700;
        color: #9aa0a6;
        text-decoration: none;
        transition: color .2s;
    }
    /* Ao passar o rato, a categoria escurece. É o mesmo movimento dos itens de
       segundo nível, e não uma cor nova. */
    #main-header #website-links .cd-secondary-nav > li > a:hover { color: #1c1c1c; }
    #main-header #website-links .cd-secondary-nav ul {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        margin: 0;
        background: none;
        list-style: none;
        transform: none;
    }
    #main-header #website-links .cd-secondary-nav ul li a {
        display: block;
        padding: 6px 0;
        font-size: 14px;
        color: #9aa0a6;
        text-decoration: none;
        transition: color .2s;
    }
    #main-header #website-links .cd-secondary-nav ul li a:hover { color: #1c1c1c; }

    /* Galeria: título + cards centrados na largura de conteúdo. */
    #main-header #website-links .cd-nav-gallery .submenu-title {
        display: block;
        margin: 0 0 18px;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: #9aa0a6;
    }
    #main-header #website-links .cd-nav-gallery .categories-display { margin: 0; }
}

/* ---- Overlay de pesquisa global (#acv-search / .cd-search) ---- */
.cd-search {
    position: absolute;
    top: var(--main-header-height);
    left: 0;
    width: 100%;
    z-index: 120;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease, visibility 0s .25s;
}
.cd-search.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .25s ease, transform .25s ease, visibility 0s 0s;
}
/* Mesmo contentor dos dropdowns dos submenus (consistência visual): sem sombra,
   apenas border-top #ececec.

   O ESPAÇAMENTO É TODO DAQUI. A caixa de pesquisa e a lista de resultados só
   dizem o que têm dentro; as margens à volta e a largura de conteúdo são deste
   invólucro, uma vez só. Enquanto cada um trazia a sua, a caixa e os itens
   arrancavam em pontos diferentes: a caixa ao limite dos 1280px e os itens 24px
   mais para dentro, por causa do padding próprio da lista. */
.cd-search-inner {
    background: #ffffff;
    border-top: 1px solid #ececec;
    padding: 22px max(20px, calc((100% - var(--header-max-width)) / 2)) 20px;
}
/* Conteúdo centrado na mesma largura dos submenus (--header-max-width).

   A LUPA, O CAMPO E O FECHAR SÃO UM CONTROLO SÓ. A borda é do formulário e o
   campo lá dentro não desenha nada: nem borda, nem anel de foco. Antes o campo
   tinha um `outline` próprio que aparecia por cima de tudo, e a caixa não tinha
   borda nenhuma, portanto o foco lia-se como um retângulo solto a meio da
   página. Agora escurece a borda da caixa inteira, que é o que se espera de um
   campo de pesquisa. */
.cd-search-form {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    /* A altura é da caixa e não do que vai lá dentro: a lupa, o campo e o
       fechar centram-se nela, e a linha fica direita mesmo quando um deles
       muda de tamanho. */
    min-height: 56px;
    margin: 0;
    /* Mais folga à esquerda do que à direita: a lupa tem de se afastar da
       curva, e do lado direito quem manda é o alvo do botão, que já traz o
       seu espaço. */
    padding: 0 10px 0 22px;
    border: 1px solid #e6e8eb;
    /* Cápsula, como a pesquisa da loja. */
    border-radius: 999px;
    transition: border-color .2s ease, outline-color .2s ease;
}
/* `:focus-within` e não `:focus-visible`: quem clica com o rato dentro da caixa
   também tem de ver que é ali que está a escrever. O traço vai encostado por
   dentro da borda, que é o que a engrossa sem mexer no tamanho da caixa nem
   fazer a página saltar. */
/* O foco muda pouco de cor: o tom é só um degrau abaixo do de repouso, e quem
   dá o sinal é a espessura, que passa de um para dois pixéis. O traço vai
   encostado por dentro, portanto acompanha a cápsula e não mexe no tamanho da
   caixa.

   É uma decisão do Jorge (2026-09-04) e fica registada com a consequência: a
   cor sozinha não chega aos 3:1 que um contorno de campo pede, e o que a
   sustenta é a diferença de espessura. Se a espessura sair daqui, o foco deixa
   de se ver. */
.cd-search-form:focus-within {
    border-color: #ccd2d8;
    outline: 2px solid #ccd2d8;
    outline-offset: -2px;
}
.cd-search-icon { font-size: 20px; color: #9aa0a6; flex: 0 0 auto; line-height: 1; transition: color .2s ease; }
.cd-search-form:focus-within .cd-search-icon { color: #5a6068; }
.cd-search-form input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    /* Não desenha nada: quem mostra o foco é a caixa, com o `outline-offset`
       da regra `:focus-within` acima. */
    outline: none;
    background: none;
    /* Um degrau acima do ícone, que é o que faz o texto escrito pesar mais do
       que os controlos à volta sem desequilibrar a linha. */
    font-size: 19px;
    font-weight: 400;
    line-height: 1.2;
    color: #1c1c1c;
    font-family: inherit;
    letter-spacing: -.01em;
}

/* O cinzento do placeholder é o mais claro que ainda se lê sobre branco. O que
   aqui estava (#c4c9cf) ficava a 1,9:1, portanto era decoração. */
.cd-search-form input::placeholder { color: #767c83; font-weight: 300; }
/* O fechar é um alvo redondo de 36px, que é o que a curva da cápsula pede e o
   que dá margem ao dedo. O ícone tem o tamanho da lupa, para os dois extremos
   da linha pesarem o mesmo. */
.cd-search-close {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    color: #9aa0a6;
    transition: color .2s ease, background-color .2s ease;
}
.cd-search-close:hover { color: #1c1c1c; background-color: #f1f2f4; }
.cd-search-close:focus-visible { outline: 2px solid #9aa0a6; outline-offset: 2px; }
.cd-search-results {
    margin: 16px 0 0;
    max-height: min(66vh, 540px);
    overflow-y: auto;
}
.cd-search-group-title {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #9aa0a6;
    font-weight: 700;
    margin: 18px 8px 8px;
}
.cd-search-results > .cd-search-group-title:first-child { margin-top: 2px; }
.cd-search-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 8px;
    border-radius: 10px;
    text-decoration: none;
    color: #1c1c1c;
}
.cd-search-item:hover { background: #f4f5f7; }
.cd-search-thumb {
    width: 58px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: 8px;
    background: #eef1f4;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.cd-search-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cd-search-thumb .ph-icon { font-size: 22px; color: #b9bfc6; }
.cd-search-item-body { flex: 1 1 auto; min-width: 0; }
.cd-search-item-name { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.25; }
.cd-search-item-meta {
    display: block;
    font-size: 12.5px;
    color: #79828d;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cd-search-item-price { font-size: 14px; font-weight: 800; white-space: nowrap; margin-left: auto; padding-left: 12px; color: #1c1c1c; }
.cd-search-empty, .cd-search-hint, .cd-search-loading { color: #79828d; font-size: 14px; padding: 24px 8px; text-align: center; }
.cd-search-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 2px 7px;
    border-radius: 999px;
    margin-right: 8px;
    vertical-align: middle;
}
/* As três etiquetas distinguem-se pelo tom e pela palavra, não pela cor: o
   cabeçalho inteiro é escala de cinzas (decisão do Jorge, 2026-09-04), e o
   azul, o verde e o laranja que aqui estavam eram a única cor do menu. */
.cd-search-tag.modelo { background: #1c1c1c; color: #ffffff; }
.cd-search-tag.viatura { background: #e6e7ea; color: #1c1c1c; }
.cd-search-tag.peca { background: transparent; color: #5a6068; box-shadow: inset 0 0 0 1px #d7d9dc; }
@media (max-width: 991px) {
    .cd-search-inner { padding: 16px 16px 14px; }
    .cd-search-form { min-height: 48px; padding: 0 8px 0 18px; gap: 10px; }
    .cd-search-form input { font-size: 16px; }
    .cd-search-icon { font-size: 18px; }
    .cd-search-close { width: 32px; height: 32px; font-size: 18px; }
}

/* ---- Mega-menu "Loja" — cartões de categoria ---- */
.submenu-loja .submenu-loja-empty { display: flex; justify-content: center; padding: 20px 0; }
.header-cat-card { display: flex; margin: 0; padding: 10px; }
.header-cat-card .cat-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-decoration: none;
    color: var(--main-background-color);
    background: #f6f6f6;
    border-radius: 12px;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}
.header-cat-card .cat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .10); }
.header-cat-card .cat-card-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 130px;
    background: #e9ebee;
}
.header-cat-card .cat-card-media img { width: 100%; height: 100%; object-fit: cover; }
.header-cat-card .cat-card-media .ph-icon { font-size: 42px; color: #b9bfc6; }
.header-cat-card .cat-card-body { display: flex; flex-direction: column; padding: 12px 14px 14px; text-align: left; }
.header-cat-card .cat-card-name { font-size: 15px; font-weight: 700; color: var(--main-background-color); }
.header-cat-card .cat-card-desc {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.4;
    color: #707880;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.header-cat-card .cat-card-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #1c1c1c;
}
.header-cat-card .cat-card-link .ph-icon { font-size: 12px; }

/* secondary menu — as regras estão todas no bloco 2, mais abaixo. Aqui viviam
   um `.fixed { top: 60px }` e um `.slide-up { translateY(-60px) }` com o 60
   escrito à mão, que já estavam a ser sobrepostos pelo bloco 3 com o valor
   certo (`--main-header-height`). Saíram os quatro com a mudança para
   `position: sticky`: ver a nota no bloco 2. */


/* ---- A peça que voa do cartão até ao ícone (ver Public/saved-fly.js) ----
   Vive aqui, e não na folha da loja, porque quem a recebe é o cabeçalho e ela
   passa por cima dele em todas as páginas do site.

   O desenho é o do botão de onde parte, o `.acv-save--round`: círculo escuro
   com o ícone claro. É o que faz ler a animação como o botão a ser levado, e
   não como um enfeite a atravessar a página.

   A centragem usa a propriedade `translate` e não um `transform`, porque o
   `transform` é do voo: as duas compõem-se, uma sobrepunha a outra. */
.acv-fly {
    position: fixed;
    z-index: 130; /* acima do cabeçalho (100) e do overlay de pesquisa (120) */
    translate: -50% -50%;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 18px;
    pointer-events: none;
    will-change: transform, opacity;
}
.acv-fly[data-fly="favourite"] { color: #f87171; } /* o mesmo coração do `.acv-save.is-saved` */
.acv-fly[data-fly="compare"] { color: #fff; }