/* ==================================================================
   styles44.v-clean.css — condensed + fixes (2025-09-19)
   - Mantém nomes & especificidade.
   - Consolida duplicados, agrupa media queries.
   - Integra Hotfixes do menu e layout loja.
   ================================================================== */

/* --------------------------
   0) TOKENS & BASE
   -------------------------- */
:root{
    --brand:#ff9e18;
    --brandhover:#ff9e1820;
    --brandactive:#ffe1b8;

    --text:#33363d;
    --subtext:#33363dad;
    --muted:#6b7280;

    --bg:#fff;
    --surface-soft: #f9f9f9;
    --hairline:0.5px solid rgba(17,20,25,.10);

    --container-max:1260px;
    --page-max:1800px;
    --radius:16px;

    --topbar-h:72px;
    --menu-h:48px;
    --masthead-h: calc(var(--topbar-h) + var(--menu-h));

    --gutter-base:28px;
    --gutter-l:max(var(--gutter-base), env(safe-area-inset-left));
    --gutter-r:max(var(--gutter-base), env(safe-area-inset-right));

    /* MENU tokens (podes afinar) */
    --menu-gap:10px;          /* espaço horizontal entre colunas */
    --menu-fixed-h:560px;     /* altura mínima do painel */
    --menu-item-h:36px;       /* altura dos botões/links do menu */
    --menu-chev: "›";
    --menu-chev-size: 1.25em;         /* troca para "›" se preferires */
    --menu-chev-size: 0.9em;
    --menu-chev-pad: 18px;     /* espaço reservado à direita */
    --menu-chev-right: 10px;   /* distância do bordo direito */

    /* Tokens p/ igualar às chips */
    --chip-h: 30px;
    --chip-px: 12px;
    --chip-r: 999px;
    --chip-fs: 13px;

    /* pílulas para os selectores drop-down */
    --pill-fs: 13px;
    --pill-px: 10px;
    --pill-py: 6px;
    --pill-r: 12px;
}

h2{
    font-size: 1.3rem;
    margin-bottom: 0.6rem;
    color: var(--brand);
}

.subtitle{
    font-size:.95rem;
    color:var(--subtext,#777);
    margin-bottom:2rem;
}

*{
    box-sizing:border-box
}
html,body{
    height:100%;
    margin:0;
    overflow-x:hidden
}
html{
    -webkit-text-size-adjust:100%
}
body{
    font:16px/1.45 "Lato",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    color:var(--text);
    background:var(--bg);
    min-height:100svh;
    display:flex;
    flex-direction:column;
}
a{
    color:inherit;
    text-decoration:none
}

/* Foco discreto apenas quando faz sentido (teclado) */
:focus {
    outline: none;
}
:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--brand) 45%, transparent);
    outline-offset: 2px;
}


/* Normaliza o <button> para ter o mesmo look dos <a> */
.menu-cat{
    appearance:none;
    -webkit-appearance:none;
    font: inherit;
    color: inherit;
}

/* MENU SHEET links inherit color */
.menu-sheet a,
.menu-sheet a:visited{
    color: inherit;
    text-decoration: none;
}

img{
    max-width:100%;
    height:auto;
    display:block
}

header,.masthead,.topbar{
    flex:0 0 auto
}
main,
.content,
.site-content,
#content,
#main,
.main {
    flex: 1 0 auto;
    width: 100%;
    min-height: calc(100svh - var(--masthead-h));
}
footer,
.footer,
#footer {
    flex: 0 0 auto;
    margin-top: auto;
    clear: both;
}

/* Utilities */
.sr-only{
    position:absolute!important;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}
.color-brand {
    color:var(--brand)
}

/* Containers */
.container,.container-wide{
    width:100%;
    margin:0 auto;
    padding-left:var(--gutter-l);
    padding-right:var(--gutter-r);
}
.container{
    max-width:min(var(--container-max), 100%);
}
.container-wide{
    max-width:min(var(--page-max), 100%);
}

/* --------------------------
   1) MASTHEAD (Topbar + Menu)
   -------------------------- */
.masthead{
    position:sticky;
    top:0;
    z-index:100;
    background:var(--bg)
}

/* Topbar */
.topbar{
    background:var(--bg);
    border-bottom:var(--hairline)
}
.topbar__row{
    min-height:var(--topbar-h);
    display:grid;
    gap:16px;
    align-items:center;
    padding:12px 0;
    min-width:0;
    grid-template-columns:auto 1fr auto;
    grid-template-areas:"brand search actions";
}
.brand{
    grid-area:brand;
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--brand)
}
.brand__logo svg{
    height:50px;
    width:auto;
    display:block;
    margin-left:8px
}
.brand__logo svg path{
    fill:currentColor
}

/* Search */
.search{
    grid-area:search;
    min-width:0;
    width:100%
}
.search input{
    width:calc(100% - var(--gutter-l) - var(--gutter-r));
    margin-left:var(--gutter-l);
    margin-right:var(--gutter-r);
    height:44px;
    border:var(--hairline);
    border-radius:999px;
    padding:0 14px;
    outline:none;
    font-size:16px;
    line-height:44px;
    background:#f8f8f8;
    color:var(--text);
}

/* Actions & Buttons */
.actions{
    grid-area:actions;
    display:flex;
    justify-content:flex-end;
    gap:10px;
    min-width:0
}
.btn{
    height:44px;
    padding:0 14px;
    border:var(--hairline);
    border-radius:999px;
    background:var(--bg);
    font-weight:400;
    display:inline-flex;
    align-items:center;
    gap:10px;
    text-transform:uppercase;
    letter-spacing:.05em;
    white-space:nowrap;
    cursor:pointer;
    color:var(--text);
}
.btn:hover {
    border-color: var(--brand);
}
.btn--primary{
    border-color:rgba(255,158,24,.3);
    background:var(--brand);
    color:#fff
}
.btn .ico{
    width:18px;
    height:18px;
    display:block
}

/* Menu (bar) */
.mainmenu{
    background:#fcfcfd;
    border-bottom:var(--hairline);
    position:sticky;
    top:var(--topbar-h);
    z-index:95;
}
.mainmenu__row{
    min-height:var(--menu-h);
    display:flex;
    gap:26px;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    text-transform:uppercase;
    letter-spacing:.06em;
    font-weight:700;
    font-size:13px;
    padding:8px 0;
}
.mainmenu__row a{
    opacity:.86;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    border-radius:999px;
    background:transparent;
    color:inherit;
    border:0.5px solid transparent;
    transition:border-color .15s ease, color .15s ease, opacity .15s ease;
}
.mainmenu__row a:hover{
    opacity:1;
    border-color:var(--brand);
    background:transparent;
    color:inherit;
}
.mainmenu__row .ico{
    width:18px;
    height:18px
}
.mainmenu__row a.menu-cta{
    color:var(--brand);
}

.mainmenu__row a.is-active{
    opacity:1;
    border-color:var(--brand);
    background:rgba(255,158,24,.08);
    color:var(--brand);
}
.mainmenu__row a.is-active:hover{
    box-shadow: 0 0 0 0.5px var(--brand);
}

