
      /* Category Ads */

      @media (max-width: 768px) {
        #ads .card-detail-badge {      
              background: #004e86;
              text-align: center;
              border-radius: 20px 20px 20px 20px;
              color: #fff;
              padding: 5px 5px;
              font-size: 10px;
              font-weight: bold;
          }
          .title-zero{
            margin-top: 20px;
            font-size: 28px;
          }
          .p-title-zero{
            font-size: 15px; 
            margin-top: 15px;"
          }
      }
      @media (min-width: 769px) {
        #ads .card-detail-badge {      
              background: #004e86;
              text-align: center;
              border-radius: 30px 30px 30px 30px;
              color: #fff;
              padding: 5px 17px;
              font-size: 14px;
              font-weight: bold;
          }
        .title-zero{
          margin-top: 20px;
          font-size: 38px;
        }
        .p-title-zero{
          font-size: 20px; 
          margin-top: 15px;
        }
      }

      

      #ads {
          margin: 30px 0 30px 0;
         
      }

      #ads .card-notify-badge {
              position: absolute;
              left: -10px;
              top: -20px;
              background: #f2d900;
              text-align: center;
              border-radius: 30px 30px 30px 30px; 
              color: #000;
              padding: 5px 10px;
              font-size: 14px;

          }

      

      .card-marca:hover{
        transform: scale(1.1);
        box-shadow: 12px 15px 20px 0px rgba(46,61,73,0.75);
        border-radius: 4px;
        cursor: pointer;
        background-color: #e69616;
      }

  

			.hero{
			  background-image: url(assets/imagens/<?php echo $imagem_principal; ?>);
			  background-size: cover;
			  background-position: center;
			  background-repeat: no-repeat;
			  width: 100%;
			  max-height: 564px;
			  overflow: hidden;
			  
			}

			.conceptual{
			  background-image: url(assets/imagens/<?php echo $querocomprar['fundo']; ?>);
			  background-size: cover;
			  background-position: top;
			  background-repeat: no-repeat;
			  width: 100%;
			  height: 100%;
			  border-top: #D17600 12px solid;
			  margin-top: 0px;
			}

			.btn-news:hover{
				background-color: #003e6b !important;
    			color:  #ffffff !important;
			}
			.btn-news{
				background-color: #004e86 !important;
			}
			.titulo{
				font-family: 'Concert One', cursive;
				font-size: 32px;
				text-transform: uppercase;
				color: #004e86;
			}
			#degrade {
			  height: 100%;
			  background: #ffffff; /* Old browsers */
        background: -moz-linear-gradient(top, #ffffff 1%, #fffdf7 60%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, #ffffff 1%,#fffdf7 60%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, #ffffff 1%,#fffdf7 60%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fffdf7',GradientType=0 ); /* IE6-9 */
			}

      .btn-search{
        background-color: #ff0000; 
        color: white;
        border: none;
        cursor: pointer;
      }

      .btn-search:hover{
        background-color: #004e86;
        color: #fff;
      }

      

      .ui-widget-content { border: 1px solid #004e86; background: #fff; color: #222222; }
      .ui-widget-header { border: 1px solid #aaaaaa; background: #004e86; color: #004e86; }
      .ui-slider { position: relative; text-align: left; }
      .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
      .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }

      @media (max-width: 768px) {
       
        .top-mobile{
          margin-top: 20px;
        }
        .card-title {
          font-size: 15px !important;
          height: 58px !important;
        }
        .car-price {
          font-size: 12px;
        }
        .car-item {
          font-size: 12px;
          border: none !important;
        }
        .zoom:hover{
          transform: scale(1.0);
        }
      }
  

      @media (min-width: 769px){
        .car-box {
          height: 200px;
        }
        .car-price {
          font-size: 22px;
        }
        .car-item {
          font-size: 17px;
        }
        .card-title {
          height: 38px !important;
          font-size: 20px !important;
        }
        .zoom:hover{
          transform: scale(1.1);
        }
      }

      .marca-img:hover{
        opacity: 0.8;
      }

      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }


      li {
        margin: 0;  
        padding: 0;
      }

      input[type="checkbox"][id^="cb"] {
        display: none;
      }

      label {
        border: 1px solid #fff;
        cursor: pointer;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      @media (max-width: 768px) {
        label::before {
          background-color: white;
          color: white;
          content: " ";
          display: block;
          border-radius: 50%;
          border: 1px solid grey;
          position: absolute;
          top: -5px;
          left: -5px;
          width: 25px;
          height: 25px;
          text-align: center;
          transition-duration: 0.4s;
          transform: scale(0);
        }
      }

      @media (min-width: 769px) {
        label::before {
          background-color: white;
          color: white;
          content: " ";
          display: block;
          border-radius: 50%;
          border: 1px solid grey;
          position: absolute;
          top: -5px;
          left: -5px;
          width: 25px;
          height: 25px;
          text-align: center;
          transition-duration: 0.4s;
          transform: scale(0);
        }
      }

      label img {
        transition-duration: 0.2s;
        transform-origin: 50% 50%;
      }

      :checked+label {
        border-color: #ddd;
      }

      :checked+label::before {
        content: "✓";
        background-color: #004e86;
        transform: scale(1);
      }

      :checked+label img {
        transform: scale(0.9);
        box-shadow: 0 0 5px #333;
        z-index: -1;
      }


      @media (max-width: 768px) {
        .form-custom-comprar {
          width: 290px !important;
          background: #004999!important;
          padding: 0px!important;
          margin-left:  -10px;
          line-height: 0.2!important;
          height: 40px !important;
          border: 1px solid #004999!important;
         } 
         #div-funciona{
          margin-left: 35px;
         }
         #comprar-gif{
            width: 350px;
            margin-left: -10px;
         }
      }
      @media (min-width: 769px) {
        .form-custom-comprar {
          width: 270px !important;
          background: #004999!important;
          padding: 0px!important;
          line-height: 0.2!important;
          height: 40px !important;
          border: 1px solid #004999!important;
         } 
         #div-funciona{
          margin-left: 80px;
         }
      }

      .fundo-carro-zero{
        background: url('assets/imagens/carro-zero-bk.png') fixed no-repeat;
        background-size: cover;
        background-position-x: center;
      }


