/* ===== Tokens ===== */
:root{
    --surface:#fff;
    --ink:#222;
    --muted:#6b7280;
    --primary: #222;              /* mude aqui se quiser outra cor */
    --bs-primary: var(--primary);
    --bs-primary-rgb: 34,34,34;
    --radius:.6rem;
    --shadow:0 10px 24px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.05);
}

.btn-primary{
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}
.btn-primary:hover{
    background-color: #1a1a1a !important;
    border-color: #1a1a1a !important;
}
.btn-primary:active,
.btn-primary:focus{
    background-color: #111 !important;
    border-color: #111 !important;
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .16) !important;
}

/* ===== Header ===== */
#header{background:var(--surface);box-shadow:0 1px 0 rgba(0,0,0,.06);z-index:1030}
#header .header-box{padding:.5rem 0}                     /* deixa compacto */

/* Logo nunca deforma e alinha */
.logo-col a{display:flex;align-items:center}
.logo-col img{max-height:44px;height:auto;width:auto}

/* Ações (idioma/moeda/conta/cesta) mínimas */
.menu-dropdowns{display:flex;align-items:center;justify-content:flex-end;gap:.5rem}
.menu-dropdowns .btn{padding:.4rem .55rem;line-height:1;background:transparent;border:0;color:var(--ink)}
.menu-dropdowns .btn:hover{color:#000}

/* Dropdown discreto (sem “caixa” gigante) */
.dropdown-menu{padding:.35rem 0;border-radius:var(--radius);box-shadow:var(--shadow);border:0;min-width:10rem}
.dropdown-item{padding:.4rem .8rem;border-radius:.4rem}
.dropdown-item.active,.dropdown-item:active{background:var(--primary)}

/* ===== Search entre logo e menus ===== */
.search-col{display:flex;align-items:center}
.search-col .search{width:100%}
.search-col .input-group{max-width:680px;margin:0 auto;border-radius:.5rem;overflow:hidden}
.search-col .form-control{height:40px;border-right:0;border-color:#e4e6ea}
.search-col .form-control:focus{box-shadow:none;border-color:#cfd3da}
.search-col .btn{height:40px;border-left:0;background:var(--primary);color:#fff;border-color:var(--primary)}
.search-col .btn:hover{filter:brightness(.95)}

/* Ícones e badges */
#header i.fa,#header svg{width:1rem;height:1rem;font-size:1rem}
.badge{font-size:.65rem}

/* ===== Navbar / Categorias ===== */
#mainnav{background:#fff;border-top:1px solid rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.06)}
#mainnav .navbar-nav .nav-link{padding:.9rem 1rem;color:#444;position:relative;transition:color .2s}
#mainnav .navbar-nav .nav-link:hover,#mainnav .navbar-nav .nav-link:focus{color:#000}

/* underline suave */
#mainnav .navbar-nav .nav-link::after{
    content:"";position:absolute;left:1rem;right:1rem;bottom:.45rem;height:3px;background:transparent;border-radius:3px;
    transform:scaleX(0);transform-origin:center;transition:transform .2s,background .2s
}
#mainnav .navbar-nav .nav-link:hover::after,
#mainnav .navbar-nav .nav-link.active::after{background:#9aa0a6;transform:scaleX(1)}

/* Hover abre submenu (desktop) */
@media (min-width:992px){
    #mainnav .dropdown-menu{display:none;opacity:0;visibility:hidden;transform:translateY(6px);
        transition:opacity .15s,transform .15s,visibility .15s}
    #mainnav .dropdown:hover > .dropdown-menu{display:block;opacity:1;visibility:visible;transform:translateY(0)}
    #mainnav .dropdown-toggle::after{transition:transform .2s}
    #mainnav .dropdown:hover .dropdown-toggle::after{transform:rotate(180deg)}
}

/* Offcanvas (mobile) */
.offcanvas .list-group-item{border:0;padding:.75rem 0}
.offcanvas .list-group-item>a{text-decoration:none;color:#333}
.offcanvas .list-group-item>a:hover{color:#000}

/* Responsivo: evita sobreposição da busca */
@media (max-width:991.98px){
    .logo-col{order:1}
    .menus-col{order:2;justify-content:flex-end}
    .search-col{order:3}
    .search-col .form-control,.search-col .btn{height:38px}
}
/* ===== Ajuste do dropdown de Idioma/Moeda (sem fundo azul) ===== */
.languages-menu .dropdown-item.active,
.languages-menu .dropdown-item:active,
.currencies-menu .dropdown-item.active,
.currencies-menu .dropdown-item:active{
    background: transparent !important;
    color: #111 !important;
    font-weight: 600;
}

/* Hover suave (mesmo para itens não ativos) */
.languages-menu .dropdown-item:hover,
.currencies-menu .dropdown-item:hover{
    background: rgba(0,0,0,.04);
    color: #111;
}

/* Check do item selecionado (sem mexer no HTML) */
.languages-menu .dropdown-item.active::after,
.currencies-menu .dropdown-item.active::after{
    content: "✓";
    float: right;
    opacity: .6;
    font-weight: 700;
}

/* Botões do topo (globo/EUR/conta) sem glow azul ao focar */
.menu-dropdowns .btn:focus,
.menu-dropdowns .btn:focus-visible{
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,0,0,.08);
    border-radius: .5rem;
}

/* Menu mais enxuto (remove aquele “pill” visual) */
.dropdown-menu{
    padding: .3rem 0;
    border-radius: .6rem;
    box-shadow: var(--shadow);
    border: 0;
}
.dropdown-item{
    padding: .4rem .8rem;
    border-radius: .4rem;
}
/* ===== Categorias – dropdown elegante ===== */
#mainnav .dropdown-menu{
    padding:.35rem;                 /* compacto */
    border:0;
    border-radius:.75rem;
    box-shadow:var(--shadow);       /* mesma sombra dos outros menus */
    min-width:14rem;                /* largura mínima confortável */
}

/* Itens */
#mainnav .dropdown-item{
    padding:.45rem .8rem;
    border-radius:.4rem;
    font-weight:500;
    color:#333;
}
#mainnav .dropdown-item:hover{
    background:rgba(0,0,0,.05);
    color:#111;
}