/* Agrupação (CÃO/GATO/OUTROS | Mega360/Guia) e divisor */
.mainmenu .mainmenu__row{
    display:flex;
    align-items:center;
    gap:24px
}
.mainmenu .menu-group{
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:nowrap
}
.mainmenu .menu-divider{
    width:1px;
    align-self:stretch;
    background:rgba(17,20,25,0.15)
}
@media (max-width:900px){
    .mainmenu .mainmenu__row{
        flex-direction:column;
        align-items:center;
        gap:10px
    }
    .mainmenu .menu-group{
        width:auto;
        justify-content:center;
        flex-wrap:wrap
    }
    .mainmenu .menu-divider{
        display:none
    }
}
@media (max-width:720px){
    .actions .btn-label {
        display: none;   /* esconde o texto "CARRINHO" e "CONTA" */
    }

    .actions .btn {
        padding: 0 8px;      /* opcional: reduzir padding lateral */
        min-width: auto;     /* evita largura mínima demasiado grande */
    }

    .actions .ico {
        width: 24px;         /* garante tamanho consistente do ícone */
        height: 24px;
    }

    /* logo / brand */
    .topbar__row .brand {
        margin-left: 10px;
    }

}

/* --------------------------
   2) CONTENT / CARDS
   -------------------------- */
.content{
    min-height:calc(100svh - var(--masthead-h));
    background:var(--bg)
}
.content > .container-wide{
    height:100%;
    display:flex
}

.card-link{
    display:block;
    height:100%
}
.card{
    position:relative;
    border-radius:var(--radius);
    overflow:hidden;
    background:var(--bg);
    border:var(--hairline);
    display:flex;
    height:100%;
    transition:outline-color .15s ease;
    outline:0.5px solid transparent;
    cursor:pointer;
}
.card__img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center
}

/* --------------------------
   3) LOJA — layout + filtros + lista + carrinho
   -------------------------- */
#layout-loja{
    --gap: clamp(16px, 2vw, 24px);
    display:grid;
    grid-template-columns: 1fr 3fr 1fr;
    gap: var(--gap);
    align-items:start;
    margin: clamp(12px, 2vw, 24px) 0 clamp(32px, 4vw, 64px);
}
#layout-loja .filtros, #layout-loja .lista, #layout-loja .carrinho{
    min-width:0;
}

/* Side columns (borders only on the inner edges) */
/*#layout-loja .filtros .filtros-bloco{ border-right: 0.5px solid var(--muted); }
#layout-loja .carrinho .cart-bloco{ border-left:  0.5px solid var(--muted); }*/
#layout-loja .filtros .filtros-bloco{
    border-right:var(--hairline);
}
#layout-loja .carrinho .cart-bloco{
    border-left:var(--hairline);
}

/* Filtros */
#layout-loja .filtros .filters{
    display:flex;
    flex-direction:column;
    gap:30px;
    align-items:center;
    text-align:center;
}
#layout-loja .filtros .filters__group{
    margin:0;
    padding:0;
    border:0;
    text-align:center;
}
#layout-loja .filtros .filters__title{
    display:block;
    width:100%;
    margin:0 0 12px;
    padding:0;
    font-weight:400;
    font-size:15px;
    letter-spacing:.02em;
    text-transform:uppercase;
    color:var(--muted);
}

/* ===== Chips ===== */
#layout-loja .filtros .chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px 12px;
    justify-content:center;
}

#layout-loja .filtros .chip{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--chip-h);
    padding: 0 var(--chip-px);

    border-radius: var(--chip-r);
    border: var(--hairline);
    background: var(--bg);
    color: var(--text);

    font-weight: 400;
    font-size: var(--chip-fs);
    line-height: var(--chip-h);
    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease,
        box-shadow .15s ease,
        opacity .15s ease;
}

/* Hover */
#layout-loja .filtros .chip:hover{
    border-color: var(--brand);
}

/* Input invisível mas focável (acessível) */
#layout-loja .filtros .chip > input{
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

/* ===== Estados programáticos (via classe/ARIA, útil como fallback a :has) ===== */
#layout-loja .filtros .chip--active,
#layout-loja .filtros .chip[aria-pressed="true"]{
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 10%, var(--bg));
    border-color: var(--brand);
}

#layout-loja .filtros .chip--active:hover,
#layout-loja .filtros .chip[aria-pressed="true"]:hover{
    box-shadow: 0 0 0 0.5px var(--brand);
}

#layout-loja .filtros .chip--disabled,
#layout-loja .filtros .chip[aria-disabled="true"]{
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

#layout-loja .filtros .chips__sep{
    flex-basis: 100%;       /* força quebra de linha na grelha flex */
    height: 0;              /* deixa só a linha, sem altura extra */
    border: 0;
    border-top: var(--hairline);
    margin: 0 10%;          /* afasta dos chips; ajusta ao teu gosto */
}

/* ===== Estados derivados do input (quando o browser suporta :has) ===== */
@supports(selector(:has(*))){
    #layout-loja .filtros .chip:has(> input:checked){
        color: var(--brand);
        background: color-mix(in srgb, var(--brand) 10%, var(--bg));
        border-color: var(--brand);
    }
    #layout-loja .filtros .chip:has(> input:checked):hover{
        box-shadow: 0 0 0 0.5px var(--brand);
    }
}


/* ===== A11y - Foco com padrão “is-tabbing” ===== */
/* 1) Sem foco visual por defeito (clique/tap) */
#layout-loja .filtros .chip:focus-within{
    box-shadow: none;
}

/* 2) Quando o utilizador está a tabular, mostra foco no chip */
html.is-tabbing #layout-loja .filtros .chip:focus-within{
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 35%, transparent);
}

/* 3) Fallback sem :has — desenha outline no <span> quando o input tem focus-visible */
#layout-loja .filtros .chip > input:focus-visible + span{
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ===== Preferências do utilizador ===== */
@media (prefers-contrast: more){
    #layout-loja .filtros .chip{
        border-color: var(--brand);
    }
    html.is-tabbing #layout-loja .filtros .chip:focus-within{
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 45%, transparent);
    }
}
@media (prefers-reduced-motion: reduce){
    #layout-loja .filtros .chip{
        transition: none;
    }
}


/*
/* Produtos — ordenação e botão Promo
*/
.lista-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:.75rem 0;
    border-bottom:var(--hairline);
    margin-bottom:1rem;
    background:var(--bg);
    color:var(--text);
}
.lista-head__meta{
    margin:0;
    font-size:13px;
    color:var(--muted);
}
.lista-head__right{
    display:flex;
    align-items:center;
    gap:.75rem;
    margin-left:auto;
}

/* Botão "ver Promoções" (altura = chips) */
.btn-promos{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:var(--chip-h);
    padding:0 var(--chip-px);
    border-radius:var(--chip-r);
    border:var(--hairline);
    background:var(--bg);
    color:var(--text);
    font-size:var(--chip-fs);
    line-height:var(--chip-h);
    font-weight:400;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
    cursor: pointer;
}
.btn-promos:hover{
    border-color:var(--brand);
}
.btn-promos.is-active{
    border-color:var(--brand);
    background:color-mix(in srgb, var(--brand) 10%, var(--bg));
    color:var(--brand);
}
/* ativo + hover => “1px” sem salto (mantém hairline, acrescenta 0.5px externo) */
.btn-promos.is-active:hover,
.btn-promos[aria-pressed="true"]:hover{
    box-shadow:0 0 0 0.5px var(--brand);
}

/* Selector */
.sorter{
    display:flex;
    align-items:center;
}

