@import url("font/vogue/stylesheet.css");
@import url("font/myriadpro/stylesheet.css");
@import url("font/swis721/stylesheet.css");
@import url("font/abadi/stylesheet.css");
@import url("font/akrobat/stylesheet.css");
@import url("font/amsipro/stylesheet.css");


/*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */

.pswp {
    --pswp-bg: #000;
    --pswp-placeholder-bg: #222;


    --pswp-root-z-index: 100000;

    --pswp-preloader-color: rgba(79, 79, 79, 0.4);
    --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9);

    /* defined via js:
    --pswp-transition-duration: 333ms; */

    --pswp-icon-color: #fff;
    --pswp-icon-color-secondary: #4f4f4f;
    --pswp-icon-stroke-color: #4f4f4f;
    --pswp-icon-stroke-width: 2px;

    --pswp-error-text-color: var(--pswp-icon-color);
}


/*
      Styles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions)
  */

.pswp {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--pswp-root-z-index);
    display: none;
    touch-action: none;
    outline: 0;
    opacity: 0.003;
    contain: layout style size;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Prevents focus outline on the root element,
    (it may be focused initially) */
.pswp:focus {
    outline: 0;
}

.pswp * {
    box-sizing: border-box;
}

.pswp img {
    max-width: none;
}

.pswp--open {
    display: block;
}

.pswp,
.pswp__bg {
    transform: translateZ(0);
    will-change: opacity;
}

.pswp__bg {
    opacity: 0.005;
    background: var(--pswp-bg);
}

.pswp,
.pswp__scroll-wrap {
    overflow: hidden;
}

.pswp__scroll-wrap,
.pswp__bg,
.pswp__container,
.pswp__item,
.pswp__content,
.pswp__img,
.pswp__zoom-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.pswp__img,
.pswp__zoom-wrap {
    width: auto;
    height: auto;
}

.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img {
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    cursor: zoom-in;
}

.pswp--click-to-zoom.pswp--zoomed-in .pswp__img {
    cursor: move;
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: grab;
}

.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing;
}

/* :active to override grabbing cursor */
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active,
.pswp__img {
    cursor: -webkit-zoom-out;
    cursor: -moz-zoom-out;
    cursor: zoom-out;
}


/* Prevent selection and tap highlights */
.pswp__container,
.pswp__img,
.pswp__button,
.pswp__counter {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.pswp__item {
    /* z-index for fade transition */
    z-index: 1;
    overflow: hidden;
}

.pswp__hidden {
    display: none !important;
}

/* Allow to click through pswp__content element, but not its children */
.pswp__content {
    pointer-events: none;
}

.pswp__content>* {
    pointer-events: auto;
}


/*
  
    PhotoSwipe UI
  
  */

/*
      Error message appears when image is not loaded
      (JS option errorMsg controls markup)
  */
.pswp__error-msg-container {
    display: grid;
}

.pswp__error-msg {
    margin: auto;
    font-size: 1em;
    line-height: 1;
    color: var(--pswp-error-text-color);
}

/*
  class pswp__hide-on-close is applied to elements that
  should hide (for example fade out) when PhotoSwipe is closed
  and show (for example fade in) when PhotoSwipe is opened
   */
.pswp .pswp__hide-on-close {
    opacity: 0.005;
    will-change: opacity;
    transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1);
    z-index: 10;
    /* always overlap slide content */
    pointer-events: none;
    /* hidden elements should not be clickable */
}

/* class pswp--ui-visible is added when opening or closing transition starts */
.pswp--ui-visible .pswp__hide-on-close {
    opacity: 1;
    pointer-events: auto;
}

/* <button> styles, including css reset */
.pswp__button {
    position: relative;
    display: block;
    width: 50px;
    height: 60px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    cursor: pointer;
    background: none;
    border: 0;
    box-shadow: none;
    opacity: 0.85;
    -webkit-appearance: none;
    -webkit-touch-callout: none;
}

.pswp__button:hover,
.pswp__button:active,
.pswp__button:focus {
    transition: none;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    opacity: 1;
}

.pswp__button:disabled {
    opacity: 0.3;
    cursor: auto;
}

.pswp__icn {
    fill: var(--pswp-icon-color);
    color: var(--pswp-icon-color-secondary);
}

.pswp__icn {
    position: absolute;
    top: 14px;
    left: 9px;
    width: 32px;
    height: 32px;
    overflow: hidden;
    pointer-events: none;
}

.pswp__icn-shadow {
    stroke: var(--pswp-icon-stroke-color);
    stroke-width: var(--pswp-icon-stroke-width);
    fill: none;
}

.pswp__icn:focus {
    outline: 0;
}

/*
      div element that matches size of large image,
      large image loads on top of it,
      used when msrc is not provided
  */
div.pswp__img--placeholder,
.pswp__img--with-bg {
    background: var(--pswp-placeholder-bg);
}

.pswp__top-bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    z-index: 10;

    /* allow events to pass through top bar itself */
    pointer-events: none !important;
}

.pswp__top-bar>* {
    pointer-events: auto;
    /* this makes transition significantly more smooth,
       even though inner elements are not animated */
    will-change: opacity;
}


/*
  
    Close button
  
  */
.pswp__button--close {
    margin-right: 6px;
}


/*
  
    Arrow buttons
  
  */
.pswp__button--arrow {
    position: absolute;
    top: 0;
    width: 75px;
    height: 100px;
    top: 50%;
    margin-top: -50px;
}

.pswp__button--arrow:disabled {
    display: none;
    cursor: default;
}

.pswp__button--arrow .pswp__icn {
    top: 50%;
    margin-top: -30px;
    width: 60px;
    height: 60px;
    background: none;
    border-radius: 0;
}

.pswp--one-slide .pswp__button--arrow {
    display: none;
}

/* hide arrows on touch screens */
.pswp--touch .pswp__button--arrow {
    visibility: hidden;
}

/* show arrows only after mouse was used */
.pswp--has_mouse .pswp__button--arrow {
    visibility: visible;
}

.pswp__button--arrow--prev {
    right: auto;
    left: 0px;
}

.pswp__button--arrow--next {
    right: 0px;
}

.pswp__button--arrow--next .pswp__icn {
    left: auto;
    right: 14px;
    /* flip horizontally */
    transform: scale(-1, 1);
}

/*
  
    Zoom button
  
  */
.pswp__button--zoom {
    display: none;
}

.pswp--zoom-allowed .pswp__button--zoom {
    display: block;
}

/* "+" => "-" */
.pswp--zoomed-in .pswp__zoom-icn-bar-v {
    display: none;
}


/*
  
    Loading indicator
  
  */
.pswp__preloader {
    position: relative;
    overflow: hidden;
    width: 50px;
    height: 60px;
    margin-right: auto;
}

.pswp__preloader .pswp__icn {
    opacity: 0;
    transition: opacity 0.2s linear;
    animation: pswp-clockwise 600ms linear infinite;
}

.pswp__preloader--active .pswp__icn {
    opacity: 0.85;
}

@keyframes pswp-clockwise {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/*
  
    "1 of 10" counter
  
  */
.pswp__counter {
    height: 30px;
    margin-top: 15px;
    margin-inline-start: 20px;
    font-size: 14px;
    line-height: 30px;
    color: var(--pswp-icon-color);
    text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
    opacity: 0.85;
}

.pswp--one-slide .pswp__counter {
    display: none;
}



/* ==========================================================================
   Estilos ESPECÍFICOS para o Header do E-COMMERCE
   ========================================================================== */

.header-ecommerce {
  background-color: var(--cor-oestewood);
  color: #ffffff;
}

.header-ecommerce .header-ecommerce-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 100px;
}

/* --- Coluna da Esquerda: Logo --- */
.header-ecommerce .header-col-left .img-fluid {
  max-height: 110px;
}

/* --- Coluna do Meio: Departamentos e Busca --- */
.header-ecommerce .header-col-center {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}

.header-ecommerce .btn-departamentos {
  background: none;
  border: none;
  color: #ffffff;
  font-size: 1.7rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: 2.5rem;
  white-space: nowrap;
}
.header-ecommerce .btn-departamentos i {
  font-size: 2.2rem;
}

.header-ecommerce .header-col-center #search {
  width: 100%;
  max-width: 600px;
}
.header-ecommerce .header-col-center #search .form-control {
  border: none;
}
.header-ecommerce .header-col-center #search .btn {
  background-color: #ffffff;
  border-color: #ffffff;
  font-size: 2rem;
  color: var(--black);
}

/* --- Coluna da Direita: Ícones --- */
.header-ecommerce .header-col-right {
  display: flex;
  align-items: center;
  
}

.header-ecommerce .header-icon {
  width: 40px;
  filter: brightness(0) invert(1);
}

.header-ecommerce .header-col-right #cart > .btn {
  background: none;
  border: none;
  color: #ffffff;
  font-size: 1.5rem;
  padding: 0;
}
.header-ecommerce .header-col-right #cart .badge {
  background-color: #ff0000;
  font-size: 0.7rem;
  position: relative;
  top: -10px;
  left: -5px;
}

/* --- Responsividade para Mobile --- */
.header-ecommerce .header-mobile-toggle {
  display: none; /* Escondido no desktop por padrão */
}

@media (max-width: 767px) {
  /* Esconde os elementos do desktop */
  .header-ecommerce .header-col-center,
  .header-ecommerce .header-col-right,
  .header-ecommerce .departamentos-menu {
    display: none;
  }

  /* Mostra o botão toggle no mobile */
  .header-ecommerce .header-mobile-toggle {
    display: block;
  }

  /* Ajusta o logo para não competir com o botão toggle */
  .header-ecommerce .header-col-left {
    flex-grow: 1; /* Permite que o logo ocupe mais espaço */
  }
}

/* ==========================================================================
   BARRA DE NAVEGAÇÃO INFERIOR PARA MOBILE
   ========================================================================== */

/* Por padrão, a barra fica escondida em telas grandes (desktop) */
.mobile-bottom-nav {
  display: none;
}

.header-col-center .w-100 {
  display: flex;
  justify-content: center;
}

/* Quando a tela for menor que 992px, as regras abaixo serão aplicadas */
@media (max-width: 767px) {
  /* 1. Estilo do Contêiner da Barra */
  .mobile-bottom-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;

    position: fixed; /* << A MÁGICA ACONTECE AQUI */
    bottom: 0;
    left: 0;
    right: 0;

    height: 75px;
    background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.85) 70%,
      rgba(255, 255, 255, 0.6) 100%
    );
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000; /* Z-index alto para ficar sobre todo o conteúdo */
  }

  /* 2. Estilo de Cada Item/Link da Barra */
  .mobile-bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--black); /* Ícones e texto brancos */
    text-decoration: none;
    font-size: 11px;
    flex-grow: 1; /* Para que todos os itens ocupem o mesmo espaço */
    gap: 4px; /* Espaço entre o ícone e o texto */
  }

  /* 3. Estilo dos Ícones */
  .mobile-bottom-nav .nav-item i {
    font-size: 30px; /* Tamanho dos ícones */
    color: var(--gold);
  }

  /* 4. Estilo Específico do Item do Carrinho (para a bolha de notificação) */
  .mobile-bottom-nav .cart-item .icon-wrapper {
    position: relative;
  }

  .mobile-bottom-nav .cart-item .cart-badge {
    position: absolute;
    top: -5px;
    right: -10px;
    background-color: var(--gold); /* Vermelho para a notificação */
    color: #ffffff;
    font-size: 13px;
    font-weight: bold;
    border-radius: 50%;
    width: 21px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
  }

  /* Ajuste de tamanho para o novo ícone SVG do carrinho no menu mobile inferior */
  .mobile-bottom-nav .cart-item .cart-icon-svg {
    width: 32px;
    height: 33px;
    stroke: var(
      --gold
    ); /* Garante que a cor do contorno seja a mesma dos outros ícones */
  }

  body {
    padding-bottom: 75px; /* A mesma altura da barra de navegação */
  }
}

/* ==========================================================================
   AJUSTES PARA ÍCONE E BADGE DO CARRINHO NO HEADER
   ========================================================================== */

/* Garante que o ícone do carrinho tenha o mesmo estilo dos outros ícones do header */
#cart .cart .cart-icon-svg {
  color: #ffffff;
  width: 2.7rem; /* Usamos width e height para SVG */
  height: 2.7rem; /* Tamanho consistente com os outros ícones */
  vertical-align: middle;
}

/* Estiliza o contador de itens como um emblema (badge) */
#cart .cart-counter {
  position: absolute;
  top: -8px; /* Posição vertical */
  right: -8px; /* Posição horizontal */

  /* Aparência do círculo */
  background-color: #f8f9fa; /* Cor de fundo cinza claro, como na imagem */
  color: #212529; /* Cor do número escura */
  border: 1px solid #dee2e6; /* Borda sutil */
  border-radius: 50%;

  /* Tamanho e alinhamento do texto */
  width: 22px;
  height: 22px;
  font-size: 12px;
  font-weight: bold;
  line-height: 21px; /* Alinha o número verticalmente */
  text-align: center;

  /* Remove margens e paddings de parágrafo */
  padding: 0;
  margin: 0;
  z-index: 1; /* Garante que fique sobre o ícone */
}

/* ==========================================================================
   NOVO LAYOUT PARA HEADER MOBILE (LOGO + BUSCA)
   ========================================================================== */

/* Regras aplicadas apenas em telas com largura máxima de 991px (celulares e tablets) */
@media (max-width: 767px) {
  /* 1. Altera o container principal do header para um layout vertical */
  .header-ecommerce .header-ecommerce-content {
    flex-direction: column; /* Empilha os itens (logo e busca) verticalmente */
    justify-content: center; /* Centraliza o conteúdo verticalmente */
    gap: 0rem; /* Adiciona um espaço entre a logo e a busca */
    padding-top: 1rem;
    padding-bottom: 2rem;
    min-height: auto; /* Remove a altura mínima para se ajustar ao conteúdo */
  }

  /* 2. Faz o campo de busca (que estava escondido) aparecer */
  .header-ecommerce .header-col-center {
    display: block; /* Garante que a coluna da busca seja exibida */
    width: 100%; /* Faz a busca ocupar a largura total disponível */
    padding: 0 0px; /* Adiciona um espaçamento nas laterais */
  }

  /* 3. Esconde os botões que não são mais necessários neste layout */
  .header-ecommerce .departamentos-menu,
  .header-ecommerce .header-mobile-toggle {
    display: none; /* Esconde o botão "DEPARTAMENTOS" e o botão de menu antigo */
  }

  /* Garante que a logo não ocupe espaço extra e se centralize corretamente */
  .header-ecommerce .header-col-left {
    flex-grow: 0;
  }

  .fa-outlined {
    -webkit-text-stroke: 2px var(--gold); /* Largura e cor da borda */
    color: transparent !important; /* Deixa o preenchimento do ícone transparente */
  }
}

@media (min-width: 768px) {

  .header-ecommerce {
  position: sticky;
  top: 0;
  z-index: 1021;
}

}



/* ==========================================================================
   Estilos para o Footer INSTITUCIONAL (Layout Novo)
   ========================================================================== */

/* --- Parte Principal do Rodapé (Fundo Azul) --- */
.footer-ecom-main {
    background-color: var(--cor-oestewood); /* Seu azul principal */
    color: #ffffff;
    padding: 4rem 0;
    /* padding-top: 4rem; */
    /* padding-right: 0px; */
    /* padding-left: 0px; */
    font-size: 16px;
    margin-top: 50px;
    border-radius: 10px;
}

.footer-ecom-main .footer-logo {
    max-width: 255px;
    height: auto;
}

.footer-ecom-main .footer-address {
    color: white;
    line-height: 1.6;
}

.footer-ecom-main .footer-heading {
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    font-size: 17px;
    color: #C09E5C;
}

.footer-ecom-main .footer-links li {
    margin-bottom: 0.75rem;
}

.footer-ecom-main .footer-links a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-ecom-main .footer-links a:hover {
    color: #ffffff;
}

/* Coluna de Redes Sociais */
.footer-ecom-main .social-icons {
    display: flex;
    gap: 1.5rem;
}

.footer-ecom-main .social-icons a {
    color: #ffffff;
    transition: transform 0.3s ease;
}

.footer-ecom-main .social-icons a i {
    font-size: 30px;
}

.footer-ecom-main .social-icons a:hover {
    transform: scale(1.1);
}

.footer-ecom-main .ssl-logo {
    max-width: 100px;
}

/* --- Barra Inferior do Rodapé --- */
.footer-ecom-bottom {
    border-top: 1px solid #eaeaea;
    background-color: #fff;
}

.footer-ecom-bottom .powered-text {
    font-size: 14px;
    color: #555;
}

 .trn-logo {
    height: 40px;
    width: auto;
}
 .trn2-logo {
    height: 40px;
    width: auto;
}

/* --- Ajustes para Mobile --- */
@media (max-width: 991px) {
    /* ... (suas regras existentes para .footer-ecom-main) ... */
    .footer-ecom-main {
        text-align: center;
    }
    .footer-ecom-col {
        margin-bottom: 2.5rem;
    }
    .footer-ecom-main .footer-logo,
    .footer-ecom-main .ssl-logo {
        margin-left: auto;
        margin-right: auto;
    }
    .footer-ecom-main .social-icons {
        justify-content: center;
    }

    .grid-payment {
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
    }
}

@media (min-width: 768px) {
.col-lg-footer {
    padding-left: 25px;
    padding-right: 50px;
  }

 .espacamento{
    margin-right: 150px !important;
  }
}

/* Media Query para o footer-bottom em telas de celular */
@media (max-width: 767px) {
    /* Altera o container principal para empilhar e centralizar os itens */
    .footer-ecom-bottom {
        flex-direction: column; /* Coloca o texto em cima e a logo embaixo */
        gap: 1rem;              /* Adiciona um espaço entre eles */
        padding-top: 1.5rem;    /* Adiciona um respiro no topo */
        padding-bottom: 1.5rem; /* Adiciona um respiro embaixo */
    }

    /* Faz com que as duas colunas internas ocupem 100% da largura e centralizem seu conteúdo */
    .footer-ecom-bottom > .col-6 {
        width: 100%;                /* Força a largura total, ignorando o col-6 */
        justify-content: center !important; /* Centraliza a logo, sobrescrevendo o 'justify-content-end' */
        text-align: center;         /* Garante que o texto fique centralizado */
    }

}


/* Container do grid de pagamento */
.grid-payment {
  display: flex;
  /* Cria 3 colunas de tamanho igual */
  /* grid-template-columns: repeat(3, 1fr); */
  /* Adiciona um espaço entre os logos */
  
  /* Centraliza os logos vertical e horizontalmente dentro de cada célula do grid */
  place-items: center;
  /* Define uma largura máxima para o container, evitando que os logos fiquem muito grandes em telas largas */
  max-width: 173px;
  /* Adiciona um espaço abaixo dos ícones, antes do título "Redes Sociais" */
  margin-bottom: 25px;
}

/* Estilo para todas as imagens dentro do grid de pagamento */
.grid-payment img {
  /* A imagem ocupará no máximo 100% da largura da célula do grid */
  max-width: 100%;
  /* A altura se ajustará automaticamente para manter a proporção */
  height: auto;
}


.visa-logo{
    width: 62px !important;
    height: auto;
}
.mastercard-logo{
    width: 72px !important;
    height: auto;
}


/* ==========================================================================
   ESTILOS PARA O MEGA MENU DE DEPARTAMENTOS (SOLUÇÃO DEFINITIVA)
   ========================================================================== */

/* O menu agora é posicionado de forma absoluta na página */
.dropdown-menu.mega-menu {
    display: none; 
    position: absolute; /* Posição absoluta relativa à página */
    left: 0;
    width: 100%; /* Ocupa 100% da largura da tela */
    z-index: 1000;
    
    /* Reseta estilos do bootstrap */
    transform: none !important;
    margin: 0;
    padding: 0;
    border-radius: 0;
    float: none;

    /* Estilo visual */
    background-color: #fff;
    border: none;
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    border-top: 1px solid #e9ecef;
}