/* Estado ativo: sem “pill” azul, com check discreto */
#mainnav .dropdown-item.active,
#mainnav .dropdown-item:active{
    background:transparent !important;
    color:#111 !important;
    font-weight:700;
}
#mainnav .dropdown-item.active::after{
    content:"✓";
    float:right;
    opacity:.6;
    font-weight:700;
}

/* Cabeçalhos/seções (se o CategoryTree gerar grupos) */
#mainnav .dropdown-header{
    font-size:.78rem;
    letter-spacing:.02em;
    color:#777;
    padding:.35rem .8rem .2rem;
}

/* Espaçamento e alinhamento do “Kategorien” quando abre */
@media (min-width:992px){
    #mainnav .dropdown-menu{
        margin-top:.05rem;            /* leve afastamento da barra */
        transform:translateY(6px);
        opacity:0; visibility:hidden;
        transition:opacity .15s, transform .15s, visibility .15s;
    }
    #mainnav .dropdown:hover>.dropdown-menu{
        transform:translateY(0);
        opacity:1; visibility:visible;
    }
    #mainnav .dropdown-toggle::after{ transition:transform .2s; }
    #mainnav .dropdown:hover .dropdown-toggle::after{ transform:rotate(180deg); }
}

/* Opção: submenu em 2 colunas quando tiver muitos itens */
@media (min-width:1200px){
    #mainnav .dropdown-menu.cols-2{
        min-width:26rem;
        column-count:2;
        column-gap:.5rem;
    }
    #mainnav .dropdown-menu.cols-2 .dropdown-item{ break-inside:avoid; }
}