.sorter__control{
    position:relative;
    display:inline-flex;
    align-items:center;
    height:var(--chip-h);
    padding:0; /* evita crescer > 30px */
    border-radius:var(--chip-r);
    border:var(--hairline);
    background:var(--bg);
    color:var(--text);
    font-size:var(--chip-fs);
    line-height:var(--chip-h);
    -webkit-tap-highlight-color: transparent;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.sorter__control:hover{
    border-color:var(--brand);
}

/* Prefixo “Ordenar por:” */
.sorter__control::before{
    display:none;
}
/* Chevron */
.sorter__control::after{
    content:"";
    position:absolute;
    right:10px;
    top:50%;
    width:6px;
    height:6px;
    border-right:1.5px solid var(--text);
    border-bottom:1.5px solid var(--text);
    transform:translateY(-60%) rotate(45deg);
    pointer-events:none;
}
.sorter__select{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    background-image:none;
}
.sorter__control.is-open::after{
    transform:translateY(-50%) rotate(-135deg);
}

/* <select> ocupa 100% da “pílula” */
.sorter__select{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    border:0;
    background:transparent;
    background-image:none;
    color:var(--text);
    font-size:var(--chip-fs);
    height:100%;
    line-height:var(--chip-h);
    padding-block:0;
    padding-inline:12px 28px;
    border-radius:var(--chip-r);
    width:100%;
}

/* ===== Enhancement (dropdown custom) ===== */
.sorter--enhanced .sorter__select{
    position:absolute;
    inset:0;
    opacity:0;
    pointer-events:none; /* mantém no form */
}
.sorter__value{
    display:inline-flex;
    align-items:center;
    height:var(--chip-h);
    padding:0 calc(var(--chip-px) + 20px) 0 calc(var(--chip-px) + 1ch);
    border-radius:var(--chip-r);
    line-height:var(--chip-h);
    color:var(--text);
    user-select:none;
    white-space:nowrap;
}
.sorter__panel{
    position: absolute;
    left: 0;
    right: 0;                 /* ocupa exatamente a largura do .sorter__control */
    top: calc(100% + 3px);    /* afastamento de 3px */
    width: auto;
    min-width: 0;

    /*max-height: 280px;*/
    overflow: auto;

    background: var(--bg);
    color: var(--text);
    border: var(--hairline);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(17,20,25,.12);
    z-index: 60;
    display: none;
}
.sorter__control.is-open .sorter__panel{
    display:block;
}
.sorter__list{
    list-style:none;
    margin:0;
    padding:6px;
}
.sorter__option{
    display:flex;
    align-items:center;
    padding:6px 8px;
    border-radius:10px;
    cursor:pointer;
    outline:0;
}
.sorter__option:hover{
    background:color-mix(in srgb, var(--brand) 8%, var(--bg));
}
.sorter__option[aria-selected="true"]{
    color:var(--brand);
    background:color-mix(in srgb, var(--brand) 12%, var(--bg));
}

/* ===== A11y (alinhado com chips/is-tabbing) ===== */
/* Botão: foco só quando tabular */
html.is-tabbing .btn-promos:focus-visible{
    outline:2px solid var(--brand);
    outline-offset:2px;
}
/* Selector: foco no wrapper (usa :has) */
@supports(selector(:has(*))){
    html.is-tabbing .sorter__control:has(.sorter__select:focus-visible){
        border-color:var(--brand);
        box-shadow:0 0 0 2px color-mix(in srgb, var(--brand) 40%, transparent);
    }
    html.is-tabbing .sorter__select:focus-visible{
        outline:none;
    } /* evita duplo-anel */
}

/* Preferências */
@media (prefers-contrast: more){
    .btn-promos, .sorter__control{
        border-color:var(--brand);
    }
}
@media (prefers-reduced-motion: reduce){
    .btn-promos, .sorter__control{
        transition:none;
    }
}

/* Responsivo */
@media (max-width:768px){
    .lista-head{
        flex-direction:column;
        align-items:stretch;
        gap:.75rem;
    }
    .lista-head__right{
        justify-content:flex-end;
        gap:.5rem;
    }
    .btn-promos{
        padding:.5rem .7rem;
    }
}


/* ===== Loja: filtros (mobile vs desktop) ===== */
/* Por defeito (desktop): esconder UI mobile */
.filtros-toggle,
/* Mobile / tablets */


/* Hard-stop em desktop: mesmo que alguém force “checked”, não abre */
@media (min-width: 1024px) {
}

/* Produtos — grid & cards */
#produtos-lista{
    --pb-radius: 12px;
    --pb-gap: clamp(12px, 1.6vw, 20px);
    --pb-title: var(--text);
    --pb-text: var(--muted);
}
#produtos-lista .pb-grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, 240px);
    gap: var(--pb-gap);
    list-style:none;
    padding:0 0 32px;
    margin:0;
    justify-content:center;
}

@media (max-width: 720px){
    #produtos-lista .pb-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap:10px;
    }

    #produtos-lista .pb-item{
        min-width:0;
    }

    #produtos-lista .pb-media img{
        height:140px;
    }

    #produtos-lista .pb-body{
        padding:0 10px 10px;
    }
}
#produtos-lista .pb-item{
    margin:0;
}
#produtos-lista .pb-card{
    position:relative;
    background:var(--bg);
    border-radius:var(--pb-radius);
    border:var(--hairline);
    height:100%;
    overflow:hidden;
    transition:border-color .2s ease;
}
#produtos-lista .pb-link{
    display:block;
    color:inherit;
    text-decoration:none;
    height:100%;
}
#produtos-lista .pb-badge{
    position:absolute;
    left:8px;
    top:8px;
    z-index:2;
    width:42px;
    height:42px;
    border-radius:999px;
    background:var(--bg);
    border:0.5px solid #ccc;
    display:flex;
    align-items:center;
    justify-content:center;
}
#produtos-lista .pb-badge img{
    max-width:26px;
    max-height:26px;
}
#produtos-lista .pb-media{
    margin:0;
    padding:10px;
}
#produtos-lista .pb-media img{
    display:block;
    width:100%;
    height:200px;
    object-fit:contain;
    opacity: 0;
    transition: opacity .18s ease;
    will-change: opacity;
}
/* quando pronta */
#produtos-lista .pb-media img.is-ready {
    opacity: 1;
}
#produtos-lista .pb-body{
    padding: 0 12px 12px;
}
#produtos-lista .pb-title{
    margin:6px 0;
    font-weight:700;
    line-height:1.25;
    font-size:14px;
    color:var(--pb-title);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:2.6em;
}
/* subtítulo com bullet, sem linhas */
#produtos-lista .pb-subtitle{
    position: relative;
    padding-left: 0.9rem;      /* espaço para a bolinha */
    margin: 2px 0 8px 0;
    font-size: 13px;
    line-height: 1.3;
    color: var(--pb-text);
    font-weight: 600;          /* um pouco mais forte */
    min-height: 1.4em;
}

/* a bolinha */
#produtos-lista .pb-subtitle::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;                /* centra verticalmente; ajusta se precisares */
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;  /* usa a cor do subtítulo */
    opacity: .55;              /* visível mas discreto */
    transform: translateY(-50%);
}

/* opcional: modo escuro, um pouco mais opaco */
@media (prefers-color-scheme: dark){
    #produtos-lista .pb-subtitle::before{
        opacity: .7;
    }
}
#produtos-lista .pb-variants{
    list-style:none;
    padding:0;
    margin:0;
    color:var(--pb-text);
    font-size:13px;
}
#produtos-lista .pb-variants li{
    margin:2px 0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
#produtos-lista .pb-link:focus-visible{
    outline:0.5px solid currentColor;
    outline-offset:2px;
    border-radius:var(--pb-radius);
}