/* Mostra o menu quando a classe 'show' é adicionada */
.dropdown-menu.mega-menu.show {
    display: block;
}

/* O restante do CSS para o conteúdo interno continua o mesmo */
.mega-menu-content {
    display: flex;
    padding: 25px 0; /* Padding vertical, sem padding horizontal */
}
.mega-menu-column {
    padding: 0 15px;
}
.mega-menu-column-left {
    flex: 0 0 25%;
    border-right: 1px solid #f0f0f0;
}
.mega-menu-column-right {
    flex: 0 0 75%;
}
.mega-menu-item {
    display: block;
    padding: 10px 15px;
    color: #333;
    font-size: 16px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    margin-bottom: 5px;
    transition: all 0.2s ease-in-out;
}
.mega-menu-item:hover, .mega-menu-item.active {
    background-color: #f8f9fa; 
    color: var(--azul-botao-retifoz, #002366);
}
.mega-menu-pane {
    display: none; 
}
.mega-menu-pane.active {
    display: block;
}
.mega-menu-pane h4 {
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
        font-size: 20px;
}
.mega-menu-pane ul a {
    color: #555;
    text-decoration: none;
    display: block;
    padding: 5px 0;
}
.mega-menu-pane ul a:hover {
    color: #000;
}

/* ==========================================================================
   ESTILO PERSONALIZADO PARA O LINK INSTITUCIONAL NO MEGA MENU
   ========================================================================== */

/* Estilo base para o link 'Institucional' */
.mega-menu-item.link-institucional {
    background-color: #f8f9fa;        /* Deixa a fonte um pouco mais leve que a das categorias */
    border-bottom: 1px solid #e5e5e5; /* Adiciona uma linha separadora abaixo */
    margin-bottom: 10px;        /* Cria um espaço maior antes da lista de categorias */
    padding-bottom: 10px;       /* Garante que a borda não fique colada no texto */
}

/* Efeito hover (ao passar o mouse) diferente para não confundir com categorias */
.mega-menu-item.link-institucional:hover {
    background-color: #e9ecef; /* Escurece um pouco o fundo no hover */
    color: #000;               /* Deixa o texto preto */
}

/* ==========================================================================
   ESTILO PARA O MENU MOBILE DE CATEGORIAS (DRILL-DOWN)
   ========================================================================== */

/* ==========================================================================
   ESTRUTURA COMPLETA PARA O MENU MOBILE (OFFCANVAS)
   ========================================================================== */

/* 1. Garante que o corpo do offcanvas seja um container flexível vertical. */

#offcanvasMobileMenu .offcanvas-body {
    padding: 0;
    display: flex !important; 
    flex-direction: column !important;
    overflow: hidden;
}

/* 2. Faz o container dos painéis crescer para ocupar TODO o espaço vertical restante. */
.mobile-menu-panels {
    position: relative;
    flex-grow: 1;
    min-height: 400px;
    overflow: hidden;
}

@media (max-width: 767px) {
.mobile-menu-panels {
    position: relative;
    flex-grow: 1;
    min-height: 300px;
    overflow: hidden;
}
}

/* 3. Posiciona os painéis de forma absoluta DENTRO do container .mobile-menu-panels */
.menu-panel {
    position: absolute;  
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;     
    background-color: #fff;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    overflow-y: auto;    
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 4. As classes de animação (permanecem as mesmas) */
.menu-panel.is-active {
    transform: translateX(0);
}

.menu-panel.is-slid-left {
    transform: translateX(-100%);
}

/* O resto dos seus estilos para os itens de menu (li, a, etc.) podem continuar os mesmos */
.menu-panel li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    text-decoration: none;
    color: var(--cor-oestewood);
    border-bottom: 1px solid #f0f0f0;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    transition: background-color 0.2s ease;
}
.menu-panel li a:hover {
    background-color: #f8f9fa;
    color: var(--gold);
}

/* Botão de voltar */
.menu-panel li.menu-back a {
    color: var(--cor-oestewood);
    font-weight: bold;
}
.menu-panel li.menu-back svg {
    margin-right: 0.5rem;
}

/* Item que é apenas um título de subcategoria */
.menu-panel li.menu-title-item {
    padding: 1rem 1.5rem;
    font-size: 1.2rem;
    font-weight: bold;
    color: #212529;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

/* Subtítulo "Categorias" antes da lista */
.offcanvas-section-title {
    padding: 1rem 1.5rem;
    font-size: 2rem;
    font-weight: bold;
    color: #212529;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

/* Largura do Offcanvas */
.offcanvas#offcanvasMobileMenu {
    --bs-offcanvas-width: 500px;
    max-width: 100vw; /* Trava de segurança para não ocupar a tela toda */
}

@media (max-width: 767px) {
    .offcanvas#offcanvasMobileMenu {
    --bs-offcanvas-width: 320px;
    max-width: 90vw; /* Trava de segurança para não ocupar a tela toda */
}
}

/* ==========================================================================
   ESTILO PARA LINKS ESTÁTICOS NO MENU OFFCANVAS (EX: INSTITUCIONAL)
   ========================================================================== */

.offcanvas-static-link {
    display: block;
    padding: 1rem 1.5rem;
    text-decoration: none;
    color: var(--gold);
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
}

.offcanvas-static-link:hover {

    color: var(--gold);
}

.offcanvas-header{
        background-color: #f8f9fa;
}

/* --- ESTILOS PARA A NOVA BARRA DE NAVEGAÇÃO SECUNDÁRIA --- */

.secondary-nav {
  background-color: #ffffff; /* Fundo branco */
  padding: 0.5rem 0; /* Espaçamento vertical */
  position: sticky; /* Efeito "fixo" ao rolar */
  top: 100px; /* Posição no topo da tela */
  z-index: 1020; /* Garante que fique acima de outros conteúdos */
  width: 100%;
}

/* Estilo do botão hambúrguer */
.secondary-nav .btn-hamburger {
  background: none;
  border: none;
  font-size: 1.5rem; /* Tamanho do ícone */
  color: #333333; /* Cor do ícone */
  padding: 0 1rem 0 0;
  margin-right: 1rem;
}

/* Container para os links das categorias */
.secondary-nav .category-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* Permite que os links quebrem a linha em telas menores */
  gap: 2rem; /* Espaço entre os links */
}

/* Estilo dos links de categoria */
.secondary-nav .category-links .nav-link ,
.secondary-nav .offer-link .nav-link{
  text-decoration: none;
  color: var(--cor-oestewood);
  font-weight: 600; /* Peso da fonte */
  text-transform: uppercase; /* Letras maiúsculas */
  font-size: 17px;
  padding: 0.5rem 0;
  transition: color 0.2s ease-in-out;
}



/* Ajusta o tamanho da imagem do ícone hambúrguer */
.secondary-nav .btn-hamburger img {
  width: 28px !important; /* Você pode ajustar este valor */
  height: auto; /* Mantém a proporção da imagem */
}

/* Remove o espaçamento original para controlarmos com o divisor */
.secondary-nav .category-links {
  gap: 40px; 
}

/* Adiciona espaço à direita de cada link e o divisor | depois dele */
.secondary-nav .category-links .nav-link {
  padding: 10px;
  position: relative; /* Necessário para posicionar o divisor */
}

/* Cria o divisor vertical, exceto no último item */
/* .secondary-nav .category-links .linha:not(:last-child)::after {
  content: '|';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #000000;

} */

/* Garante que o container dos links centrais não tenha um divisor no final */
.secondary-nav .category-links .nav-link:last-child::after {
    content: none;
}

/* Garante que o link de OFERTAS não tenha um divisor antes dele */
.secondary-nav .offer-link .nav-link::after {
    content: none;
}

/* Ajusta o espaçamento do botão hambúrguer para não ter um divisor */
.secondary-nav .btn-hamburger {
    border-right: none; /* Remove a borda que tínhamos antes */
}

.gold{
    color: #9F793A !important;
}

/* --- NOVO LAYOUT FLEXBOX PARA A BARRA DE NAVEGAÇÃO --- */

/* Garante que o container ocupe toda a largura disponível */
.secondary-nav .container.d-flex {
  width: 100%;
}


.secondary-nav .category-links {
  margin-left: auto;
  /* margin-right: 38px; */
  margin-right: auto;
  display: flex;
  align-items: center;
}

.linha-vertical {
  width: 1px; /* Largura da linha */
  height: 24px; /* Altura da linha - ajuste conforme o tamanho do seu texto */
  background-color: #333; /* Cor da linha */
}

.texto {
    font-size: 18px; /* Exemplo */
}

#carrinhocompra.offcanvas {
  display: flex !important;
  flex-direction: column !important;
}

/* 2. Faz o 'corpo' do painel crescer e ocupar todo o espaço restante */
#carrinhocompra .offcanvas-body {
  flex-grow: 1;
  padding: 0; /* Remove o padding padrão para que nosso container interno possa controlar 100% do espaço */
  display: flex; /* Essencial para que o filho (carrinho-container) possa usar height: 100% */
}

.offcanvas-end .offcanvas-header {
  background-color: var(--cor-oestewood);
  padding-block: 31.3px;
}
.offcanvas-title {
  font-size: 1.5em;
  color: white;
}

/*
 * CSS PARA O NOVO BOTÃO DE FECHAR O CARRINHO
 */
.offcanvas-header {
  /* Garante que o título e o botão fiquem em lados opostos */
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.offcanvas-title {
  /* Remove a centralização para que ele fique à esquerda */
  text-align: left;
}

.btn-close-custom {
  background: transparent;
  border: none;
  padding: 0;
  color: white; /* Cor do ícone */
  font-size: 2.5rem; /* Tamanho do ícone 'X' */
  opacity: 0.8;
  transition: opacity 0.2s ease-in-out;
}

.btn-close-custom:hover {
  opacity: 1;
  cursor: pointer;
}

.offcanvas-footer {
  display: flex;
  padding: 1rem;
  background-color: #f8f9fa; /* Garante a mesma cor de fundo */
}
.cart-items {
  flex-grow: 1; /* Faz esta área crescer e ocupar o espaço disponível */
  overflow-y: auto; /* Adiciona scroll SÓ AQUI quando necessário */
  padding: 1rem;
}

.d-flex.flex-column.row-gap-4 {
  gap: 12px; /* Espaço entre os cards de produto */
}

.carprodutoscart {
  display: flex;
  align-items: center; /* <<< ISSO RESOLVE SEU PROBLEMA de alinhamento vertical da imagem */
  gap: 15px; /* Espaço entre a imagem e os detalhes */
  background-color: #ffffff;
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); /* Sombra suave para um look moderno */
  border: none; /* Remove a borda inferior antiga */
}

.cart-item-image img {
  width: 65px;
  height: 65px;
  object-fit: contain; /* Garante que a imagem não fique distorcida */
  border-radius: 6px;
  background-color: #f8f9fa; /* Fundo sutil para imagens com transparência */
}

.cart-item-details {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 5px; /* Espaço entre a linha de cima (nome) e a de baixo (preço) */
}

.cart-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.carprodutoscart:not(:last-child) {
  border-bottom: none;
}
.carprodutoscart .w-100 {
  padding-left: 1em;
}

.cartprodutoname {
  font-weight: 600;
  color: #2c3e50;
  line-height: 1.3;
  max-width: none; /* Remove a limitação antiga */
  margin-inline: 0;
  padding-left: 0;
  text-align: left;
}

.cart-item-header .botao {
  opacity: 1;
  color: #95a5a6; /* Cor mais suave para o ícone */
  padding: 0;
  font-size: 1.1em;
}

.cart-item-header .botao:hover {
  color: #e74c3c; /* Vermelho no hover */
}

/* Linha de Baixo (Quantidade + Preço) */
.cart-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart {
  width: 27px;
}

.cart img {
  width: 100% !important;
  filter: brightness(0) invert(1);
}

.cart-item-price {
  font-weight: bold;
  font-size: 1.1em;
  color: #34495e;
}

.carprodutoscart img {
  max-width: 60px;
}

.quantidade {
  display: flex;
  align-items: center;
  background-color: #f1f2f6;
  border-radius: 6px;
  padding: 2px;
}

.carprodutoscart .botao {
  background-color: var(--white);
  color: var(--black);
  border: 0;
  opacity: 0.6;
}

.carprodutoscart .botao:hover {
  opacity: 1;
}

.quantidadeitem {
  width: 30px;
  font-weight: bold;
  color: #2c3e50;
  /* Reset de estilos herdados */
  display: inline-block;
  background-color: transparent;
  border: none;
  text-align: center;
}

.quantidadeitem:focus {
  outline: none;
}

.carprodutoscart .botao {
  background-color: var(--white);
  color: var(--black);
  border: 0;
  opacity: 0.6;
  transition: all 0.3s ease;
}
.carprodutoscart .botao:hover {
  opacity: 1;

  color: red;
}

.quantidade button {
  border: none;
  background-color: transparent;
  width: 28px;
  height: 28px;
  font-size: 0.9em;
  color: #7f8c8d;
  cursor: pointer;
  transition: background-color 0.2s;
}

.quantidade button:hover {
  background-color: #e5e6ea;
  opacity: 1;
}

.button-zap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  background-color: var(--cor-oestewood); /* Cor do screenshot parece mais clara, mas usando a do seu código */
  border-radius: 5px;
  color: white;
  height: 50px;
  padding: 0.2em 0.4em;
  font-size: 1em;
  width: 100%;
  border: none;
}
.button-zap:hover {
  cursor: pointer;
  color: white;
}

.button-zap2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  border-radius: 5px;
  color: var(--cor-oestewood);
  height: 50px;
  padding: 0.2em 0.4em;
  font-size: 1em;
  width: 100%;
  border: 1px solid var(--cor-oestewood);
}
.button-zap2:hover {
  cursor: pointer;
  color: var(--cor-oestewood);
  
}

.carrinho-container {
  display: flex;
  flex-direction: column;
  height: 100%; /* Ocupa toda a altura do offcanvas-body */
  width: 100%;
  background-color: #f8f9fa; /* Fundo leve para a área dos itens */
}

@media (max-width: 991px) {
  .cart-item-price {
    font-size: 14px;
  }

  .offcanvas-end .offcanvas-header {
    padding-block: 10px;
  }
}


/* Estilos para a seção de resumo do carrinho */
.cart-summary-section {
    padding: 15px;
    margin-top: 20px;
    /* border-top: 1px solid #eee; */
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espaço entre subtotal e mensagem */
}

.subtotal-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
}

.subtotal-line strong {
    font-weight: bold;
}

.free-shipping-notice {
    text-align: center;
    font-size: 18px;
        font-weight: bold;
    color: red;
}

/* Cor especial para a mensagem de sucesso */
.free-shipping-notice.success p {
    color: var(--gold); /* Verde */
    font-weight: bold;
}

.free-shipping-notice p {
    margin-bottom: 8px;
}

/* Container da barra de progresso (a parte cinza) */
.progress-bar-container {
    background-color: #e9ecef;
    border-radius: 5px;
    height: 12px;
    width: 100%;
    overflow: hidden;
}

/* Preenchimento da barra de progresso (a parte colorida) */
.progress-bar-fill {
    background-color: var(--gold); /* Verde escuro, ajuste a cor se desejar */
    height: 100%;
    border-radius: 5px;
    transition: width 0.4s ease-in-out;
}

.form-horizontal .form-group {
    margin-right: 8px;
    margin-left: 8px;
}

.formulario{
    border: 1px solid var(--cinza-botao);
    border-radius: 10px;
    position: relative !important;
    height: 420px;
    
}

.painel-contato{
    border-radius: 10px;
    border: 1px solid var(--cinza-botao);
    height: 420px;

}

.img-thumbnail {
    padding: 0.25rem;
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    max-width: 100%;
    height: auto;
}
.contact-button{
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--azul-botao-retifoz);
    background: var(--azul-botao-retifoz);
    color: white;
    border-radius: 50%;
    width: 35px;
    height: 35px;
}
.button-sender-contact{
    background-color: var(--azul-botao-retifoz);
    border: 0;
    border-radius: 8px;
    font-size: 1.2em;
    padding: 0.25em 3em;
    color: white;
    outline: none;
    box-shadow: none;
    margin-bottom: 0.25em;
    margin-right: 8px;
    text-transform: uppercase;
    font-weight: bold;
    transition: all 0.3s ease;
}
.button-sender-contact:hover{
    background-color: var(--marrom);
}


.col-sm-12{
    padding-inline: 0;
}
.padding-15{
    padding-inline: 15px;
}

.distinct-background{
    position: relative;
    left: 0;
    right: 0;
    background-color: var(--cinza-fundo-3);
}

.distinct-background-white{
    position: relative;
    left: 0;
    right: 0;
    background-color: var(--white);
}

.fade.active{
    opacity: 1;
}
.fade{
}
.exibition-item{
    max-height: 50px;
    max-width: 240px;
    width: 100%;
    padding: 1em;
    font-size: 24px;
    color: var(--black);
    text-transform: uppercase;
    font-family: 'Swis721 CN BT Roman';
    border: 1px solid var(--cinza-botao);
    background-color: var(--cinza-botao);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all;
}
.exibition-item.active{
    background-color: var(--primary);
    border-color: var(--primary);
    height: 100%;
    /* width: 100%; */

}
.manufacturers_div{
    display: flex;
    gap: 0.5em;
    align-items: center;
}
.manufacturers_div a{
    border: 1px solid var(--cinza-botao);
    color: var(--cinza-seta);
    padding: 0.51em;
    font-family: 'Abadi MT Condensed Light';
    font-weight: bold;
    font-size: 17px;
    max-height: 40px;
    background-color: var(--white);
    transition: all 0.3s ease;
}
.manufacturers_div a:hover{
    color: red;
}
/* .distinct-background:last-of-type{
    background-color: white;
} */

.my-brands{
    background-color:white;
    padding-block:1.6em;
    margin-bottom: 1.75em;
}
.my-brands .brand{
    display: flex;
    justify-content: center;
}
.my-brands .brand a:focus{border: 0;outline: none;}


.banner-brands>*{
    border-radius: 0;
}

@import url("componentes/product/botaoproduto.css");
@import url("componentes/product/star.css");
@import url("componentes/product/rating.css");

.price-actions-wrapper .price-block {
  margin-bottom: 0;
  margin-right: 50px;
  font-family: "Vogue Plain";

}

.breadcrumb {
  padding-block: 15px;
  margin-bottom: 0px;
}
.breadcrumb > li + li:before {
  margin-left: 1em;
  padding: 0px;
  content: " / ";
  display: inline-block;
  width: 20px; /* Tamanho do ícone */
  /* height: 12px; */
  /* background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20512%22%3E%3Cpath%20fill%3D%22%23AAAAAA%22%20d%3D%22M310.6%20233.4c12.5%2012.5%2012.5%2032.8%200%2045.3l-192%20192c-12.5%2012.5-32.8%2012.5-45.3%200s-12.5-32.8%200-45.3L242.7%20256%2073.4%2086.6c-12.5-12.5-12.5-32.8%200-45.3s32.8-12.5%2045.3%200l192%20192z%22%2F%3E%3C%2Fsvg%3E'); */
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle; /* Ajusta a posição vertical */
}

.more-images {
  max-width: 100px;
}

.breadcrumb > li > a {
  color: var(--cinza-nav-cat);
  font-size: 15px;
  transition: all 0.2s ease;
  font-family: "Swis721 CN BT Roman";
}
.breadcrumb > li > a:hover {
  color: var(--cinza-seta);
}
.breadcrumb-container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  margin-bottom: 1em;
}