.btn-whatsapp {
  background-color: #25D366;
  color: white;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.btn-whatsapp:hover {
  background-color: #1ebe5d;
  color: white;
  text-decoration: none;
}

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

/* Header verde no atacado */
.theme-atacado .navbar.bg-primary { background-color: #08a585 !important; }
.theme-atacado .border-special { border-color: #057462 !important; }
.theme-atacado .navbar.bg-primary .nav-link,
.theme-atacado .navbar.bg-primary .navbar-brand { color: #fff !important; }

/* Footer sem a imagem e com cor sólida no atacado */
.theme-atacado .footer {
  background-image: none !important;   /* derruba o bg do custom.css */
  background-color: #08a585 !important;
  border-top: 3px solid #057462;
}

/* Texto do footer em branco no atacado */
.theme-atacado .footer,
.theme-atacado .footer .text-white,
.theme-atacado .footer .footer-link,
.theme-atacado .footer a,
.theme-atacado .footer span,
.theme-atacado .footer h5,
.theme-atacado .footer small {
  color: #fff !important;
}
.theme-atacado .footer .footer-link:hover { opacity: .9; text-decoration: none; }

/* Mantém o botão WhatsApp como está */
.theme-atacado .whatsapp-float { background-color: #25d366 !important; }


/* Card moderno */
.card{
  border:0;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 8px 26px rgba(0,0,0,.08);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(0,0,0,.12);
}

/* Área da foto com proporção fixa e respiro no topo */
.car-media{
  position:relative;
  width:100%;
  aspect-ratio:4/3;           /* mobile */
  background:#f5f7fa;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:8px;            /* não grudar no topo */
  box-sizing:border-box;
}

/* Fallback caso o browser não suporte aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  .car-media::before{ content:""; display:block; padding-top:75%; }
  .car-media > a, .car-media > img, .car-media > picture{
    position:absolute; inset:0; display:block;
  }
}

/* Imagem preenche bonito, sem distorcer */
.car-media .card-img-top{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center;
  display:block;
}

/* Desktop: levemente mais wide */
@media (min-width: 992px){
  .car-media{ aspect-ratio:16/10; }
}

/* Tipografia do card */
.card-title{ font-size:18px; line-height:1.25; margin-bottom:8px; }
.car-price{ font-size:20px; margin-bottom:8px; }
.car-item{ font-size:14px; }

/* Botão Atacado (verde) */
.btn-atacado{
  background:#08a585 !important;
  border-color:#08a585 !important;
  color:#fff !important;
}
.btn-atacado:hover{
  filter:brightness(0.95);
  color:#fff !important;
}

/* Espaço vertical entre fileiras */
.grid-atacado > [class*="col-"]{ margin-bottom:1.25rem; }