/* ===== ServiceMenu moderno ===== */
.service-menu .dropdown-menu{
    width:min(520px, 92vw);
    padding:.75rem;
    border:0;
    border-radius:.9rem;
    box-shadow:var(--shadow, 0 10px 24px rgba(0,0,0,.08));
}

.service-menu .service-menu-box{ /* wrapper de cada coluna */
    background:#fff;
}

.service-menu .account-quick{
    list-style:none; margin:0; padding:0;
}
.service-menu .account-quick li a{
    display:flex; align-items:center; gap:.6rem;
    padding:.55rem .6rem; border-radius:.5rem;
    color:#333; text-decoration:none;
}
.service-menu .account-quick li a:hover{ background:rgba(0,0,0,.05); color:#111; }
.service-menu .account-quick i{ width:1rem; text-align:center; opacity:.75; }

/* Título discreto */
.service-menu .menu-title{
    font-size:.85rem; font-weight:700; letter-spacing:.02em; color:#666;
    margin:.25rem .25rem .5rem;
}

/* Login card */
.loginBox{
    padding:.25rem 0 0;
}
.loginBox .form-label{ font-size:.85rem; color:#555; }
.loginBox .form-control{
    height:40px; border:1px solid #e3e6ea; border-radius:.55rem;
}
.loginBox .form-control:focus{ box-shadow:none; border-color:#cfd3da; }
.loginBox .btn{ border-radius:.55rem; }
.loginBox .btn.btn-primary{ background:var(--primary,#3d5afe); border-color:var(--primary,#3d5afe); }
.loginBox .actions-inline{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.loginBox .help-links a{ color:#666; text-decoration:none; }
.loginBox .help-links a:hover{ color:#000; text-decoration:underline; }

/* Toggle de senha embutido */
.password-wrap{ position:relative; }
.password-toggle{
    position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
    border:0; background:transparent; color:#666; padding:0; width:1.75rem; height:1.75rem;
}
.password-toggle:hover{ color:#111; }

/* Erros */
#login .alert{ border-radius:.55rem; padding:.4rem .6rem; }

/* Responsivo: empilha no mobile */
@media (max-width: 575.98px){
    .service-menu .dropdown-menu{ width:92vw; }
}
/* ===== ServiceMenu clean ===== */
.service-menu .dropdown-menu{
    width:min(560px, 92vw);
    padding:.75rem;
    border:0;
    border-radius:.9rem;
    box-shadow:0 12px 28px rgba(0,0,0,.08);
}

/* duas colunas, Konto sempre 1º, Login 2º */
.service-menu .col-konto{ order:1; }
.service-menu .col-login{ order:2; }
@media (max-width:575.98px){
    .service-menu .col-konto,
    .service-menu .col-login{ order:initial; }
}

/* título discreto */
.service-menu .menu-title{
    font-size:.85rem; font-weight:700; color:#666;
    margin:.1rem 0 .5rem;
}

/* links da coluna Konto */
.service-menu .topPopList a{
    color:#333; text-decoration:none;
    display:flex; align-items:center; gap:.5rem;
    padding:.45rem .5rem; border-radius:.5rem;
}
.service-menu .topPopList a:hover{ background:rgba(0,0,0,.05); color:#111; }

/* inputs do login */
.service-menu .loginBox .form-label{ font-size:.85rem; color:#555; margin-bottom:.25rem; }
.service-menu .loginBox .form-control{
    height:40px; border:1px solid #e3e6ea; border-radius:.55rem;
}
.service-menu .loginBox .form-control:focus{ box-shadow:none; border-color:#cfd3da; }

/* botões neutros (sem azul) */
.service-menu .btn-primary{
    background:#222; border-color:#222;
}
.service-menu .btn-primary:hover{ background:#1a1a1a; border-color:#1a1a1a; }
.service-menu .btn-outline-secondary{
    color:#333; border-color:#d1d5db; background:#fff;
}
.service-menu .btn-outline-secondary:hover{
    color:#111; border-color:#c2c7cf; background:#f6f7f8;
}

/* botão olho da senha */
.service-menu .password-wrap{ position:relative; }
.service-menu .password-toggle{
    position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
    border:0; background:transparent; color:#666; width:1.75rem; height:1.75rem;
}
.service-menu .password-toggle:hover{ color:#111; }

/* remove “pill azul” de itens ativos em qualquer dropdown do header */
.languages-menu .dropdown-item.active,
.currencies-menu .dropdown-item.active,
.service-menu .dropdown-item.active{
    background:transparent !important; color:#111 !important; font-weight:600;
}

/* Search (lupa) */
.search-col .btn{
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color:#fff !important;
}
.search-col .btn:hover{ background:#1a1a1a !important; border-color:#1a1a1a !important; }

/* Botões dentro do ServiceMenu */
.service-menu .btn.btn-primary{
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}
.service-menu .btn.btn-primary:hover{ background:#1a1a1a !important; border-color:#1a1a1a !important; }


/* REMOVER fundo do item ativo em QUALQUER dropdown */
.dropdown-item.active,
.dropdown-item:active{
    background: transparent !important;
    color: #111 !important;
    font-weight: 600;
}

/* Apaga regra específica antiga do login (sobrescreve sem apagar arquivo) */
.loginBox .btn.btn-primary{
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}
/* ===== MiniBasket clean ===== */
.basketFlyout{ padding: .25rem .25rem 0; }
.mini-head{ padding:.25rem .25rem .5rem; }
.mini-head .mini-view{ font-size:.9rem; color:#555; text-decoration:none; }
.mini-head .mini-view:hover{ color:#000; text-decoration:underline; }

.mini-items{ margin:0; }
.mini-scroll{ max-height: 320px; overflow:auto; }

.mini-item + .mini-item{ border-top:1px solid rgba(0,0,0,.06); }
.mini-thumb{ display:block; flex: 0 0 64px; width:64px; height:64px; border-radius:.5rem; overflow:hidden; background:#f3f4f6; }
.mini-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.mini-title{ display:block; color:#222; text-decoration:none; font-weight:600; line-height:1.2; }
.mini-title:hover{ text-decoration:underline; }
.mini-meta{ font-size:.8rem; color:#6b7280; margin-top:.15rem; }
.mini-price{ white-space:nowrap; font-weight:600; }

.mini-total{ font-size:.95rem; }
.mini-actions .btn{ border-radius:.55rem; }

/* Modal look harmonizado */
#basketModal .mini-item + .mini-item{ border-top:1px solid rgba(0,0,0,.06); }

.minibasket-menu .dropdown-menu {
    width: min(440px, 92vw);
    padding: .75rem;
    border: 0;
    border-radius: .9rem;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
}

/* ===== MiniBasket countdown ===== */
.mini-countdown{
    display:flex; align-items:center; gap:.5rem;
    font-size:.9rem; color:#6b7280;
}
.mini-countdown .mini-time{ color:#111; font-weight:700; }
.mini-divider{
    height:1px; background:rgba(0,0,0,.08);
    margin:.5rem 0 0;
}
/* ===== MiniCart resumo no header ===== */
.minicart-summary{
    margin-left:.35rem;
    text-decoration:none; color:inherit;
    align-items:center; gap:.5rem;
}
.minicart-amount{ display:flex; flex-direction:column; line-height:1.05; }
.minicart-amount strong{ font-weight:700; font-size:.98rem; }
.minicart-amount .minicart-sub{ font-size:.72rem; color:#6b7280; letter-spacing:.01em; }

/* pill de contagem */
.minicart-badge{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:1.5rem; height:1.05rem; padding:0 .4rem;
    border-radius:999px; font-size:.72rem; font-weight:700;
    background: var(--primary,#222); color:#fff;
}

/* alinhamento com o botão do carrinho */
.minibasket-menu .btn, .minicart-summary{ vertical-align:middle; }
/* ===== Mobile Header tweaks ===== */
.btn.btn-icon{ border:1px solid #e5e7eb; border-radius:.6rem; width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; }
.btn.btn-icon i{ font-size:1.05rem; }

/* Collapse da busca no mobile: remove margens extras */
@media (max-width: 767.98px){
    #mobileSearch .search{ margin-top: .25rem; }
}

/* ===== Offcanvas ===== */
.offcanvas{ border-right:0; }
.offcanvas-header{ border-bottom:1px solid rgba(0,0,0,.06); }
.offcanvas-body{ padding-top:.75rem; }

/* grid utilitária para os dois botões rápidos */
.d-grid.grid-cols-2{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.btn-light{ background:#f8f9fa; border-color:#f1f3f5; }
.btn-light:hover{ background:#f3f4f6; }

/* Lista de categorias dentro do offcanvas: empilhada, com tap targets bons */
.mobile-navlist .navbar{ all:unset; display:block; }
.mobile-navlist .navbar-nav{ display:block; padding:0; margin:0; }
.mobile-navlist .nav-link{ display:flex; align-items:center; justify-content:space-between; padding:.65rem .25rem; color:#222; border-radius:.5rem; }
.mobile-navlist .nav-link:hover{ background:rgba(0,0,0,.04); color:#111; }
.mobile-navlist .dropdown-menu{ display:block; position:static; float:none; border:0; box-shadow:none; padding:.25rem 0 .25rem .75rem; }
.mobile-navlist .dropdown-item{ padding:.45rem 0; }

@media (max-width: 991.98px){
    .mobile-navlist .dropdown-toggle::after{ display:none; }
    /* manter submenus visíveis */
    .mobile-navlist .dropdown-menu{ display:block !important; }
}
@media (max-width: 991.98px){
    .mobile-navlist .navbar{ all:unset; display:block; }
    .mobile-navlist .navbar-nav{ display:block; margin:0; padding:0; }
    .mobile-navlist .nav-link{ display:flex; justify-content:space-between; padding:.65rem .25rem; border-radius:.5rem; color:#222; }
    .mobile-navlist .nav-link:hover{ background:rgba(0,0,0,.04); color:#111; }

    /* submenus sempre visíveis no offcanvas */
    .mobile-navlist .dropdown-toggle::after{ display:none; }
    .mobile-navlist .dropdown-menu{ display:block !important; position:static; float:none; border:0; box-shadow:none; padding:.25rem 0 .25rem .75rem; }
}
/* Offcanvas das categorias: empilhar e simplificar dropdowns */
@media (max-width: 991.98px){
    .mobile-catlist .nav-item{ list-style:none; }
    .mobile-catlist .nav-link{ display:flex; justify-content:space-between; padding:.65rem .25rem; border-radius:.5rem; color:#222; }
    .mobile-catlist .nav-link:hover{ background:rgba(0,0,0,.04); color:#111; }

    /* submenus sempre visíveis e indentados dentro do offcanvas */
    .mobile-catlist .dropdown-menu{
        display:block !important;
        position:static; float:none; border:0; box-shadow:none;
        padding:.25rem 0 .25rem .75rem;
    }
    .mobile-catlist .dropdown-item{ padding:.45rem 0; }
}
@media (max-width: 991.98px){
    .mobile-navlist .navbar{ all:unset; display:block; }
    .mobile-navlist .navbar-nav{ display:block; margin:0; padding:0; }
    .mobile-navlist .nav-link{ display:flex; justify-content:space-between; padding:.65rem .25rem; border-radius:.5rem; color:#222; }
    .mobile-navlist .nav-link:hover{ background:rgba(0,0,0,.04); color:#111; }
    /* submenus sempre visíveis e indentados no offcanvas (evita dropdown do BS) */
    .mobile-navlist .dropdown-toggle::after{ display:none; }
    .mobile-navlist .dropdown-menu{
        display:block !important; position:static; float:none; border:0; box-shadow:none;
        padding:.25rem 0 .25rem .75rem;
    }
    .mobile-navlist .dropdown-item{ padding:.45rem 0; }
}
@media (max-width: 991.98px){
    .mobile-catlist .nav-item{ list-style:none; }
    .mobile-catlist .nav-link{
        display:flex; justify-content:space-between;
        padding:.65rem .25rem; border-radius:.5rem; color:#222;
        text-decoration:none;
    }
    .mobile-catlist .nav-link:hover{ background:rgba(0,0,0,.04); color:#111; }

    .mobile-catlist .dropdown-menu{
        display:block !important; position:static; float:none; border:0; box-shadow:none;
        padding:.25rem 0 .25rem .75rem;
        margin:0;
    }
    .mobile-catlist .dropdown-item{ padding:.45rem 0; }
}
/* Header: alinhamentos */
#header .btn.btn-icon{ padding:.4rem .55rem; border:0; background:transparent; }
#header .btn.btn-icon i{ font-size:1.1rem; }

/* Navbar desktop */
#mainnav{ background:#fff; border-top:1px solid rgba(0,0,0,.06); border-bottom:1px solid rgba(0,0,0,.06); }
#mainnav .navbar-nav .nav-link{ padding:.9rem 1rem; color:#444; position:relative; transition:color .2s; }
#mainnav .navbar-nav .nav-link:hover{ color:#000; }
#mainnav .navbar-nav .nav-link::after{
    content:""; position:absolute; left:1rem; right:1rem; bottom:.45rem; height:3px;
    background:transparent; border-radius:3px; transform:scaleX(0); transition:transform .2s, background .2s;
}
#mainnav .navbar-nav .nav-link:hover::after,
#mainnav .navbar-nav .nav-link.active::after{ background:#9aa0a6; transform:scaleX(1); }

/* Offcanvas (menu mobile) */
#mobileMenu .offcanvas-body{ padding-top:.25rem; }
#mobileMenu .btn.btn-light{
    border:1px solid #e5e7eb; border-radius:.7rem; background:#fff; font-weight:600;
}
#mobileMenu hr{ border-color:rgba(0,0,0,.08); }

/* Lista "mobile-navlist" que vem do CategoryTree */
.mobile-navlist #mainnav{ border:0; }                /* remove barras dentro do drawer */
.mobile-navlist .navbar-nav{ display:block; }        /* força lista vertical limpa */
.mobile-navlist .nav-item{ margin:.05rem 0; }
.mobile-navlist .nav-link{
    display:flex; align-items:center; gap:.5rem;
    padding:.6rem .25rem; border-radius:.5rem; color:#222;
}
.mobile-navlist .nav-link:hover{ background:rgba(0,0,0,.05); color:#111; }
.mobile-navlist .dropdown-menu{
    position:static; float:none; display:block; padding:.25rem 0 .35rem;
    border:0; box-shadow:none; margin:.15rem 0 .25rem .75rem; border-left:2px solid rgba(0,0,0,.08);
}
.mobile-navlist .dropdown-item{
    padding:.45rem .6rem; border-radius:.4rem; color:#333;
}
.mobile-navlist .dropdown-item:hover{ background:rgba(0,0,0,.05); color:#111; }

/* Tipos */
#mobileMenu .offcanvas-title{ font-weight:700; letter-spacing:.01em; }
.mobile-navlist .section-title{
    font-size:.9rem; font-weight:700; color:#666; margin:.25rem 0 .35rem;
}
/* Evita que o medidor do shrink calcule largura zero no desktop */
#mainnav .navbar-nav.no-shrink {
    flex-wrap: nowrap;         /* não quebra linha */
    white-space: nowrap;
}

/* Garanta que o contêiner do nav ocupe a largura disponível */
#mainnav .d-flex,
#mainnav .w-100 {
    min-width: 0; /* evita bugs de medição em flex */
}
/* evita que o shrink calcule quebra no desktop */
#mainnav .navbar-nav { flex-wrap: nowrap; white-space: nowrap; }
#mainnav .d-flex, #mainnav .w-100 { min-width: 0; } /* corrige medição em flex */

.mobile-navlist .dropdown-menu {
    box-shadow: none !important;
}

/* Barra/toast fixa logo abaixo do header, com entrada suave */
.newitem-alert{
    position: sticky;           /* gruda abaixo do topo do container */
    top: .5rem;
    z-index: 1060;
    animation: slideDown .25s ease-out;
}
@keyframes slideDown{
    from{ transform: translateY(-6px); opacity:.6; }
    to{ transform: translateY(0); opacity:1; }
}
.newitem-icon i{
    font-size: 1.35rem;
    color: #198754;             /* Bootstrap success */
}
/* —— Cookie bar leve / fluida —— */
.cookiebar{
    position: sticky;           /* gruda no topo, sem empurrar layout */
    top: 0;
    z-index: 1080;
    background: linear-gradient(0deg, rgba(255,255,255,.92), rgba(255,255,255,.92));
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(0,0,0,.06);
    transform: translateY(-100%);
    opacity: 0;
    transition: transform .25s ease, opacity .25s ease;
}
.cookiebar-visible{ transform: translateY(0); opacity: 1; }

.cookiebar .container{ padding: .55rem .75rem; }
.cookiebar-text{
    font-size: .95rem;
    line-height: 1.35;
    color: #374151; /* neutral-700 */
}

/* link “não concordo” — fluido e discreto */
.cookiebar-link{
    margin-left: .5rem;
    color: #111;
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,.25);
    text-underline-offset: 3px;
    transition: color .15s ease, border-color .15s ease;
}
.cookiebar-link:hover,
.cookiebar-link:focus{
    color: #000;
    border-color: currentColor;
}

/* botão X minimalista */
.btn-icon{
    background: transparent;
    border: 0;
    padding: .4rem;
    line-height: 1;
    color: #6b7280;
    border-radius: .5rem;
}
.btn-icon:hover{ color:#111; background: rgba(0,0,0,.04); }


@media (max-width: 576px){
    .cookiebar .container{ gap: .5rem; }
    .cookiebar-text{ font-size: .9rem; }
}

.product-card { transition: transform .16s ease, box-shadow .16s ease; border-radius: .8rem; }
.product-card:hover { transform: translateY(-2px); box-shadow: 0 1rem 1.25rem rgba(0,0,0,.12); }
.product-card .product-media img { display:block; object-fit:cover; border-top-left-radius:.8rem; border-top-right-radius:.8rem; }
.product-title a { text-decoration:none; }
.clamp-2 {
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden;
}

#pdp-root{
    --ink:#111; --muted:#6b7280; --border:#e5e7eb; --accent:#111;
}

/* remove “bloco preto” herdado da theme */
#pdp-root .widgetBox{ background:transparent!important; border:0!important; box-shadow:none!important; }

/* seção/respiração */
#pdp-root .pi-section{ margin-bottom:2rem; }
#pdp-root .pi-separator{ margin:2rem 0; border:0; border-top:1px solid var(--border); }

/* TABS bem claras */
#pdp-root .pdp-tabs{
    border-bottom:1px solid var(--border);
    gap:.25rem; overflow:auto; flex-wrap:nowrap;
}
#pdp-root .pdp-tabs .nav-link{
    color:var(--muted); background:transparent; border:0;
    border-bottom:2px solid transparent; border-radius:.5rem .5rem 0 0;
    padding:.65rem .9rem; font-weight:600; white-space:nowrap;
}
#pdp-root .pdp-tabs .nav-link:hover{ color:var(--ink); }
#pdp-root .pdp-tabs .nav-link.active{
    color:var(--ink); border-bottom-color:var(--accent);
}
#pdp-root .pdp-tabcontent{ padding:1rem 0; }
@media (min-width:768px){ #pdp-root .pdp-tabcontent{ padding:1.25rem 0; } }

/* tipografia dos textos dentro das abas */
#pdp-root .pdp-tabcontent p{ margin-bottom:.75rem; }
#pdp-root .pdp-tabcontent ul{ margin:0 0 .75rem 1.1rem; }

/* título “especificação” que você tem em attributes.html.twig */
#pdp-root .spec-title{ font-weight:700; color:var(--muted); border-bottom:2px solid var(--border);
    display:inline-block; padding-bottom:.35rem; margin-bottom:1rem; }

.pg-neutral{
    --pg-ink:           var(--pdp-ink, #222) !important;
    --pg-muted:         rgba(0,0,0,.6)  !important;
    --pg-bg:            #fff  !important;
    --pg-border:        var(--pdp-border, rgba(0,0,0,.14))  !important;
    --pg-hover-bg:      #f6f7f8  !important;
    --pg-active-bg:     #eceeef  !important;
    --pg-active-ink:    #111  !important;
    --pg-focus:         rgba(0,0,0,.12)  !important;
}

.pg-neutral .page-item{ margin:0 .12rem  !important; }
.pg-neutral .page-link{
    background:var(--pg-bg)  !important;
    color:var(--pg-ink)  !important;
    border-color:var(--pg-border) !important;
    border-radius:999px !important;
    padding:.25rem .6rem !important;
    line-height:1.2 !important;
    min-width:2.2rem !important;
    text-align:center !important;
    border-width:1px !important;
}
.pg-neutral .page-link:hover{
    background:var(--pg-hover-bg) !important;
    color:var(--pg-ink) !important;
    border-color:var(--pg-border) !important;
}
.pg-neutral .page-item.active .page-link{
    background:var(--pg-active-bg) !important;
    color:var(--pg-active-ink) !important;
    border-color:var(--pg-border) !important;
    font-weight:700 !important;
}
.pg-neutral .page-item.disabled .page-link{
    color:var(--pg-muted) !important;
    background:var(--pg-bg) !important;
    border-color:var(--pg-border) !important;
    opacity:.6 !important;
    pointer-events:none !important;
    cursor:default !important;
}
.pg-neutral .page-link:focus{
    outline:0 !important;
    box-shadow:0 0 0 .2rem var(--pg-focus) !important;
}
/* Neutralizar a paginação usando as CSS vars do Bootstrap */
.pagination.pg-neutral{
    /* cores */
    --bs-pagination-color:               #222 !important;
    --bs-pagination-bg:                  #fff !important;
    --bs-pagination-border-color:        rgba(0,0,0,.14) !important;

    --bs-pagination-hover-color:         #222 !important;
    --bs-pagination-hover-bg:            #f6f7f8 !important;
    --bs-pagination-hover-border-color:  rgba(0,0,0,.14) !important;

    --bs-pagination-active-color:        #111 !important;     /* texto do ativo */
    --bs-pagination-active-bg:           #eceeef !important;  /* fundo do ativo (cinza) */
    --bs-pagination-active-border-color: rgba(0,0,0,.14) !important;

    --bs-pagination-disabled-color:      rgba(0,0,0,.6) !important;
    --bs-pagination-disabled-bg:         #fff;
    --bs-pagination-disabled-border-color: rgba(0,0,0,.14) !important;

    /* layout “pill” e espaçamentos */
    --bs-pagination-border-radius:       999px !important;
    --bs-pagination-padding-x:           .6rem !important;
    --bs-pagination-padding-y:           .25rem !important;

    /* foco suave (sem azul) */
    --bs-pagination-focus-box-shadow:    0 0 0 .2rem rgba(0,0,0,.12) !important;
}

/* distância entre pills */
.pagination.pg-neutral .page-item{ margin:0 .12rem !important; }

/* garantir largura mínima (opcional) */
.pagination.pg-neutral .page-link{ min-width:2.2rem; text-align:center; line-height:1.2 !important; }