/* =========================================================
   Casa das Rações Recife - Identidade visual do site
   Sobrescreve a cor-tema do template (#721b65) pelo laranja
   da marca, sem alterar o style.css original do template.
   Cor primária: var(--cor-primaria,#060f4d) | Hover: #2E7AE5
   ========================================================= */

/* ---------- Header BRANCO com sombra (fixo no topo, sobrepõe o corpo) ---------- */
.header-site.header-area.header-default {
    background-color: #ffffff !important;
    background-image: none !important;
    box-shadow: 0 8px 22px rgba(13, 27, 81, 0.14);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
}

/* ---------- Logo dimensionado por ALTURA (o logo é quase quadrado, não
   horizontal como o do template, que limitava por largura e estourava a barra) ---------- */
.header-site .header-logo-area img {
    max-width: 240px;   /* logo (menu cresceu com Categorias/Marcas) */
    max-height: 76px;
    width: auto;
    height: auto;
}

@media (max-width: 1199px) {
    .header-site .header-logo-area img {
        max-width: 220px;
        max-height: 64px;
    }
}

/* ---------- Enquadramento (SÓ DESKTOP >=992px): zonas das pontas com largura
   igual para o menu ficar centralizado. No mobile o menu some, então essa
   centralização não é usada (e atrapalhava a área de ícones). ---------- */
@media (min-width: 992px) {
    .header-site .header-align-start,
    .header-site .header-align-end {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 0px;
        flex: 1 1 0;
    }

    .header-site .header-align-end {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }
}

/* Compensa a altura do header fixo (para o conteúdo não ficar escondido) */
.main-content {
    padding-top: 136px;
}

@media (max-width: 1199px) {
    .main-content {
        padding-top: 88px;
    }
}

/* Estado compacto ao rolar (barra menor + logo reduzida) */
.header-site .header-align,
.header-site .logo-main {
    transition: height 0.25s ease, max-width 0.25s ease, margin 0.25s ease;
}