/* Carrinho (right sidebar) */
#layout-loja .carrinho .filters{
    display:flex;
    flex-direction:column;
    gap:36px;
    align-items:center;
    text-align:center;
    width:100%;
    box-sizing:border-box;
}
#layout-loja .carrinho .filters__title{
    display:block;
    width:100%;
    margin:0 0 12px;
    padding:0;
    font-weight:400;
    font-size:15px;
    letter-spacing:.02em;
    text-transform:uppercase;
    color:var(--muted);
    text-align:center;
}
#layout-loja .carrinho .filters__group{
    width:100%;
    margin:0;
    padding:0;
    border:0;
}
#layout-loja .carrinho .cart-bloco{
    box-sizing:border-box;
    padding-inline:16px;
}
#layout-loja .carrinho .cart-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:14px;
    align-items:center;
}
#layout-loja .carrinho .cart-item{
    display:grid;
    grid-template-columns:64px 1fr;
    grid-template-rows:auto auto;
    gap:8px 12px;
    padding:8px 0;
    border:none!important;
    border-radius:0;
    background:transparent;
}
#layout-loja .carrinho .ci-thumb{
    width:64px;
    height:64px;
    border:0;
    padding:0;
    background:transparent;
    object-fit:contain;
    object-position:center;
}
#layout-loja .carrinho .ci-title{
    margin:2px 0 8px;
    font-size:14px;
    font-weight:400;
    line-height:1.25;
    text-align:left;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
}
#layout-loja .carrinho .ci-row{
    display:flex;
    align-items:center;
    gap:12px;
}
#layout-loja .carrinho .ci-price{
    margin-left:auto;
    font-weight:400;
    font-size:14px;
    white-space:nowrap;
}
#layout-loja .carrinho .qty{
    display:inline-flex;
    align-items:center;
    gap:6px;
    border:var(--hairline);
    border-radius:999px;
    padding:2px;
    height:34px;
    background:#f8f8f8;
}
#layout-loja .carrinho .qty-btn{
    width:32px;
    height:28px;
    border:0;
    background:transparent;
    cursor:pointer;
    border-radius:999px;
    font-size:18px;
    line-height:28px;
}
#layout-loja .carrinho .qty-input{
    width:40px;
    height:28px;
    text-align:center;
    border:0;
    background:transparent;
    outline:none;
    font-size:14px;
    -moz-appearance:textfield;
}
#layout-loja .carrinho .qty-input::-webkit-outer-spin-button,
#layout-loja .carrinho .qty-input::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}
#layout-loja .carrinho .ci-remove{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:999px;
    border:var(--hairline);
    background:var(--bg);
    cursor:pointer;
}
#layout-loja .carrinho .ci-remove .ico{
    width:18px;
    height:18px;
    fill:currentColor;
    opacity:.85;
}
#layout-loja .carrinho .cart-section{
    margin:0;
    padding:0 10px 0 0;
    border:0;
}
#layout-loja .carrinho .filters__group .choice{
    display:flex;
    align-items:flex-start;
    gap:10px;
    justify-content:flex-start;
    text-align:left;
    width:min(100%, var(--cart-max, 520px));
    margin:0 auto;
    padding:6px 0 6px 10px;
    flex-wrap:wrap;
    cursor:pointer;
    user-select:none;
    font-size:14px;
    line-height:1.4;
}
#layout-loja .carrinho .rdo{
    position:absolute;
    opacity:0;
    pointer-events:none;
}
#layout-loja .carrinho .rdo-ui{
    width:16px;
    height:16px;
    border-radius:50%;
    border:2px solid rgba(0,0,0,.15);
    display:inline-block;
    position:relative;
    flex:0 0 auto;
    margin-top:2px;
}
#layout-loja .carrinho .rdo:checked + .rdo-ui{
    border-color:var(--brand);
}
#layout-loja .carrinho .rdo:checked + .rdo-ui::after{
    content:"";
    position:absolute;
    inset:3px;
    border-radius:50%;
    background:var(--brand);
}
#layout-loja .carrinho .filters__group .choice > span:not(.rdo-ui):not(.hint){
    flex:1 1 auto;
}
#layout-loja .carrinho .filters__group .choice .hint{
    order:3;
    flex:0 0 100%;
    display:block;
    margin:2px 0 0;
    line-height:1.2;
    text-align:center;
    color:var(--brand);
    font-size:13px;
}
#layout-loja .carrinho .cart-cta{
    width:min(100%, var(--cart-max, 520px));
    margin:8px auto 0;
    display:flex;
    justify-content:flex-end;
}
#layout-loja .carrinho .btn-checkout{
    width:100%;
    height:48px;
    border-radius:999px;
    font-weight:800;
    text-transform:uppercase;
}

#pb-lazy-spinner {
    text-align: center;
    padding: 12px;
    font-size: 16px;
    color: #555;
}

#pb-lazy-spinner .dots {
    display: inline-block;
    margin-left: 4px;
}

#pb-lazy-spinner .dots span {
    animation: blink 1.4s infinite both;
    font-weight: bold;
    padding: 0 1px;
}

#pb-lazy-spinner .dots span:nth-child(2) {
    animation-delay: 0.2s;
}
#pb-lazy-spinner .dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes blink {
    0%   {
        opacity: 0.2;
    }
    20%  {
        opacity: 1;
    }
    100% {
        opacity: 0.2;
    }
}

.pb-price-old{
    text-decoration: line-through;
    color:#888;
    margin-left:6px;
    font-size:.92em;
}

/* --------------------------
   4) FOOTER
   -------------------------- */
.footer{
    background:var(--bg)
}
.footer__row{
    padding:16px 0;
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    justify-content:center;
    font-size:14px;
    color:var(--muted);
    border-top:var(--hairline)
}

/* --------------------------
   5) DARK MODE (tweaks)
   -------------------------- */


/* --------------------------
   6) QUICK SEARCH (dropdown)
   -------------------------- */
.search-layer{
    position:fixed;
    inset:0;
    z-index:9999;
    display:none;
    background:transparent;
    pointer-events:none;
}
.search-layer[aria-hidden="false"]{
    display:block;
}
.search-sheet{
    position:absolute;
    pointer-events:auto;
    background:var(--bg);
    border:1px solid rgba(0,0,0,.08);
    border-radius:12px;
    box-shadow:0 12px 28px rgba(0,0,0,.12);
    overflow:hidden;
    opacity:0;
    transform:translateY(4px);
    transition:opacity .16s ease, transform .16s ease;
    will-change: transform, opacity;
}
.search-layer[aria-hidden="false"] .search-sheet{
    opacity:1;
    transform:translateY(0);
}
.search-body{
    max-height:min(62vh, 680px);
    overflow:auto;
    overscroll-behavior: contain;
}
.search-list{
    list-style:none;
    margin:0;
    padding:6px;
    display:flex;
    flex-direction:column;
    gap:6px;
}
.search-item{
    display:grid;
    grid-template-columns:56px 1fr;
    gap:12px;
    align-items:center;
    padding:10px 12px;
    border-radius:10px;
    border:1px solid transparent;
    background:var(--bg);
    color:inherit;
}
.search-item:hover{
    background:rgba(0,0,0,.03);
}
.search-item.is-active{
    border-color:var(--brand);
    background:color-mix(in srgb, var(--brand) 8%, transparent);
}
.search-item{
    display:grid;
    grid-template-columns:56px 1fr;
    gap:12px;
    align-items:center;
}

