.catalogo,
.catalogo-modal {
    --cat-accent: var(--theme-accent, #1f2937);
    --cat-accent-text: var(--theme-accent-text, #ffffff);
    --cat-accent-dark: var(--theme-accent-dark, #111827);
    --cat-accent-soft: color-mix(in srgb, var(--cat-accent) 10%, transparent);
    --cat-text: var(--theme-text, #111827);
    --cat-muted: var(--theme-text-muted, #6b7280);
    --cat-border: var(--theme-border, #e5e7eb);
    --cat-surface: var(--theme-surface, #ffffff);
    --cat-bg: var(--theme-background, #f8fafc);
    --cat-radius: 14px;
    --cat-danger: #b91c1c;
    --cat-danger-bg: #fee2e2;
    --cat-promo: #047857;
    --cat-promo-bg: #d1fae5;

}

.catalogo {
    background: var(--cat-bg);
    color: var(--cat-text);
    min-height: 60vh;
    padding-bottom: 3rem;
}

.catalogo [hidden] { display: none !important; }

.catalogo .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.catalogo-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.catalogo-hero {
    background: var(--cat-surface);
    border-bottom: 1px solid var(--cat-border);
    padding: 1.5rem 0 1.75rem;
}

.catalogo-breadcrumb {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8125rem;
    color: var(--cat-muted);
    margin-bottom: .75rem;
}
.catalogo-breadcrumb a { color: inherit; text-decoration: none; }
.catalogo-breadcrumb a:hover { color: var(--cat-accent); }
.catalogo-breadcrumb i { font-size: .625rem; }

.catalogo-hero__linha {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
}

.catalogo-hero__titulo {
    font-size: clamp(1.625rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 .375rem;
    color: var(--cat-text);
}

.catalogo-hero__sub {
    margin: 0;
    color: var(--cat-muted);
    font-size: .9375rem;
}
.catalogo-hero__sub strong { color: var(--cat-text); }
.catalogo-hero__sep { margin: 0 .25rem; }

.catalogo-chip {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    margin-top: .75rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    background: var(--cat-accent-soft);
    color: var(--cat-accent-dark);
    font-size: .8125rem;
}

.catalogo-hero__acoes { display: flex; flex-wrap: wrap; gap: .5rem; }

.catalogo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 42px;
    padding: .5rem 1rem;
    border: 1px solid var(--cat-border);
    border-radius: 10px;
    background: var(--cat-surface);
    color: var(--cat-text);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, color .15s, box-shadow .15s;
}
.catalogo-btn:hover { border-color: var(--cat-accent); color: var(--cat-accent); }
.catalogo-btn:focus-visible,
.catalogo-visao__btn:focus-visible,
.catalogo-item a:focus-visible,
.catalogo-pag__item:focus-visible {
    outline: 2px solid var(--cat-accent);
    outline-offset: 2px;
}
.catalogo-btn--primario {
    background: var(--cat-accent);
    border-color: var(--cat-accent);
    color: var(--cat-accent-text);
}
.catalogo-btn--primario:hover {
    background: var(--cat-accent-dark);
    border-color: var(--cat-accent-dark);
    color: var(--cat-accent-text);
}

.catalogo-aviso {
    background: var(--cat-accent-soft);
    border-bottom: 1px solid var(--cat-border);
}
.catalogo-aviso__conteudo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    padding-top: .875rem;
    padding-bottom: .875rem;
}
.catalogo-aviso__conteudo > i { color: var(--cat-accent); font-size: 1.125rem; }
.catalogo-aviso__conteudo p { margin: 0; flex: 1 1 280px; font-size: .9375rem; }
.catalogo-aviso__acoes { display: flex; gap: .5rem; }

.catalogo-filtros {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--cat-surface) 92%, transparent);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--cat-border);
}
.catalogo-filtros__linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .625rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
}
.catalogo-filtros__extras {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .625rem;
}
.catalogo-filtros__abrir { display: none; }

.catalogo-campo {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
}
.catalogo-campo input,
.catalogo-campo select {
    height: 42px;
    border: 1px solid var(--cat-border);
    border-radius: 10px;
    background: var(--cat-surface);
    color: var(--cat-text);
    font-size: .875rem;
    padding: 0 .875rem;
    max-width: 100%;
}
.catalogo-campo select { padding-right: 2rem; cursor: pointer; }
.catalogo-campo input:focus,
.catalogo-campo select:focus {
    outline: none;
    border-color: var(--cat-accent);
    box-shadow: 0 0 0 3px var(--cat-accent-soft);
}
.catalogo-campo--busca { flex: 1 1 240px; }
.catalogo-campo--busca i {
    position: absolute;
    left: .875rem;
    color: var(--cat-muted);
    font-size: .875rem;
    pointer-events: none;
}
.catalogo-campo--busca input { width: 100%; padding-left: 2.375rem; }

.catalogo-link-limpar {
    font-size: .8125rem;
    color: var(--cat-muted);
    text-decoration: underline;
}
.catalogo-link-limpar:hover { color: var(--cat-accent); }

.catalogo-visao {
    display: inline-flex;
    border: 1px solid var(--cat-border);
    border-radius: 10px;
    overflow: hidden;
    margin-left: auto;
}
.catalogo-visao__btn {
    width: 42px;
    height: 40px;
    border: 0;
    background: var(--cat-surface);
    color: var(--cat-muted);
    cursor: pointer;
}
.catalogo-visao__btn[aria-pressed="true"] {
    background: var(--cat-accent);
    color: var(--cat-accent-text);
}

.catalogo-corpo { padding-top: 1.25rem; }

.catalogo-intervalo {
    margin: 0 0 .75rem;
    font-size: .8125rem;
    color: var(--cat-muted);
}

.catalogo-lista {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.catalogo-item {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem;
    background: var(--cat-surface);
    border: 1px solid var(--cat-border);
    border-radius: var(--cat-radius);
    transition: box-shadow .2s, border-color .2s, transform .2s;
    content-visibility: auto;
    contain-intrinsic-size: auto 130px;
}
.catalogo-item:hover {
    border-color: color-mix(in srgb, var(--cat-accent) 35%, var(--cat-border));
    box-shadow: 0 10px 24px -14px rgba(15, 23, 42, .35);
}

.catalogo-item__foto {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}
.catalogo-item__foto .product-image {
    display: block;
    width: 100%;
    height: 100%;
}
.catalogo-item__foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .25s;
}
.catalogo-item__foto[data-catalogo-galeria] { cursor: zoom-in; }
.catalogo-item__foto[data-catalogo-galeria]:hover img { transform: scale(1.06); }
.catalogo-item__fotos {
    position: absolute;
    right: 4px;
    bottom: 4px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(17, 24, 39, .72);
    color: #fff;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.5;
}
.catalogo-item__zoom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 24, 39, .28);
    color: #fff;
    font-size: 1.25rem;
    opacity: 0;
    transition: opacity .2s;
}
.catalogo-item__foto:hover .catalogo-item__zoom,
.catalogo-item__foto:focus-visible .catalogo-item__zoom { opacity: 1; }
.catalogo-item__foto.is-carregando .catalogo-item__zoom { opacity: 1; }
.catalogo-item__foto.is-carregando .catalogo-item__zoom i::before { content: "\f110"; }
.catalogo-item__foto.is-carregando .catalogo-item__zoom i { animation: catalogo-giro 1s linear infinite; }

@keyframes catalogo-giro { to { transform: rotate(360deg); } }
.catalogo-item__semfoto { color: var(--cat-border); font-size: 2rem; }
.catalogo-item.is-esgotado .catalogo-item__foto img { opacity: .55; filter: grayscale(.6); }

.catalogo-item__info { min-width: 0; }
.catalogo-item__selos { display: flex; gap: .375rem; }
.catalogo-item__selos:empty { display: none; }
.catalogo-selo {
    display: inline-block;
    margin-bottom: .375rem;
    padding: .125rem .5rem;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.catalogo-selo--esgotado { background: var(--cat-danger-bg); color: var(--cat-danger); }
.catalogo-selo--promo { background: var(--cat-promo-bg); color: var(--cat-promo); }

.catalogo-item__nome {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}
.catalogo-item__nome a { color: var(--cat-text); text-decoration: none; }
.catalogo-item__nome a:hover { color: var(--cat-accent); }

.catalogo-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .875rem;
    margin-top: .25rem;
    font-size: .75rem;
    color: var(--cat-muted);
}
.catalogo-item__meta strong { color: var(--cat-text); font-weight: 600; }

.catalogo-item__resumo {
    margin: .5rem 0 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--cat-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.catalogo-item__resumo:empty { display: none; }

.catalogo-item__acao {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .625rem;
    min-width: 190px;
    text-align: right;
}
.catalogo-item__preco { display: flex; flex-direction: column; align-items: flex-end; }
.catalogo-preco-de {
    font-size: .8125rem;
    color: var(--cat-muted);
    text-decoration: line-through;
}
.catalogo-preco-por { font-size: 1.25rem; font-weight: 700; color: var(--cat-text); }
.catalogo-preco-por strong { font-weight: inherit; }
.catalogo-preco-por .CatalogPriceExTax { display: block; font-size: .75rem; font-weight: 500; color: var(--cat-muted); }
.catalogo-preco-consulte { font-size: .9375rem; font-weight: 600; color: var(--cat-muted); }
.catalogo-preco-login {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--cat-accent);
    text-decoration: none;
}
.catalogo-preco-login:hover { text-decoration: underline; }

.catalogo-comprar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 40px;
    padding: .5rem 1.125rem;
    border: 1px solid var(--cat-accent);
    border-radius: 10px;
    background: var(--cat-accent);
    color: var(--cat-accent-text);
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.catalogo-comprar:hover {
    background: var(--cat-accent-dark);
    border-color: var(--cat-accent-dark);
    color: var(--cat-accent-text);
}
.catalogo-comprar:focus-visible { outline: 2px solid var(--cat-accent); outline-offset: 2px; }
.catalogo-comprar.is-carregando,
.catalogo-comprar:disabled { opacity: .7; cursor: progress; }
.catalogo-comprar.is-carregando i::before { content: "\f110"; }
.catalogo-comprar.is-carregando i { animation: catalogo-giro 1s linear infinite; }

.catalogo-compra-inline {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .375rem;
}
.catalogo-compra-inline__linha {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.catalogo-stepper {
    display: inline-flex;
    align-items: center;
    height: 40px;
    border: 1px solid var(--cat-border);
    border-radius: 10px;
    background: var(--cat-surface);
    overflow: hidden;
}
.catalogo-stepper .quantity-btn {
    width: 32px;
    height: 100%;
    border: 0;
    background: transparent;
    color: var(--cat-muted);
    padding: 0;
    font-size: .75rem;
    cursor: pointer;
}
.catalogo-stepper .quantity-btn:hover { color: var(--cat-accent); background: var(--cat-accent-soft); }
.catalogo-stepper .quantity-input {
    width: 44px;
    height: 100%;
    border: 0;
    background: transparent;
    color: var(--cat-text);
    padding: 0;
    box-sizing: border-box;
    font-size: .9375rem;
    font-weight: 600;
    text-align: center;
    -moz-appearance: textfield;
}
.catalogo-stepper .quantity-input::-webkit-outer-spin-button,
.catalogo-stepper .quantity-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.catalogo-stepper .quantity-input:focus { outline: none; }

.catalogo .quantity-alert-container:empty { display: none; }
.catalogo .quantity-alert {
    padding: .375rem .625rem;
    border-radius: 8px;
    background: #fef3c7;
    color: #92400e;
    font-size: .75rem;
    font-weight: 600;
}

.catalogo-item__botao {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--cat-accent);
    text-decoration: none;
    white-space: nowrap;
}
.catalogo-item__botao i { font-size: .75rem; transition: transform .15s; }
.catalogo-item__botao:hover i { transform: translateX(3px); }

/* Modal de compra */
.catalogo-modal {
    width: min(860px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 0;
    border: 0;
    border-radius: 18px;
    background: var(--cat-surface);
    color: var(--cat-text);
    box-shadow: 0 30px 80px -20px rgba(15, 23, 42, .5);
    overflow: auto;
}
.catalogo-modal::backdrop {
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
}
.catalogo-modal[open] { animation: catalogo-modal-entra .2s ease-out; }
@keyframes catalogo-modal-entra {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to { opacity: 1; transform: none; }
}
.catalogo-modal__fechar {
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 2;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: var(--cat-bg);
    color: var(--cat-text);
    font-size: 1.125rem;
    cursor: pointer;
}
.catalogo-modal__fechar:hover { background: var(--cat-accent-soft); color: var(--cat-accent); }

.catalogo-compra {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 1.75rem;
    padding: 1.75rem;
}
.catalogo-compra__foto {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--cat-border);
    overflow: hidden;
}
.catalogo-compra__foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.catalogo-compra__info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    padding-right: 2rem;
}
.catalogo-compra .catalogo-compra__titulo {
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
    -webkit-line-clamp: unset;
    text-align: left;
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.25;
}
.catalogo-compra__corpo {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.catalogo-compra .product-variations:empty { display: none; }
.catalogo-compra .price-section { margin: 0; padding: 0; min-height: 0; }
.catalogo-compra__acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}
.catalogo-compra__acoes .add-to-cart-btn { flex: 1 1 200px; }
.catalogo-compra__detalhes {
    align-self: flex-start;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--cat-accent);
    text-decoration: none;
}
.catalogo-compra__detalhes:hover { text-decoration: underline; }