.product-images {
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
  justify-content: start;
}
.principal-image {
  display: flex;
  width: 100%;
  justify-content: start;
  align-items: center;
  margin-bottom: 0px;
  border: 0;
}
.product-images .more-images {
  margin-block: 1em;
  padding-inline: 10px !important;
  max-height: 500px;
  overflow-y: auto;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.principal-image .more-images::-webkit-scrollbar {
  display: none;
}

.product-info {
  display: flex;
  justify-content: start;
  gap: 1em;
}
.product-info .text-this {
  color: var(--black);
}
.product-info .content-this,
.product-info a {
  color: var(--cinza-nav-cat);
}
.product-price-label {
  margin-block: 2em;
  padding-block: 1em;
  border: 1px solid var(--cinza-botao);
  border-radius: 8px;
  border-inline: 0px;
  /* display: flex; */
  width: 100%;
}

.product-price-label div.principal-price:nth-child(odd) {
  display: flex;
  flex-direction: column;
  line-height: 1em;
  /* align-items: center; */
  justify-content: center;
  /* padding-left: 2em; */
  /* gap: 0.25em; */
  color: black;
  font-size: 1.75em;
  /* padding-top: .7em; */
  width: 100%;
}
.product-price-label > div {
  height: 140px;
}

.product-price-label > div:nth-child(even) {
  /* display: flex; */
  gap: 0.25em;
  justify-content: center;
  align-items: center;
  width: 60%;
  font-size: 1.688em;
  padding-block: 1em;
}

.product-price-label div.principal-price:nth-child(odd) span {
  position: relative;
  display: inline-block;
  color: red;
}
.product-price-label div.principal-price:nth-child(odd) span::after,
.product-price-label > div:nth-child(odd) span::before {
  content: "";
  width: 100%;
  position: absolute;
  right: 0;
  top: 50%;
}
.product-price-label div.principal-price:nth-child(odd) span::before {
  border-bottom: 2px solid rgb(218, 26, 26);
  -webkit-transform: skewY(-10deg);
  transform: skewY(-10deg);
}
.product-price-label div.principal-price:nth-child(odd) span::after {
  border-bottom: 2px solid rgb(218, 26, 26);
  -webkit-transform: skewY(10deg);

  transform: skewY(10deg);
}

.product-quantitiy {
  border-radius: 25px;
  display: flex;
  padding: 1 0.2em;
  width: 114px;
  background-color: #F3F3F3;
  border: 1px solid #F3F3F3;
  overflow: hidden;
}
.product-quantitiy * {
  border: 0;
  font-size: 15px533;
}
.product-quantitiy button {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  font-size: 15px;
  color: #222222;
  background-color: #F3F3F3;
  width: 25%;
  transition: all 0.3s ease;
}
.product-quantitiy button:hover {
  color: var(--cinza-seta);
}
.product-quantitiy input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.product-quantitiy input[type="number"] {
  -moz-appearance: textfield; /* Corrigido aqui */
}
.product-quantitiy input,
.product-quantitiy input:focus {
  outline: 0;
  background-color: #F3F3F3;
  height: 50px;
  font-weight: bold;
  text-align: center;
  font-size: 25px;
  width: 50%;
  color: #222222;
}

/* .finalize-on-zap{
    display: flex;
    align-items: center;
    justify-content: center;
    gap:0.5em;
    font-family: 'Swis721 CN BT Roman';

    background-color: var(--preto-botao-prod);
    border-radius: 25px;
    color:white;
    height: 50px;
    padding: 0.2em 1.4em;
    font-size: 0.8em;
    transition: all 0.3s ease;
}
.finalize-on-zap:hover{
    cursor: pointer;
    color: var(--primary);
    background-color: var(--secondary);
} */
.product-price-label .prices {
  /* display: flex; */
  width: 40%;
  padding-block: 1em;
  justify-content: center;
  transition: all 0.3s ease;
}
.product-price-label .prices .cotacao {
  display: flex;
  align-items: center;
  padding-left: 1em;
  /* justify-content: center; */
  gap: 1em;
}
.product-price-label .prices .cotacao > div {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.product-price-label .prices .cotacao .img-flag {
  width: 1em;
  height: 1em;
  background-position: center;
  background-size: cover;

  aspect-ratio: 1;
  border-radius: 50%;
  border: 0;
}

.informative {
  margin-block: 30px;
  margin-inline-start: 20px;
}
.share_links {
  display: flex;
  gap: 5px;
  align-items: center;
}
.share_links > a {
  height: 30px;
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--cinza-seta);
  border-radius: 50%;
  opacity: 0.6;
  transition: all 0.3s ease;
}

.share_links > a:hover {
  opacity: 1;
}

.attribute_table tr {
  overflow: hidden;
  margin-block: 1em;
  border: 5px solid transparent;
  border-inline: 0;
  display: block;
  padding: 5px;
  border-radius: 8px;

  background-color: var(--cinza-fundo-p-2);
}
.attribute_table tr td {
  padding: 1em;
}
.attribute_table tr td:nth-child(odd) {
  font-weight: bold;
  min-width: 170px;
  width: 19.531vw;
  color: #484848;
  border-right: 1px solid #bec1c4;
}
.attribute_table tr td:nth-child(even) {
  padding-right: 1em;
  font-weight: bold;

  color: #7c7c7c;
}

/* --- ESTILO CORRIGIDO PARA MINIATURAS DA GALERIA --- */

/* O container de cada miniatura (o slide do Slick) */
.product-gallery-layout .more-images > div {
    padding: 0; /* Remove qualquer padding extra do slide */
}

/* O bloco que envolve o link e a imagem */
.product-gallery-layout .image-additional {
    width: 80px;               /* Largura da miniatura */
    height: 80px;              /* Altura da miniatura (para fazer um quadrado) */
    /* border: 2px solid transparent; */ /* Borda transparente para evitar que o layout "pule" no hover */
    border-radius: 4px;
    padding: 0;                /* Remove padding antigo */
    margin: 0;
    overflow: hidden;          /* Garante que a imagem não vaze das bordas arredondadas */
    transition: border-color 0.2s ease;
    cursor: pointer;
}

/* Efeito de borda ao passar o mouse */
.product-gallery-layout .image-additional:hover {
    border-color: #333; /* Cor da borda no hover, pode ajustar se quiser */
}

/* O link e a imagem devem preencher 100% do espaço do bloco */
.product-gallery-layout .image-additional .thumbnail,
.product-gallery-layout .image-additional .thumbnail img {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: none;
    background-color: transparent;
    /* Faz a imagem preencher o espaço, cortando o excesso se necessário para manter a proporção */
    object-fit: cover; 
}

.prod-options .img-thumbnail {
  cursor: pointer;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 100px;
  width: 100%;
  max-height: 80px;
  padding: 0.55em 1em;
  border: 1px solid var(--cinza-botao);
}
.prod-options .img-thumbnail.active {
  border: 1px solid var(--cinza-prod-cat);
}

.text-card {
  font-size: 15px;
  font-weight: normal;
  align-items: center;
  gap: 5px;
  color: var(--cinza-ref);
}

.desc-rev-tab {
  border-bottom: 1px solid var(--cinza-botao);
  margin-bottom: 1em;
}
.desc-rev-tab .nav-link {
  border-bottom: 2px solid transparent;

  transition: border 0.5s ease, box-shadow 0.75s ease;
  padding: 0.5em 1em;
}

.desc-rev-tab .nav-link.active {
  border-bottom: 2px solid var(--cinza-nav-cat);
  box-shadow: 0px 12px 20px -14px #878787;
}

.produto-anterior,
.proximo-produto {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--preto-detalhe);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  /*  border: 1px solid #C0C0C0; */
  background-color: #fff;
  transition: background-color 0.3s, border-color 0.3s;
}
.produto-anterior:hover,
.proximo-produto:hover {
  border-color: #292728;
}
.produto-anterior i,
.proximo-produto i {
  color: var(--preto-detalhe);
}

.produto-anterior:hover .preview-produto-anterior {
  display: block;
}
.proximo-produto:hover .preview-proximo-produto {
  display: block;
}
.preview-produto-anterior,
.preview-proximo-produto {
  display: none;
  position: absolute;
  z-index: 10;
  top: 110%;
  right: -68%;
  width: 100px;
  height: 100px;
  /* border: 1px solid #ddd; */
  background-color: #fff;
}

/* MEDIAS */
@media (max-width: 1200px) {
  .product-price-label .prices {
    width: 100%;
  }
  .product-price-label > div:nth-child(even) {
    width: 100%;
  }
  .product-price-label div.principal-price:nth-child(odd) {
    justify-content: center;
    padding-left: 0;
    font-size: 1.85em;
  }
  .product-price-label .prices .cotacao {
    justify-content: center;
    padding-left: 0em;
  }
}

/* --- NOVOS ESTILOS PARA O LAYOUT DO PRODUTO --- */

/* --- NOVO LAYOUT VERTICAL PARA GALERIA DE IMAGENS --- */

/* 1. Define o container principal como uma coluna vertical */
.product-gallery-layout {
    display: flex;
    flex-direction: column; /* MUITO IMPORTANTE: muda o layout para vertical */
    gap: 15px; /* Espaço entre a imagem principal e as miniaturas */
}

/* 2. Define que a imagem principal deve aparecer primeiro (no topo) */
.product-gallery-layout .thumbnails.product-images {
    order: 1; 
}

/* 3. Define que as miniaturas devem aparecer em segundo (embaixo) 
      e as organiza em uma linha horizontal */
.product-gallery-layout .more-images {
    order: 2;
    width: 100%;
    
    /* Organiza as miniaturas lado a lado */
    display: flex;
    /* flex-direction: row; */
    /* justify-content: center; */ /* Centraliza a fileira de miniaturas */
    /* flex-wrap: wrap; */ /* Permite quebrar a linha se não couberem */
    gap: 10px; /* Espaço entre cada miniatura */
}

/* 4. Estilo para o 'bloco' de cada miniatura */
.product-gallery-layout .more-images .image-additional {
    width: 100px;
    height: 100px;
    /* border: 1px solid #ddd; */
    border-radius: 4px;
    padding: 4px;
    cursor: pointer;
    transition: border-color 0.2s ease;
}
.product-gallery-layout .more-images .image-additional:hover {
    border-color: #999;
}

.principal-image img {
  max-width: 100%;
  height: auto;
  margin: 0px;
}

/* Coluna de Detalhes do Produto */
.product-details-column {
  display: flex;
  flex-direction: column;
}

.product-sku {
  font-size: 18px;
  color: #CCCCCC;
  margin-bottom: 5px;
}

.product-nome {
  font-family: "Vogue Plain", sans-serif; /* Mantenha sua fonte */
  font-weight: bold;
  font-size: 50px;
  line-height: 1.2;
  margin-bottom: 15px;
  margin-top: 10px;
  text-transform: none; /* A imagem não parece ter uppercase */
  color: #333333;
}

.product-meta-info {
  display: flex;
  gap: 20px;
  font-size: 15px;
  color: #555;
  padding-bottom: 25px;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.product-meta-info a {
  color: #555;
  text-decoration: none;
}

.price-block {
  margin-bottom: 15px;
}

.main-price {
  font-size: 38px;
  font-weight: bold;
  color: var(--preco-produto);
  display: block;
}

.installment-text {
  font-size: 16px;
  color: #666;
}

/* NOVA REGRA CORRIGIDA PARA O LINK */
.spec-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 12px;
    gap: 8px; 
    
    color: #333;
    text-decoration: none;
    margin-bottom: 20px;
    font-size: 16px;
    transition: background-color 0.2s ease;
}

.actions-block {
  display: flex;
  align-items: center;
  gap: 13px;
}

.product-quantitiy {
  border-radius: 8px;
  width: 137px;
  height: 45px;
}

.product-quantitiy input,
.product-quantitiy input:focus {
  height: 43px;
}

.product-quantitiy button {
  height: 43px;
}

.btn-add-to-cart {
  height: 45px;
  border: 1px solid #ccc;
  background-color: #0C3227;
  color: white;
  font-weight: bold;
  font-size: 15px;
  border-radius: 8px;
  padding: 0 35px;
  transition: all 0.2s ease;
  outline: none;
}

.btn-buy-now {
  background-color: var(--azul-botao-retifoz);
  color: white;
  width: 100%;
  padding: 12px;
  font-size: 22px;
  font-weight: bold;
  border-radius: 5px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background-color 0.2s ease;
      margin-bottom: 20px;
}

/* Container dos ícones de pagamento */
.payment-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 20px;
}

/* Estilo para o CARD de cada ícone */
.payment-icon-card {

  width: 50px; 
  height: 30px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: #fff;
  
  /* Flexbox para centralizar a imagem DENTRO do card */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Estilo para a IMAGEM DENTRO do card */
.payment-icon-card img {
  /* Garante que a imagem não ultrapasse o card */
  max-width: 90%;
  max-height: 90%;
  
  /* Remove estilos antigos para não interferir */
  width: auto;
  height: auto;
  border: none;
  padding: 0;
}

.product-images {
  flex-direction: row; /* Ajustado para miniaturas à esquerda */
}

.price-actions-wrapper {
  display: flex; /* Ativa o alinhamento flexível */
  justify-content: start; /* Empurra os itens para as pontas (preço na esquerda, ações na direita) */
  align-items: center; /* Centraliza os itens verticalmente */
  flex-wrap: wrap; /* Permite que os itens quebrem para a linha de baixo em telas pequenas */
  gap: 20px; /* Adiciona um espaço caso os itens quebrem a linha */
  margin-bottom: 25px; /* Mantém um espaço abaixo */
}



.price-actions-wrapper .actions-block {
  margin: 0;
}

/* Estilo para o novo ícone SVG no botão 'Comprar Agora' */
.btn-add-to-cart  .cart-icon-svg {
  width: 23px;  /* Largura do ícone */
  height: 30px; /* Altura do ícone */
}

/* --- ESTILOS PARA PREÇO EM PROMOÇÃO --- */

/* Estilo para o preço antigo ("De:") */
.price-block .old-price {
  font-size: 18px;
  color: #888888;
  line-height: 1;
}

/* Adiciona o efeito riscado no valor antigo */
.price-block .old-price .price-value {
  text-decoration: line-through;
}

/* Container para o preço atual ("Por:") */
.price-block .current-price {
  display: flex;
  align-items: baseline; /* Alinha o texto "Por:" com a base do preço */
  gap: 8px; /* Espaço entre o texto e o valor */
}

/* Estilo para os textos "De:" e "Por:" */
.price-block .price-label {
  font-size: 18px;
  color: #888888;
}

/* Ajuste no preço principal para alinhar corretamente com o texto "Por:" */
.price-block .main-price {
  display: inline-block; /* Permite o alinhamento na mesma linha */
  line-height: 1.1;
}

/* --- ESTILOS PARA NOVA SEÇÃO DE ABAS E ESPECIFICAÇÕES --- */

.product-tabs-section {
  /* margin-top: 40px; */
  background-color: #fff;
  padding: 15px;
}

/* Navegação das abas */
.tabs-nav {
  display: flex;
  margin-bottom: 25px;
  gap: 38px;
}

.tabs-nav .nav-link {
  border: none;
  background-color: transparent;
  /* padding: 10px 10px; */
  font-size: 25px;
  /* font-weight: bold; */
  color: #888;
  /* border-bottom: 3px solid var(--cor-oestewood); */
  margin-bottom: -2px; /* Alinha a borda inferior com a borda do container */
}

/* Estilo da aba ativa */
.tabs-nav .nav-link.active {
  color: #1F211F;
  border-bottom: 3px solid var(--cor-oestewood);
}

/* Tabela de Especificações */
.spec-table {
  font-size: 15px;
}

.spec-row {
  display: flex;
  padding: 12px 10px;
  border-bottom: 1px solid #f0f0f0;
}

/* Efeito de linhas alternadas (zebrado) */
.spec-row:nth-child(even) {
  background-color: #f8f9fa;
}

.spec-name {
  flex: 0 0 250px; /* Largura fixa para o nome da especificação */
  font-weight: bold;
  color: #333;
}

.spec-value {
  flex: 1;
  color: #555;
}

/* Ajustes para telas menores */
@media (max-width: 576px) {
  .spec-row {
    flex-direction: column;
    gap: 5px;
  }
  .spec-name {
    flex-basis: auto;
  }
  .tabs-nav .nav-link {
    font-size: 16px;
    padding: 10px;
  }
}

#product-product{
  margin-bottom: 65px;
}

/* --- ESTILOS RESPONSIVOS PARA A GALERIA DE IMAGENS (VERSÃO FINAL CORRIGIDA) --- */

/* Regras para dispositivos móveis (telas com até 767px de largura) */
@media (max-width: 767px) {

  /* 1. Altera a direção da galeria para vertical */
  .product-gallery-layout {
    flex-direction: column;
  }

  /* 2. Reordena os elementos */
  .product-gallery-layout #thumbnails {
    order: 1; /* Imagem principal aparece primeiro */
  }
  
  /* 3. Estiliza o container das miniaturas como uma fileira horizontal com scroll */
  .product-gallery-layout .more-images {
    order: 2; /* Miniaturas aparecem embaixo */
    max-width: 100%;
    margin-top: 15px;
    display: flex;
    flex-direction: row;
    overflow-x: auto; /* Adiciona scroll horizontal se houver muitas imagens */
     /* Adiciona um pequeno preenchimento vertical */
    padding-bottom: 15px;
  }
  
  /* 4. DEFINE O TAMANHO DO "BLOCO" DA MINIATURA */
  .product-gallery-layout .more-images > div {
    flex: 0 0 80px; /* LARGURA FIXA de 80px */
    height: 80px;   /* ALTURA FIXA de 80px - ISSO CRIA O QUADRADO */
    /* margin: 0 4px; */
    /* border: 1px solid #ddd; */ /* A borda vai no bloco principal */
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding: 4px; */ /* Pequeno espaçamento interno */
  }

  /* 5. FAZ OS ELEMENTOS INTERNOS OCUPAREM TODO O ESPAÇO DO BLOCO */
  .product-gallery-layout .more-images .image-additional,
  .product-gallery-layout .more-images .thumbnail {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    border: none;
    background-color: transparent;
  }

  /* 6. AJUSTA A IMAGEM DENTRO DO BLOCO */
  .product-gallery-layout .more-images img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Garante que a imagem caiba sem distorcer */
  }

  .product-quantitiy {
    width: 50%;
  } 

  .btn-add-to-cart {
width: 50%;
  }

  .thumbnail {

padding: 5px;

}

}

/* --- INÍCIO: BLOCO FINAL E CORRIGIDO PARA A TABELA CUSTOMIZADA --- */

/* Apague todas as regras anteriores para .tabela-custom e use apenas este bloco. */

/* Estilo base para a tabela (Desktop e Mobile) */
.tabela-custom {
    width: 100%;
    border-collapse: collapse;
    border: none;
    margin-top: 15px;
    font-size: 15px;
    table-layout: fixed; /* IMPORTANTE: Força a tabela a respeitar a largura do container */
}

/* 1. DEFINE O FUNDO CINZA COMO PADRÃO PARA TODAS AS LINHAS */
.tabela-custom tbody tr {
    background-color: #F2F2F2; /* Cinza claro */
}

/* 2. SOBRESCREVE AS LINHAS PARES PARA TEREM FUNDO BRANCO */
.tabela-custom tbody tr:nth-child(even) {
    background-color: #ffffff; /* Branco */
}

/* Estilo das células (td) para Desktop e Mobile */
.tabela-custom td {
    border: none;
    padding: 15px 12px;
    vertical-align: middle;
    color: #555;
    /* REGRA MAIS FORTE para forçar a quebra de texto longo */
    word-break: break-all;
}

/* Estilo da primeira coluna (label) para Desktop */
.tabela-custom tr td:first-child {
    font-weight: bold !important;
    color: #333 !important;
    width: 35%;
    max-width: 250px;
}

/* --- Regras que SÓ se aplicam no Celular --- */
@media (max-width: 767px) {
    /* Remove a largura fixa da primeira coluna */
    .tabela-custom tr td:first-child {
        width: 100%;
        max-width: none;
    }

    /* Faz as células se empilharem */
    .tabela-custom td {
        display: block;
        width: 100%;
        text-align: left !important;
    }

    /* Ajusta os espaçamentos no layout empilhado */
    .tabela-custom tr td:first-child {
        padding-bottom: 5px;
    }
    .tabela-custom tr td:first-child + td {
        padding-top: 0;
    }

    /* Transforma a linha (tr) em um "card" */
    .tabela-custom tbody tr {
        display: block;
        padding: 15px;
        margin-bottom: 10px;
        border: 1px solid #e9e9e9;
        border-radius: 4px;
    }

    /* Remove a borda do último item */
    .tabela-custom tbody tr:last-child {
        border-bottom: 1px solid #e9e9e9; /* Mantém a borda para consistência */
        margin-bottom: 0;
    }

    /* Deixa o fundo uniforme no mobile para um visual mais limpo */
    .tabela-custom tbody tr,
    .tabela-custom tbody tr:nth-child(even) {
        background-color: #ffffff !important; /* Fundo branco para os cards */
    }

    .product-details-column {
        margin-top: 20px;
    }
}
/* --- FIM DO BLOCO FINAL --- */