.search-media{
    position:relative;
    width:56px;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.search-badge--mega360{
    position:absolute;
    top:-6px;
    left:-6px;
    z-index:2;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    border-radius:999px;
    background:#fff;
    border:var(--hairline);
}

.search-badge--mega360 img{
    display:block;
    width:18px;
    height:auto;
}
.search-thumb {
    width:56px;
    height:56px;
    object-fit:contain;
    background:var(--bg);
    border-radius:.5rem;
    aspect-ratio:1 / 1;
}
.search-title{
    font-weight:700;
    line-height:1.25;
    margin:2px 0;
}
.search-meta{
    font-size:13px;
    color:#6b7280;
}
.search{
    position: relative;
}
.search-close-btn{
    position:absolute;
    top:50%;
    right:10px;
    transform:translateY(-50%);
    display:none;
    width:28px;
    height:28px;
    border:0;
    background:transparent;
    color:#6b7280;
    font-size:20px;
    line-height:1;
    cursor:pointer;
    padding:0;
    -webkit-tap-highlight-color: transparent;
    z-index:2;
}
#qsearch-list mark {
    background:none;
    font-weight:700;
}
.search-suggest{
    display:block;
    width:100%;
    text-align:left;
    padding:10px 12px;
    margin:4px 0 6px;
    border-radius:10px;
    border:1px dashed rgba(0,0,0,.15);
    background:var(--bg);
    color:inherit;
    font-size:13px;
    cursor:pointer;
}
.search-suggest:hover{
    background:rgba(0,0,0,.03);
}
.search-panel {
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(0,0,0,.08);
    background: #fff;
    overflow: hidden;
}

/* item “vazio” */
.search-empty {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 14px 16px;
    color: #6b7280;             /* cinza-500 */
    font-size: 14px;
    line-height: 1.25rem;
}

.search-empty::before {
    content: "";
    width: 16px;
    height: 16px;
    opacity: .55;
    background: no-repeat center / contain
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b7280' viewBox='0 0 16 16'><path d='M8 1a7 7 0 1 1 0 14A7 7 0 0 1 8 1zm0 2a5 5 0 1 0 0 10A5 5 0 0 0 8 3zm.75 7.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zM8 5.25a.75.75 0 0 1 .743.648L8.75 6v2a.75.75 0 0 1-1.493.102L7.25 8V6a.75.75 0 0 1 .75-.75z'/></svg>");
}

.search-empty strong {
    color: #374151;             /* cinza-700 */
    font-weight: 600;
}

/* link do “ver mais” (footer) */
.search-footer {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 12px 16px;
    border-top: 1px solid #eef2f7;
    text-decoration: none;
    color: #0b64ff;
    font-weight: 600;
}
.search-footer:hover {
    background: #f6f9ff;
}
.search-footer:focus {
    outline: 2px solid #cde1ff;
    outline-offset: -2px;
}

/* pequeno “kbd” para mostrar que Enter faz o mesmo */
.search-footer .kbd {
    margin-left: auto;
    font: 12px/1 monospace;
    padding: 2px 6px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    color: #6b7280;
    background: #f9fafb;
}

/* --------------------------
   7) MENU LAYER (floating panel)
   -------------------------- */
.menu-layer{
    position:fixed;
    inset:0;
    z-index:1000;
    background:transparent;
    pointer-events:none;
}
.menu-layer[aria-hidden="true"]{
    display:none;
}
.menu-layer[aria-hidden="false"]{
    display:block;
}

.menu-sheet{
    position:absolute;
    pointer-events:auto;
    max-height:calc(100vh - var(--masthead-h) - 24px);
    background:var(--bg);
    border:1px solid rgba(0,0,0,.08);
    border-radius:12px;
    box-shadow:0 12px 28px rgba(0,0,0,.14);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    -webkit-tap-highlight-color: transparent;
}

.menu-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 14px;
    border-bottom:var(--hairline);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    font-size:13px;
}
.menu-close, .menu-back{
    width:32px;
    height:32px;
    border-radius:999px;
    border:var(--hairline);
    background:var(--bg);
    cursor:pointer;
    font-size:18px;
    line-height:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:inherit;
    outline:none;
}
.menu-back{
    display: inline-flex !important;
    visibility: hidden;
}

.menu-body{
    display:grid;
    padding-top:12px;
    padding-bottom:12px;
    min-height:var(--menu-fixed-h);
    overflow:hidden;
    /* SEMPRE 3 colunas (1/4 | 1/4 | 2/4) — a 3ª fica invisível se não houver subsubcats */
    grid-template-columns: 1fr 1fr 2fr;
}
/* reserva espaço em TODAS as sub-categorias (evita “saltos”) */
.menu-cats .menu-cat{
    position: relative;
    padding-right: calc(var(--menu-chev-pad)); /* reserva espaço p/ o chevron */
}
.menu-subcats .menu-link{
    position: relative;
    padding-right: calc(var(--menu-chev-pad)); /* reserva espaço p/ o chevron */
}
.menu-cats{
    display:grid;
    grid-auto-rows:min-content;
    gap:8px;
    padding-left:12px;
    padding-right:12px;
}
.menu-cats .menu-cat::after,
.menu-subcats .menu-link[data-has-subsubcats="1"]::after{
    content: var(--menu-chev);
    position: absolute;
    right: var(--menu-chev-right);
    top: 45%;
    transform: translateY(-50%);
    font-size: 23px;
    line-height: 1;
    opacity: .55;
    pointer-events: none;
}

.menu-cat,
.menu-subcats .menu-link,
.menu-subsubcats .menu-link{
    cursor: pointer;
}

.menu-subcats{
    position:relative;
    display:grid;
    grid-auto-rows:min-content;
    grid-template-columns:1fr;
    gap:8px;
    min-width:0;
    padding-left:12px;
    padding-right:12px;
}

.menu-subcats::before{
    left:0;
}

.menu-subcats::after{
    right:0;
}
/* separadores centrados entre as colunas (à esquerda e à direita das subcats) */
.menu-subcats::before,
.menu-subcats::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:1px;
    background:rgba(17,20,25,.10);
    pointer-events:none;
}

.menu-subsubcats{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px 12px;
    padding-left:12px;
    padding-right:12px;
    visibility:hidden;
    pointer-events:none;
}

.menu-subsubcats__col{
    display: grid;
    grid-auto-rows: min-content;
    gap: 8px;
}
.menu-body.has-subsubcats .menu-subsubcats{
    visibility:visible;
    pointer-events:auto;
}

/* Itens do menu — altura estável + sem “jitter” no hover */
.menu-cat,
.menu-subcats .menu-link,
.menu-subsubcats .menu-link{
    min-height:var(--menu-item-h);
    display:flex;
    align-items:center;
    padding-block:0;
    padding-inline:12px;
    border-radius:10px;
    border:1px solid transparent;
    background:transparent;
    transition:background .15s ease, border-color .15s ease, color .15s ease;
}
@media (any-hover:hover){
    .menu-cat:hover,
    .menu-subcats .menu-link:hover,
    .menu-subsubcats .menu-link:hover{
        border-width:1px;
        border-color:transparent;
        box-shadow:0 0 0 .5px var(--brand) inset;
        background:transparent;
        color:inherit;
    }
}
.menu-cat.is-active,
.menu-subcats .menu-link.is-active,
.menu-subsubcats .menu-link.is-active{
    border-width:.5px;
    border-color:transparent;
    box-shadow:0 0 0 .5px var(--brand) inset;
    background:color-mix(in srgb, var(--brand) 12%, transparent);
    color:var(--brand);
}

.menu-subcats .menu-link[data-has-subsubcats="1"]::after{
    content: var(--menu-chev);
    position: absolute;
    right: var(--menu-chev-right);
    top: 45%;
    transform: translateY(-50%);
    font-size: 23px;
    line-height: 1;
    opacity: .55;
    pointer-events: none;
}