/* Grade */
.catalogo-lista.is-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.catalogo-lista.is-grade .catalogo-item {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: .75rem;
    contain-intrinsic-size: auto 360px;
}
.catalogo-lista.is-grade .catalogo-item__foto { width: 100%; height: 180px; }
.catalogo-lista.is-grade .catalogo-item__acao {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    min-width: 0;
    text-align: left;
    margin-top: auto;
}
.catalogo-lista.is-grade .catalogo-item__preco { align-items: flex-start; }
.catalogo-lista.is-grade .catalogo-item__acao { flex-wrap: wrap; }
.catalogo-lista.is-grade .catalogo-compra-inline,
.catalogo-lista.is-grade .catalogo-item__acao > .catalogo-comprar { order: 3; width: 100%; }
.catalogo-lista.is-grade .catalogo-compra-inline { align-items: stretch; }
.catalogo-lista.is-grade .catalogo-compra-inline__linha .catalogo-comprar { flex: 1; }

.catalogo-carregando {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 1.75rem 0 .5rem;
    font-size: .875rem;
    color: var(--cat-muted);
}
.catalogo-carregando__spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--cat-border);
    border-top-color: var(--cat-accent);
    border-radius: 50%;
    animation: catalogo-giro .8s linear infinite;
}
.catalogo-carregando.is-erro .catalogo-carregando__spinner { display: none; }