/* --- INÍCIO: NOVOS ESTILOS PARA OPÇÕES DE PRODUTO (TAMANHO) --- */

/* Container que agrupa os botões de opção */
.product-options .option-values {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Espaço entre os círculos */
    margin-top: 8px; /* Espaço abaixo do texto "Tamanho:" */
    margin-bottom: 25px; /* Espaço antes dos botões de preço/compra */
}

/* Estilo do botão circular (label) */
.option-label-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;            /* Largura do círculo */
    height: 45px;           /* Altura do círculo */
    border: 1px solid #ddd;   /* Borda cinza clara */
    border-radius: 50%;     /* ESSENCIAL: Deixa o botão redondo */
    font-size: 16px;
    font-weight: 500;
    color: #333;
    background-color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease-in-out; /* Animação suave */
    -webkit-user-select: none; /* Impede a seleção de texto dentro do botão */
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Efeito ao passar o mouse por cima */
.option-label-btn:hover {
    border-color: #999;
}

/* ESTILO DO BOTÃO SELECIONADO (ATIVO) */
/* Esta regra mágica aplica o estilo na label quando o input escondido está selecionado */
input[type="radio"]:checked + .option-label-btn {
    border-color: var(--cor-oestewood);        /* Borda preta */
    background-color: var(--cor-oestewood);    /* Fundo preto */
    color: #ffffff;               /* Texto branco */
}

.option-name {
      font-weight: 500;
}

/* --- FIM: NOVOS ESTILOS PARA OPÇÕES DE PRODUTO --- */


/* --- INÍCIO: CÓDIGO CSS FINAL E CORRIGIDO DO BOTÃO --- */

/* 1. Prepara o container da imagem principal para o posicionamento do botão */
#thumbnails.product-images {
    position: relative; 
}

/* 2. Posiciona o wrapper do botão no canto inferior esquerdo */
.botao-ampliar-wrapper {
    position: absolute;
    bottom: 15px;
    left: 15px;
    z-index: 5;
}

/* 3. Estilo principal do botão (o link <a>) */
.botao-ampliar {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    height: 45px;
    min-width: 45px;
    background-color: #fff;
    border-radius: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    color: #333;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.15); 
}

/* 4. Estilo do ícone SVG dentro do botão */
.botao-ampliar svg {
    flex-shrink: 0;
    margin-left: 12px;
    stroke: #555;
}

/* 5. Estilo do texto que aparece ao passar o mouse */
.botao-ampliar-texto {
    max-width: 0; 
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    padding-left: 0;
    opacity: 0; /* ADICIONADO: Deixa o texto invisível por padrão */
    /* Animação suave para o texto aparecer */
    transition: max-width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.15), 
                padding-left 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.15),
                opacity 0.2s ease-in-out; /* ADICIONADO: Anima a opacidade */
}

/* 6. Efeito ao passar o mouse por cima do botão */
.botao-ampliar:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.botao-ampliar:hover .botao-ampliar-texto {
    max-width: 200px;
    padding-left: 8px;
    padding-right: 18px;
    opacity: 1; /* ADICIONADO: Torna o texto visível ao passar o mouse */
}

/* --- FIM: CÓDIGO CSS FINAL E CORRIGIDO --- */

/* --- ESTILOS PARA O NOVO LAYOUT DE AVALIAÇÕES --- */

/* Estilo para as avaliações que já existem */
#reviews-list h4 {
    font-size: 22px;
    margin-bottom: 20px;
}

#review .text-right {
    text-align: right;
}

/* Estilo para o formulário de nova avaliação */
#form-review h4 {
    font-size: 22px;
    margin-bottom: 10px;
}
#form-review p small {
    color: #6c757d;
    font-size: 0.875em;
}

#form-review .form-group {
    margin-bottom: 1rem;
}

#form-review .form-control {
    border-radius: 0;
    border: 1px solid #ced4da;
}

#form-review .btn {
    background-color: var(--cor-oestewood); /* Cor do botão ENVIAR */
    border-color: var(--cor-oestewood);
    border-radius: 5px;
    padding: 10px 25px;
    text-transform: uppercase;
    font-weight: bold;
}

/* --- CÓDIGO PARA AS ESTRELAS DE AVALIAÇÃO --- */
.rating-stars {
    display: inline-block;
    direction: rtl; /* Faz as estrelas serem preenchidas da direita para a esquerda */
    border: 0;
}
.rating-stars > input {
    display: none;
}
.rating-stars > label {
    float: right;
    font-size: 24px;
    color: #ddd;
    cursor: pointer;
}
.rating-stars > label:before {
    content: '\2605'; /* Código da estrela */
}
.rating-stars > input:checked ~ label, /* Estrela selecionada e as à sua direita */
.rating-stars:not(:checked) > label:hover, /* Hover em uma estrela */
.rating-stars:not(:checked) > label:hover ~ label { /* Hover nas estrelas à direita */
    color: #f7ba03; /* Cor da estrela preenchida */
}
.rating-stars > input:checked + label:hover,
.rating-stars > input:checked ~ label:hover,
.rating-stars > label:hover ~ input:checked ~ label,
.rating-stars > input:checked ~ label:hover ~ label {
    color: #f7ba03;
}

/* --- ESTILOS PARA LISTA DE AVALIAÇÕES MODERNA E RESPONSIVA --- */

.review-list {
    margin-bottom: 30px;
}

.review-item {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.review-header {
    display: flex;
    align-items: center;
    gap: 15px; /* Espaço entre o avatar e o texto */
    margin-bottom: 10px;
}

.review-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #0C3227; /* Cor principal do seu tema */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    flex-shrink: 0;
}

.review-author {
    font-weight: 600;
    color: #343a40;
}

.review-date {
    font-size: 0.85em;
    color: #6c757d;
}

.review-rating {
    margin-bottom: 15px;
    color: #ffc107; /* Cor amarela para as estrelas */
    font-size: 16px;
}

.review-rating .fa-regular.fa-star {
    color: #e0e0e0; /* Cor cinza para estrelas vazias */
}

.review-text p {
    margin: 0;
    color: #495057;
    line-height: 1.6;
}

.no-reviews-message {
    padding: 20px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    color: #6c757d;
}

/* Ajustes para celular */
@media (max-width: 767px) {
    .review-item {
        padding: 15px;
    }

    #reviews-list h4,
    #form-review h4 {
        font-size: 20px;
    }

    .review-avatar {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}

/* =================================================================== */
/* INÍCIO: NOVOS ESTILOS PARA OPÇÕES DE PERSONALIZAÇÃO             */
/* =================================================================== */

/* Título da seção de personalização */
.option-section-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
}

/* Container de cada opção (label + campo) */
.product-options .form-group {
    margin-bottom: 2rem; /* Aumenta o espaço entre as opções */
}

/* Estilo do Rótulo (Label) de cada opção */
.product-options .option-name {
    display: block;
    font-size: 1.5rem;
    font-weight: 500;
    color: #555;
    margin-bottom: 0.8rem;
}

/* Estilo geral para os campos (input de texto e select) */
.product-options .form-control {
    width: 100%;
    height: 45px; /* Mesma altura dos botões de quantidade e comprar */
    padding: 0.8rem 1.2rem;
    font-size: 1.5rem;
    color: #333;
    background-color: #f8f9fa; /* Fundo cinza bem claro */
    border: 1px solid #ced4da;
    border-radius: 8px; /* Mesma borda dos botões */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none; /* Remove o estilo padrão do iOS */
    -moz-appearance: none;
    appearance: none;
}

/* Estilo para quando o campo está focado (clicado) */
.product-options .form-control:focus {
    border-color: var(--cor-oestewood, #0C3227); /* Usa a cor principal do seu tema */
    box-shadow: 0 0 0 3px rgba(12, 50, 39, 0.1);
    outline: none;
}

/* Estilização específica para o SELECT (dropdown) */
.product-options select.form-control {
    /* Adiciona uma seta personalizada para o dropdown */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1.2rem center;
    background-size: 16px 12px;
    cursor: pointer;
}

/* Estilização para o botão de UPLOAD DE ARQUIVO */
#logo-upload-field .btn-block {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 45px;
    background-color: #fff;
    border: 1px dashed #ced4da; /* Borda tracejada para indicar "área de upload" */
    color: #555;
    font-size: 1.5rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}

#logo-upload-field .btn-block:hover {
    background-color: #f8f9fa;
    border-color: var(--cor-oestewood, #0C3227);
    color: var(--cor-oestewood, #0C3227);
}

#logo-upload-field .btn-block i {
    margin-right: 0.8rem;
}


/* =================================================================== */
/* FIM: NOVOS ESTILOS PARA OPÇÕES DE PERSONALIZAÇÃO                */
/* =================================================================== */


/* ================================================================= */
/* ====== CORREÇÃO DEFINITIVA DO MODAL EM TELAS PEQUENAS ====== */
/* ================================================================= */

/* --- Ajuste de largura para o tooltip no celular --- */
@media (max-width: 576px) {
    .tooltip {
        /* Garante que o tooltip não seja mais largo que 95% da tela */
        max-width: 95vw !important; 
    }
}    


.tooltip-trigger {
    cursor: pointer;
    color: var(--cor-oestewood); /* Cinza mais suave para o ícone */
    font-size: 1.6rem; /* Levemente maior para destaque */
    transition: color 0.3s ease; /* Transição suave na cor */
    padding-bottom: 1rem;
}

.tooltip-trigger:hover {
    color: #333; /* Fica mais escuro ao passar o mouse */
}

/* Estilos para o corpo principal do tooltip */
.tooltip-inner {
    max-width: 520px !important; /* Aumenta um pouco mais a largura */
    background-color: #fff !important; /* Fundo branco ou muito claro */
    color: #333 !important; /* Texto cinza escuro para contraste */
    border: 1px solid #eee !important; /* Borda sutil */
    border-radius: 8px !important; /* Bordas mais arredondadas */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Sombra suave para efeito flutuante */
    padding: 15px !important; /* Mais preenchimento interno */
    text-align: left !important; /* Alinhamento do texto */
    font-size: 1.7rem; /* Ajuste do tamanho da fonte */
    line-height: 1.5; /* Espaçamento entre linhas */
}

/* Estilo para a seta do tooltip */
.tooltip.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: #fff !important; /* Seta com a mesma cor de fundo */
    border-width: 8px 8px 8px 0 !important; /* Ajusta o tamanho da seta */
}

.tooltip.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: #fff !important;
    border-width: 8px 0 8px 8px !important;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #fff !important;
    border-width: 8px 8px 0 8px !important;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: #fff !important;
    border-width: 0 8px 8px 8px !important;
}

/* Ajustes internos do conteúdo do tooltip */
.tooltip-inner h6 {
    font-size: 1rem !important; /* Títulos um pouco maiores */
    color: #111 !important; /* Cor mais escura para títulos */
    margin-bottom: 8px !important;
    font-weight: 600 !important; /* Semibold para títulos */
}

.tooltip-inner ul {
    list-style-type: disc !important; /* Bolinhas para os itens da lista */
    margin-bottom: 10px !important;
    padding-left: 20px !important; /* Recuo da lista */
}

.tooltip-inner ul li {
    margin-bottom: 4px !important; /* Espaço entre itens da lista */
}

.tooltip-inner p {
    font-size: 1.6rem !important; /* Fonte menor para parágrafos */
    margin-top: 10px !important;
    color: #555 !important;
}

.tooltip-inner strong {
    font-weight: 700 !important; /* Negrito mais forte */
    color: #000 !important;
}


.video-thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Espaçamento entre as thumbnails */
}
.video-thumbnails .video-popup-trigger {
    position: relative;
    display: block;
    width: 120px; /* Largura da thumbnail */
    height: 90px; /* Altura da thumbnail */
    border: none;
    border-radius: 4px;
    overflow: hidden;
}
.video-thumbnails .video-popup-trigger img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease-in-out;
    padding: 0px;
    border: none;
}
.video-thumbnails .video-popup-trigger:hover img {
    transform: scale(1.1);
}
.video-thumbnails .play-icon-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}
.video-thumbnails .video-popup-trigger:hover .play-icon-overlay {
    opacity: 1;
}

/* --- INÍCIO: ESTILO MINIMALISTA PARA PREÇOS --- */

/* Ajusta o preço principal para ser a única coisa grande na linha */
.price-block .main-price {
    display: block; /* Garante que ele ocupe a linha inteira */
    line-height: 1.1;
    margin-bottom: 8px; /* Adiciona um espaço abaixo dele */
}

/* Remove margens extras dos containers de preço "De/Por" */
.price-block .price-sale, 
.price-block .price-regular {
    margin-bottom: 0;
}

/* Container principal que alinha os textos abaixo do preço */
.price-main-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinha tudo à esquerda */
}

/* Estilo para o texto do parcelamento */
.installment-price-block {
    font-size: 19px;
    color: black;
    font-weight: 600;
}

.installment-price-block strong {
    font-weight: 600;
    color: var(--cor-oestewood);
}

/* Bloco do preço PIX */
.pix-price-block {
    margin-top: 5px; /* Pequeno espaço acima */
}

/* Valor do PIX (Ex: R$ 658,24) - AGORA EM VERMELHO */
.pix-price-block .pix-price-value {
    font-size: 19px;
    font-weight: bold;
    color: #d90000; /* Vermelho */
}

/* Texto informativo (Ex: no PIX (-12%)) */
.pix-price-block .pix-price-label {
    font-size: 16px;
    color: #d90000; /* Vermelho */
    font-weight: 600;
    /* margin-left: 5px; */
}

/* Estilo para o "Ou" */
.pix-price-prefix {
    font-size: 17px;
    color: black;
    font-weight: 600;
}

/* --- FIM: ESTILO MINIMALISTA --- */

.rounded_button {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cinza-botao);
  border-radius: 50%;
  background-color: transparent;
  opacity: 0.5;
  transition: all 0.3s ease;
}
.rounded_button:hover {
  opacity: 1;
  background-color: var(--white);
}

/* =================================================== */
/* NOVO ESTILO DE CARD DE PRODUTO (V3)                */
/* =================================================== */

.item-card-v3 {
  background: #fff;
  border: 1px solid transparent;
  font-family: Arial, sans-serif;
  position: relative;
  overflow: hidden;
  margin: 5px;
  transition: all 0.3s ease;
}

.item-card-v3:hover {
  border-color: #f0f0f0;
  box-shadow: 5px 8px 20px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
}

.product-image-container {
  /* background-color: #f3f3f3; */
  height: 330px; /* Altura fixa para todos os cards. Ajuste se necessário. */
  display: flex; /* Usamos flexbox para centralizar a imagem perfeitamente */
  align-items: center;
  justify-content: center;
}

.product-image-container img {
  max-width: 100%;
  max-height: 100%; /* Garante que a imagem nunca ultrapasse a altura do container */
  object-fit: contain; /* Ajusta a imagem para caber, mantendo a proporção */
  transition: transform 0.3s ease;
  /* A cor de fundo foi removida daqui */
}

.item-card-v3:hover .product-image-container img {
  transform: scale(1);
}

.product-info-item {
  position: relative;
  padding: 15px;
  height: 110px; /* Altura fixa para a área de info/botão */
  text-align: center; /* Centraliza todo o texto */
}

.product-details {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.product-name-link {
  text-decoration: none;
  color: inherit;
}

.product-name {
  font-size: 17px;
  color: #444;
  line-height: 1.4;
  height: 40px;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-price-container {
  transition: opacity 0.3s ease;
}

.product-price {
  font-size: 22px;
  font-weight: bold;
  color: #333;
}

.price-unit {
  font-size: 20px;
  font-weight: normal;
  color: #888;
}

/* Selo de desconto */
.product-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: red; /* Vermelho */
  color: #fff;
  padding: 3px 18px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 4px;
  z-index: 2;
}

/* --- LÓGICA DO HOVER --- */

.product-hover-action {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: end;
  justify-content: center;
  padding: 10px;
  box-sizing: border-box; /* Garante que o padding não aumente o tamanho */

  /* Escondido por padrão */
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.item-card-v3:hover .product-hover-action {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Esconde o preço original no hover */


/* Botão comprar */
.item-card-v3 .btn-comprar {
  background-color: #1a6432;
  color: #fff;
  border: none;
  width: 100%;
  font-size: 20px;
  /* font-weight: bold; */
  display: flex; /* ATIVA O FLEXBOX */
  align-items: stretch; /* Faz as duas metades terem a mesma altura */
  cursor: pointer;
  padding: 0; /* REMOVE O PADDING DO BOTÃO PAI */
  overflow: hidden; /* Garante que o conteúdo respeite as bordas */
  transition: background-color 0.2s ease;
}

.item-card-v3 .btn-comprar:hover {
  background-color: #145028;
}

/* As spans agora são as duas metades do botão */
.item-card-v3 .btn-comprar .btn-price,
.item-card-v3 .btn-comprar .btn-text {
  flex: 1; /* Faz cada span ocupar 50% do espaço disponível */
  padding: 12px 0px; /* Adiciona o padding aqui, nos filhos */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* Espaço entre o ícone e o texto "Comprar" */
}

.btn-price {
  background-color: #114639;
}

.btn-text {
  background-color: #155747;
}

/* --- CSS PARA TRANSIÇÃO DE IMAGEM NO HOVER --- */

/* 1. Transforma o link em um container para as imagens */
.product-image-container a {
  display: block;
  position: relative; /* Essencial para posicionar as imagens dentro dele */
  width: 100%;
  height: 100%;
}

/* 2. Define o estilo para AMBAS as imagens (principal e de hover) */
.product-image-container a img {
  /* Posiciona uma exatamente sobre a outra */
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100%;
  object-fit: contain; /* Garante que a imagem caiba no container */
}

/* 3. A imagem de hover começa invisível e com a transição */
.product-image-container a .img-hover {
  opacity: 0; /* Começa 100% transparente */
  transition: opacity 0.4s ease-in-out; /* A mágica da transição suave! */
}

/* 4. No hover do card, a imagem de hover se torna visível */
.item-card-v3:hover .product-image-container a .img-hover {
  opacity: 1; /* Fica 100% visível */
}

/* --- A MÁGICA DO HOVER (APENAS PARA DESKTOP) --- */

@media (min-width: 800px) {
    /* As regras abaixo só serão aplicadas em telas com 768px de largura ou mais */

    /* Esconde APENAS o container do PREÇO no hover */
    .item-card-v3:hover .product-price-container {
        opacity: 0;
        visibility: hidden;
    }

    /* Mostra o botão de ação no hover */
    .item-card-v3:hover .product-hover-action {
        opacity: 1;
        visibility: visible;
    }

    .item-card-v3:hover .product-price-container {
  opacity: 0;
  visibility: hidden;
}
}

@media (max-width: 768px) {

  .item-card-v3 .btn-comprar {
    display: none;
  }

  .product-image-container {
    height: 200px;
  }

  .product-name {
    height: 49px;
  }

  .p-0 {
    padding: 20px 10px !important;
  }

  .product-price {
  font-size: 20px;
}
}
.filter-products{
    margin-top: 1em;
    display: grid;
    gap: 2em;
    /* grid-template-columns:20% 80% ; */
    grid-template-columns:1fr 3fr ;
}
@media screen and (max-width:770px){
    .filter-products{
        grid-template-columns: 4fr;
    }
}

.filters{
    display: flex;
    flex-direction: column;
    /* gap: 0.25em; */
}

.filters button{
    /* width: 90%; */
    display: flex;
    justify-content: center;
    padding-inline-start: 1em;
    /* padding-block: 0.85em; */
    border-block: 1px solid #ffffff;
    border-inline:0;
    text-align: start;
    border-radius: 5px;
}


.radio{
    display: none;
    
}

.filter-button{
    background-color: var(--cor-oestewood);
    color: white;
    /* padding: 0.25em; */
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 5px;
    height: 30px;
    border-radius: 8px;
    transition: all 0.3s ease;
}
.filter-button:focus,.filter-button:active{
    color: white;
}
.filter-button:hover{
    color: white;
    background-color: var(--cor-oestewood);
}

/* .check-label{border: 1px solid red;} */
.check-label::before{
    content: " ";
    border: 1px solid var(--cinza-nav-cat);
    border-radius: 5px;
    height: 20px;
    width: 20px;
    transition: all 0.2s ease;
}
.check-label.checked::before {
    background-color: var(--cor-oestewood);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.check-label.checked::after{
    position: absolute;
    content: " ";
    border: 1px solid var(--cinza-nav-cat);
    border-radius: 5px;
    z-index: -1;
    height: 20px;
    width: 20px;
}

.results{
    margin-block: 0.5em;
    margin-inline-start: 1.5em;
}

#filter-menu-mobile{
        max-width: 90vw;
}

.items{
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr); /* FORÇA 3 COLUNAS IGUAIS */
}

@media screen and (max-width:767px){
    .items{
        grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));

    }
}