/* ligeiro realce no hover, sem movimento */
@media (any-hover:hover){
    .menu-cats .menu-cat:hover::after{
        opacity: .9;
    }
    .menu-subcats .menu-link[data-has-subsubcats="1"]:hover::after{
        opacity: .9;
    }
}

@media (max-width: 720px){
    .lista-head__left{
        display:none;
    }

    .lista-head{
        padding-top:0;
    }


    .sorter__control::before{
        display:none;
    }

    .sorter__control{
        width:100%;
    }

    .sorter__select{
        width:100%;
        padding-inline:12px 28px;
        color:var(--text);
        background:transparent;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

}

/* --------------------------
   8) HOMEPAGE CAROUSEL
   -------------------------- */

.content > .container-wide {
    height: auto;
    display: block;
}

.slider-wrapper {
    position: relative;
}

.slider-viewport {
    width: 100%;
    overflow: hidden;
    padding: 28px 0;
}

.slider-wrapper .content__grid {
    display: flex;
    gap: 24px;
    width: 100%;
    padding: 0;
    will-change: transform;
}

.slider-wrapper .card-link {
    flex: 0 0 calc((100% - 48px) / 3);
    display: block;
    height: auto;
}

.slider-wrapper .card {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    border-radius: 14px;
    overflow: hidden;
}

.slider-wrapper .card__img {
    position: static;
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* mobile: 1 banner full width */
@media (max-width: 800px) {
    .content {
        min-height: auto;
    }

    .content > .container-wide {
        padding-left: 0;
        padding-right: 0;
    }

    .slider-viewport {
        padding: 0;
    }

    .slider-wrapper .content__grid {
        gap: 0;
    }

    .slider-wrapper .card-link {
        flex: 0 0 100%;
        width: 100%;
        height: auto;
    }

    .slider-wrapper .card {
        display: block;
        height: auto;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    .slider-wrapper .card__img {
        position: static;
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
    }
}
@media (max-width: 800px) {
    .slider-viewport {
        overflow: hidden;
    }

    .slider-wrapper .content__grid {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .slider-wrapper .card-link {
        scroll-snap-align: start;
    }

    .slider-wrapper .content__grid::-webkit-scrollbar {
        display: none;
    }
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 45px;
    height: 45px;
    border: var(--hairline);
    cursor: pointer;
    border-radius: var(--chip-h);
    background: #fff;

    color: var(--brand);
    border: var(--hairline);
    font-size: 16px;
}

.slider-btn.left {
    left: 5px;
}

.slider-btn.right {
    right: 5px;
}

.slider-dots {
    position: absolute;
    left: 50%;
    bottom: 38px;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 12;
}

.slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 0;
    padding: 0;
    cursor: pointer;
    background: rgba(255,255,255,.55);
}

.slider-dot.is-active {
    width: 22px;
    background: var(--brand);
}

@media (max-width: 800px) {
    .slider-dots {
        bottom: 12px;
    }
}
@media (max-width: 800px) {
    .slider-btn {
        display: none !important;
    }
}

/* --------------------------
   9) RESPONSIVE (≤1200 / ≤992)
   -------------------------- */
@media (max-width:1200px){
    #produtos-lista .pb-media img{
        height:180px;
    }
    #produtos-lista .pb-badge{
        width:38px;
        height:38px;
    }
    .content__grid{
        grid-template-columns:1fr 1fr;
    }
}

@media (max-width:800px){
    .content__grid{
        grid-template-columns:1fr !important;
    }
}


/* ≥993px: sidebars sticky */


/* --------------------------
   10) AJUSTES FINOS
   -------------------------- */

/* Tipografia (desktop) para itens do menu */
.menu-cat,
.menu-subcats .menu-link,
.menu-subsubcats .menu-link {
    font-size:15px;
}


/* ===== Mobile (<=720px) — patches consolidados ===== */
@media (max-width:720px){
    /* MENU: neutraliza azul/visited para links normais, mas NÃO para CTAs */
    .mainmenu__row a:not(.menu-cta):link,
    .mainmenu__row a:not(.menu-cta):visited,
    .menu-layer .menu-sheet a:link,
    .menu-layer .menu-sheet a:visited {
        color: inherit;
        text-decoration: none;
    }

    /* MENU: CTAs mantêm a cor da brand */
    .mainmenu__row a.menu-cta,
    .mainmenu__row a.menu-cta:visited,
    .mainmenu__row a.menu-cta:active {
        color: var(--brand);
    }

    /* MENU: remover “ativo” no drilldown em mobile (UX step-by-step) */
    .menu-cats .menu-cat.is-active,
    .menu-subcats .menu-link.is-active {
        background: transparent;
        color: inherit;
        box-shadow: none;
        border-color: transparent;
    }

    /* MENU: drilldown em 1 coluna em mobile */
    .menu-layer .menu-body {
        display: grid;
        grid-template-columns: 1fr;
        column-gap: 0;
    }
    .menu-subcats::before,
    .menu-subcats::after {
        display: none;
    }
    .menu-cats,
    .menu-subcats,
    .menu-subsubcats {
        min-width: 0;
        width: 100%;
    }

    /* Botão “voltar”: reservar espaço (JS controla visibility) */
    .menu-back {
        display: inline-flex;
        visibility: hidden;
    }
}

/* Mobile/Tablet — esconder filtros de sidebar; usar o overlay */



/* ===== LISTA / FILTROS: MOBILE ===== */
/* -------------------------------------------------
   LISTA & FILTROS — UNIFIED BEHAVIOR
   Desktop (≥993px): sidebar visível + sticky; esconder toggle/fechar
   Mobile/Tablet (≤1023.98px): botão "FILTROS" + bottom sheet (mesmo .filtros-bloco)
   ------------------------------------------------- */

/* Desktop (≥993px) */
@media (min-width:993px){
    #layout-loja .filtros .filtros-toggle,
    #layout-loja .filtros label.filtros-toggle,
    #layout-loja .filtros label[for="filtros-toggle"],
    #layout-loja .filtros .sheet-head span,
    #layout-loja .filtros .sheet-head .sheet-close{
        display:none !important;
    }
    
    #layout-loja .filtros .filtros-bloco, #layout-loja .carrinho .cart-bloco{
        display:block !important;
        position:static;
        inset:auto;
        background:var(--bg);
        border-radius:0;
        box-shadow:none;
        padding: 15px 16px 16px 16px;
        max-height:none;
        overflow:visible;
        z-index:auto;
    }
    .filtros-backdrop {
        display:none !important;
    }

    /* Sidebars sticky por baixo do topo */

    aside.filtros,
    aside.carrinho,
    .right-sidebar{
        position: sticky;
        top: calc(var(--topbar-h) + var(--menu-h) + 12px);
        align-self: start;
        max-height: calc(100dvh - (var(--topbar-h) + var(--menu-h) + 12px));
        overflow-y: auto;
        min-height: 0;
        z-index: 1;
    }

    /* Hide any top heading inside .filtros to prevent 'Filtros' label showing on desktop */
    #layout-loja .filtros > h1,
    #layout-loja .filtros > h2,
    #layout-loja .filtros > label.filtros-toggle,
    #layout-loja .filtros > label[for="filtros-toggle"]{
        display:none !important;
    }

}

/* ===== MOBILE FILTERS (CLEAN) ===== */
.btn-filtros-mobile{
    display:none;
}