.catalogo-vazio {
    text-align: center;
    padding: 3.5rem 1rem;
    background: var(--cat-surface);
    border: 1px dashed var(--cat-border);
    border-radius: var(--cat-radius);
}
.catalogo-vazio > i { font-size: 2.5rem; color: var(--cat-muted); }
.catalogo-vazio h2 { margin: .75rem 0 .25rem; font-size: 1.25rem; }
.catalogo-vazio p { margin: 0 0 1.25rem; color: var(--cat-muted); }

.catalogo-pag {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .375rem;
    margin-top: 2rem;
}
.catalogo-pag__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 .75rem;
    border: 1px solid var(--cat-border);
    border-radius: 10px;
    background: var(--cat-surface);
    color: var(--cat-text);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}
a.catalogo-pag__item:hover { border-color: var(--cat-accent); color: var(--cat-accent); }
.catalogo-pag__item.is-atual {
    background: var(--cat-accent);
    border-color: var(--cat-accent);
    color: var(--cat-accent-text);
}
.catalogo-pag__reticencias { padding: 0 .25rem; color: var(--cat-muted); }

@media (max-width: 767px) {
    .catalogo-hero__acoes { width: 100%; }
    .catalogo-hero__acoes .catalogo-btn { flex: 1 1 0; }

    .catalogo-filtros__abrir { display: inline-flex; }
    .catalogo-filtros__extras {
        display: none;
        order: 5;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
    .catalogo-filtros__extras.is-aberto { display: flex; }
    .catalogo-filtros__extras .catalogo-campo select { width: 100%; }
    .catalogo-visao { display: none; }

    .catalogo-item {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: .875rem;
        padding: .875rem;
    }
    .catalogo-item__foto { width: 72px; height: 72px; }
    .catalogo-item__acao {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        min-width: 0;
        padding-top: .625rem;
        border-top: 1px solid var(--cat-border);
    }
    .catalogo-item__preco { align-items: flex-start; }
    .catalogo-item__acao { flex-wrap: wrap; gap: .625rem; }
    .catalogo-compra-inline,
    .catalogo-item__acao > .catalogo-comprar { order: 3; width: 100%; }
    .catalogo-compra-inline { align-items: stretch; }
    .catalogo-compra-inline__linha .catalogo-comprar { flex: 1; }
    .catalogo-item__zoom { display: none; }

    .catalogo-modal {
        width: 100vw;
        max-width: 100vw;
        max-height: 92vh;
        margin: auto auto 0;
        border-radius: 18px 18px 0 0;
    }
    .catalogo-compra {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1.25rem 1rem 1.5rem;
    }
    .catalogo-compra__foto { max-height: 240px; aspect-ratio: auto; height: 240px; }
    .catalogo-compra__info { padding-right: 0; }
    .catalogo-compra .catalogo-compra__titulo { font-size: 1.125rem; }
}

@media (prefers-reduced-motion: reduce) {
    .catalogo-item, .catalogo-btn, .catalogo-item__botao i { transition: none; }
}