.items .item{
    margin-inline: auto;
    margin-block: 0.2em;
    border: 0;
}

.filtros-ordem-list{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block:1em ;
}
.filtros-ordem-list .contador{
    font-family: "Abadi MT Condensed Light";
    color: var(--cinza-seta);
}
.filtros-ordem-list .contador span{
    font-weight: bold;
    font-size: 18px;
}

.filtros-ordem-list .filtros-select{
    align-items: center;
    display: flex;
    gap:1em;
}
.filtros-ordem-list .filtros-select select{
    height: 40px;
    width: 145px;
    font-size: 15px;
    color: var(--cinza-prod-cat);
    background-color: var(--cinza-fundo);
    border: 0px solid #dee2e6;
    transition: all 0.3s ease;
    text-align: center;
    border-radius: 5px;
}
.filtros-select select::before{margin-inline-end: 1em;}

.filtros-select select:focus{
    outline:none;
    border: none;
    box-shadow:0 0 0 0.25rem #dee2e6;
}

.price-filter{
    display: flex;
    justify-content: start;
    column-gap: 0.25em;
    align-items: center;
}
.price-filter input, .price-filter input:focus{
    outline: none;
    width: 100px;
    border-radius: 4px;
    padding: 4px;
    border:2px solid var(--cinza-input-preco);
}
.price-filter button{
    display: flex ;
    width: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    max-width: 55px;
    padding: 1em;
    max-height: 35px;
    margin-right: 1em;
    color: var(--white) ;
    background-color: var(--black) ;
    transition: all 0.3s ease;
}
.price-filter button::after{
    content: none !important;
    background: black;
}
.price-filter button:hover{
    background-color: var(--amarelo-base);
}

/* --- ESTILOS PARA O NOVO FILTRO LATERAL (VERSÃO FINAL) --- */

.filter-block {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #e9ecef;
}
.filter-block:last-child {
    border-bottom: none;
    margin-bottom: 100px;
    padding-bottom: 0;
}

.filter-title {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
    color: #333;
    letter-spacing: 0.5px;
}

.filter-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}
.filter-list li {
    margin-bottom: 12px;
}
.filter-list label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    color: #555;
    font-size: 15px;
    transition: all 0.2s ease;
    cursor: pointer;
    font-weight: 400;
}
.filter-list label:hover .filter-name,
.filter-list label:hover .product-count {
    color: #0C3227;
}

/* Esconde o checkbox original */
.filter-checkbox {
    display: none;
}

/* Estilo para o nome do filtro (Ex: "Tábuas") */
.filter-name {
    flex-grow: 1; /* Faz o nome ocupar o espaço disponível */
}

/* --- ESTILOS PARA O ITEM ATIVO --- */
/* Quando o checkbox está marcado, o NOME fica em negrito e verde */
.filter-checkbox:checked + .filter-name {
    font-weight: 700;
    color: #0C3227;
}
/* Quando o checkbox está marcado, a CONTAGEM também muda */
.filter-checkbox:checked ~ .product-count {
    background-color: #0C3227;
    color: #fff;
    font-weight: 600;
}

.product-count {
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    color: #6c757d;
    border-radius: 22px;
    font-size: 12px;
    padding: 2px 12px;
    min-width: 26px;
    text-align: center;
    margin-left: 10px;
    flex-shrink: 0; /* Impede que o contador encolha */
    transition: all 0.2s ease;
}

/* --- ESTILOS PARA O NOVO FILTRO DE PREÇO (DUAL RANGE) --- */
.price-filter-wrapper-v2 {
    padding: 0 10px;
}
.range-slider {
    width: 100%;
    position: relative;
    height: 20px;
}
.price-inputs-v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
    font-size: 15px;
    color: #555;
}
.price-inputs-v2 .price-label {
    color: #999;
}
.price-inputs-v2 .price-values {
    font-weight: 600;
    color: #333;
}
.btn-filter-price {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    color: #333;
    font-size: 13px;
    padding: 6px 18px;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-filter-price:hover {
    background-color: #0C3227;
    color: #fff;
    border-color: #0C3227;
}

/* Estilo dos inputs de range */
input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
    position: absolute;
    left: 0;
    top: 5px;
}
input[type=range]:focus {
    outline: none;
}
/* Chrome, Safari, Opera, Edge */
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    background: #e9ecef;
    border-radius: 4px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: -8px; /* Metade da altura do thumb - metade da altura do track */
    background-color: #0C3227;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 3px solid #FFF;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
/* Firefox */
input[type=range]::-moz-range-track {
    width: 100%;
    height: 4px;
    background: #e9ecef;
    border-radius: 4px;
}
input[type=range]::-moz-range-thumb {
    border: none;
    margin-top: -8px;
    background-color: #0C3227;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 3px solid #FFF;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

/* Adicione este código ao final do seu arquivo CSS */

input[type=range]::-webkit-slider-thumb {
    /* ... (seus estilos existentes aqui) ... */
    position: relative; /* z-index precisa de uma posição não-estática */
    z-index: 2;
}

input[type=range]::-moz-range-thumb {
    /* ... (seus estilos existentes aqui) ... */
    position: relative;
    z-index: 2;
}

.range-slider input[type="range"] {
    pointer-events: none; /* Faz a trilha do input não ser clicável */
}

.range-slider input[type="range"]::-webkit-slider-thumb {
    pointer-events: auto; /* Faz APENAS a bolinha ser clicável novamente */
}

.range-slider input[type="range"]::-moz-range-thumb {
    pointer-events: auto; /* Faz APENAS a bolinha ser clicável novamente */
}

/* Estilo para o botão Limpar Filtros */
.filter-block-clear {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e9ecef;
}

.btn-limpar-filtros {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 10px 15px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #dc3545; /* Vermelho para indicar uma ação de 'limpar' */
    font-weight: 600;
    font-size: 14px;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.btn-limpar-filtros:hover {
    background-color: #dc3545;
    color: #fff;
    border-color: #dc3545;
}

.btn-limpar-filtros i {
    margin-right: 5px;
}

/* ---- NOVO CSS PARA A BARRA DE PRODUTOS E BREADCRUMBS ---- */

/* Estilo para os Breadcrumbs */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin-left: 27%;
    list-style: none;
    background-color: transparent;
}
.breadcrumb li {
    color: #6c757d;
    font-size: 15px;
}
.breadcrumb li a {
    color: #333;
    text-decoration: none;
}
.breadcrumb li a:hover {
    color: #0C3227; /* Cor do seu tema */
}
.breadcrumb li+li:before {
    content: "/";
    padding: 0 8px;
    color: #6c757d;
    margin-bottom: 4px;
}

/* Container principal da barra de ferramentas (Desktop e Mobile) */
.product-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    padding-top: 20px;
}

/* Texto de resultados (Ex: Mostrando 1 a 9 de 15) */
.toolbar-results {
    color: #6c757d;
    font-size: 15px;
}

/* Container dos controles da direita (Desktop) */
.toolbar-sorter {
    display: flex;
    align-items: center;
    gap: 30px; /* Espaço entre "Mostrar" e "Ordenar" */
}

/* Item individual (label + valor) */
.sorter-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sorter-item label {
    margin-bottom: 0;
    font-size: 15px;
    color: #212529;
}

/* Estilo para os links de texto "Mostrar" */
.limit-values {
    font-size: 15px;
    color: #6c757d;
}
.limit-values a {
    color: #6c757d;
    text-decoration: none;
    padding: 0 4px;
}
.limit-values a:hover {
    color: #0C3227;
}
.limit-values span.active {
    color: #212529;
    font-weight: 700;
    padding: 0 4px;
}

/* Estilo para o seletor de Ordenação */
.sorter-sort .form-select {
    border: 1px solid #dee2e6;
    height: auto;
    min-width: 200px; /* Ajuste a largura conforme necessário */
    font-size: 15px;
    color: #000000;
    border-radius: 5px;
    font-weight: bold;
    padding: 5px 12px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Botão de filtro para o Mobile */
.product-toolbar .filter-button {
    background-color: transparent;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    color: #333;
    padding: 8px 15px;
    height: auto;
    width: auto;
    text-decoration: none;
}
.product-toolbar .filter-button div {
    padding: 0;
}
.product-toolbar .filter-button i {
    margin-right: 5px;
}

.btn-filtro-flutuante {
  position: fixed; /* Fica fixo na tela */
  bottom: 80px; /* Distância da parte de baixo */
  left: 8px; /* Distância da direita */
  z-index: 1040; /* Fica acima da maioria dos elementos */
  background-color: var(--cor-oestewood);
  color: white !important;
  padding: 12px 18px;
  border-radius: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  text-decoration: none !important;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.2s ease;
}

.btn-filtro-flutuante:hover {
  color: white;
  transform: scale(1.05);
}

/* ---- CSS PARA A NOVA BARRA DE ORDENAÇÃO MOBILE ---- */

.mobile-sorter-toolbar {
    display: flex;
    flex-direction: column;   /* MUITO IMPORTANTE: Empilha os itens verticalmente */
    align-items: flex-start;  /* Alinha os itens à esquerda */
    gap: 15px;                /* Adiciona um espaço vertical entre os dois controles */
}

/* Ajusta o item "Mostrar:" no mobile */
.mobile-sorter-toolbar .sorter-item.sorter-limit {
    gap: 5px; /* Espaço menor entre "Mostrar:" e os números */
}
.mobile-sorter-toolbar .sorter-item.sorter-limit label,
.mobile-sorter-toolbar .sorter-item.sorter-limit .limit-values {
    font-size: 14px; /* Fonte um pouco menor para caber melhor */
}

.mobile-sorter-toolbar .sorter-item.sorter-sort .form-select {
   height: 42px; /* Altura um pouco maior para facilitar o toque */
   font-size: 15px;
   width: 100%; /* Faz o seletor ocupar toda a largura */
   padding: 8px 12px;
}

@media (max-width: 767px) {
 .product-toolbar {
    justify-content: center;
 }
}

/* --- ESTILOS PARA LISTA DE SUBCATEGORIAS NO FILTRO --- */

/* --- ESTILOS PARA FILTRO DE CATEGORIA COM ACCORDION --- */

/* Transforma o container do label pai em um flexbox para alinhar o botão */
.category-parent-label {
    display: flex;
    align-items: center;
    width: 100%;
}

/* Faz o label ocupar todo o espaço, empurrando o botão para a direita */
.category-parent-label label.flex-grow-1 {
    flex-grow: 1;
}

/* Estilo do botão de expandir/recolher */
.btn-toggle-subcategories {
    background: transparent;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    color: #888;
}

.btn-toggle-subcategories i {
    transition: transform 0.3s ease;
}

/* Classe para girar a seta para cima */
.btn-toggle-subcategories i.rotated {
    transform: rotate(180deg);
}

/* Lista de subcategorias com recuo */
.subcategory-list {
    list-style: none;
    padding-left: 20px;
    margin-top: 10px;
}


#filter-menu-mobile.offcanvas {
    height: 100vh;
    max-height: 100vh; 
}

#filter-menu-mobile .offcanvas-body {
    /* Ajuste o valor "70px" se a altura do seu cabeçalho for diferente */
    height: calc(100vh - 70px); 
    overflow-y: auto; /* Aplica a barra de rolagem vertical apenas aqui */
}
.paginacao-itens{
  justify-content: center;
  transition: all 0.3s ease;
}
.paginacao-itens>li{
    display: inline;
}

.paginacao-itens>li>a:focus,
.paginacao-itens>li>a:hover, 
.paginacao-itens>li>span:focus, 
.paginacao-itens>li>span:hover {
    z-index: 2;
    border-radius: 5px;
    color: var(--cor-oestewood);
    background-color: var(--cinza-fundo);
}
.paginacao-itens>li>span,.paginacao-itens>li>a{
    
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: var(--cinza-filtro);
    text-decoration: none;
    background-color: #fff;
    border: 0px solid #ddd;
}
.paginacao-itens>.active>span{
    z-index: 3;
    border-radius: 5px;

    color: #fff;
    cursor: default;
    background-color: var(--cor-oestewood);
    border-color: var(--cor-oestewood);
}
.paginacao-itens>.active>span:hover{
    z-index: 3;
    background-color: var(--secondary);
    border-radius: 5px;

}
/* ==========================================================================
   CSS REFORÇADO PARA GARANTIR A APLICAÇÃO
   ========================================================================== */

/* PASSO 1: Regra GERAL (Deixa tudo cinza por padrão) */
/* Usamos #icones no início para aumentar a "força" (especificidade) da regra. */
#icones .info-item img {
  width: 85px !important;
  height: 75px;
  object-fit: contain;
  flex-shrink: 0;
}

/* PASSO 2: Regra de EXCEÇÃO para o item que deve ser colorido */
/* Esta regra é MUITO específica e vai garantir que o ícone com a classe 'colorido' perca o filtro */
#icones .info-item img.colorido {
  /* 'none' é a forma mais explícita de remover o filtro */
  filter: none;
}

/* PASSO 3: Regra de HOVER (Opcional, mas recomendado) */
/* Ao passar o mouse sobre o item, a imagem fica colorida. 
   A regra é forte o suficiente para sobrepor a regra geral. */
#icones .info-item:hover img {
  filter: none;
}

/* PASSO 4: Regra de TAMANHO para o ícone maior */
/* A especificidade aumentada aqui também ajuda a garantir que o tamanho seja aplicado. */
#icones .info-item img.icon-box-grande {
  width: 55px;
  height: 55px;
}

#icones{
  border: 1px solid var(--cor-oestewood);
  border-radius: 10px;
}

.slideshow{
  padding: 0px;
}

.banner-slide img {
  width: 100% !important;
  border-radius: 10px;
}

/* --- ESTILOS PARA A BARRA DE ÍCONES (VISÃO DESKTOP) --- */

#icones {
  display: flex;
  align-items: center;
  justify-content: space-between; 
  padding: 0px;
  border: 1px solid var(--cor-oestewood);
  border-radius: 10px;
}

.info-divider {
  width: 1px;
  height: 60px;
  background-color: var(--cor-oestewood); 
}

.info-item {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: Arial, sans-serif;
}
.info-text {
  display: flex;
  flex-direction: column;
  font-family: "Vogue Plain";
}
.info-title {
  /* font-weight: bold; */
  font-size: 20px;
  color: black;
  line-height: 1.2;
}
.info-subtitle {
  font-size: 20px;
  color: black;
  line-height: 1.2;
}
@media (max-width: 767px) {

  #icones .info-item img {
    width: 80px !important;
  }

  #icones {
    border-radius: 0px;
  }

  .banner-slide img {
    border-radius: 0px;
  }

  .info-divider {
    display: none !important;
  }
}
/* ==========================================================================
   HEADER INSTITUCIONAL - ESTRUTURA REATORADA
   ========================================================================== */

/* --- Estrutura Principal --- */
body.institucional-page .header-institucional {
  background-color: #ffffff; /* Fundo branco de largura total */
}

body.institucional-page .header-institucional-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 84px; /* Controla a altura do header */
  gap: 2rem; /* Espaçamento entre as colunas */
}

/* --- Colunas --- */
body.institucional-page .header-col-left {
  flex-shrink: 0; /* Impede que o logo encolha */
}
body.institucional-page .header-col-center {
  flex-grow: 1; /* Faz a navegação ocupar o espaço disponível */
}
body.institucional-page .header-col-right {
  flex-shrink: 0; /* Impede que o ícone de busca encolha */
}

/* --- Estilo dos Elementos Internos --- */

/* Logo */
body.institucional-page .header-institucional .navbar-brand img {
  max-height: 50px;
  width: auto;
}
body.institucional-page .header-institucional .navbar-brand {
  display: flex;
  align-items: center;
  height: 100%; /* Garante que o link ocupe toda a altura da coluna */
  padding: 0;
  margin: 0;
}

/* Navegação */
body.institucional-page .header-institucional .navbar {
  padding: 0; /* Remove padding extra do componente navbar */
  margin: 0px;
}
body.institucional-page .header-institucional .navbar-nav {
  display: flex;
  justify-content: center; /* Centraliza os links no espaço disponível */
  width: 100%;
  gap: 1.5rem; /* Espaço entre os itens do menu */
}
body.institucional-page .header-institucional .navbar-nav .nav-link {
  color: var(--cor-texto-menu);
  font-weight: 500;
  font-size: 17px;
  padding: 0.5rem 0;
  transition: color 0.3s ease;
}
body.institucional-page .header-institucional .navbar-nav .nav-link:hover,
body.institucional-page .header-institucional .navbar-nav .nav-link.active {
  color: var(--cor-azul-retifoz);
}

/* Ícone de Busca */
body.institucional-page .header-institucional .header-search-icon a {
  color: var(--cor-texto-menu);
  font-size: 1.8rem; /* Tamanho ajustado para alinhar melhor */
  text-decoration: none;
}
body.institucional-page .header-institucional .header-search-icon a:hover {
  color: var(--cor-azul-retifoz);
}

/* Botão Hamburguer (Mobile) */
body.institucional-page .header-institucional .navbar-toggler {
  border: none;
  font-size: 1.5rem;
  color: var(--cor-texto-menu);
}
body.institucional-page .header-institucional .navbar-toggler:focus {
  box-shadow: none;
}

#custom-mobile-menu {
  display: none;
}

/* ==========================================================================
   CSS MOBILE COM MENU FLUTUANTE (SOBRE O CONTEÚDO)
   ========================================================================== */
@media (max-width: 991.98px) {

    /* --- Layout do Header --- */
    body.institucional-page .header-institucional-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    body.institucional-page .header-col-center { order: 1; flex: 0 1 auto; }
    body.institucional-page .header-col-left { order: 2; flex: 1 1 auto; text-align: center; }
    body.institucional-page .header-col-right { display: flex; order: 3; flex: 0 1 auto; }
    
    /* --- Transforma o header em uma "âncora" para o menu --- */
    body.institucional-page .header-institucional {
        position: relative;
    }

    /* --- Esconde o menu antigo do Bootstrap --- */
    body.institucional-page .header-institucional .navbar-collapse {
        display: none !important;
    }

    /* --- Estilos do nosso menu flutuante --- */
    #custom-mobile-menu {
        display: none;
        position: absolute;
        top: 99%;
        left: 0;
        z-index: 999;
        width: 100%;
        background-color: #ffffff;
        border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
    }
    
    #custom-mobile-menu .custom-nav {
        list-style: none;
        margin: 0;
        padding: 10px 0;
    }
    
    #custom-mobile-menu .custom-nav .nav-link {
        display: block;
        padding: 15px 20px;
        text-align: center;
        color: var(--cor-texto-menu);
        text-decoration: none;
        font-size: 16px;
    }

    #custom-mobile-menu .custom-nav li:first-child .nav-link {
        border-top: none;
    }
    
    #custom-mobile-menu .custom-nav .nav-link:hover {
        background-color: #f8f8f8;
        color: var(--cor-azul-retifoz);
    }
}
/* --- Estilo do Banner Principal Institucional (COM OVERLAY DIVIDIDO 70/30) --- */