@media (max-width:1023.98px){

    #layout-loja{
        grid-template-columns:1fr;
    }

    #layout-loja .right-sidebar,
    aside.right-sidebar,
    .carrinho{
        display:none !important;
    }

    .btn-filtros-mobile{
        display:inline-flex;
    }

    .lista-head{
        align-items:center;
    }

    .lista-head__right{
        display:flex;
        gap:8px;
        width:100%;
    }

    .lista-head__right > *{
        flex:1 1 0;
    }

    .btn-filtros-mobile,
    .sorter{
        width:100%;
    }

    .btn-promos,
    .btn-filtros-mobile,
    .sorter__control{
        height:32px;
        font-size:12px;
        line-height:32px;
    }

    .btn-promos,
    .btn-filtros-mobile{
        padding:0 10px;
        white-space:nowrap;
    }

    .sorter{
        flex:1 1 auto;
        min-width:0;
    }

    .sorter__control{
        width:100%;
    }

    #produtos-lista{
        grid-column:1 / -1;
        padding-left:10px;
        padding-right:10px;
    }

    /* FILTERS SHEET */
    #layout-loja .filtros .filtros-bloco{
        display:none;
        position:fixed;
        left:10px;
        right:10px;
        top:calc(var(--masthead-h) + 12px);
        bottom:12px;
        background:var(--bg);
        border-radius:16px;
        box-shadow:0 12px 32px rgba(0,0,0,.18);
        padding:0 14px 14px;
        z-index:101;
        overflow:auto;
        border:var(--hairline);
    }

    #layout-loja .filtros .filtros-toggle-input:checked ~ .filtros-bloco{
        display:block !important;
    }

    /* HEADER */
    #layout-loja .filtros .sheet-head{
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:12px 0;
        border-bottom:var(--hairline);
        text-transform:uppercase;
        font-weight:700;
        font-size:13px;
    }

    #layout-loja .filtros .sheet-head::before{
        content:"";
        width:32px;
        height:32px;
    }

    #layout-loja .filtros .sheet-close{
        width:32px;
        height:32px;
        border-radius:999px;
        border:var(--hairline);
        display:flex;
        align-items:center;
        justify-content:center;
        cursor:pointer;
    }



    #layout-loja .filtros .filtros-toggle-input:checked ~ .filtros-backdrop{
        display:block;
    }
}


/* Accordion usado nas páginas do footer */
.accordion-group {
    max-width: 900px;
    margin: 40px auto;
    line-height: 1.6;
    color: #555;
    text-align: center;
}

.accordion-group h1 {
    color: var(--brand);
    font-size: 2.2rem;
    margin-bottom: 0.2rem;
}

.accordion-subtitle {
    font-size: 0.95rem;
    color: var(--subtext);
    margin-bottom: 2rem;
}

.accordion {
    text-align: left;
}

.accordion-item {
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
}

.accordion-header {
    width: 100%;
    padding: 1rem 1.2rem;
    border: none;
    background: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    cursor: pointer;
    text-align: left;
    color: var(--text);
    border-radius: 999px;
}

.accordion-header:hover {
    background: var(--brandhover);
}
.accordion-header[aria-expanded="true"] {
    background: var(--brandhover);
}

.accordion-icon {
    font-size: 1.3rem;
    transition: transform 0.2s ease;
    color: #b9b9b9;
}

.accordion-panel {
    max-height: 0;
    overflow: hidden;
    padding: 0 1.2rem;
    transition: max-height 0.25s ease, padding 0.25s ease;
    font-size: 0.95rem;
    color: #555;
}

.accordion-panel h3 {
    margin-top: 0.6rem;
    margin-bottom: 0.3rem;
    font-size: 1rem;
    color: var(--brand);
    text-align: center;
}

.accordion-panel p {
    margin-bottom: 0.4rem;
    text-align: justify;
    color: var(--subtext);
}

.accordion-icon {
    width: 20px;
    height: 20px;
    transition: transform 0.25s ease;
    color: var(--text);
}

.accordion-header[aria-expanded="true"] .accordion-icon {
    transform: rotate(180deg);
}
.accordion-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.accordion-section-icon {
    width: 18px;
    height: 18px;
    color: var(--brand);
    flex-shrink: 0;
}

.accordion-title {
    display: inline-block;
}


/* MEGA SIDEBAR */

.right-sidebar{
    border-left: var(--hairline);
    padding: 15px 16px 16px 16px;
}

.mega360-boxInner{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.mega360-head{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.mega360-text{
    text-align:center;
    max-width:240px;
    margin:16px auto 0;
}

.mega360-flow{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    margin:20px;
    width:100%;
    gap:10px;
}

.mega360-step{
    width:100%;
    opacity:.28;
    transition:opacity .22s ease, transform .22s ease, filter .22s ease;
}

.mega360-stepRow{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
}

.mega360-badgeWrap{
    position:relative;
    display:inline-flex;
    justify-content:center;
    align-items:center;
}

.mega360-status{
    position:absolute;
    left:50%;
    bottom:100%;
    transform:translateX(-50%) translateY(100px);
    z-index:2;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:52px;
    height:28px;
    padding:0 12px;

    border:var(--hairline);
    border-radius:999px;
    background:var(--bg);
    color:var(--text);
    font-size:14px;
    font-weight:600;
    line-height:1;
    white-space:nowrap;

    box-shadow:0 6px 18px rgba(17,20,25,.06);
}

.mega360-badgeMini{
    width:92px;
    height:92px;
    padding:10px;
    border:var(--hairline);
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--bg);
    transition:transform .22s ease, box-shadow .22s ease, opacity .22s ease, filter .22s ease;
}

.mega360-badgeMini img{
    width:72px;
    height:72px;
    object-fit:contain;
}

.mega360-line{
    width:1px;
    height:16px;
    background:rgba(17,20,25,.12);
}

.mega360-btn{
    display:flex;
    justify-content:center;
    width:100%;
    margin-top:18px;
}

.mega360-logo{
    display:block;
    margin:0 auto;
}

.mega360-badgeMini{
    width:92px;
    height:92px;
    padding:10px;
    border:var(--hairline);
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--bg);
    transition:transform .22s ease, box-shadow .22s ease, opacity .22s ease, filter .22s ease;
}

.mega360-badgeMini img{
    width:72px;
    height:72px;
    object-fit:contain;
}

/* optional: lines also brighten progressively */
.mega360-step.is-active + .mega360-line,
.mega360-line.is-active{
    background:rgba(255,158,24,.35);
}

/* selo MEGA360 flutuante sobre a imagem */
#layout-loja.layout-pdp .pdp-gallery-main .pdp-mega360-badge{
    position:absolute;
    top:18px;
    left:18px;
    z-index:6;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;

    border: var(--hairline);
    border-radius:999px;
    background:#fff;

    /* interação */
    cursor:pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

#layout-loja.layout-pdp .pdp-gallery-main .pdp-mega360-badge img{
    display:block;
    width:84px;
    height:auto;
    padding:10px;
    pointer-events:none; /* clique sempre no <a>, não na img */
}

/* hover leve (não exagerado) */
#layout-loja.layout-pdp .pdp-gallery-main .pdp-mega360-badge:hover{
    border-color: var(--brand);
}

/* acessibilidade */
#layout-loja.layout-pdp .pdp-gallery-main .pdp-mega360-badge:focus-visible{
    outline:2px solid var(--brand);
    outline-offset:3px;
}

