body {
           font-family: 'Poppins', sans-serif !important;
           margin: 0;
           background: #fff;
       }

       header {
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: 10px 20px;
           background: #fff;
           border-bottom: 1px solid #eee;
           box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
       }

       .logo img {
           height: 30px;
       }

       .menu-icon,
       .cart-icon {
           font-size: 1.5rem;
           cursor: pointer;
           position: relative;
       }

       .cart-icon img {
           height: 30px;
       }

       .cart-badge {
           position: absolute;
           top: -5px;
           right: -5px;
           background: red;
           color: #fff;
           border-radius: 50%;
           width: 18px;
           height: 18px;
           font-size: 0.75rem;
           display: flex;
           align-items: center;
           justify-content: center;
       }

       /* Carrossel */
       .carousel-item {
           position: relative;
           transition: transform 1s ease, opacity 1s ease;
           /* Transição suave */
       }

       .carousel-item img {
           width: 100%;
           display: block;
       }

       /* ✅ Degradê sobreposto */
       /* ✅ Degradê mais alto e mais branco */
       .carousel-item::after {
           content: "";
           position: absolute;
           bottom: 0;
           left: 0;
           width: 100%;
           height: 65%;
           /* aumentei de 50% para 65% */
           background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
       }

       /* ✅ Legenda mais para baixo */
       /* ✅ Deixar a área de legenda com altura fixa */
       .product-info {
           text-align: center;
           position: absolute;
           bottom: 10px;
           /* mantém a posição na base */
           left: 50%;
           transform: translateX(-50%);
           z-index: 2;
           width: 90%;
           min-height: 120px;
           /* ✅ altura fixa para todas as legendas */
           display: flex;
           flex-direction: column;
           justify-content: flex-end;
           /* ✅ alinha conteúdo no fundo */
       }

       /* ✅ Ajuste para título e preço ficarem consistentes */
       .product-title {
           font-size: 1.3rem;
           color: #333;
           font-weight: 600;
           margin-bottom: 5px;
           line-height: 1.2;
       }

       .product-price {
           font-size: 1.5rem;
           font-weight: bold;
           color: #e53935;
           margin-bottom: 8px;
       }

       .product-price .old-price {
           font-size: 1rem;
           color: #888;
           text-decoration: line-through;
           margin-right: 8px;
       }

       /* ✅ Botão com altura fixa */
       .btn-buy {
           background: black;
           color: white;
           border: none;
           border-radius: 50px;
           padding: 8px 25px;
           width: 200px;
           font-weight: 600;
           transition: all .4s;
           position: relative;
           left: 50%;
           transform: translate(-50%);
       }

       .btn-buy:hover {
           color: white;
           background-color: rgb(46, 46, 46);
       }


       /* Setas do carrossel */
       .carousel-control-prev,
       .carousel-control-next {
           width: 40px;
           height: 40px;
           background: #fff;
           border-radius: 50%;
           top: 50%;
           transform: translateY(-50%);
           opacity: 0.95;
           box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
           border: none;
           display: flex;
           align-items: center;
           justify-content: center;
       }

       .carousel-control-prev:hover,
       .carousel-control-next:hover {
           background: #f0f0f0;
       }

       .arrow-icon i {
           color: #000;
           font-size: 1.2rem;
       }

       /* Bolinhas indicadores estilo Instagram */
       .carousel-indicators {
           bottom: -50px;
       }

       .carousel-indicators [data-bs-target] {
           width: 10px;
           height: 10px;
           border-radius: 50%;
           background-color: rgba(0, 0, 0, 0.3);
           transition: all 0.3s ease;
       }

       .carousel-indicators .active {
           background-color: black;
           width: 12px;
           height: 12px;
       }

       .search-box {
           position: relative;
           display: flex;
           align-items: center;
           background: #f5f5f5;
           border-radius: 25px;
           padding: 5px 15px;
           width: 60%;
           /* ✅ aumenta o comprimento centralizado */
           max-width: 500px;
           /* ✅ largura máxima para telas grandes */
           margin: 0 auto;
           /* ✅ centraliza no header */
           transition: all 0.3s ease;
       }

       .search-box input {
           border: none;
           background: transparent;
           outline: none;
           width: 100%;
           font-size: 1rem;
       }

       input {
           font-size: 16px !important;
       }

       .search-box i {
           color: #888;
           font-size: 1.1rem;
           margin-left: 8px;
           cursor: pointer;
           transition: color 0.3s ease;
       }

       .search-box i:hover {
           color: #000;
       }

       .categories {
           padding: 30px 20px;
           position: relative;
           top: 40px;
       }

       .categories h2 {
           font-size: 1.8rem;
           font-weight: 600;
           color: #333;
           margin-bottom: 20px;
       }

       .category-card {
           background: #fff;
           border-radius: 10px;
           box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
           text-align: center;
           transition: transform 0.3s ease, box-shadow 0.3s ease;
           cursor: pointer;
       }

       .category-card:hover {
           transform: translateY(-5px);
           box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
       }

       .category-card img {
           border-top-left-radius: 10px;
           border-top-right-radius: 10px;
           height: 180px;
           object-fit: cover;
           width: 100%;
       }

       .category-title {
           font-size: 1.2rem;
           font-weight: 600;
           font-family: "Poppins", sans-serif;
           position: relative;
           top: -5px !important;
           color: #000;
           margin: 10px 0 15px;
       }


       @media (max-width: 768px) {
           .search-box {
               width: 80%;
               /* ✅ ocupa mais espaço em telas pequenas */
           }
       }

       .slider-wrapper {
           position: relative;
       }

       .slider {
           scroll-behavior: smooth;
           scroll-snap-type: x mandatory;
           /* 👈 trava no card */
       }

       .card-produto {
           flex: 0 0 auto;
           width: 200px;
           background: #fff;
           border-radius: 12px;
           box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
           position: relative;
           scroll-snap-align: start;
           /* 👈 trava o card no início */
           display: flex;
           flex-direction: column;
       }

       .card-produto img {
           width: 100%;
           height: 150px;
           object-fit: cover;
           border-radius: 8px 8px 0 0;
       }

       .card-body {
           padding: 10px;
           flex-grow: 1;
           /* empurra o botão para o final */
       }

       .card-body h4 {
           font-size: 1rem;
           margin: 5px 0;
       }

       .card-body p {
           font-size: 0.85rem;
           color: #4b5563;
           margin-bottom: 8px;
       }

       .card-body strong {
           color: #e53935;
           font-weight: bold;
           font-size: 1.1rem;
       }

       .btn-adquirir {
           background: #0f172a;
           color: white;
           border: none;
           border-radius: 0 0 12px 12px;
           padding: 10px;
           width: 100%;
           font-weight: 600;
           transition: background 0.3s ease;
           position: relative;
           bottom: 0;
       }

       .btn-adquirir:hover {
           background: #272727;
       }

       .slider-btn {
           position: absolute;
           top: 50%;
           transform: translateY(-50%);
           background: #fff;
           border-radius: 50%;
           box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
           width: 40px;
           height: 40px;
           display: flex;
           align-items: center;
           justify-content: center;
           cursor: pointer;
           z-index: 10;
       }

       .slider-btn.prev {
           left: -20px;
       }

       .slider-btn.next {
           right: -20px;
       }

       .slider-btn:hover {
           background: #f0f0f0;
       }

       .arrow-icon i {
           color: #000;
       }

       /* Ocultar setas no mobile */
       @media (max-width: 768px) {
           .slider-btn {
               display: none !important;
           }
       }

       .slider {
           scroll-snap-type: x mandatory;
       }

       .card-produto {
           scroll-snap-align: center;
       }

       .slider {
           display: flex;
           overflow-x: auto;
           scroll-snap-type: x mandatory;
           scroll-behavior: smooth;
           -webkit-overflow-scrolling: touch;
           /* Scroll suave no iOS */
       }

       .card-produto {
           flex: 0 0 auto;
           scroll-snap-align: center;
           transition: transform 0.3s ease;
       }

       .slider::-webkit-scrollbar {
           display: none;
           /* Oculta a barra no mobile */
       }

       @media (max-width: 768px) {
           .slider-btn {
               display: none !important;
               /* Oculta setas no mobile */
           }
       }

       @media (min-width: 991px) {
           .modal-dialog {
               max-width: 480px;
               /* mesma largura do corpo */
               margin: 1rem auto;
               /* centraliza */
           }

           .modal-content {
               border-radius: 1rem;
               /* bordas mais suaves para parecer app */
           }
       }

       .btn-close {
           filter: invert(0%) !important;
           opacity: 1 !important;
           background-color: white;
           padding: 5px;
           color: black;
           border-radius: 100%;
       }

       /* Força as setas do carrossel do modal a serem pretas */
       .carousel-control-prev-icon,
       .carousel-control-next-icon {
           filter: invert(0%) !important;
       }

       /* 🌐 Limitar largura do site como se fosse mobile */
       body {
           max-width: 480px;
           /* largura típica de smartphone */
           margin: 0 auto;
           /* centraliza no desktop */

           /* cor de fundo para área externa */
           box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
           /* leve sombra */
       }

       /* 🛒 Limitar largura dos modais */


       /* 🔼 Setas do carrossel e modal pretas */
       .carousel-control-prev-icon,
       .carousel-control-next-icon {
           filter: invert(1) !important;
           /* transforma branco em preto */
       }

       /* ❌ Botão X preto */
       .btn-close {
           filter: invert(1) !important;
           background-color: white;
           border-radius: 100%;
           padding: 5px;
       }

       .btn-close {
           background: none !important;
           /* Remove o background padrão */
           color: black !important;
           /* Força a cor preta */
           opacity: 1 !important;
           /* Sempre visível */
           font-size: 1.8rem;
           /* Deixa maior no mobile */
           z-index: 9999;
           /* Garante que fica acima de tudo */
       }

       .btn-close::after {
           content: "✕";
           /* Substitui o ícone padrão por X */
           font-size: 1.8rem;
           color: black;
       }

       @media (max-width: 768px) {
           .btn-close {
               display: block !important;
               /* Garante visibilidade */
           }
       }

       /* Botão X com fundo branco, ícone preto e centralizado */
       .btn-close {
           background-color: #fff !important;
           /* fundo branco */
           border-radius: 50% !important;
           /* círculo perfeito */
           width: 40px;
           /* largura */
           height: 40px;
           /* altura */
           display: flex !important;
           align-items: center;
           justify-content: center;
           opacity: 1 !important;
           /* sem transparência */
           box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
           border: none;
           font-size: 1.4rem;
           /* tamanho do X */
           color: #000 !important;
           /* ícone preto */
           z-index: 9999;
       }

       /* Remove o SVG padrão do Bootstrap e substitui pelo X puro */
       .btn-close::before {
           content: "✕";
           /* X estilizado */
           font-size: 1.2rem;
           /* tamanho do X */
           color: #000;
           /* cor preta */
       }

       .btn-close::after {
           content: "";
       }

       /* Ajuste extra para o mobile */
       @media (max-width: 768px) {
           .btn-close {
               width: 36px;
               height: 36px;
               font-size: 1.2rem;
           }
       }

       /* Aplica degradê só no carrossel principal */
       #carouselProducts .carousel-item::after {
           content: "";
           position: absolute;
           bottom: 0;
           left: 0;
           width: 100%;
           height: 65%;
           background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
       }

       #quantidadeSelecionada {
           position: relative;
           top: 5px !important;
       }

       #modalProdutoPreco {
           color: #e53935 !important
       }

       /* Remove qualquer degradê do carrossel no modal */
       #carouselModal .carousel-item::after {
           content: none !important;
       }

       #alertaSelecao {
           text-align: center;
           padding: 5px;
       }

       .btn[disabled],
       .btn-outline-secondary[disabled] {
           position: relative;
           opacity: 0.5;
           cursor: not-allowed;
       }

       .btn[disabled]::after {
           content: " ";
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background: repeating-linear-gradient(45deg,
                   rgba(255, 0, 0, 0.3),
                   rgba(255, 0, 0, 0.3) 5px,
                   transparent 5px,
                   transparent 10px);
           pointer-events: none;
       }

       .checkmark-wrapper {
           width: 80px;
           height: 80px;
       }

       .checkmark {
           width: 100%;
           height: 100%;
           stroke: #28a745;
           stroke-width: 2;
           stroke-miterlimit: 10;
           box-shadow: inset 0px 0px 0px #28a745;
           animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
       }

       .checkmark-circle {
           stroke-dasharray: 166;
           stroke-dashoffset: 166;
           stroke-width: 2;
           stroke-miterlimit: 10;
           stroke: #28a745;
           fill: none;
           animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
       }

       .checkmark-check {
           transform-origin: 50% 50%;
           stroke-dasharray: 48;
           stroke-dashoffset: 48;
           animation: stroke 0.4s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
       }

       @keyframes stroke {
           100% {
               stroke-dashoffset: 0;
           }
       }

       @keyframes scale {

           0%,
           100% {
               transform: none;
           }

           50% {
               transform: scale3d(1.1, 1.1, 1);
           }
       }

       @keyframes fill {
           100% {
               box-shadow: inset 0px 0px 0px #28a745;
           }
       }

       .cart-badge {
           background-color: #e53935;
           color: #fff;
           border-radius: 50%;
           padding: 2px 6px;
           font-size: 0.8rem;
           position: absolute;
           top: -8px;
           right: -8px;
           animation: none;
           transition: transform 0.2s ease;
       }

       .badge-pulse {
           animation: pulse 0.5s ease;
       }

       @keyframes pulse {
           0% {
               transform: scale(1);
               background-color: #e53935;
           }

           50% {
               transform: scale(1.4);
               background-color: #43a047;
               /* verde para chamar atenção */
           }

           100% {
               transform: scale(1);
               background-color: #e53935;
           }
       }

       header {
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           background: #fff;
           /* Ou a cor que preferir */
           z-index: 1000;
           box-shadow: none;
           /* Inicialmente sem sombra */
           transition: box-shadow 0.3s ease, background-color 0.3s ease;
       }

       #preloader {
           transition: opacity 0.5s ease, visibility 0.5s ease;
       }

       #preloader.hidden {
           opacity: 0;
           visibility: hidden;
       }

       /* ✅ Animação ao AUMENTAR */
       .quantidade-animada-aumentar {
           animation: bounceAumentar 0.3s ease;
       }

       @keyframes bounceAumentar {
           0% {
               transform: scale(1);
               color: inherit;
           }

           30% {
               transform: scale(1.3);
               color: #28a745;
           }

           /* Verde ao aumentar */
           100% {
               transform: scale(1);
               color: inherit;
           }
       }

       /* ✅ Animação ao DIMINUIR */
       .quantidade-animada-diminuir {
           animation: bounceDiminuir 0.3s ease;
       }

       @keyframes bounceDiminuir {
           0% {
               transform: scale(1);
               color: inherit;
           }

           30% {
               transform: scale(1.3);
               color: #e53935;
           }

           /* Vermelho ao diminuir */
           100% {
               transform: scale(1);
               color: inherit;
           }
       }

       #bottomMenu input::placeholder {
           font-size: 16px !important;
       }

       #freteResultado {
           font-size: 0.9rem;
       }

       #modalConfirmacao .modal-content {
           animation: bounceIn 0.5s ease;
       }

       @keyframes bounceIn {
           0% {
               opacity: 0;
               transform: scale(0.6);
           }

           80% {
               transform: scale(1.05);
           }

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

       .pedido-badge {
           position: absolute;
           top: -6px;
           right: -10px;
           background-color: red;
           color: white;
           width: 18px;
           height: 18px;
           font-size: 11px;
           border-radius: 50%;
           text-align: center;
           line-height: 18px;
           font-weight: bold;
           animation: pulse 1.5s infinite;
           box-shadow: 0 0 0 2px white;
       }

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

           50% {
               transform: scale(1.2);
           }

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

       .bottom-menu {
           position: fixed;
           bottom: 0;
           left: 0;
           width: 100%;
           max-width: 480px;
           /* para alinhar com o body mobile */
           margin: 0 auto;
           background-color: #fff;
           border-top: 1px solid #ccc;
           padding: 10px 0;
           z-index: 999;
           display: flex;
           justify-content: space-around;
           align-items: center;
           box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);
       }

       .bottom-menu a {
           color: black !important;
           text-decoration: none !important;
           display: flex;
           flex-direction: column;
           align-items: center;
           font-size: 0.85rem;
       }

       .bottom-menu a i {
           font-size: 1.4rem;
           color: black !important;
       }

       @media (min-width: 768px) {
           .bottom-menu {
               max-width: none !important;
           }
       }

       .modal.modal-bottom .modal-dialog {
           position: fixed;
           bottom: 0;
           margin: 0;
           width: 100%;
           max-width: none;
           transition: transform 0.3s ease-out;
       }

       .modal.modal-bottom .modal-content {
           border-radius: 16px 16px 0 0;
           box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.2);
       }

       #modalCartao .form-control {
           border-radius: 8px;
           font-size: 15px;
       }

       #modalCartao button {
           font-weight: 600;
           font-size: 16px;
       }

       #resultadosBusca {
           position: absolute !important;
           top: 52px !important;
           left: 0 !important;
       }

       footer {
           font-family: 'Poppins', sans-serif;
           font-size: 0.95rem;
       }

       .whatsapp-float {
           position: fixed;
           bottom: 150px;
           right: 20px;
           background-color: #000;
           border-radius: 50%;
           padding: 12px;
           z-index: 9999;
           display: flex;
           align-items: center;
           justify-content: center;
           text-decoration: none;
           box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
           transition: transform 0.3s ease;
       }

       .whatsapp-float:hover {
           transform: scale(1.1);
           background-color: #25d366;
           /* verde WhatsApp opcional */
       }

       #slider-em-breve {
           scroll-snap-type: x mandatory;
           scroll-padding: 0 20%;
           overflow-x: auto;
       }

       #slider-em-breve .card-produto {
           scroll-snap-align: center;
           flex: 0 0 auto;

           transition: transform 0.3s;
       }

       #slider-em-breve .card-produto {
           scroll-snap-align: center;
           flex: 0 0 auto;
           transition: transform 0.3s;
       }