.hero-banner-institucional {
  position: relative;
  width: 100%;
  height: 60vh;
  min-height: 700px;
  display: flex;
  align-items: center;
  color: #ffffff;
  overflow: hidden; /* Garante que nada saia dos limites */
}
.hero-banner-institucional .hero-carousel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* Fica atrás do conteúdo de texto */
}

/* Cada slide individual do carrossel */
.hero-banner-institucional .hero-slide {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

/* Conteúdo de texto e botão (camada final) */
.hero-banner-institucional .container {
  position: relative;
  z-index: 2; /* Garante que o texto fique na frente do carrossel */
}

/* O restante do CSS para h1, p, btn-hero continua o mesmo de antes */
.hero-banner-institucional .hero-content h1 {
  font-size: 90px;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0;
}

.hero-banner-institucional .slick-list,
.hero-banner-institucional .slick-track {
  height: 100%;
}

.hero-banner-institucional .hero-content p {
  font-size: 30px;
  margin-top: 0.5rem;
  margin-bottom: 2rem;
}

.hero-banner-institucional .btn-hero {
    /* ALTERADO: Usamos 'inline-flex' para ativar o alinhamento flexível */
    display: inline-flex;
    
    /* ADICIONADO: A mágica do alinhamento vertical e horizontal */
    align-items: center;     /* Alinha o conteúdo verticalmente no centro */
    justify-content: center; /* Alinha o conteúdo horizontalmente no centro */

    /* REMOVIDO: 'text-align' não é mais necessário com 'justify-content' */
    /* text-align: center; */

    /* --- O restante do seu estilo permanece o mesmo --- */
    background-color: var(--white);
    width: 255px; /* Você pode manter ou remover para um botão mais flexível */
    color: var(--azul-botao-retifoz);
    text-transform: uppercase;
    font-weight: bold;
    padding: 6px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 25px;
    transition: background-color 0.3s ease;
    height: auto;
}

@media (max-width: 768px) {
  .hero-banner-institucional {
    min-height: 500px; /* Define a nova altura mínima para o celular */
    height: auto; /* Opcional, mas recomendado para remover a altura vh */
  }
  .hero-banner-institucional .hero-padrao-azul {
    width: 100%;
  }

  .hero-banner-institucional .hero-overlay-preto {
    display: none;
  }

  .hero-banner-institucional .hero-content h1 {
    font-size: 55px;
    text-align: center;
  }

  .hero-banner-institucional .hero-content p {
    text-align: center;
  }
  .hero-banner-institucional .hero-content a {
    display: flex;
    justify-content: center;
    margin: auto;
  }
}
/* --- Estilos da Seção Sobre Nós / Serviços --- */

/* 1. Estrutura Principal e Fundos */
.about-services-section {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto;
  margin-bottom: 50px;
  /* Altura automática baseada no conteúdo */
}

.about-services-section .background-left,
.about-services-section .background-right {
  grid-row: 1;
  position: absolute;
  top: 0;
  bottom: 0;
  height: 105%;
}

.about-services-section .background-left {
  left: 0;
  width: 55%;
  background-size: cover;
  background-position: center;
}

.about-services-section .background-left .background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(139 138 138 / 14%);
}

.about-services-section .background-right {
  right: 0;
  width: 45%;
  background-color: var(--cinza-botao);
}

/* 2. Container Principal do Conteúdo */
.about-services-section .main-content-container {
  grid-column: 1 / 3;
  grid-row: 1;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 80vh;
}

.about-services-section .services-wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
}

.about-services-section .bleed {
  width: calc(100% + (50vw - 50%));
}

/* 3. Grid do Conteúdo Superior (Pessoas + Texto) */
.about-services-section .content-grid {
  display: grid;
  grid-template-columns: 50% 50%; /* Espelha a divisão do fundo */
  align-items: end; /* Alinha os itens na parte de baixo do grid */
  flex-grow: 1; /* Faz esta área crescer para preencher o espaço */
  padding-top: 6rem;
}

.about-services-section .line-image-background {
    position: absolute;
    bottom: 444px; /* Alinha na base do grid */
    width: 100%; /* Ajuste a largura para cobrir a área desejada */
    max-width: 100%; /* Limita o tamanho em telas grandes */
    z-index: 8; /* IMPORTANTE: z-index maior que o fundo (5) e menor que as pessoas (10) */
}

.about-services-section .line-image-background img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* 4. Imagem das Pessoas */
.about-services-section .people-image-container {
  grid-column: 1;
  z-index: 10;
  align-self: end; /* Garante que a imagem fique na base */
  margin-right: -15%; /* Puxa a imagem para a direita para sobrepor a divisão */
}

.about-services-section .people-image-container img {
  padding-left: 57px;
}

/* 5. Bloco de Texto "Bem-vindo" */
.about-services-section .welcome-text {
  grid-column: 2;
  padding-left: 13%;
  padding-bottom: 33rem; /* Distância da barra de serviços */
  z-index: 15;
  max-width: 585px;
}

/* ... (as regras de h2, p, btn-service continuam as mesmas de antes) ... */
.about-services-section .welcome-text h2 {
  font-size: 60px;
  font-weight: bold;
  color: var(--cor-azul-retifoz);
}
.about-services-section .welcome-text p {
  margin: 1rem 0 2rem 0;
  font-size: 17px;
  color: var(--cinza-seta);
  line-height: 1.6;
}

.about-services-section .welcome-text .btn-service {
  /* ALTERADO: Usamos 'inline-flex' para ativar o alinhamento flexível */
  display: inline-flex;

  /* ADICIONADO: A mágica do alinhamento vertical e horizontal */
  align-items: center; /* Alinha o conteúdo verticalmente no centro */
  justify-content: center; /* Alinha o conteúdo horizontalmente no centro */

  /* REMOVIDO: 'text-align' não é mais necessário com 'justify-content' */
  /* text-align: center; */

  /* --- O restante do seu estilo permanece o mesmo --- */
  background-color: var(--azul-botao-retifoz);
  width: 255px; /* Você pode manter ou remover para um botão mais flexível */
  color: var(--white);
  text-transform: uppercase;
  font-weight: bold;
  padding: 6px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 25px;
  margin-top: 1.5rem;
  transition: background-color 0.3s ease;
  height: auto;
}

/* Barra de Serviços na parte inferior */
.about-services-section .services-block {
  background-color: transparent; /* Fundo azul escuro */
  color: var(--cor-azul-retifoz);
  width: 100%;
  display: flex;
  align-items: stretch; /* Faz os itens terem a mesma altura */
}

.about-services-section .services-title-vertical {
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl; /* Deixa o texto na vertical */
  transform: rotate(180deg); /* Corrige a orientação da leitura */
  font-size: 75px;
  letter-spacing: 5px;
  color: var(--azul-servicos-fechado-retifoz);
}

.about-services-section .services-list {
  display: flex;
  width: 100%;
}

.about-services-section .service-item {
  padding: 1.5rem;
  border-left: 1px solid var(--azul-servicos-retifoz);
  flex-grow: 1; /* Faz os itens inativos ocuparem o espaço restante */
  background-color: var(--azul-servicos-fechado-retifoz);
}
.about-services-section .service-item .service-header {
  display: grid;
  align-items: baseline;
}
.about-services-section .service-item .service-number {
  font-size: 60px;
}
.about-services-section .service-item .service-title {
  font-size: 1rem;
  font-weight: normal;
}
.about-services-section .service-item .service-body {
  display: none; /* Esconde o corpo nos itens inativos */
}

/* Estilo do item de serviço ATIVO */
.about-services-section .service-item.active {
  background-color: var(--azul-servicos-retifoz);
  max-width: 345px;
  height: 440px;
  flex-grow: 3;
  position: relative;
  padding-bottom: 80px;
  display: flex;
  flex-direction: column;
}
.about-services-section .service-item.active .service-number {
  font-size: 60px;
  color: var(--white);
}
.about-services-section .service-item.active .service-title {
  color: var(--white);
  font-size: 25px;
}
.about-services-section .service-item.active .service-body {
  display: block; /* Mostra o corpo no item ativo */
  margin-top: 1rem;
  flex-grow: 1;
  overflow: hidden;
}

.about-services-section .service-item.active .service-body p {
  color: var(--white);
  font-size: 15px;
  height: 100%;
  overflow-y: auto;
  padding-right: 10px;
}

/* Estilo da Imagem do Motor (Posicionamento Absoluto) */
.about-services-section .service-item.active .service-body img {
  position: absolute;
  bottom: -23px; /* Joga a imagem para baixo, para fora do container */
  left: 50%; /* Alinha a borda esquerda da imagem no meio do container */
  transform: translateX(
    -50%
  ); /* Move a imagem 50% de sua própria largura para a esquerda, centralizando-a perfeitamente */
  max-width: 195px; /* Aumenta o tamanho da imagem para dar mais destaque */
  width: 100%;
  margin-top: 0; /* Reseta a margem antiga */
}

/* --- Estilos para os Itens de Serviço INATIVOS --- */

/* Ajusta o contêiner do cabeçalho (número + título) para ser uma coluna flexível */
.about-services-section .service-item:not(.active) .service-header {
  display: flex;
  flex-direction: column; /* Empilha o número e o título verticalmente */
  align-items: center; /* Centraliza-os horizontalmente */
  justify-content: center; /* Centraliza o conteúdo verticalmente */
  gap: 1.5rem; /* Espaço entre o número e o título */
}

/* Estilo para o número do serviço inativo */
.about-services-section .service-item:not(.active) .service-number {
  font-size: 60px;
  color: var(--clara-numero); /* Deixa o número mais sutil */
}

/* A MÁGICA: Deixa o título do serviço inativo na vertical */
.about-services-section .service-item:not(.active) .service-title {
  writing-mode: vertical-rl; /* Coloca o texto na vertical */
  transform: rotate(
    360deg
  ); /* Corrige a orientação da leitura para de cima para baixo */
  text-transform: uppercase;
  color: var(
    --clara-numero
  ); /* Deixa o texto do título um pouco mais visível que o número */
  font-size: 2rem;
  letter-spacing: 2px;
}

/* EFEITO BÔNUS: Um hover suave para os itens inativos */
.about-services-section .service-item:not(.active) {
  transition: background-color 0.3s ease;
}

.about-services-section .service-item:not(.active):hover {
  background-color: #00227c; /* Um tom de azul um pouco mais claro para o hover */
  cursor: pointer;
}

@media (max-width: 768px) {
  .about-services-section .services-block {
    display: none;
  }

  .about-services-section {
    height: auto; /* Permite que a altura se ajuste ao conteúdo */
  }

  .about-services-section .people-image-container {
    position: absolute;
    bottom: 28px; /* Distância do fundo */
    left: 27%; /* Começa na linha de divisão */
    transform: translateX(-50%); /* Centraliza a imagem na linha de divisão */
    width: 50%; /* Largura da imagem das pessoas */
    max-width: 600px;
    z-index: 10; /* Fica na frente do fundo */
  }
}

/* =================================================================== */
/* --- ESTILOS PARA TABLET E MOBILE (VERSÃO COM SCROLL-SNAP) --- */
/* =================================================================== */
@media (max-width: 992px) {
  /* 1. Reseta a seção e aplica um fundo único de imagem */
  .about-services-section {
    display: block;
    background-size: cover;
    background-position: center;
    padding: 3rem 0 0 0; /* Remove padding de baixo para juntar com a barra */
    position: relative;
  }

  .about-services-section .line-image-background {
  display: none;
}

  /* Adiciona a camada escura para legibilidade */
  .about-services-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(139 138 138 / 14%);
    z-index: 1;
  }

  /* 2. Esconde os fundos do desktop */
  .about-services-section .background-left,
  .about-services-section .background-right {
    display: none;
  }

  /* 3. Garante que o conteúdo fique na frente */
  .about-services-section .main-content-container {
    position: relative;
    z-index: 2;
  }

  /* 4. Organiza o conteúdo superior */
  .about-services-section .content-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1rem;
    width: 100%;
  }

  /* 5. Estiliza o Bloco de Texto "Bem vindo" */
  .about-services-section .welcome-text {
    order: 1;
    padding: 0 0 2rem 0;
    margin: 0;
    text-align: center;
    max-width: 550px;
  }
  .about-services-section .welcome-text h2 {
    font-size: 45px;
  }

  /* 6. Estiliza a Imagem das Pessoas */
  .about-services-section .people-image-container {
    order: 2;
    margin: 0;
    position: static;
    transform: none;
    width: 100%;
    max-width: 400px;
  }
  .about-services-section .people-image-container img {
    padding: 0;
    width: 100%;
    height: auto;
  }

  /* 7. Estiliza a Barra de Serviços */
  .about-services-section .services-block {
    display: block;
    background-color: var(--cinza-botao); /* Cor de fundo da barra */

    margin-top: 0;
  }

  .about-services-section .services-title-vertical {
    display: none;
  }

  /* 8. NOVA LÓGICA PARA A LISTA DE SERVIÇOS ROLÁVEL */
  .about-services-section .services-list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* A MÁGICA DO CSS ACONTECE AQUI */
    scroll-snap-type: x mandatory; /* Habilita o "ímã" na rolagem horizontal */
    scroll-padding: 0 50px; /* Garante espaço para o snap nas bordas */
    height: 510px;
  }

  .about-services-section .service-item.active {
    flex: 0 0 auto;
    width: calc(100% - 100px); /* Ocupa quase toda a tela */
    max-width: 300px !important;
    scroll-snap-align: center; /* Alinha cada item no centro ao rolar */
    border-left: none;
  }
  .about-services-section .service-item:not(.active) {
    height: 440px;
  }

  .about-services-section .service-item.active .service-body img {
    max-width: 200px;
    bottom: -60px;
  }
}
/* Use um ponto (.) para selecionar a classe */
.titulo-carrossel-intitucional {
    color: var(--titulo_featured_institucional);
}
/* ==========================================================================
   Estilos para o Item do Carrossel INSTITUCIONAL (item-inst)
   ========================================================================== */

.item-inst a:focus {
  border: none;
  outline: none;
  text-decoration: none;
}

.item-inst {
  background-color: white;

  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  border-radius: 0px;
  min-height: 23.188em;
  max-height: 420px;

  padding: 1em;
  transition: all 0.3s ease;
  margin-block: 1em;
  position: relative;
  margin-inline: 1px;
}

/*.item-inst:hover {
    box-shadow: 0px 0px 10px var(--cinza-footer-links);
}

.item-inst:hover .image {
    transform: scale(1.08);
} */

.item-inst .discount {
  z-index: 1;
  width: 35px;
  height: 35px;
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  border-radius: 0px;

  font-weight: bold;
  margin-inline: none;
  background-color: #ec341c;
  color: white;
  right: 2%;
  top: 2%;
}

.item-inst .discount::after {
  position: absolute;
  content: " ";
  background-color: #ec341c;
  /* background-color: #FFCC03; */
  max-width: 35px;
  max-height: 35px;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  width: 100%;
  height: 50%;
  bottom: -1.05em;
}

.item-inst .image {
  margin-inline: auto;
  transition: all 0.3s ease-in-out;
}

.item-inst .name {
  text-align: start;
  font-size: 15px;
  color: var(--cinza-preco);
  text-transform: uppercase;

  /* --- INÍCIO DA SOLUÇÃO --- */

  line-height: 1.4em; /* Essencial para um cálculo de altura consistente */
  height: 4.2em; /* Altura calculada: line-height * número de linhas (1.4 * 3) */

  /* A mágica acontece aqui: */
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* <<< Defina o número de linhas desejado aqui */

  /* --- FIM DA SOLUÇÃO --- */
}

.item-inst .reference {
  font-size: 14px;
  text-align: center;
  color: var(--cinza-ref);
}

.item-inst .price {
  position: relative;
  text-align: start;
  font-weight: bold;
  font-size: 24px;

  color: var(--cor-texto-menu);
}

.item-inst .original-price {
  font-size: 16px;
  line-height: 1em;
  font-weight: normal;

  color: var(--cinza-oruginal-p);
}

.item-inst .original-price::before {
  position: absolute;
  left: 20%;
  top: 0.5em;
  content: 1px;
  width: 110px;
  content: " ";
  background-color: var(--cinza-preco);
  padding-top: 1px;
}

.item-inst .prod-cat {
  border: 1px solid var(--cinza-botao);
  padding: 0.25em;

  font-size: 0.813em;
  transition: all 0.3s ease;
  text-align: center;
  text-transform: uppercase;
}
.item-inst .prod-cat * * {
  color: var(--cinza-cat-2);
}
.item-inst .prod-cat * *:hover {
  color: var(--cinza-seta);
}

/* Estilo para o nome da marca no card do produto */
.item-inst .manufacturer {
  text-align: start;
  font-size: 13px;
  color: #888; /* Um cinza sutil */
  text-transform: uppercase;
  margin-top: 8px; /* Adiciona um pequeno espaço acima */
}

@media (max-width: 992px) {
  .item-inst .price {
    font-size: 22px;
  }

  .distinct-background-white{
    padding-bottom: 0px !important;
  }
}
/* --- Estilos para o Carrossel de Marcas (VERSÃO CORRIGIDA) --- */
.marcas-section {
  padding: 0;
  padding-bottom: 80px;
}

.linhas{
  border-top: 1px solid var(--cinza-botao);
  border-bottom: 1px solid var(--cinza-botao);
  padding-top: 10px;
    padding-bottom: 10px;
}

.sem-bordas{
  border: none !important;
}

/* Define o tamanho fixo do "retângulo" para cada marca */
.marcas-carousel .item-marca {
  width: 170px;
  height: 70px;
  padding: 5px 15px; /* Adiciona um pequeno padding interno */
  box-sizing: border-box; /* IMPORTANTE: Garante que o padding não aumente o tamanho total */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #f2f2f2;
  border-radius: 3px;
  /* ADICIONE ESTA LINHA PARA O ESPAÇAMENTO */
  margin: 0 5px; /* Cria 10px de espaço à esquerda e 10px à direita de cada logo */
}

/* Garante que o link ocupe todo o espaço do retângulo */
.marcas-carousel .item-marca a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Força a imagem a se ajustar dentro do retângulo sem distorcer */
.marcas-carousel .item-marca img {
  /* Garante que a imagem nunca ultrapasse o tamanho do retângulo */
  max-width: 100%;
  max-height: 100%;

  /* NOVO: Define a largura e altura para o object-fit funcionar de forma mais consistente */
  width: 100%;
  height: 100%;

  /* A MÁGICA: Ajusta a imagem mantendo a proporção */
  object-fit: contain;
}
/* --- Estilos para o Banner de Destaque --- */

.feature-banner {
    position: relative;
    width: 100%;
    height: 50vh;
    min-height: 500px; /* Altura padrão para DESKTOP */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    text-align: center;
    color: #ffffff;
}

.feature-banner .feature-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.feature-banner .container {
    position: relative;
    z-index: 2;
}

.feature-banner .feature-banner-content h2 {
    font-size: clamp(4.5rem, 4vw, 90px);
    font-weight: bold;
    text-transform: none; /* O seu exemplo não parece ser uppercase */
    margin-bottom: 0.5rem;
}

.feature-banner .feature-banner-content p {
    font-size: clamp(1.9rem, 2vw, 30px);
}

@media (min-width: 768px) {
    .feature-banner {
        text-align: left; /* Altera para alinhado à esquerda no desktop */
    }
} 

/* Media Query para telas de celular */
@media (max-width: 767px) {
    .feature-banner {
        height: auto; /* Remove a restrição de 50vh no celular */
        min-height: 300px; /* DEFINE a nova altura mínima desejada para o celular */
    }
}
/* ==========================================================================
   SOLUÇÃO FINAL E MODERNA COM CSS GRID
   ========================================================================== */