@media (max-width:1100px){
    #layout-loja.layout-pdp .pdp-gallery-main .pdp-mega360-badge{
        top:10px;
        left:10px;
    }

    #layout-loja.layout-pdp .pdp-gallery-main .pdp-mega360-badge img{
        width:64px;
    }
}
@media (max-width: 1023.98px){
    #layout-loja{
        grid-template-columns: 1fr; /* remove the 3-column layout on mobile */
        
        --gap:0px;
    
    }

    #layout-loja .right-sidebar,
    aside.right-sidebar{
        display: none !important;
    }
}

/* ==========================
   HEADER CART COUNT
   ========================== */

.cart-header-btn .cart-icon-wrap {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 22px;
}

.cart-header-btn .cart-count-replace {
    display: none;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 22px;
    text-align: center;
}

.cart-header-btn.has-items .cart-svg {
    display: none;
}

.cart-header-btn.has-items .cart-count-replace {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cart-header-btn.has-items {
    color: inherit;
}

.cart-count-replace.is-pulsing {
    animation: cart-count-pulse .32s ease;
}

@keyframes cart-count-pulse {
    0% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.22);
    }

    100% {
        transform: scale(1);
    }
}


/* ==========================
   MOBILE HEADER / HAMBURGER
   ========================== */

.hamburger {
    display: none;
    width: 44px;
    height: 44px;
    border: var(--hairline);
    border-radius: 999px;
    background: var(--bg);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.hamburger .ico {
    width: 22px;
    height: 22px;
    display: block;
}

@media (max-width: 720px) {
    .topbar .topbar__row {
        display: grid !important;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "hamburger brand actions"
            "search search search";
        row-gap: 10px;
        align-items: center;
        padding: 15px 10px;
    }

    .topbar .hamburger {
        grid-area: hamburger;
        display: inline-flex !important;
    }

    .topbar .brand {
        grid-area: brand;
        justify-self: start;
    }

    .topbar .actions {
        grid-area: actions;
        justify-self: end;
    }

    .topbar form.search {
        grid-area: search;
    }

    .topbar .search input {
        width: 100%;
        margin: 0;
    }

    .topbar .brand__logo svg {
        height: 40px;
    }

    .menu-layer .menu-sheet {
        overflow: hidden;
    }

    .menu-layer .menu-body {
        position: relative;
        display: block !important;
        min-height: 420px;
        padding: 0;
        overflow: hidden;
    }

    .menu-layer .menu-cats,
    .menu-layer .menu-subcats,
    .menu-layer .menu-subsubcats {
        position: absolute;
        inset: 0;
        width: 100%;
        min-width: 0;
        padding: 12px;
        background: var(--bg);
        overflow: auto;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .menu-layer .menu-subcats::before,
    .menu-layer .menu-subcats::after {
        display: none !important;
    }

    .mainmenu {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        top: var(--topbar-h);
        bottom: 0;
        z-index: 1005;
        border-radius: 0;
        background: var(--bg);
        border: 0;
        box-shadow: none;
        transform: translateX(-100%);
        transition: transform .28s ease;
    }

    html.is-mainmenu-open .mainmenu {
        display: block;
        transform: translateX(0);
    }

    .mainmenu-scrim {
        display: none;
    }

    html.is-mainmenu-open .mainmenu-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1004;
        background: rgba(0, 0, 0, .35);
    }

    .mainmenu__row {
        min-height: 100dvh;
        padding: 25px 16px 80px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        overflow: auto;
    }

    .menu-divider {
        display: none;
    }

    .mainmenu .menu-group {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 10px;
        width: 100%;
    }

    .mainmenu .menu-group a {
        position: relative;
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 60px;
        padding: 12px 10px;
        border-radius: 14px;
        border: var(--hairline);
        background: rgba(0, 0, 0, .02);
        text-decoration: none;
        text-align: center;
        font-weight: 400;
        letter-spacing: .04em;
        text-transform: uppercase;
        font-size: 14px;
        transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
    }

    .mainmenu .menu-group a::before {
        content: "";
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
        background-color: var(--icon-color, var(--text));
        -webkit-mask-image: var(--menu-icon);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
        mask-image: var(--menu-icon);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
    }

    .mainmenu .menu-group--animals a,
    .mainmenu .menu-group--extras a {
        --icon-color: var(--brand);
    }

    .mainmenu .menu-group--animals a:nth-child(3) {
        grid-column: 1 / -1;
    }

    .mainmenu .mainmenu__row > .menu-divider {
        display: block;
        height: 1px;
        background: rgba(17, 20, 25, .10);
        border: 0;
        margin: 2px 0;
    }

    .masthead {
        z-index: 1100;
    }

    .topbar {
        position: relative;
        z-index: 1101;
    }
}

@media (max-width: 720px) and (any-hover: hover) {
    .mainmenu .menu-group a:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 26px rgba(0, 0, 0, .10);
        background: rgba(0, 0, 0, .03);
    }
}



.search-loading {
    padding: 18px;
    text-align: center;
    color: #555;
    font-size: 14px;
}

.search-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: -3px;
    border: 2px solid #ddd;
    border-top-color: #111;
    border-radius: 50%;
    animation: searchSpin .7s linear infinite;
}

@keyframes searchSpin {
    to {
        transform: rotate(360deg);
    }
}

/* MENU: alinhar texto à esquerda e permitir scroll nas colunas */
.menu-body{
    height: min(var(--menu-fixed-h), calc(100vh - var(--masthead-h) - 92px));
    min-height: 0;
    overflow: hidden;
}

.menu-cats,
.menu-subcats,
.menu-subsubcats{
    align-content: start !important;
    justify-content: stretch !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0;
    max-height: 100%;
}

.menu-subsubcats__col{
    display: grid;
    grid-auto-rows: min-content;
    align-content: start;
    gap: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    max-height: 100%;
}

.menu-cat,
.menu-subcats .menu-link,
.menu-subsubcats .menu-link{
    justify-content: flex-start !important;
    text-align: left !important;
    white-space: normal;
}

/* GLOBAL: custom scrollbars */
*{
    scrollbar-width: thin;
    scrollbar-color: rgba(255,158,24,.65) transparent;
}

/* Chrome / Edge / Safari */
*::-webkit-scrollbar{
    width: 6px;
    height: 6px;
}

*::-webkit-scrollbar-track{
    background: transparent;
}

*::-webkit-scrollbar-thumb{
    background: rgba(255,158,24,.55);
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover{
    background: rgba(255,158,24,.85);
}

/* Chrome / Edge / Safari */
.menu-cats::-webkit-scrollbar,
.menu-subcats::-webkit-scrollbar,
.menu-subsubcats::-webkit-scrollbar,
.menu-subsubcats__col::-webkit-scrollbar{
    width: 6px;
}

.menu-cats::-webkit-scrollbar-track,
.menu-subcats::-webkit-scrollbar-track,
.menu-subsubcats::-webkit-scrollbar-track,
.menu-subsubcats__col::-webkit-scrollbar-track{
    background: transparent;
}

.menu-cats::-webkit-scrollbar-thumb,
.menu-subcats::-webkit-scrollbar-thumb,
.menu-subsubcats::-webkit-scrollbar-thumb,
.menu-subsubcats__col::-webkit-scrollbar-thumb{
    background: rgba(255,158,24,.55);
    border-radius: 999px;
}

.menu-cats::-webkit-scrollbar-thumb:hover,
.menu-subcats::-webkit-scrollbar-thumb:hover,
.menu-subsubcats::-webkit-scrollbar-thumb:hover,
.menu-subsubcats__col::-webkit-scrollbar-thumb:hover{
    background: rgba(255,158,24,.85);
}