.header-site.is-stuck {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.header-site.is-stuck .header-align {
    height: 88px;
}

/* Garante o menu visível e centralizado na barra compacta */
.header-site.is-stuck .header-navigation-area {
    display: block;
}

.header-site.is-stuck .logo-main {
    max-width: 200px;
    max-height: 56px;
    margin: 0;
}

@media (max-width: 1199px) {
    .header-site.is-stuck .logo-main {
        max-height: 52px;
        max-width: 180px;
    }
}

/* Espaçamento uniforme entre os itens do menu (apertado: menu cresceu) */
.header-site .header-navigation-area .main-menu.nav > li > a {
    margin: 0 13px;
}
/* Respiro garantido entre a logo e o primeiro item do menu */
@media (min-width: 992px) {
    .header-site .header-navigation-area {
        padding-left: 24px;
    }
}

/* Links do menu: navy (header branco), semibold */
.header-site .main-menu > li > a span {
    color: var(--cor-primaria,#060f4d) !important;
    font-weight: 600;
    transition: color 0.2s ease;
}

/* Hover/ativo: laranja */
.header-site .main-menu > li:hover > a span,
.header-site .main-menu > li.active > a span {
    color: var(--cor-secundaria,#ff6a00) !important;
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
}

/* Ícones (busca, conta, carrinho, menu mobile): navy, hover laranja */
.header-site .header-action-area .icon,
.header-site .header-action-area .btn-menu {
    color: var(--cor-primaria,#060f4d);
    transition: color 0.2s ease;
}

.header-site .header-action-area .shopping-search-btn:hover .icon,
.header-site .header-action-area .shopping-account-btn:hover .icon,
.header-site .header-action-area .shopping-cart-btn:hover .icon,
.header-site .header-action-area .btn-menu:hover {
    color: var(--cor-secundaria,#ff6a00);
    opacity: 1;
}

/* Contador do carrinho: invertido para destacar no header laranja */
.header-site .shopping-cart .shop-count {
    background-color: var(--cor-secundaria,#ff6a00);
    color: #ffffff;
}

/* ---------- Hero / banner (imagem de canto a canto) ---------- */
.home-slider-site .swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
}

.home-slider-site .swiper-btn-wrap .swiper-btn-prev:hover,
.home-slider-site .swiper-btn-wrap .swiper-btn-next:hover {
    background-color: var(--cor-primaria,#060f4d) !important;
    color: #fff !important;
}

/* ---------- Títulos de seção ---------- */
.section-title .sub-title {
    color: var(--cor-primaria,#060f4d) !important;
}

/* ---------- Filtros de categoria ---------- */
.mr-filter button.active,
.mr-filter button:hover {
    color: var(--cor-primaria,#060f4d) !important;
}

.mr-filter button.active {
    border-color: var(--cor-primaria,#060f4d) !important;
}

/* ---------- Cards de produto ---------- */
.product-item .product-info .prices .price {
    color: var(--cor-primaria,#060f4d) !important;
}

.product-item .product-info .prices .price-old {
    display: block;
    font-size: 12px;
    color: #999;
    line-height: 1;
    margin-bottom: 2px;
}

.product-item .product-action .btn-product-cart:hover {
    background-color: var(--cor-primaria,#060f4d) !important;
    border-color: var(--cor-primaria,#060f4d) !important;
    color: #fff !important;
}

/* ---------- Botões tema ---------- */
.btn-theme {
    background-color: var(--cor-primaria,#060f4d) !important;
    border-color: var(--cor-primaria,#060f4d) !important;
    color: #fff !important;
}

.btn-theme:hover {
    color: #fff !important;
}

/* preenchimento em repouso = navy da logo; :after (revelado no hover) = azul claro */
.btn-theme:before {
    background-color: var(--cor-primaria,#060f4d) !important;
}
.btn-theme:after {
    background-color: #2E7AE5 !important;
}

/* ---------- Footer ---------- */
.footer-main .widget-item .nav-menu li a:hover {
    color: var(--cor-primaria,#060f4d) !important;
}

.footer-main .social-icons a:hover:before,
.footer-main .social-icons a:hover:after {
    background-color: var(--cor-primaria,#060f4d) !important;
}

/* ---------- Botão voltar ao topo (laranja da marca) ---------- */
.scroll-to-top {
    background-color: var(--cor-secundaria,#ff6a00) !important;
}
.scroll-to-top:hover {
    background-color: #e85f00 !important;
}

/* ---------- Preloader: tela de carregamento laranja (marca) ---------- */
.preloader-wrap {
    background-color: var(--cor-primaria,#060f4d) !important;
    /* template usava width:100vw, que inclui a barra de rolagem e gerava
       overflow horizontal (empurrava os ícones do header pra fora no mobile
       e fazia a media query "achar" que era tela grande). 100% corrige. */
    width: 100% !important;
    max-width: 100%;
    overflow: hidden;
}

/* =========================================================
   Ajustes de layout (logo, banner e produtos)
   ========================================================= */

/* ---------- Logo maior, sobrepondo levemente o banner ---------- */
.header-site {
    position: relative;
    z-index: 20;
    overflow: visible;
}

/* Caixa da logo com largura 0: a imagem transborda e NÃO empurra o menu */
.header-site .header-align-start {
    width: 0;
    min-width: 0;
    overflow: visible;
}

.header-site .header-logo-area {
    position: relative;
    z-index: 30;
    width: 0;
    overflow: visible;
}

.header-site .header-logo-area a {
    display: inline-block;
    line-height: 0;
}

.header-site .logo-main {
    position: relative;
    z-index: 30;
    width: auto;
    max-width: 240px;
    max-height: 76px;
    margin: 0;
}

@media (max-width: 1199px) {
    .header-site .logo-main {
        max-width: 220px;
        margin: 0;
    }
}

@media (max-width: 767px) {
    .header-site .logo-main {
        max-width: 170px;
        margin: 0;
    }
}

/* ---------- Banner: PROPORÇÃO fixa (não altura fixa) ----------
   Antes o quadro tinha altura fixa (550px) e largura fluida, então a proporção
   mudava com o monitor (3,5:1 num 1920, 2,5:1 num notebook 1366) e o corte era
   diferente em cada tela — impossível compor uma arte que ficasse boa em todas.

   Agora o quadro tem SEMPRE a mesma proporção da arte recomendada:
     - computador: 16/5  = 1920x600  -> corte zero quando enviada nesse tamanho
     - celular:     1/1  = 1080x1080 -> arte própria (ver home.js: banner sem
       arte de celular é removido no telefone, em vez de aparecer cortado). */
.home-slider-site .home-slider-container {
    aspect-ratio: 16 / 5;
}

.home-slider-site .swiper-wrapper,
.home-slider-site .swiper-slide {
    height: 100%;
}

.home-slider-site .swiper-slide,
.home-slider-site .swiper-slide .home-slide-link,
.home-slider-site .swiper-slide picture {
    display: block;
    width: 100%;
    height: 100%;
}

.home-slider-site .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 767px) {
    .home-slider-site .home-slider-container {
        aspect-ratio: 1 / 1;
    }
}

/* ---------- Espaço acima do título "Seleção da loja" (sai de cima da linha) ---------- */
.product-default-area .section-title {
    margin-top: 45px;
}

/* ---------- Produtos: thumb de tamanho FIXO, imagem centralizada (contain) ----------
   Vale em TODOS os grids de produto (home, loja, busca, relacionados) — assim a
   imagem fica sempre do mesmo tamanho, independente da proporção da foto enviada. */
.product-item .product-thumb {
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
}

.product-item .product-thumb a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.product-item .product-thumb img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* No mobile as thumbs ficam um pouco menores (mesmo tamanho pra todas). */
@media (max-width: 575px) {
    .product-item .product-thumb { height: 210px; }
}

/* Título até 2 linhas, colado no preço — vale em TODOS os grids (home, loja, busca).
   Antes tinha altura fixa de 86px (3 linhas), o que deixava o nome curto "solto"
   longe do preço na loja. */
.product-item .product-info .title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: auto;
    min-height: 0;
    margin-bottom: 4px;
}

/* ---------- Busca: cores da marca (substitui o roxo do template) ---------- */

/* Botão fechar (x) */
.aside-search-box-wrapper .btn-close {
    background-color: var(--cor-primaria,#060f4d) !important;
    color: #ffffff !important;
}

.aside-search-box-wrapper .btn-close:hover {
    background-color: #2E7AE5 !important;
    color: #ffffff !important;
}

/* Campo de busca: borda e texto digitado */
.aside-search-box-wrapper .search-form .form-control {
    border-color: var(--cor-primaria,#060f4d) !important;
    color: #333333 !important;
}

/* Placeholder neutro (precisa de regra separada por navegador) */
.aside-search-box-wrapper .search-form .form-control::-webkit-input-placeholder {
    color: #999999 !important;
}

.aside-search-box-wrapper .search-form .form-control::-moz-placeholder {
    color: #999999 !important;
}

.aside-search-box-wrapper .search-form .form-control:-ms-input-placeholder {
    color: #999999 !important;
}

.aside-search-box-wrapper .search-form .form-control:-moz-placeholder {
    color: #999999 !important;
}

/* Botão da lupa */
.aside-search-box-wrapper .search-form .search-button {
    background-color: var(--cor-primaria,#060f4d) !important;
    color: #ffffff !important;
}

.aside-search-box-wrapper .search-form .search-button:hover {
    background-color: #2E7AE5 !important;
    color: #ffffff !important;
}

/* =========================================================
   Loja - chips de filtros ativos (Passada 2)
   ========================================================= */
.mr-filtros-ativos .mr-chip {
    display: inline-block;
    padding: 5px 12px;
    background-color: #fff1e6;
    border: 1px solid #ffd2ad;
    border-radius: 999px;
    color: #b34d00;
    font-size: 13px;
    line-height: 1.4;
    transition: background-color .2s, border-color .2s;
}

.mr-filtros-ativos .mr-chip:hover {
    background-color: #ffe1cc;
    border-color: var(--cor-primaria,#060f4d);
    color: var(--cor-primaria,#060f4d);
}

.mr-filtros-ativos .mr-limpar-filtros {
    font-size: 13px;
    color: #888;
    text-decoration: underline;
}

.mr-filtros-ativos .mr-limpar-filtros:hover {
    color: var(--cor-primaria,#060f4d);
}

/* =========================================================
   Loja - substitui o roxo do template (#721b65) e o azul do
   range slider (#006cfa) pelo laranja da marca + paginação
   ========================================================= */

/* Contagem de itens por página ("1–12 de 324 produtos") */
.shop-top-bar .pagination-line {
    color: #555;
}

/* Ordenar (select) - texto e seta */
.shop-top-bar .shop-sort .form-select {
    color: #444;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23ff6a00' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
}

/* Dots dos títulos da sidebar (Preço / Categorias / Marcas) */
.shop-sidebar .sidebar-title:before {
    border-color: var(--cor-primaria,#060f4d) !important;
}

/* Links de categoria/marca: hover laranja */
.shop-sidebar .sidebar-category a:hover {
    color: var(--cor-primaria,#060f4d);
}

/* ---------- Range slider de preço (skin round) em laranja ---------- */
.irs--round .irs-bar {
    background-color: var(--cor-primaria,#060f4d);
}
.irs--round .irs-handle {
    border-color: var(--cor-primaria,#060f4d);
    box-shadow: 0 1px 3px rgba(255, 106, 0, 0.4);
}
.irs--round .irs-handle.state_hover,
.irs--round .irs-handle:hover {
    background-color: #fff5ee;
}
.irs--round .irs-from,
.irs--round .irs-to,
.irs--round .irs-single {
    background-color: var(--cor-primaria,#060f4d);
}
.irs--round .irs-from:before,
.irs--round .irs-to:before,
.irs--round .irs-single:before {
    border-top-color: var(--cor-primaria,#060f4d);
}

/* ---------- Paginação estilizada (laranja, botões arredondados) ---------- */
.pagination-items .mr-pagination {
    gap: 6px;
    flex-wrap: wrap;
}
.pagination-items .mr-pagination li {
    margin: 0;
}
.pagination-items .mr-pagination li + li {
    margin-left: 0;
}
.pagination-items .mr-pagination li a.page-link,
.pagination-items .mr-pagination li span.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 8px;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    background-color: #fff;
    color: #555;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    transition: all 0.2s ease;
}
.pagination-items .mr-pagination li a.page-link:hover {
    border-color: var(--cor-primaria,#060f4d);
    color: var(--cor-primaria,#060f4d);
    background-color: #fff;
}
.pagination-items .mr-pagination li a.page-link.active {
    background-color: var(--cor-primaria,#060f4d);
    border-color: var(--cor-primaria,#060f4d);
    color: #fff;
    box-shadow: 0 4px 10px rgba(255, 106, 0, 0.28);
}
.pagination-items .mr-pagination li a.page-link.icon {
    color: #8a8a8a;
    font-size: 20px;
}
.pagination-items .mr-pagination li a.page-link.icon:hover {
    color: var(--cor-primaria,#060f4d);
    border-color: var(--cor-primaria,#060f4d);
}
.pagination-items .mr-pagination li span.page-dots {
    border-color: transparent;
    background-color: transparent;
    color: #aaa;
    cursor: default;
    font-weight: 700;
}

/* ---------- Banner do cabeçalho da Loja (texto branco sobre o laranja) ---------- */
.mr-loja-header .page-header-content .title {
    color: #ffffff;
}
.mr-loja-header .breadcrumb-area .breadcrumb li,
.mr-loja-header .breadcrumb-area .breadcrumb li a {
    color: #ffffff;
}
.mr-loja-header .breadcrumb-area .breadcrumb li a:hover {
    color: #ffe8d6;
}
.mr-loja-header .breadcrumb-area .breadcrumb .breadcrumb-sep {
    color: rgba(255, 255, 255, 0.7);
}

/* Banner mais enxuto: o padrão do template (padding 70/73 + título 48px)
   ocupava muita área antes do conteúdo. Reduzido em todas as telas internas. */
.mr-loja-header.page-header-area {
    padding: 47px 0 19px;
}
.mr-loja-header .page-header-content .title {
    font-size: 32px;
    margin-bottom: 8px;
}

/* Marca-d'água: a PRÓPRIA logo (gato + cachorro) recolorida em escala de
   laranja via filtro, à direita do banner. Idêntica à marca, só em laranja. */
.mr-loja-header .page-header-content {
    position: relative;
    z-index: 2;
}
.mr-loja-header::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 2.5%;
    transform: translateY(-50%);
    width: 230px;
    height: 230px;
    background: url('../img/logo-icon.png') no-repeat center center;
    background-size: contain;
    filter: brightness(0) invert(1); /* marca-d'água branca sobre o banner navy */
    opacity: 0.10;
    z-index: 1;
    pointer-events: none;
}

/* =========================================================
   Ícones do header em SVG (substituem a fonte Pe-icon-7-stroke,
   que falhava em alguns Androids virando "quadradinhos")
   ========================================================= */
.header-site .header-action-area svg.icon,
.header-site .btn-menu svg {
    vertical-align: middle;
    color: var(--cor-primaria,#060f4d);
}

/* =========================================================
   MOBILE (<= 991px) - ajustes do header
   ========================================================= */
@media (max-width: 991px) {
    /* Menu de desktop SEMPRE escondido; hambúrguer SEMPRE visível
       (à prova de overflow que faz a media query "achar" que é tela grande) */
    .header-site .header-navigation-area { display: none !important; }
    .header-site .btn-menu { display: inline-flex !important; align-items: center; }

    /* Esconde a zona central (menu) vazia e faz a área de ícones ocupar a
       largura, alinhando conta/carrinho/menu à direita dentro da tela
       (estavam transbordando para fora do viewport). */
    .header-site .header-align-center { display: none; }
    .header-site .header-align-end {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        min-width: 0;
    }
    .header-site .header-action-area {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }

    /* Não encolher/crescer o header ao rolar no celular */
    .header-site.is-stuck .header-align { height: 88px; }
    .header-site.is-stuck .logo-main { max-height: 64px; }

    /* Evita scroll horizontal indevido */
    html, body { overflow-x: hidden; }
}

/* =========================================================
   Filtros da Loja: painel deslizante no mobile (offcanvas-lg)
   ========================================================= */
@media (max-width: 991.98px) {
    .mr-filtros-offcanvas { max-width: 86vw; }
    .mr-btn-filtrar { display: inline-flex; align-items: center; }
}

/* No desktop o offcanvas-lg vira estático: zera resíduos (padding/scroll) */
@media (min-width: 992px) {
    .mr-filtros-offcanvas .offcanvas-body {
        padding: 0;
        overflow: visible;
    }
}

/* =========================================================
   MOBILE - ajustes finais (logo fixa + topo da Loja enxuto)
   ========================================================= */

/* 1) Logo FIXA e ROBUSTA no celular: vira uma imagem NORMAL na barra.
   No desktop o logo usa um truque (container width:0 + overflow:visible +
   position:relative) p/ transbordar sobre o banner — esse truque QUEBRA no
   Safari do iPhone (logo some). No mobile anulamos tudo: imagem comum,
   sem overflow, mesmo tamanho com/sem scroll. */
@media (max-width: 991px) {
    /* A faixa navy + logo branca valem em todas as larguras (bloco unificado no fim
       do arquivo). No mobile só garantimos a logo branca visível e a navy oculta. */
    .header-site .header-logo-area a {
        display: inline-block !important;
        line-height: 0 !important;
    }
    .header-site .logo-desk { display: inline-block !important; }
    .header-site .logo-mob  { display: none !important; }
}

/* 2) Topo da Loja mais enxuto no celular: banner baixo + topbar compacta,
   para os produtos aparecerem mais cedo (menos rolagem). */
@media (max-width: 767px) {
    .mr-loja-header.page-header-area {
        padding: 22px 0 22px !important;
    }
    .mr-loja-header .page-header-content .title {
        font-size: 26px;
        margin-bottom: 6px;
    }
    .mr-loja-header .breadcrumb-area .breadcrumb li,
    .mr-loja-header .breadcrumb-area .breadcrumb li a {
        font-size: 12px;
    }

    /* Menos espaço até o topbar: o .container do template tinha padding-top
       de 80px (o banner usa pt--0 p/ remover; o product-area não). Reduzimos. */
    .product-area {
        padding-top: 0;
    }
    .product-area > .container {
        padding-top: 16px !important;
    }

    /* Topbar (contagem + ordenar) compacta */
    .product-area .shop-top-bar {
        padding: 10px 14px;
    }
    .product-area .shop-top-bar .pagination-line,
    .product-area .shop-top-bar .shop-sort span,
    .product-area .shop-top-bar .shop-sort .form-select {
        font-size: 13px;
    }

    .mr-btn-filtrar {
        margin-bottom: 12px !important;
    }
}

/* =========================================================
   Carrinho (template novo, responsivo)
   ========================================================= */
.mr-cart-area { padding: 0 0 70px; }

.mr-cart-empty { padding: 50px 0; }
.mr-cart-empty p { font-size: 18px; color: #666; margin-bottom: 20px; }

.mr-cart thead th {
    border: none;
    border-bottom: 2px solid #eee;
    font-weight: 700;
    color: #333;
    padding: 12px 14px;
}
.mr-cart tbody td {
    border: none;
    border-bottom: 1px solid #f0f0f0;
    padding: 16px 14px;
    vertical-align: middle;
}
.mr-cart-nome { font-weight: 600; color: #333; }
.mr-cart-variacao { display: block; font-size: 12px; color: #999; margin-top: 2px; }

/* Stepper de quantidade */
.mr-qty { display: inline-flex; align-items: center; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; }
.mr-qty-btn { width: 34px; height: 36px; border: none; background: #f6f6f6; color: #333; font-size: 17px; line-height: 1; cursor: pointer; transition: background .2s, color .2s; }
.mr-qty-btn:hover { background: var(--cor-primaria,#060f4d); color: #fff; }
.mr-qty-input { width: 44px; height: 36px; border: none; text-align: center; font-weight: 600; color: #333; background: #fff; }

/* Remover */
.mr-cart-remove { border: none; background: transparent; color: #c0392b; padding: 6px; cursor: pointer; transition: color .2s; }
.mr-cart-remove:hover { color: #e74c3c; }

/* Resumo */
.mr-cart-summary { background: #f7f7f7; border-radius: 14px; padding: 24px; }
.mr-cart-summary-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; }
.mr-cart-summary-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #ececec; }
.mr-cart-summary-total { font-size: 18px; font-weight: 700; color: #333; border-bottom: none; }
.mr-cart-summary-total span:last-child { color: var(--cor-secundaria,#ff6a00); }
.mr-cart-finalizar { display: block; text-align: center; margin-top: 18px; }
.mr-cart-continuar { display: block; text-align: center; margin-top: 12px; color: #666; text-decoration: underline; }
.mr-cart-continuar:hover { color: var(--cor-primaria,#060f4d); }

/* Mobile: a tabela vira cards empilhados */
@media (max-width: 767px) {
    .mr-cart thead { display: none; }
    .mr-cart, .mr-cart tbody, .mr-cart tr, .mr-cart td { display: block; width: 100%; }
    .mr-cart tr { border: 1px solid #eee; border-radius: 12px; padding: 6px 14px; margin-bottom: 14px; }
    .mr-cart td { border: none !important; display: flex; justify-content: space-between; align-items: center; padding: 9px 0; text-align: right; }
    .mr-cart td::before { content: attr(data-label); font-weight: 600; color: #888; text-align: left; margin-right: 12px; }
    .mr-cart td[data-label="Produto"] { flex-direction: column; align-items: flex-start; text-align: left; }
    .mr-cart td[data-label="Produto"]::before { display: none; }
    .mr-cart-remove-cell { justify-content: flex-end !important; }
    .mr-cart-remove-cell::before { display: none !important; }
    .mr-cart-summary { margin-top: 10px; }
}

/* =========================================================
   Carrinho - refinamentos (imagem, botão, gap mobile)
   ========================================================= */
.mr-cart-produto { display: flex; align-items: center; gap: 14px; }
.mr-cart-thumb-link { flex-shrink: 0; display: block; }
.mr-cart-thumb {
    width: 64px; height: 64px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #eee;
    background: #f6f6f6;
    transition: transform .2s, box-shadow .2s;
}
.mr-cart-thumb-link:hover .mr-cart-thumb {
    transform: scale(1.04);
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.mr-cart-info { min-width: 0; }

/* Botão Finalizar cheio/centralizado + Continuar comprando centralizado */
.mr-cart-finalizar { display: block; width: 100%; text-align: center; }
.mr-cart-continuar  { display: block; width: 100%; text-align: center; }

@media (max-width: 767px) {
    /* gap banner -> carrinho bem menor (o container do template tinha 80px) */
    .mr-cart-area { padding-top: 14px; }
    .mr-cart-area > .container { padding-top: 0 !important; }
    /* imagem um pouco menor no card */
    .mr-cart-thumb { width: 56px; height: 56px; }
    .mr-cart td[data-label="Produto"] { padding-top: 6px; }
}

/* =========================================================
   Página de Produto (template novo, responsivo)
   ========================================================= */
.mr-produto-area { padding: 0 0 70px; }

/* Galeria */
.mr-produto-img-principal { display: block; border: 1px solid #eee; border-radius: 12px; overflow: hidden; background: #f6f6f6; }
.mr-produto-img-principal img { width: 100%; height: auto; display: block; aspect-ratio: 1 / 1; object-fit: cover; }
.mr-produto-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.mr-produto-thumbs a { width: 76px; height: 76px; border: 1px solid #eee; border-radius: 8px; overflow: hidden; display: block; }
.mr-produto-thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* Info */
.mr-produto-info { padding-left: 12px; }
.mr-produto-nome { font-size: 28px; font-weight: 700; color: #2b2b2b; margin: 0 0 10px; line-height: 1.25; }
.mr-produto-marca { font-size: 14px; color: #888; margin-bottom: 14px; }
.mr-produto-marca a { color: var(--cor-primaria,#060f4d); }
.mr-produto-preco { font-size: 30px; font-weight: 800; color: var(--cor-secundaria,#ff6a00); margin-bottom: 18px; line-height: 1.1; }
.mr-produto-preco-de { display: block; font-size: 13px; font-weight: 600; color: #999; line-height: 1; }
.mr-produto-desc { color: #555; line-height: 1.7; margin-bottom: 22px; }
.mr-produto-variacao { margin-bottom: 16px; }
.mr-produto-variacao label { display: block; margin-bottom: 8px; }
.mr-produto-variacao .form-select { max-width: 360px; }
.mr-produto-estoque { margin-bottom: 18px; min-height: 22px; }
.mr-estoque-ok { color: #2e7d32; font-weight: 600; }
/* btn-theme já tem height:55px + line-height:56px; só ajustamos a largura
   (sem padding vertical, que deixava o botão alto demais) */
.mr-produto-add { display: inline-block; padding: 0 38px; }
.mr-produto-meta { list-style: none; padding: 18px 0 0; margin: 24px 0 0; border-top: 1px solid #eee; }
.mr-produto-meta li { color: #666; margin-bottom: 6px; font-size: 14px; }
.mr-produto-meta li span { color: #333; font-weight: 600; }
.mr-produto-meta a { color: var(--cor-primaria,#060f4d); }

/* Descrição + relacionados */
.mr-produto-section-title { font-size: 20px; font-weight: 700; margin: 0 0 18px; }
.mr-produto-descricao { margin-top: 50px; padding-top: 36px; border-top: 1px solid #eee; }
.mr-produto-descricao-texto { color: #555; line-height: 1.8; }
.mr-relacionados { margin-top: 56px; padding-top: 36px; border-top: 1px solid #eee; }

@media (max-width: 991px) {
    .mr-produto-info { padding-left: 0; margin-top: 26px; }
}
@media (max-width: 767px) {
    .mr-produto-area { padding: 14px 0 50px; }
    .mr-produto-area > .container { padding-top: 0 !important; }
    .mr-produto-nome { font-size: 22px; }
    .mr-produto-preco { font-size: 26px; }
    .mr-produto-add { width: 100%; text-align: center; }
}

/* Nome do produto no carrinho como link para o detalhe */
.mr-cart-info a.mr-cart-nome { text-decoration: none; color: #333; }
.mr-cart-info a.mr-cart-nome:hover { color: var(--cor-primaria,#060f4d); }

/* Carrinho: não quebrar os valores (R$ x,xx) em duas linhas */
.mr-cart td[data-label="Preço"],
.mr-cart td.subtotal-item { white-space: nowrap; }

/* Paginação no mobile: esconde as reticências e os números de borda
   (1ª/última página), deixando só a janela + as setas « ‹ › » */
@media (max-width: 767px) {
    .pagination-items .mr-pagination .mr-page-edge { display: none; }
}

/* =========================================================
   Checkout (template novo, responsivo) - passos em blocos
   ========================================================= */
.mr-checkout-area { padding: 0 0 70px; }
.mr-checkout-card { background: #fff; border: 1px solid #eee; border-radius: 14px; padding: 30px; box-shadow: 0 6px 24px rgba(0,0,0,.05); }
.mr-checkout-step-title { font-size: 20px; font-weight: 700; margin: 0 0 20px; color: #2b2b2b; }
.mr-checkout-card .form-label { font-weight: 600; color: #444; margin-bottom: 6px; }
.mr-checkout-card .form-control { height: 48px; border-radius: 8px; }
.mr-checkout-card .btn-theme { text-align: center; }

.mr-checkout-aviso { padding: 12px 16px; border-radius: 10px; margin-bottom: 18px; font-size: 14px; }
.mr-checkout-aviso-ok { background: #e8f5e9; color: #2e7d32; }
.mr-checkout-aviso-info { background: #fff1e6; color: #b34d00; }
.mr-checkout-link { display: inline-block; margin-top: 6px; color: #888; text-decoration: underline; font-size: 14px; }
.mr-checkout-link:hover { color: var(--cor-primaria,#060f4d); }

.mr-checkout-resumo-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
.mr-checkout-resumo-total { font-size: 18px; font-weight: 700; border-bottom: none; padding-top: 16px; }
.mr-checkout-resumo-total strong { color: var(--cor-secundaria,#ff6a00); }

@media (max-width: 767px) {
    .mr-checkout-area { padding: 14px 0 50px; }
    .mr-checkout-area > .container { padding-top: 0 !important; }
    .mr-checkout-card { padding: 20px; }
}

/* Checkout: respiro entre a identificação e o passo (login/novo) */
#area-checkout { margin-top: 14px; }
.mr-checkout-step #link-trocar-email { margin-top: 4px; }

/* Auth (recuperar senha; reaproveita o card do checkout) */
.mr-auth-sub { color: #888; font-size: 14px; margin: -12px 0 22px; }
.mr-auth-footer { margin-top: 18px; text-align: center; }

/* Aviso de atenção (ex.: primeiro acesso em alterar senha) */
.mr-checkout-aviso-warn { background: #fff7e0; color: #8a6100; border: 1px solid #ffe49c; line-height: 1.55; }

/* Pagamento (placeholder até integrar o Inter) */
.mr-pagamento-check { width: 70px; height: 70px; border-radius: 50%; background: #e8f5e9; color: #2e7d32; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.mr-pagamento-total { display: flex; justify-content: space-between; align-items: center; background: #faf7f4; border: 1px solid #eee; border-radius: 10px; padding: 16px 18px; margin: 22px 0; }
.mr-pagamento-total span { font-weight: 600; color: #444; }
.mr-pagamento-total strong { color: var(--cor-secundaria,#ff6a00); font-size: 22px; }

/* =========================================================
   Área do cliente logado (minha conta, pedidos, dados)
   ========================================================= */
.mr-conta-area { padding: 38px 0 70px; }

/* Navegação da conta */
.mr-conta-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; align-items: center; }
.mr-conta-nav a { padding: 9px 18px; border-radius: 30px; background: #f3f3f3; color: #555; font-weight: 600; font-size: 14px; text-decoration: none; transition: .2s; }
.mr-conta-nav a:hover { background: #ffe6d3; color: var(--cor-primaria,#060f4d); }
.mr-conta-nav a.active { background: var(--cor-primaria,#060f4d); color: #fff; }
.mr-conta-nav .mr-conta-nav-sair { margin-left: auto; background: #fff; border: 1px solid #eee; color: #c0392b; }
.mr-conta-nav .mr-conta-nav-sair:hover { background: #fdecea; color: #c0392b; }

/* Card padrão */
.mr-conta-card { background: #fff; border: 1px solid #eee; border-radius: 14px; padding: 26px; box-shadow: 0 6px 24px rgba(0,0,0,.05); }
.mr-conta-card + .mr-conta-card { margin-top: 22px; }
.mr-conta-card-title { font-size: 18px; font-weight: 700; margin: 0 0 18px; color: #2b2b2b; }
.mr-conta-saudacao { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.mr-conta-saudacao span { color: var(--cor-primaria,#060f4d); }
.mr-conta-sub { color: #888; margin: 0 0 24px; }

/* Cards de resumo (painel) */
.mr-conta-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }
.mr-conta-stat { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 20px 16px; text-align: center; box-shadow: 0 4px 16px rgba(0,0,0,.04); }
.mr-conta-stat h6 { font-size: 12px; color: #999; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .4px; }
.mr-conta-stat .v { font-size: 22px; font-weight: 800; color: #2b2b2b; display: block; }
.mr-conta-stat .v.laranja { color: var(--cor-secundaria,#ff6a00); }
.mr-conta-stat a { text-decoration: none; }

/* Atalhos (painel) */
.mr-conta-atalhos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }
.mr-conta-atalho { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 22px 12px; text-align: center; text-decoration: none; color: #444; font-weight: 600; transition: .2s; box-shadow: 0 4px 16px rgba(0,0,0,.04); display: block; }
.mr-conta-atalho:hover { border-color: var(--cor-primaria,#060f4d); color: var(--cor-primaria,#060f4d); transform: translateY(-2px); }
.mr-conta-atalho .ico { font-size: 26px; display: block; margin-bottom: 8px; }

/* Tabela de pedidos */
.mr-pedidos-table { width: 100%; border-collapse: collapse; }
.mr-pedidos-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: #999; padding: 0 12px 12px; border-bottom: 2px solid #f0f0f0; }
.mr-pedidos-table td { padding: 14px 12px; border-bottom: 1px solid #f4f4f4; vertical-align: middle; color: #444; }
.mr-pedidos-table tr:last-child td { border-bottom: none; }
.mr-pedidos-table .acoes { white-space: nowrap; text-align: right; }

/* Status */
.mr-status { display: inline-block; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.mr-status-aguardando_pagamento { background: #fff3cd; color: #8a6100; }
.mr-status-pago { background: #cfe2ff; color: #084298; }
.mr-status-separacao { background: #ffe5d0; color: #b34d00; }
.mr-status-saiu_entrega { background: #e2e3e5; color: #41464b; }
.mr-status-entregue { background: #d1e7dd; color: #0f5132; }
.mr-status-cancelado { background: #f8d7da; color: #842029; }

/* Botões pequenos */
.mr-btn-sm { display: inline-block; padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none; }
.mr-btn-ver { background: var(--cor-primaria,#060f4d); color: #fff !important; }
.mr-btn-ver:hover { background: #2E7AE5; }
.mr-btn-pagar { background: #ffc107; color: #5c4500 !important; }
.mr-btn-pagar:hover { background: #e6ad06; }
.mr-btn-voltar { background: #f1f1f1; color: #555 !important; }

/* Resumo do pedido (detalhe) */
.mr-pedido-resumo-row { display: flex; justify-content: space-between; padding: 9px 0; color: #555; }
.mr-pedido-resumo-row.total { border-top: 1px solid #eee; margin-top: 6px; padding-top: 14px; font-size: 17px; font-weight: 700; }
.mr-pedido-resumo-row.total strong { color: var(--cor-primaria,#060f4d); }
.mr-pedido-endereco { margin-top: 18px; padding-top: 18px; border-top: 1px solid #eee; color: #555; line-height: 1.6; }
.mr-pedido-endereco h6 { font-weight: 700; color: #2b2b2b; margin-bottom: 8px; }

@media (max-width: 767px) {
    .mr-conta-area { padding: 16px 0 50px; }
    .mr-conta-area > .container { padding-top: 0 !important; }
    .mr-conta-stats { grid-template-columns: repeat(2, 1fr); }
    .mr-conta-atalhos { grid-template-columns: repeat(2, 1fr); }
    .mr-conta-nav .mr-conta-nav-sair { margin-left: 0; }

    /* tabela de pedidos vira cards */
    .mr-pedidos-table thead { display: none; }
    .mr-pedidos-table, .mr-pedidos-table tbody, .mr-pedidos-table tr, .mr-pedidos-table td { display: block; width: 100%; }
    .mr-pedidos-table tr { border: 1px solid #eee; border-radius: 10px; padding: 6px 14px; margin-bottom: 12px; }
    .mr-pedidos-table td { border: none; padding: 8px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
    .mr-pedidos-table td::before { content: attr(data-label); font-weight: 700; color: #999; font-size: 12px; text-transform: uppercase; }
    .mr-pedidos-table td.acoes { justify-content: flex-start; gap: 8px; flex-wrap: wrap; }
    .mr-pedidos-table td.acoes::before { display: none; }
}

/* =========================================================
   Páginas institucionais (O Mercado, Contato, legais, FAQ)
   ========================================================= */
.mr-pagina-area { padding: 0 0 70px; }
.mr-pagina { max-width: 880px; margin: 0 auto; color: #474747; line-height: 1.75; }
.mr-pagina .mr-pagina-intro { font-size: 17px; color: #555; margin-bottom: 26px; }
.mr-pagina h2 { font-size: 21px; font-weight: 700; color: #2b2b2b; margin: 32px 0 12px; }
.mr-pagina h2:first-of-type { margin-top: 0; }
.mr-pagina h3 { font-size: 17px; font-weight: 700; color: #2b2b2b; margin: 22px 0 8px; }
.mr-pagina p { margin: 0 0 16px; }
.mr-pagina ul { margin: 0 0 18px; padding-left: 20px; }
.mr-pagina li { margin-bottom: 8px; }
.mr-pagina a { color: var(--cor-primaria,#060f4d); }
.mr-pagina strong { color: #2b2b2b; }
.mr-pagina-updated { color: #999; font-size: 13px; margin-top: 34px; border-top: 1px solid #eee; padding-top: 16px; }
.mr-placeholder { background: #fff7e0; color: #8a6100; padding: 1px 7px; border-radius: 4px; font-style: normal; }

/* Destaques "O Mercado" */
.mr-mercado-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 30px 0; }
.mr-mercado-feature { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 24px; text-align: center; box-shadow: 0 4px 16px rgba(0,0,0,.04); }
.mr-mercado-feature .ico { font-size: 30px; display: block; margin-bottom: 10px; }
.mr-mercado-feature strong { display: block; margin-bottom: 6px; }
.mr-mercado-feature span { color: #777; font-size: 14px; }

/* Contato */
.mr-contato-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 30px; align-items: start; max-width: 980px; margin: 0 auto; }
.mr-contato-canal { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 20px; }
.mr-contato-canal .ico { width: 44px; height: 44px; border-radius: 50%; background: #fff1e6; color: var(--cor-primaria,#060f4d); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; }
.mr-contato-canal strong { display: block; color: #2b2b2b; }
.mr-contato-canal span, .mr-contato-canal a { color: #666; }
.mr-contato-social { margin-top: 8px; }
.mr-contato-social a { display: inline-flex; width: 40px; height: 40px; border-radius: 50%; background: var(--cor-primaria,#060f4d); color: #fff; align-items: center; justify-content: center; margin-right: 8px; font-size: 16px; }
.mr-contato-social a:hover { background: #2E7AE5; color: #fff; }

/* FAQ (accordion BS5, só tema laranja) */
.mr-faq .accordion-button:not(.collapsed) { background: #fff1e6; color: var(--cor-primaria,#060f4d); box-shadow: none; }
.mr-faq .accordion-button:focus { box-shadow: none; border-color: #ffd9b3; }
.mr-faq .accordion-item { border-radius: 10px; margin-bottom: 10px; overflow: hidden; border: 1px solid #eee; }

@media (max-width: 767px) {
    .mr-pagina-area { padding: 16px 0 50px; }
    .mr-pagina-area > .container { padding-top: 0 !important; }
    .mr-contato-grid { grid-template-columns: 1fr; }
    .mr-mercado-features { grid-template-columns: 1fr; }
}

/* Botão "Voltar" da página de produto */
.mr-produto-voltar { display: inline-flex; align-items: center; gap: 6px; color: #777; font-weight: 600; font-size: 14px; text-decoration: none; margin-bottom: 18px; transition: color .2s; }
.mr-produto-voltar:hover { color: var(--cor-primaria,#060f4d); }
.mr-produto-voltar svg { display: block; }

/* =========================================================
   HOME — rediagramação (categorias, marcas, oferta, sobre)
   ========================================================= */

/* ---------- Categorias: thumb circular padronizado (imagem real OU placeholder) ---------- */
.product-category-area .product-category-item .thumb {
    display: block;
    width: 100%;
    max-width: 180px;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    background: #fff3e9;        /* mesmo fundo do placeholder: imagens com fundo transparente combinam */
    border-radius: 50%;
    overflow: hidden;
}

.product-category-area .product-category-item .thumb > a {
    display: block;
    width: 100%;
    height: 100%;
}

.product-category-area .product-category-item .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

/* Placeholder de categoria (sem imagem) — inicial centralizada */
.product-category-area .product-category-item .thumb .mr-cat-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    color: var(--cor-primaria,#060f4d);
    font-size: 52px;
    font-weight: 800;
    line-height: 1;
}

/* ---------- Marcas parceiras ---------- */
.mr-brands-grid .col { display: flex; }

.mr-brand-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 130px;
    padding: 18px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    text-align: center;
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

.mr-brand-card:hover {
    box-shadow: 0 10px 26px rgba(0, 0, 0, .08);
    transform: translateY(-3px);
    border-color: #ffd9b3;
}

.mr-brand-card img {
    max-width: 100%;
    max-height: 90px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Placeholder (marca ainda sem imagem cadastrada) — slot para trocar depois */
.mr-brand-card .mr-brand-name {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 90px;
    font-weight: 700;
    font-size: 16px;
    color: #555;
    border: 2px dashed #e6e6e6;
    border-radius: 10px;
    padding: 14px 8px;
    background:
        repeating-linear-gradient(45deg, #fafafa, #fafafa 10px, #f4f4f4 10px, #f4f4f4 20px);
}

.mr-brand-card:hover .mr-brand-name { color: var(--cor-primaria,#060f4d); border-color: #ffd9b3; }

/* ---------- Faixa "Melhor Oferta" ---------- */
.mr-deal-area {
    background-color: var(--cor-primaria,#060f4d) !important;
    background-size: cover;
    background-position: center;
}

.mr-deal-area .divider-content .sub-title,
.mr-deal-area .divider-content .title,
.mr-deal-area .divider-content .desc {
    color: #fff !important;
}

.mr-deal-area .btn-theme {
    background-color: #fff !important;
    border-color: #fff !important;
    color: var(--cor-primaria,#060f4d) !important;
}

.mr-deal-area .btn-theme:before,
.mr-deal-area .btn-theme:after {
    background-color: #ffe2cc !important;
}

/* A imagem desta faixa é um RECORTE (PNG sem fundo) — a regra de sombra fica
   num bloco só, mais abaixo. Antes havia duas, e as duas moldavam a caixa. */

@media (max-width: 991px) {
    .mr-deal-area .divider-thumb { text-align: center; margin-bottom: 24px; }
    .mr-deal-area .divider-content { text-align: center; }
    .mr-deal-area .divider-thumb img { transform: none; }
}

/* ---------- Espaçamento banner -> benefícios ---------- */
.feature-style2-area { padding-top: 45px; }
@media (max-width: 767px) { .feature-style2-area { padding-top: 26px; } }

/* ---------- Carrosséis de categoria e marca ---------- */
.mr-cat-slider,
.mr-brand-slider {
    position: relative;
    padding: 10px 4px 0;
}

.mr-cat-slider .swiper-slide,
.mr-brand-slider .swiper-slide {
    height: auto;
    display: flex;
}

.mr-cat-slider .swiper-slide .product-category-item { width: 100%; }

/* Nome da categoria menor e em linha única elegante */
.product-category-area .product-category-item .content .title,
.product-category-area .product-category-item .content .title a {
    font-size: 14px;
    line-height: 1.3;
}

/* Setas dos carrosséis */
.mr-cat-slider .swiper-btn-wrap > div,
.mr-brand-slider .swiper-btn-wrap > div {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cor-primaria,#060f4d);
    font-size: 20px;
    cursor: pointer;
    z-index: 6;
    transition: background .2s ease, color .2s ease;
}

.mr-cat-slider .swiper-btn-prev,
.mr-brand-slider .swiper-btn-prev { left: -6px; }

.mr-cat-slider .swiper-btn-next,
.mr-brand-slider .swiper-btn-next { right: -6px; }

.mr-cat-slider .swiper-btn-wrap > div:hover,
.mr-brand-slider .swiper-btn-wrap > div:hover { background: var(--cor-primaria,#060f4d); color: #fff; }

.mr-cat-slider .swiper-button-disabled,
.mr-brand-slider .swiper-button-disabled { opacity: .3; pointer-events: none; }

@media (max-width: 767px) {
    .mr-cat-slider .swiper-btn-wrap,
    .mr-brand-slider .swiper-btn-wrap { display: none; }
}

/* ---------- Espaçamento marcas -> faixa de oferta ---------- */
.mr-brands-area { padding-bottom: 60px; }
.mr-deal-area { margin-top: 10px; }

/* =========================================================
   HOME — compactação de espaçamento (seções mais enxutas)
   Sobrescreve os paddings/margens largos do template.
   ========================================================= */

/* Ritmo vertical das seções da home */
.feature-style2-area,
.product-category-area,
.product-default-area,
.mr-brands-area,
.about-area {
    padding-top: 30px;
    padding-bottom: 30px;
}

/* Faixa de oferta com presença, mas sem exagero */
.mr-deal-area { margin-top: 0; padding: 24px 0; }

/* Imagem da faixa de oferta: profundidade com camada/forma deslocada atrás */
.mr-deal-area .divider-thumb {
    position: relative;
    display: inline-block;
    max-width: 100%;
    transform: translateY(-20px);
}

/* Camada tracejada atrás da foto — removida (visual muito específico). */
.mr-deal-area .divider-thumb::before {
    display: none;
}

.mr-deal-area .divider-thumb img {
    position: relative;
    z-index: 2;
    display: block;
    /* A arte é um recorte de cão/gato (PNG sem fundo). box-shadow desenharia a
       sombra na CAIXA do elemento -> aparecia um retângulo/moldura flutuando no
       navy. O drop-shadow segue o CONTORNO real do recorte (canal alpha), então
       a sombra abraça o bicho. border-radius também sai: não há caixa a
       arredondar. */
    filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .45));
}

/* "APROVEITE" estava muito longe do topo da faixa: o template reserva
   121px/125px de padding. Aperta, mantendo respiro. */
.mr-deal-area .divider-content {
    padding: 66px 0 74px;
}

@media (max-width: 991px) {
    .mr-deal-area .divider-content { padding: 40px 0 48px; }
}

/* "Best Pet Food": imagem vertical com teto de altura, centralizada */
.about-area .about-thumb { text-align: center; }
.about-area .about-thumb img {
    width: auto;
    max-width: 100%;
    max-height: 520px;
    border-radius: 12px;
}

/* Marcas: zera o padding-bottom antigo (passa a usar o ritmo acima) */
.mr-brands-area { padding-bottom: 42px; }

/* Títulos de seção mais próximos do conteúdo (template usa 72px) */
.product-category-area .section-title,
.product-default-area .section-title,
.mr-brands-area .section-title {
    margin-top: 0;
    margin-bottom: 20px;
}

/* Feature: usa só o padding da seção (zera o do container do template) */
.feature-style2-area .container {
    padding-top: 0;
    padding-bottom: 0;
}

/* Itens de categoria não precisam de margem extra (carrossel de 1 linha) */
.product-category-area .product-category-item { margin-bottom: 0; }

@media (max-width: 767px) {

    .feature-style2-area,
    .product-category-area,
    .product-default-area,
    .mr-brands-area {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .product-category-area .section-title,
    .product-default-area .section-title,
    .mr-brands-area .section-title {
        margin-bottom: 18px;
    }

    /* No celular, ocultar a faixa de oferta e o bloco "sobre" (decisão do cliente) */
    .mr-deal-area,
    .about-area {
        display: none !important;
    }
}

/* Marcas: seção mais enxuta (menos espaço acima/abaixo) */
.mr-brands-area { padding-top: 24px; padding-bottom: 24px; }
.mr-brands-area .section-title { margin-bottom: 18px; }
.mr-brand-slider { padding-top: 0; }

@media (max-width: 767px) {
    .mr-brands-area { padding-top: 18px; padding-bottom: 18px; }
}

/* =========================================================
   Home destaque: card de produto mais compacto (texto menos
   "solto") + preço clicável (vai para a página do produto)
   ========================================================= */
.mr-products-grid .product-item .product-info { margin-top: 12px; }
/* anula a altura fixa de 86px (3 linhas) que deixava o nome "solto";
   agora o título ocupa no máx. 2 linhas e o preço cola logo abaixo */
.mr-products-grid .product-item .product-info .title {
    font-size: 15px;
    line-height: 1.3;
    margin-bottom: 4px;
    height: auto;
    min-height: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mr-products-grid .product-item .product-info .prices { font-size: 16px; line-height: 1.15; margin: 0; }
.mr-products-grid .product-item .product-info .prices .price { font-size: 16px; }
.mr-products-grid .product-item .product-info .prices .price-old { margin-bottom: 0; }

/* Preço clicável herda a cor (sem sublinhado) */
.mr-price-link { text-decoration: none; display: inline-block; }
.mr-price-link:hover .price { text-decoration: underline; }

/* =========================================================
   Card de produto: ação "Ver produto" como OVERLAY centralizado
   sobre a imagem no hover. O template usava o ícone pe-7s-look
   (Pe-icon-7-stroke), que quebrava virando "quadradinho" no canto
   — escondemos o .product-action e usamos este overlay (SVG).
   O clique vai para a interna (a imagem já é link).
   ========================================================= */
.product-item .product-thumb { position: relative; overflow: hidden; }
.product-item .product-action { display: none !important; }
.product-item .product-thumb::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(0, 0, 0, 0.30) url('../img/icon-ver.svg') center no-repeat;
    background-size: 54px 54px;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.product-item:hover .product-thumb::after { opacity: 1; }

/* =========================================================
   Checkout: formas de pagamento (PIX/Cartão "em breve" +
   Pagar na entrega com tipo e troco)
   ========================================================= */
.mr-pagamento-bloco { margin-top: 26px; padding-top: 20px; border-top: 1px solid #eee; }
.mr-pagamento-titulo { font-size: 16px; font-weight: 700; margin-bottom: 14px; color: #2b2b2b; }
.mr-pag-opcao { display: flex; align-items: center; gap: 10px; border: 1px solid #e3e3e3; border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; cursor: pointer; transition: border-color .15s; }
.mr-pag-opcao:hover { border-color: var(--cor-primaria,#060f4d); }
.mr-pag-opcao input { accent-color: var(--cor-primaria,#060f4d); }
.mr-pag-opcao span { font-weight: 600; color: #333; display: flex; align-items: center; }
.mr-pag-disabled { opacity: .55; cursor: not-allowed; }
.mr-pag-disabled:hover { border-color: #e3e3e3; }
.mr-pag-embreve { background: #ffe49c; color: #8a6100; font-weight: 700; font-size: 11px; padding: 1px 8px; border-radius: 10px; margin-left: 8px; }
.mr-pag-sub { background: #faf7f4; border: 1px solid #eee; border-radius: 10px; padding: 16px; margin-top: 2px; }
.mr-pag-radio-inline { margin-right: 18px; font-weight: 500; }
.mr-pag-radio-inline input { accent-color: var(--cor-primaria,#060f4d); margin-right: 5px; }
.mr-pag-opcao span small { font-weight: 500; margin-left: 6px; }
.mr-pag-aviso { margin: 14px 0 0; font-size: 12.5px; color: #6b7280; line-height: 1.45; }
.mr-pag-aviso .fa { color: var(--cor-secundaria,#ff6a00); margin-right: 5px; }

/* ===== Preço no cartão (vitrine) — regra do 2º preço ===== */
.mr-preco-avista {
    display: inline;
    font-size: 0.72em;
    font-weight: 700;
    color: #1e9e57;
    margin-left: 5px;
    text-transform: uppercase;
    letter-spacing: .02em;
    vertical-align: middle;
}
.mr-preco-cartao {
    display: block;
    font-size: 0.78em;
    line-height: 1.2;
    color: #8a8f98;
    font-weight: 600;
    margin-top: 2px;
    cursor: help;
}
.mr-preco-cartao::before {
    content: "\f09d";
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    margin-right: 4px;
    opacity: .7;
}

/* =========================================================
   Footer NAVY (marca) + ícones laranja
   ========================================================= */
.footer-area,
.footer-area .footer-main,
.footer-area .footer-bottom {
    background-color: var(--cor-primaria,#060f4d) !important;
    background-image: none !important;
    color: #ffffff;
}
.footer-area .widget-title,
.footer-area .widget-item .desc,
.footer-area p,
.footer-area li,
.footer-area a,
.footer-area .contact-item .info,
.footer-area .contact-item .info p,
.footer-area .contact-item .info span,
.footer-area .contact-item .info a,
.footer-area .footer-bottom-content,
.footer-area .footer-bottom-content a {
    color: #ffffff !important;
}
.footer-area a:hover {
    color: var(--cor-secundaria,#ff6a00) !important;
}
.footer-area .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}
/* Ícones sociais: chip LARANJA (override do ::before branco) + glifo branco */
.footer-area .social-icons a {
    color: #ffffff !important;
}
.footer-area .social-icons a:before {
    background-color: var(--cor-secundaria,#ff6a00) !important;
}
/* Ícones de contato (direita): chip LARANJA + glifo branco */
.footer-area .widget-contact-info .contact-item .icon {
    background-color: var(--cor-secundaria,#ff6a00) !important;
    color: #ffffff !important;
}
/* Linha do e-mail sem ícone: flush à esquerda (alinha com ícones e título do box) */
.footer-area .widget-contact-info .contact-item--sem-icone .info {
    margin-left: 0;
}

/* =========================================================
   Fase 2 — Tipografia da marca: Nunito (títulos) + Poppins (corpo)
   (NÃO incluir i.fa / i.pe-7s-* / [class*="icon"] p/ não quebrar ícones)
   ========================================================= */
body,
p, a, li, span, label, small, strong, em, blockquote,
input, textarea, select, button, table, td, th,
.desc, .breadcrumb,
.footer-area, .footer-area p, .footer-area li, .footer-area a,
.footer-area .desc, .footer-area .widget-item {
    font-family: 'Poppins', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.title, .widget-title, .page-header-content .title,
.product-name, .product-title, .product-content .title,
.header-site .main-menu > li > a span,
.btn, .btn-theme, .mr-btn-ver, .mr-produto-preco {
    font-family: 'Nunito', sans-serif;
}

/* =========================================================
   Faixa navy inclinada com a logo — TODAS as larguras
   (logo branca sobre a faixa; a versão navy fica oculta)
   ========================================================= */
.header-site .logo-mob  { display: none !important; }
.header-site .logo-desk { display: inline-block; }

/* PAI: sem clip; carrega o drop-shadow (a sombra segue o ::before recortado). */
.header-site .header-align-start {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    position: relative;
    margin-left: calc(50% - 50vw);            /* full-bleed até a borda esquerda */
    padding-left: calc(50vw - 50% + 16px);    /* alinha a logo ao container */
    padding-right: 38px;
    overflow: visible;
    -webkit-filter: drop-shadow(6px 4px 5px rgba(0, 0, 0, 0.32));
    filter: drop-shadow(6px 4px 5px rgba(0, 0, 0, 0.32));
}
/* FILHO recortado: a faixa navy (a sombra do pai segue este formato). */
.header-site .header-align-start::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: var(--cor-primaria,#060f4d);
    -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 100%, 0 100%);
    z-index: 0;
}
.header-site .header-logo-area {
    width: auto !important;
    line-height: 0;
    position: relative;   /* logo acima do ::before */
    z-index: 1;
}
.header-site .logo-main {
    margin: 0 !important;
    max-width: 150px !important;
    max-height: 50px !important;
}

/* Desktop: logo maior, mais respiro e inclinação maior */
@media (min-width: 992px) {
    .header-site .logo-main { max-width: 240px !important; max-height: 84px !important; }
    .header-site .header-align-start {
        padding-left: calc(50vw - 50% + 24px);
        padding-right: 58px;
        -webkit-filter: drop-shadow(8px 6px 7px rgba(0, 0, 0, 0.38));
        filter: drop-shadow(8px 6px 7px rgba(0, 0, 0, 0.38));
    }
    .header-site .header-align-start::before {
        -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 42px) 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, calc(100% - 42px) 100%, 0 100%);
    }
}

/* ===== Aviso de formas de pagamento (rodapé) ===== */
.footer-pagamentos {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: 18px 0;
}
.footer-pagamentos-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.footer-pagamentos-texto {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, .85);
}
.footer-pagamentos-texto .fa {
    color: var(--cor-secundaria, #ff6a00);
    margin-right: 6px;
}
.footer-pagamentos-texto strong {
    color: #fff;
    font-weight: 600;
}
.footer-pagamentos-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.footer-pagamentos-logos img {
    height: 34px;
    width: auto;
    display: block;
}
/* Tira de bandeiras (já tem fundo branco por bandeira) — sem chip. */
.footer-pg-bandeiras { height: 42px; }
/* Logos de gateway (fundo transparente/texto escuro) — chip branco p/ ler no navy. */
.footer-pg-gateway {
    height: 40px;
    background: #fff;
    padding: 6px 10px;
    border-radius: 5px;
    box-sizing: border-box;
}
.footer-pagamentos-sep {
    width: 1px;
    height: 26px;
    background: rgba(255, 255, 255, .18);
    margin: 0 4px;
}
@media (max-width: 575px) {
    .footer-pagamentos-content { justify-content: center; text-align: center; }
    /* Tudo numa linha só: bandeiras + gateways menores, sem o separador.
       Seletores específicos (img.classe) p/ vencer o height genérico. */
    .footer-pagamentos-logos { justify-content: center; flex-wrap: nowrap; gap: 5px; }
    .footer-pagamentos-sep { display: none; }
    .footer-pagamentos-logos img.footer-pg-bandeiras { height: 20px; }
    .footer-pagamentos-logos img.footer-pg-gateway { height: 26px; padding: 3px 6px; }
}
@media (max-width: 380px) {
    .footer-pagamentos-logos { gap: 3px; }
    .footer-pagamentos-logos img.footer-pg-bandeiras { height: 17px; }
    .footer-pagamentos-logos img.footer-pg-gateway { height: 22px; padding: 2px 4px; }
}

/* ===== Checkout 2 colunas (single-page) ===== */
.mr-checkout-resumo-box { position: sticky; top: 90px; }
.mr-checkout-itens {
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
    max-height: 260px;
    overflow-y: auto;
}
.mr-checkout-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    font-size: 14px;
}
.mr-checkout-item-qtd {
    font-weight: 700;
    color: var(--cor-primaria, #060f4d);
    min-width: 28px;
}
.mr-checkout-item-nome { flex: 1; line-height: 1.25; }
.mr-checkout-item-preco { white-space: nowrap; font-weight: 600; }
.mr-checkout-seguranca {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #eee;
    text-align: center;
}
.mr-checkout-seguranca-titulo { margin: 0 0 2px; font-weight: 600; font-size: 14px; }
.mr-checkout-seguranca-titulo .fa { color: #27AE60; margin-right: 4px; }
.mr-checkout-seguranca-txt { margin: 0 0 8px; font-size: 12px; color: #777; }
.mr-checkout-seguranca-logos { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.mr-checkout-seguranca-logos img { height: 30px; width: auto; max-width: 100%; }
.mr-checkout-seguranca-gateways { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 10px; }
.mr-checkout-seguranca-gateways img { height: 28px; width: auto; }
@media (max-width: 991px) {
    .mr-checkout-resumo-box { position: static; }
}

/* ===== Marca no card do produto (antes do nome) ===== */
.product-item .product-brand {
    display: block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cor-secundaria, #ff6a00);
    margin-bottom: 2px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Categoria no card (abaixo da marca): menor e em cinza ===== */
.product-item .product-category {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #8a8f98;
    margin-bottom: 3px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Banner (hero): transição em mosaico + dots centralizados ===== */
.mr-home-slider { position: relative; }
.mr-home-slider .swiper-slide img { display: block; width: 100%; }

/* Transição "mosaico/esfarelando": a imagem anterior se quebra em quadradinhos
   que somem em ordem aleatória, revelando a próxima. Tiles gerados em home.js.
   A imagem em si fica parada (sem zoom). */
.mr-home-slider .mr-tiles {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(7, 1fr);
    z-index: 10;
    pointer-events: none;
}
.mr-home-slider .mr-tile {
    background-repeat: no-repeat;
    opacity: 1;
    transform: scale(1);
    transition: opacity .5s ease, transform .5s ease;
    will-change: opacity, transform;
}
.mr-home-slider .mr-tiles.is-out .mr-tile {
    opacity: 0;
    transform: scale(.2);
}
@media (prefers-reduced-motion: reduce) {
    .mr-home-slider .mr-tiles { display: none; }
}

/* Dots centralizados no rodapé do banner. */
.mr-home-slider .swiper-pagination {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    text-align: center;
    z-index: 5;
    line-height: 0;
}
.mr-home-slider .swiper-pagination-bullet {
    width: 11px;
    height: 11px;
    margin: 0 5px !important;
    background: #fff;
    opacity: .55;
    border-radius: 6px;
    transition: opacity .3s ease, width .3s ease, background-color .3s ease;
}
.mr-home-slider .swiper-pagination-bullet-active {
    opacity: 1;
    width: 30px;
    background: var(--cor-secundaria, #ff6a00);
}
@media (max-width: 575px) {
    .mr-home-slider .swiper-pagination { bottom: 10px; }
    .mr-home-slider .swiper-pagination-bullet { width: 9px; height: 9px; }
    .mr-home-slider .swiper-pagination-bullet-active { width: 24px; }
}

/* ===== Feature (benefícios) vira uma "cinta" cinza com texto escuro =====
   (separa do branco dos produtos logo abaixo) */
.feature-style2-area {
    background-color: #f2f2f2;
}
.feature-style2-area .feature-icon-box .content .title {
    color: var(--cor-primaria, #060f4d);
}
.feature-style2-area .feature-icon-box .content p {
    color: #666;
}

/* ===== "Compre por categoria": seção mais enxuta ===== */
.product-category-area {
    padding-top: 20px;
    padding-bottom: 20px;
}
.product-category-area .product-category-item .thumb {
    max-width: 130px;
}
.product-category-area .product-category-item .thumb .mr-cat-placeholder {
    font-size: 38px;
}

/* ==========================================================================
   CUPOM DE DESCONTO NO CHECKOUT
   ========================================================================== */
.mr-checkout-cupom { padding: 12px 0; border-bottom: 1px solid #f0f0f0; }

.mr-cupom-input { display: flex; gap: 8px; }
.mr-cupom-input .form-control { flex: 1; text-transform: uppercase; }
.mr-cupom-input .btn-theme {
    height: auto; line-height: normal; padding: 0 20px; white-space: nowrap;
    min-width: auto; font-size: 14px;
}

.mr-cupom-aplicado {
    display: flex; align-items: center; justify-content: space-between;
    background: #e9f7ef; border: 1px solid #b7e0c6; border-radius: 8px;
    padding: 10px 14px; color: #0f5132;
}
.mr-cupom-aplicado strong { letter-spacing: .5px; }
.mr-cupom-remover {
    border: none; background: none; color: #842029; font-size: 22px;
    line-height: 1; cursor: pointer; padding: 0 4px;
}

#cupom-aviso-cartao { display: block; margin-top: 6px; color: #b8860b; }

/* ==========================================================================
   BOTÃO FLUTUANTE DO WHATSAPP
   --------------------------------------------------------------------------
   Sempre visível no canto inferior direito. Abre a conversa em nova aba
   (WhatsApp Web no computador, app no celular).

   z-index 1035: acima do header (1030), mas ABAIXO do offcanvas do carrinho
   (1045) e dos modais (1055) do Bootstrap 5 — assim não fica boiando por cima
   dessas telas.
   ========================================================================== */
.mr-zap-flutuante {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1035;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25D366;                 /* verde oficial do WhatsApp */
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
    transition: transform .18s ease, box-shadow .18s ease;
}

.mr-zap-flutuante:hover,
.mr-zap-flutuante:focus {
    color: #fff !important;
    background: #1ebe5b;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .34);
}

/* Anel pulsante discreto, só para o olho encontrar o botão. */
.mr-zap-flutuante::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(37, 211, 102, .55);
    animation: mr-zap-pulso 2.4s ease-out infinite;
}

@keyframes mr-zap-pulso {
    0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); }
    70%  { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

@media (max-width: 575px) {
    .mr-zap-flutuante {
        right: 14px;
        bottom: 14px;
        width: 52px;
        height: 52px;
        font-size: 29px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mr-zap-flutuante { transition: none; }
    .mr-zap-flutuante:hover { transform: none; }
    .mr-zap-flutuante::after { animation: none; }
}