/* --- Configurações Gerais da Seção --- */
.parceiros-section {
    padding: 3rem 0;
    background-color: #ffffff;
}
.parceiros-section .parceiros-heading {
    color: var(--titulo_featured_institucional);
    margin-bottom: 4.5rem;
    font-size: 4rem;
}

/* --- Layout do Carrossel (Slide) --- */

/* O slide do carrossel, que contém nossa grade */
.parceiros-carousel .parceiro-grid-slide {
    display: grid;
    /* ESTILO PADRÃO (DESKTOP): 7 colunas */
    grid-template-columns: repeat(7, 1fr);
    gap: 20px;
    align-items: center;
}

/* O item individual do parceiro (o link) */
.parceiros-carousel .item-parceiro {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
    width: 100%;
}

/* A imagem dentro do link */
.parceiros-carousel .item-parceiro img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ==========================================================================
   AJUSTES PARA CELULAR (A PARTE MAIS IMPORTANTE!)
   ========================================================================== */
@media (max-width: 768px) {

    /* Redefine a grade para ter apenas 2 colunas no celular */
    .parceiros-carousel .parceiro-grid-slide {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px; /* Espaçamento um pouco menor para celular */
    }
}

/* ==========================================================================
   CSS PARA EVITAR O "FLASH" DE CONTEÚDO (FOUC)
   ========================================================================== */

/* Deixa o carrossel invisível por padrão */
.parceiros-carousel {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out;
}

/* O Slick adiciona a classe '.slick-initialized' quando termina de carregar.
   Nós usamos isso para tornar o carrossel visível suavemente. */
.parceiros-carousel.slick-initialized {
    opacity: 1;
    visibility: visible;
}
/* ==========================================================================
   Estilos para o Footer INSTITUCIONAL (Layout Novo)
   ========================================================================== */

/* --- Parte Principal do Rodapé (Fundo Azul) --- */
.footer-inst-main {
    background-color: var(--azul-botao-retifoz); /* Seu azul principal */
    color: #ffffff;
    padding: 4rem 0;
    font-size: 16px;
    margin-top: 50px;
}

.footer-inst-main .footer-logo {
    max-width: 255px;
    height: auto;
}

.footer-inst-main .footer-address {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}

.footer-inst-main .footer-heading {
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    font-size: 17px;
}

.footer-inst-main .footer-links li {
    margin-bottom: 0.75rem;
}

.footer-inst-main .footer-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-inst-main .footer-links a:hover {
    color: #ffffff;
}

/* Coluna de Redes Sociais */
.footer-inst-main .social-icons {
    display: flex;
    gap: 1.5rem;
}

.footer-inst-main .social-icons a {
    color: #ffffff;
    font-size: 3.5rem;
    transition: transform 0.3s ease;
}

.footer-inst-main .social-icons a:hover {
    transform: scale(1.1);
}

.footer-inst-main .ssl-logo {
    max-width: 200px;
}

/* --- Barra Inferior do Rodapé --- */
.footer-inst-bottom {
    border-top: 1px solid #eaeaea;
}

.footer-inst-bottom .powered-text {
    font-size: 14px;
    color: #555;
}

 .trn-logo {
    height: 35px;
    width: auto;
}


/* --- Ajustes para Mobile --- */
@media (max-width: 991px) {
    /* ... (suas regras existentes para .footer-inst-main) ... */
    .footer-inst-main {
        text-align: center;
    }
    .footer-inst-col {
        margin-bottom: 2.5rem;
    }
    .footer-inst-main .footer-logo,
    .footer-inst-main .ssl-logo {
        margin-left: auto;
        margin-right: auto;
    }
    .footer-inst-main .social-icons {
        justify-content: center;
    }
}

/* Media Query para o footer-bottom em telas de celular */
@media (max-width: 767px) {
    /* Altera o container principal para empilhar e centralizar os itens */
    .footer-inst-bottom {
        flex-direction: column; /* Coloca o texto em cima e a logo embaixo */
        gap: 1rem;              /* Adiciona um espaço entre eles */
        padding-top: 1.5rem;    /* Adiciona um respiro no topo */
        padding-bottom: 1.5rem; /* Adiciona um respiro embaixo */
    }

    /* Faz com que as duas colunas internas ocupem 100% da largura e centralizem seu conteúdo */
    .footer-inst-bottom > .col-6 {
        width: 100%;                /* Força a largura total, ignorando o col-6 */
        justify-content: center !important; /* Centraliza a logo, sobrescrevendo o 'justify-content-end' */
        text-align: center;         /* Garante que o texto fique centralizado */
    }
}
/* ==========================================================================
   Estilos para a Página de Serviços (Grid)
   ========================================================================== */

/* --- Estrutura Principal do Grid --- */
.servicos-grid {
    display: grid;
    grid-template-columns: 1fr; /* Padrão: 1 coluna para mobile */
    gap: 2.5rem; /* Espaçamento entre os cards */
}

/* --- Estilo do Card de Serviço Individual --- */
.servico-card {
    display: flex;
    flex-direction: column; /* Padrão: empilha imagem e texto no mobile */
    background-color: transparent; /* Fundo cinza claro para o card */
    padding: 1.5rem;
    border-radius: 5px;
}

.card-imagem img {
    width: 210px  !important;
    height: auto;
    object-fit: cover;
}

/* --- Conteúdo do Card (Número, Título, etc.) --- */
.card-conteudo {
    display: flex;
    flex-direction: column;
}

.card-conteudo a:focus {
    color: white;
    text-decoration: none;
}

.card-numero {
    font-size: 6rem;
    color: var(--black);
    line-height: 1;
    margin-bottom: 15px;
}

.card-titulo {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--titudo-servicos); /* Preto suave */
    margin-top: -0.5rem; /* Sobe um pouco para sobrepor o número */
    margin-bottom: 1rem;
}

.card-descricao {
    color: var(--titudo-servicos); /* Cinza para o texto */
    line-height: 1.6;
    flex-grow: 1; /* Empurra o botão para o final */
}

.btn-servico-card {
    background-color: var(--azul-botao-retifoz);
    width: 205px;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    margin-top: 1.5rem;
    transition: background-color 0.3s ease;
}


@media (max-width: 990px) {
    .card-imagem {
        display: flex;
        justify-content: center;
    }

    .btn-servico-card{
        margin-left: auto;
        margin-right: auto;
    }
}

/* ==========================================================================
   Responsividade para Desktop (2 colunas)
   ========================================================================== */
@media (min-width: 992px) {
    /* Transforma o grid em 2 colunas */
    .servicos-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* No desktop, o card fica com a imagem à esquerda e o texto à direita */
    .servico-card {
        flex-direction: row; 
    }

    .card-imagem {
        flex-basis: 40%; /* Imagem ocupa 40% da largura do card */
    }

    .card-conteudo {
        flex-basis: 60%; /* Conteúdo ocupa 60% */
    }

    .servicos-hero {
    -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
    
}

.servicos-hero {
    /* Suas regras de background continuam as mesmas */
    background-image: url('servico.jpeg');
}
}

/* ==========================================================================
   Estilos para o Cabeçalho da Página de Serviços (ESTRUTURA DE 2 PARTES)
   ========================================================================== */

.servicos-hero {
    /* Suas regras de background continuam as mesmas */
    background-size: 60% auto;
    background-position: right 72%;
    background-repeat: no-repeat; 


    
}

/* Barra de Título Azul com Degradê */
.hero-titulo-bar {
    /* Gradiente que começa azul sólido e fica transparente para a direita */
    background: linear-gradient(to right, var(--azul-botao-retifoz) 50%, transparent);
    padding: 2.5rem 0;
}

.hero-titulo-bar h1 {
    color: #ffffff;
    font-size: 3rem;
    margin: 0;
}

/* Seção de Descrição com Fundo Claro */
.hero-descricao-section {
    background-size: cover;
    background-position: center;
    padding: 4rem 0;
    background: linear-gradient(to right, var(--white) 70%, transparent);
}

.hero-descricao-section p {
    color: #000000; /* Cor escura para contrastar com o fundo claro */
    font-size: 1.6rem;
    max-width: 1300px; /* Limita a largura para melhor leitura */
}


/* ==========================================================================
   Ajustes para Mobile
   ========================================================================== */
@media (max-width: 767px) {
    .hero-titulo-bar {
        /* No mobile, o fundo fica azul sólido, pois o degradê pode não ficar bom */
        background: var(--azul-botao-retifoz);
        text-align: center;
        padding: 2rem 0;
    }

    .hero-titulo-bar h1 {
        font-size: 1.8rem;
    }

    .hero-descricao-section {
        padding: 2.5rem 0;
    }

    .hero-descricao-section p {
        font-size: 1.5rem;
        text-align: center;
    }
}
/* --- Estilos para os Banners Duplos --- */
.banners-duplos-section {
    padding: 35px 0;
}
.banner-wrapper {
    flex: 1;
    min-width: 300px; 
    max-width: 625px;
}
.banner-duplo-carousel img {
    width: 100%;
    border-radius: 15px;
}

/* ==========================================================
   Lógica de visibilidade Desktop vs Mobile
   ========================================================== */

/* Padrão para telas pequenas (Mobile) */
.banners-duplos-container.desktop {
    display: none; /* Esconde a versão de 2 colunas */
}
.banners-duplos-container.mobile {
    display: block; /* Mostra a versão de 1 coluna */
}

/* Para telas maiores (Desktop) */
@media (min-width: 768px) {
    .banners-duplos-container.desktop {
        display: flex; /* Mostra a versão de 2 colunas */
        justify-content: center;
        gap: 20px;
    }
    .banners-duplos-container.mobile {
        display: none; /* Esconde a versão de 1 coluna */
    }
}
/* --- Estilos para o Módulo de Busca por Veículo (VERSÃO CORRIGIDA) --- */
.busca-veiculo-container {
    background-color: #03003E; 
    padding: 2rem 1rem;
    color: #ffffff;
}

.busca-veiculo-grid {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.busca-veiculo-titulo {
    flex-shrink: 0; 
    font-size: 2rem;
    max-width: 200px; 
    line-height: 1.2;
}

.busca-veiculo-form {
    display: flex;
    gap: 1rem;
    width: 83%;
}

.busca-veiculo-form > .select2-container,
.busca-veiculo-form > .btn-encontrar-peca {
    flex: 1;
}

/* --- Estilos específicos para o Select2 --- */
.select2-container--default .select2-selection--single {
    background-color: #ffffff;
    border: none;
    border-radius: 8px;
    height: 50px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 50px;
    padding-left: 1rem;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #888;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 50px;
    right: 10px;
}

.select2-dropdown {
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default .select2-selection--single:focus {
    outline: none;
    box-shadow: none;
}

/* --- Estilos para o botão --- */
.btn-encontrar-peca {
    background-color: #cccccc;
    color: #333333;
    border: none;
    border-radius: 8px;
    padding: 0 1.5rem;
    height: 50px;
    white-space: nowrap;
    transition: background-color 0.3s ease;
    text-transform: uppercase;
    font-weight: bold;
}

.btn-encontrar-peca:disabled {
    cursor: not-allowed;
    color: var(--busca-preca);
    background-color: #cccccc;
}

.btn-encontrar-peca:not(:disabled) {
    background-color: #0d6efd;
    color: #ffffff;
    cursor: pointer;
}

/* --- Responsividade para Mobile (SEÇÃO CORRIGIDA) --- */
@media (max-width: 991px) {
    .busca-veiculo-grid {
        flex-direction: column; /* Coloca o título acima do formulário */
        align-items: center;   /* Centraliza o bloco todo */
        gap: 1.5rem;           /* Espaçamento entre título e formulário */
    }

    .busca-veiculo-form {
        flex-direction: column; /* Coloca os campos um embaixo do outro */
        width: 100%;            /* O formulário ocupa toda a largura disponível */
        max-width: 450px;       /* Limita a largura máxima em tablets, por exemplo */
        align-items: stretch;   /* Faz os filhos (campos) esticarem para ter o mesmo tamanho */
    }
    
    /* No celular, removemos o flex-grow e garantimos a largura total */
    .busca-veiculo-form > .select2-container,
    .busca-veiculo-form > .btn-encontrar-peca {
        flex: none; 
        width: 100%;
    }

    .busca-veiculo-titulo {
        text-align: center;
        margin-bottom: 0; /* O espaçamento agora é controlado pelo 'gap' do grid */
        max-width: none;
        font-size: 2rem; /* Fonte um pouco menor para caber melhor no celular */
    }
}
.page-account-login {
    background-color: #f4f5f7; /* Um fundo cinza claro para a página */
    padding: 50px 0;
}

.login-card {
    background-color: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #e0e0e0;
}

.login-title {
    font-family: 'Vogue Plain', sans-serif;
    text-align: center;
    font-size: 28px;
    margin-bottom: 10px;
    color: #333;
}

.login-subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 30px;
    line-height: 1.5;
}

.login-card .form-group {
    margin-bottom: 20px;
}

.login-card .control-label {
    font-weight: bold;
    color: #555;
    margin-bottom: 5px;
    font-size: 14px;
}

.login-card .form-control {
    height: 45px;
    border-radius: 5px;
}

.login-card .btn-primary {
    padding: 12px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
}

.login-card .btn-secondary {
    padding: 12px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    background-color: #e9ecef;
    border-color: #e9ecef;
    color: #333;
}
.login-card .btn-secondary:hover {
    background-color: #d8dde2;
    border-color: #d8dde2;
}


.forgotten-password-link {
    display: block;
    text-align: right;
    margin-top: 8px;
    font-size: 14px;
}

.login-divider {
    height: 1px;
    background-color: #e0e0e0;
    margin: 40px 0;
}

.input-group-btn .btn {
    height: 45px;
    border-left: 0;
    border-color: #ced4da;
    background: #fff;
}

@media (max-width: 990px) {
 .login-card {
    
    padding: 10px;
  }
}
.page-account-register {
  background-color: #f4f5f7;
  padding: 50px 0px;
}

.register-card {
  background-color: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid #e0e0e0;
}
.register-card h1 {
  font-family: "Vogue Plain", sans-serif;
  text-align: center;
  font-size: 28px;
  margin-bottom: 10px;
  color: #333;
}
.register-card p {
  text-align: center;
  color: #666;
  margin-bottom: 30px;
  line-height: 1.5;
  font-size: 15px;
}
.register-card legend {
  font-size: 1.2em;
  font-weight: bold;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 25px;
  width: 100%;
}

/* Força os labels a ficarem em cima dos campos em todas as telas */
.register-card .form-horizontal .control-label {
  text-align: left;
  margin-bottom: 8px;
  padding-top: 0;
}
.register-card .form-horizontal .col-sm-2,
.register-card .form-horizontal .col-sm-10 {
  width: 100%;
  margin-left: 0;
}
.register-card .form-control {
  height: 45px;
  border-radius: 5px;
}
.register-card .buttons {
  text-align: right;
}
.register-card .buttons .btn-primary {
  padding: 12px 25px;
  font-size: 16px;
  width: auto; /* Botão não ocupa mais a largura toda */
}

/* Estilos para o ícone de olho da senha */
.password-wrapper {
  position: relative;
}

.password-toggle-icon {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  cursor: pointer;
  color: #999;
}

@media (max-width: 990px) {
  .register-card .buttons {
    text-align: center;
  }

  .register-card {
    padding: 10px;
  }
}
/*
** Estilos para a página Minha Conta (Dashboard)
*/

/* Fundo da página, igual ao do registro */
.page-account-dashboard {
  background-color: #f4f5f7;
  padding-bottom: 30px;
  padding-top: 30px;
}

/* O card principal que contém todo o conteúdo */
.account-card {
  background-color: #fff;
  padding: 30px 40px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid #e0e0e0;
}

/* Título principal da página */
.account-card .page-title {
  font-family: "Vogue Plain", sans-serif; /* Usando a mesma fonte do registro */
  text-align: center;
  font-size: 28px;
  margin-bottom: 10px;
  color: #333;
}

/* Subtítulo abaixo do título principal */
.account-card .page-subtitle {
  text-align: center;
  color: #666;
  margin-bottom: 40px;
  font-size: 15px;
}

/* Container para os blocos de links (usando CSS Grid) */
.account-sections-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(250px, 1fr)
  ); /* Layout responsivo */
  gap: 25px; /* Espaço entre os blocos */
}

/* Cada bloco individual (Minha Conta, Meus Pedidos, etc.) */
.account-section {
  background-color: #fdfdfd;
  padding: 20px;
  border: 1px solid #ececec;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.account-section:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

/* Títulos dos blocos (H3) */
.account-section h3 {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-top: 0;
  margin-bottom: 15px;
}

/* Ícones nos títulos dos blocos */
.account-section h3 i {
  margin-right: 8px;
  color: #555;
}

/* Estilo da lista e dos links */
.account-section ul {
  padding-left: 0;
  margin-bottom: 0;
}

.account-section ul li a {
  display: block;
  padding: 8px 5px;
  color: #555;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.account-section ul li a:hover {
  background-color: #f0f0f0;
  color: #111;
}

@media (max-width: 767px) {
  .account-card {
    padding: 15px 20px;
  }
}
/* --- ESTILOS PARA A PÁGINA DE SUCESSO --- */

.success-content {
    padding: 20px 0; /* Adiciona um espaçamento interno */
}

.success-icon {
    font-size: 60px; /* Tamanho do ícone de check */
    color: #28a745; /* Cor verde para sucesso */
    margin-bottom: 20px;
}

/* Garante que o título e o subtítulo tenham um bom espaçamento */
.success-content .login-title {
    font-size: 26px;
    margin-bottom: 15px;
}

.success-content .login-subtitle {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Faz o botão não ocupar a largura toda */
.success-content .btn-primary {
  width: auto;
  padding-left: 30px;
  padding-right: 30px;
}
/* Estilos para a página de Edição de Conta, baseados no estilo de Registro/Alterar Senha */

.page-account-edit {
    background-color: #f4f5f7;
    padding: 20px 05px;
}

.edit-account-card {
    background-color: #fff;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #e0e0e0;
}

.edit-account-card h1 {
    font-family: "Vogue Plain", sans-serif;
    text-align: center;
    font-size: 28px;
    margin-bottom: 30px;
    color: #333;
}

.edit-account-card legend {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 25px;
    width: 100%;
}

/* Força os labels a ficarem em cima dos campos */
.edit-account-card .form-horizontal .control-label {
    text-align: left;
    margin-bottom: 8px;
    padding: 0;
    font-weight: bold;
    color: #555;
    font-size: 14px;
}

.edit-account-card .form-horizontal .col-sm-2,
.edit-account-card .form-horizontal .col-sm-10 {
    width: 100%;
    margin: 0;
    padding: 0;
}

.edit-account-card .form-control {
    height: 45px;
    border-radius: 5px;
}

/* Estilos para o ícone de olho da senha (se houver, embora a página de edição não tenha por padrão) */
.password-wrapper {
    position: relative;
}

.password-wrapper .form-control {
    padding-right: 40px; /* Espaço para o ícone */
}

.password-toggle-icon {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    cursor: pointer;
    color: #999;
    z-index: 2; /* Garante que o ícone fique acima do input */
}

/* Botões com layout flexbox */
.edit-account-card .buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.edit-account-card .btn-primary,
.edit-account-card .btn-default {
    padding: 12px 25px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
}

/* Adaptação para campos de custom_field, se existirem na edição de conta */
.edit-account-card .custom-field .radio label,
.edit-account-card .custom-field .checkbox label {
    display: block; /* Garante que cada opção fique em uma linha separada */
    margin-bottom: 5px;
    font-weight: normal;
}
/* Estilos para a página de Alterar Senha, baseados no estilo da página de Registro */

.page-account-password {
  background-color: #f4f5f7;
  padding: 50px 10px;
}

.password-card {
  background-color: #fff;
  padding: 10px; /* Um pouco mais de padding para respirar */
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid #e0e0e0;
}

.password-card h1 {
  font-family: "Vogue Plain", sans-serif;
  text-align: center;
  font-size: 28px;
  margin-bottom: 30px;
  color: #333;
}

/* A legenda pode ser útil aqui para separar a seção */
.password-card legend {
  font-size: 1.2em;
  font-weight: bold;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 25px;
  width: 100%;
}

/* Força os labels a ficarem em cima dos campos, como na página de registro */
.password-card .form-horizontal .control-label {
  text-align: left;
  margin-bottom: 8px;
  padding: 0;
  font-weight: bold;
  color: #555;
  font-size: 14px;
}

.password-card .form-horizontal .col-sm-2,
.password-card .form-horizontal .col-sm-3, /* Adicionado para compatibilidade */
.password-card .form-horizontal .col-sm-9, /* Adicionado para compatibilidade */
.password-card .form-horizontal .col-sm-10 {
  width: 100%;
  margin: 0;
  padding: 0;
}

.password-card .form-control {
  height: 45px;
  border-radius: 5px;
}

/* Estilos para o ícone de olho da senha (do seu register.css) */
.password-wrapper {
  position: relative;
}

.password-toggle-icon {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  cursor: pointer;
  color: #999;
}

/* Botões com layout flexbox (melhor que o do register) */
.password-card .buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.password-card .btn-primary,
.password-card .btn-default {
    padding: 12px 25px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
}
/* Estilos para a página da Lista de Endereços */

.page-account-address {
    background-color: #f4f5f7;
    padding: 50px 15px;
}

.address-book-card {
    background-color: #fff;
    padding: 15px 10px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #e0e0e0;
}

.address-book-card h2 {
    font-family: "Vogue Plain", sans-serif;
    text-align: center;
    font-size: 28px;
    margin-bottom: 35px;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

/* Container para a lista de endereços */
.address-list {
    margin-bottom: 30px;
}

/* Estilo para cada cartão de endereço individual */
.address-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 15px;
    transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.address-entry:hover {
    border-color: #ced4da;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Detalhes do endereço (o texto) */
.address-details {
    color: #555;
    line-height: 1.6;
    flex-grow: 1; /* Faz com que o texto ocupe o espaço disponível */
}

/* Container dos botões de ação */
.address-actions {
    margin-left: 20px; /* Espaçamento entre o texto e os botões */
    display: flex;
    flex-direction: column; /* Botões um em cima do outro em telas menores */
    gap: 10px; /* Espaço entre os botões */
}

.address-actions .btn {
    min-width: 90px;
    font-weight: bold;
    font-size: 14px;
}

/* Mensagem quando não há endereços */
.empty-message {
    text-align: center;
    color: #666;
    padding: 40px 20px;
    background-color: #f8f9fa;
    border: 1px dashed #ced4da;
    border-radius: 8px;
    margin-bottom: 30px;
}

/* Botões principais (Voltar, Novo Endereço) */
.address-book-card .buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.address-book-card .btn-primary,
.address-book-card .btn-default {
    padding: 12px 25px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
}

/* Responsividade para telas menores */
@media (max-width: 767px) {
    .address-entry {
        flex-direction: column;
        align-items: flex-start;
    }
    .address-actions {
        margin-left: 0;
        margin-top: 20px;
        flex-direction: row; /* Botões lado a lado */
        width: 100%;
    }
    .address-actions .btn {
        flex-grow: 1; /* Faz os botões ocuparem o espaço igualmente */
    }
    .address-book-card h2 {
        font-size: 24px;
    }
    .address-book-card .buttons {
        flex-direction: column-reverse;
        gap: 15px;
    }
    .address-book-card .buttons a {
        width: 100%;
        text-align: center;
    }
}
/* Estilos para a página do Formulário de Endereço */

.page-address-form {
    background-color: #f4f5f7;
    padding: 50px 15px;
}

.address-form-card {
    background-color: #fff;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #e0e0e0;
}

.address-form-card h1 {
    font-family: "Vogue Plain", sans-serif;
    text-align: center;
    font-size: 28px;
    margin-bottom: 35px;
    color: #333;
}

/* Força os labels a ficarem em cima dos campos */
.address-form-card .form-horizontal .control-label {
    text-align: left;
    margin-bottom: 8px;
    padding: 0;
    font-weight: bold;
    color: #555;
    font-size: 14px;
}

.address-form-card .form-horizontal .col-sm-2,
.address-form-card .form-horizontal .col-sm-10 {
    width: 100%;
    margin: 0;
    padding: 0;
}

.address-form-card .form-control {
    height: 45px;
    border-radius: 5px;
}

/* Ajuste para os botões de rádio (Endereço Padrão) */
.address-form-card .radio-inline {
    margin-top: 10px;
    margin-right: 20px;
}
.address-form-card .radio-inline input[type="radio"] {
    margin-top: 2px;
}

/* Botões com layout flexbox */
.address-form-card .buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.address-form-card .btn-primary,
.address-form-card .btn-default {
    padding: 12px 25px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
}
/* ==========================================================================
   VERSÃO CORRIGIDA: Estilos específicos para a página do carrinho
   As regras agora começam com .page-shopping-cart para evitar conflitos.
   ========================================================================== */

.page-shopping-cart {
    background-color: #f4f5f7;
}

/* Remove os breadcrumbs apenas na página do carrinho */
.page-shopping-cart .breadcrumb {
    display: none;
}

.page-shopping-cart .container {
    max-width: 1280px;
}

/* Título da página (agora específico para o carrinho) */
.page-shopping-cart #content > h1 {
    /* font-family: "Vogue Plain", sans-serif; */
    font-size: 2.5rem;
    margin-bottom: 30px;
    margin-top: 30px;
    /* padding-bottom: 20px; */
    /* border-bottom: 1px solid #e0e0e0; */
}

/* LISTA DE PRODUTOS */
.page-shopping-cart .cart-products-list {
    background-color: #f4f5f7;
    border-radius: 8px;
    padding: 10px 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.page-shopping-cart .cart-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #e9ecef;
    color: #6c757d;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: 0.5px;
}

.page-shopping-cart .cart-item {
    display: flex;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #f1f3f5;
}
.page-shopping-cart .cart-item:last-child {
    border-bottom: none;
}

.page-shopping-cart .cart-header > div,
.page-shopping-cart .cart-item > div {
    display: flex;
    align-items: center;
}

.page-shopping-cart .cart-product { flex-basis: 40%; }
.page-shopping-cart .cart-price { flex-basis: 20%; justify-content: center; }
.page-shopping-cart .cart-quantity { flex-basis: 20%; justify-content: center; }
.page-shopping-cart .cart-total { flex-basis: 20%; justify-content: flex-end; }


.page-shopping-cart .cart-product-details {
    display: flex;
    align-items: center;
}
.page-shopping-cart .cart-product-details img {
    width: 80px;
    height: auto;
    border-radius: 6px;
    margin-right: 20px;
}

.page-shopping-cart .cart-product-details .cart-product-title {
    font-weight: bold;
    color: #343a40;
    text-decoration: none;
    font-size: 16px; /* Adicionado para garantir um tamanho padrão */
    line-height: 1.5; /* Adicionado para garantir espaçamento adequado */
    height: auto; /* Garante que a altura não seja fixa */
}
.page-shopping-cart .cart-product-details .cart-product-title:hover {
    color: #000;
}

.page-shopping-cart .cart-price, .page-shopping-cart .cart-total {
    font-weight: 500;
}

/* Seletor de Quantidade Moderno */
.page-shopping-cart .quantity-selector {
    display: flex;
    align-items: center;
    border: 1px solid #ced4da;
    border-radius: 5px;
}
.page-shopping-cart .quantity-selector button {
    background: none;
    border: none;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    padding: 5px 12px;
    color: #495057;
}
.page-shopping-cart .quantity-selector input {
    width: 40px;
    text-align: center;
    border: none;
    background: transparent;
    font-weight: bold;
    -moz-appearance: textfield; /* Firefox */
}
.page-shopping-cart .quantity-selector input::-webkit-outer-spin-button,
.page-shopping-cart .quantity-selector input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.page-shopping-cart .cart-remove-icon {
    color: #6c757d;
    font-size: 1.2rem;
    margin-left: 20px;
    text-decoration: none;
}
.page-shopping-cart .cart-remove-icon:hover {
    color: #dc3545;
}


/* CARD DE RESUMO (SIDEBAR) */
.page-shopping-cart .cart-summary-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 20px;
}

.page-shopping-cart .cart-summary-card h3 {
    /* font-family: "Vogue Plain", sans-serif; */
    font-size: 16px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e9ecef;
    text-align: center;
}

.page-shopping-cart .summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 15px;
}
.page-shopping-cart .summary-row span:first-child {
    color: #6c757d;
}
.page-shopping-cart .summary-row span:last-child {
    font-weight: 500;
    color: #212529;
}

/* Destaca a linha do Total */
.page-shopping-cart .summary-row.total {
    font-size: 15px;
    font-weight: bold;
    padding-top: 15px;
    margin-top: 10px;
    border-top: 1px solid #e9ecef;
}
.page-shopping-cart .summary-row.total span {
    color: #212529;
}

.page-shopping-cart .cart-summary-card .btn-checkout {
    width: 100%;
    padding: 11px;
    font-size: 17px;
    font-weight: bold;
    margin-top: 20px;
}

/* Estilo para módulos (Cupom, Frete, etc) */
.page-shopping-cart #accordion {
    margin-top: 30px;
}

.page-shopping-cart .buttons.main-actions {
    margin-top: 30px;
    margin-bottom: 30px;
}

/* Responsividade */
@media (max-width: 991px) {
    .page-shopping-cart .cart-summary-card {
        margin-top: 30px;
        position: static;
    }
}

@media (max-width: 767px) {
    .page-shopping-cart .cart-header { 
        display: none; 
    }

    /* 1. O card principal de cada item */
    .page-shopping-cart .cart-item {
        background: #fff;
        padding: 15px;
        border-radius: 8px;
        margin-bottom: 15px;
        border: 1px solid #e9ecef;
        display: flex;
        flex-wrap: wrap; /* Permite que os itens quebrem para a próxima linha */
        align-items: center; /* Alinha verticalmente os itens da mesma linha */
    }

    /* 2. Esconde os rótulos "Produto:", "Preço:", etc. */
    .page-shopping-cart .cart-item > div::before {
        display: none;
    }

    /* 3. Linha superior: Imagem e Nome do Produto */
    .page-shopping-cart .cart-product {
        flex-basis: 100%; /* Faz esta seção ocupar a linha inteira */
        margin-bottom: 15px;
    }
    .page-shopping-cart .cart-product-details {
        align-items: flex-start; /* Alinha imagem e texto no topo */
    }
    .page-shopping-cart .cart-product-details img {
        width: 70px !important;
        flex-shrink: 0 !important; /* Impede que a imagem encolha */
    }
    .page-shopping-cart .cart-product-details .cart-product-title {
        font-size: 15px;
    }

    /* 4. Linha inferior: Controles (Preço, Quantidade, Total) */
    .page-shopping-cart .cart-price,
    .page-shopping-cart .cart-quantity,
    .page-shopping-cart .cart-total {
        flex-basis: auto; /* Deixa o flexbox decidir o tamanho */
        border-bottom: none; /* Remove bordas internas desnecessárias */
        margin-bottom: 0;
        padding-bottom: 0;
    }
    
    .page-shopping-cart .cart-price {
        font-size: 1rem;
        font-weight: bold;
        color: #555;
    }

    .page-shopping-cart .cart-quantity {
       margin: 0 auto; /* Centraliza o seletor de quantidade no espaço disponível */
    }

    .page-shopping-cart .cart-total {
        margin-left: auto; /* Empurra o total para a extremidade direita */
        font-weight: bold;
        font-size: 1.1rem;
    }

    .page-shopping-cart .cart-remove-icon {
        margin-left: 15px;
    }

    .page-shopping-cart .buttons.main-actions {
        display: none;
    }
    .page-shopping-cart #content > h1 {
        text-align: center;
    }
}
/* ==========================================================================
   Estilos para a Página de Personalização - Oeste Wood
   ========================================================================== */

/* 1. Container Principal e Fundo */
#personalization-page {
    background-color: #f8f9fa; /* Fundo cinza bem claro */
    font-family: 'Poppins', sans-serif; /* Uma fonte moderna e legível */
    color: #495057;
}

#personalization-page .container {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* 2. Títulos e Textos Padrão */
.page-title {
    font-family: 'Vogue Plain', sans-serif; /* Usando a fonte do seu tema */
    font-size: clamp(2.5rem, 5vw, 4rem); /* Tamanho de fonte responsivo */
    font-weight: bold;
    color: #212529;
    margin-bottom: 0.5rem;
}

.section-title {
    font-family: 'Vogue Plain', sans-serif;
    font-size: clamp(2.5rem, 4vw, 3rem);
    font-weight: bold;
    color: #212529;
    margin-bottom: 2rem;
}

.lead-text {
    font-size: 2rem;
    color: #6c757d;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

/* 3. Seção Hero (Topo) */
.hero-section {
    padding: 3rem 1rem;
    margin-bottom: 3rem;
}

/* 4. Seção de Processos */
.process-section {
    margin-bottom: 4rem;
}
.process-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}

.process-icon {
    font-size: 2.5rem;
    color: #1a6432; /* Cor verde do seu tema */
    margin-bottom: 1rem;
}
.process-title {
    font-size: 2rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.75rem;
}
.process-description {
    font-size: 1.8rem;
    line-height: 1.6;
}

/* 5. Seção "O que podemos gravar" */
.ideas-section {
    margin-bottom: 4rem;
}
.idea-item {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 500;
    transition: background-color 0.3s, color 0.3s;
}
.idea-item i {
    color: var(--cor-oestewood);
    transition: color 0.3s;
}
.idea-item:hover i {
    color: #fff;
}

/* 6. Seção da Galeria de Imagens */
.gallery-section {
    margin-bottom: 4rem;
}
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.gallery-image {
    width: 100%;
    /* height: 243px; */ /* Altura fixa para as imagens ficarem uniformes */
    object-fit: cover; /* Garante que a imagem preencha o espaço sem distorcer */
    transition: transform 0.4s ease;
    padding: 15px;
}
.gallery-item:hover .gallery-image {
    transform: scale(1.1);
}
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.gallery-item:hover .gallery-overlay {
    opacity: 1;
}
.gallery-overlay i {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}
.gallery-overlay p {
    font-weight: 500;
    margin: 0;
    padding: 0 1rem;
}

/* 7. Seção de Informações */
.info-section {
    padding: 2rem 0;
}
.info-card {
    background-color: #e9ecef; /* Um cinza um pouco mais escuro que o fundo */
    border-radius: 12px;
    padding: 2rem;
    border-left: 5px solid var(--cor-oestewood);
}
.info-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.info-list li {
    font-size: 1.6rem;
    margin-bottom: 1rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.info-list li:last-child {
    margin-bottom: 0;
}
.info-list i {
    color: var(--cor-oestewood);
    font-size: 1.5rem;
    margin-top: 0.25rem;
}

@media (max-width: 768px) {

    /* Ajusta o padding do card para telas menores */
    .info-card {
        padding: 1.5rem;
    }

    /* Esta é a regra principal da correção */
    .info-list li {
        /* Remove o layout de colunas (lado a lado) */
        display: block; 
        font-size: 1.5rem; /* Opcional: fonte um pouco menor no celular */
    }

    /* Adiciona um espaço à direita do ícone para não colar no texto */
    .info-list li i {
        margin-right: 0.75rem;
        /* Alinha o ícone verticalmente com a primeira linha do texto */
        vertical-align: middle; 
    }

    /* Garante que o texto em negrito se comporte bem */
    .info-list li strong {
        vertical-align: middle;
    }
}
/*
** ========================================================================
** Estilos para Páginas de Pedidos (Lista e Detalhes)
** ========================================================================
*/

/* 1. Base da Página (fundo e espaçamento) */
.page-account-orders {
  background-color: #f4f5f7;
  padding: 30px 0;
}

/* 2. Card Principal (container do conteúdo) */
.order-card {
  background-color: #fff;
  padding: 30px 40px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid #e0e0e0;
  margin-top: 20px;
}

/* Títulos dentro do card */
.order-card .page-title {
  font-family: "Vogue Plain", sans-serif;
  text-align: center;
  font-size: 28px;
  margin-bottom: 10px;
  color: #333;
}

.order-card .page-subtitle {
  text-align: center;
  color: #666;
  margin-bottom: 40px;
  font-size: 15px;
}

/* Títulos de seção (ex: Detalhes, Endereços, Produtos) */
.order-card .section-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-top: 30px;
    margin-bottom: 20px;
}
.order-card .section-title:first-child {
    margin-top: 0;
}

/* 3. Estilização Moderna das Tabelas */
.table-orders {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.table-orders thead {
  background-color: #f8f9fa;
}

.table-orders thead td {
  font-weight: bold;
  color: #495057;
  padding: 12px 15px;
  font-size: 13px;
  text-transform: uppercase;
  border-bottom: 2px solid #e0e0e0;
}

.table-orders tbody td {
  padding: 15px;
  border-bottom: 1px solid #e9ecef;
  color: #555;
  vertical-align: middle;
}

.table-orders tbody tr:last-child td {
  border-bottom: none;
}

.table-orders tbody tr:hover {
  background-color: #fdfdfd;
}

/* Botão de visualizar na lista */
.table-orders .btn-info {
    background-color: #333;
    border-color: #333;
    color: #fff;
    border-radius: 5px;
    padding: 5px 10px;
}
.table-orders .btn-info:hover {
    background-color: #000;
    border-color: #000;
}

/* 4. Layouts em Grid para Detalhes do Pedido */
.order-details-grid,
.order-address-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px; /* Espaço entre as colunas */
}

.order-details-grid .detail-box,
.order-address-grid .address-box {
    background-color: #fdfdfd;
    padding: 20px;
    border: 1px solid #ececec;
    border-radius: 6px;
}
.order-details-grid .detail-box b,
.order-address-grid .address-box h4 {
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

/* 5. Responsividade para Celulares */
@media (max-width: 991px) {
    .order-card {
        padding: 5px;
    }
    .order-details-grid,
    .order-address-grid {
        grid-template-columns: 1fr; /* Coluna única em telas menores */
    }
}


/* ======================================================= */
/* ====== SUBSTITUA TODA ESTA SEÇÃO NO SEU CSS ===== */
/* ======================================================= */

@media (max-width: 767px) {
    .order-card .page-title {
        font-size: 24px;
    }
    
    /* Estrutura do card principal no celular */
    .table-orders thead {
        display: none;
    }
    .table-orders, .table-orders tbody, .table-orders tr, .table-orders td {
        display: block;
        width: 100%;
    }
    .table-orders tr {
        margin-bottom: 15px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 5px 10px;
    }

    /* --- LAYOUT EMPILHADO (SUA SUGESTÃO) --- */
    .table-orders td {
        display: block; /* Garante que a célula seja um bloco */
        border: none;
        border-bottom: 1px solid #f0f0f0;
        padding: 12px 5px;
        text-align: left !important; /* Força todo o conteúdo a ficar alinhado à esquerda */
    }
    .table-orders tr:last-child,
    .table-orders td:last-child {
      border-bottom: none;
    }

    /* Estilizando o "Label" para ficar em cima */
    .table-orders td:before {
        content: attr(data-label);
        display: block; /* FAZ O LABEL OCUPAR A LINHA DE CIMA */
        font-weight: bold;
        font-size: 12px;
        text-transform: uppercase;
        color: #000000;
        margin-bottom: 5px; /* Cria um espaço entre o label e o conteúdo */
    }

    /* Ajuste para o conteúdo de Ações */
     .table-orders td[data-label="Ação"] {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .table-orders td[data-label="Ação"]::before {
        display: none; /* Esconde o label "Ação:" para ficar mais limpo */
    }
    .table-orders td[data-label="Ação"] .btn {
       flex-grow: 1; /* Faz os botões crescerem e ocuparem o espaço */
    }
}
.whatsapp {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 40px;
  right: 40px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  box-shadow: 1px 1px 2px #888;
}

@media (max-width: 767px) {
  .whatsapp {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 82px;
    right: 7px;
    background-color: #25d366;
    color: #fff;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 1px 1px 2px #888;
  }
}