/* ===== Estilo base ===== */
  body {
    margin:0; 
    font-family:Arial,sans-serif; 
    background:#f9f9f9 url("uploads/back.png") center/cover fixed no-repeat;
    transition: background-color 0.3s, color 0.3s;
  }
  header {
    background:#fff; 
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    padding:10px 20px;
    position:sticky; 
    top:0; 
    z-index:10; 
    border-bottom:1px solid #ddd;
  }
  nav a { margin-left:20px; text-decoration:none; color:#000; font-weight:500; }
  nav a:hover { color:#1565c0; } /* azul */

  /* ===== Faixa Promocional ===== */
  .promo-bar {
    background:#d32f2f; /* vermelho */
    color:white;
    text-align:center;
    padding:6px;
    font-weight:bold;
    overflow:hidden;
    position:relative;
  }
  .promo-bar span {
    display:inline-block;
    animation: slideText 12s linear infinite;
  }

  /* ===== Hero Section ===== */
  .hero {
    background:url('uploads/back7.png') center/cover no-repeat; 
    color:white; 
    text-align:center; 
    padding:80px 20px;
  }
  .hero .tag { background:#1565c0; display:inline-block; padding:8px 16px; border-radius:20px; font-size:14px; margin-bottom:15px; }
  .hero h1 { font-size:36px; margin:10px 0; }
  .hero p { font-size:16px; margin-bottom:20px; max-width:600px; margin:auto; }
  .hero-buttons { display:flex; justify-content:center; gap:15px; flex-wrap:wrap; }
  .hero-buttons a { padding:12px 25px; border-radius:8px; font-weight:bold; text-decoration:none; transition:.3s; }
  .btn-primary { background:#d32f2f; color:white; }
  .btn-primary:hover { background:#b71c1c; }
  .btn-secondary { background:white; color:#1565c0; border:1px solid #1565c0; }
  .btn-secondary:hover { background:#f0f0f0; }

  /* ===== Títulos e textos de sessão ===== */
  h2.fw-bold { color:#d32f2f !important; } /* vermelho nos títulos principais */
  .text-success { color:#1565c0 !important; } /* azul substitui "success" */
  h2.fw-bold2 { color:white !important; } /* vermelho nos títulos principais */
  .text-success { color:#1565c0 !important; } /* azul substitui "success" */
  h2.fw-bold3 { color:blue !important; } /* vermelho nos títulos principais */
  .text-success { color:#1565c0 !important; } /* azul substitui "success" */

  /* ===== Cards ===== */
  .card { cursor:pointer; transition:transform 0.3s, box-shadow 0.3s; border:1px solid #eee; }
  .card:hover { transform:translateY(-5px) scale(1.02); box-shadow:0 6px 16px rgba(0,0,0,0.2); }
  .price { color:#d32f2f; font-weight:bold; }

  /* ===== Carrossel ===== */
  #carouselProdutos .card .card-title { color:#1565c0; font-weight:bold; }

  /* ===== Depoimentos ===== */
  #depoimentos blockquote { border-left:4px solid #d32f2f; padding-left:15px; }

  /* ===== Newsletter ===== */
  #newsletter { background:#1565c0 !important; color:white; }
  #newsletter button { background:#d32f2f; color:white; border:none; }
  #newsletter button:hover { background:#b71c1c; }

  /* ===== Botões Fixos ===== */
  .dark-toggle { color:#1565c0; }
  #btnBuscaMobile { background:#d32f2f !important; }

  /* ===== Responsividade ===== */
  @media (max-width: 768px) {
    .hero h1 { font-size: 26px; }
  }
  
    /* ===== sobre nós ===== */
    
    #sobreModal .card-body {
      font-size: 15px;
      line-height: 1.6;
    }
    #sobreModal strong {
      color: #2e7d32;
    }
    #sobreModal em {
      font-style: italic;
      font-weight: bold;
      color:blue;
    }
    
     /* ===== cards menores ===== */
     
    /* ===== Ofertas da Semana ===== */
    #ofertas .card {
      max-width: 180px;      /* card mais estreito */
      margin: 0 auto;
    }
    #ofertas .card img {
      height: 120px;         /* imagem proporcional menor */
      object-fit: cover;
    }
    
    /* ===== Carrossel de Produtos ===== */
    #carouselProdutos .card {
      width: 160px;          /* antes era 200px */
      margin: 0 auto;
    }
    #carouselProdutos .card img {
      height: 120px;         /* imagem proporcional menor */
      object-fit: cover;
    }
    #carouselProdutos .card-title {
      font-size: 13px;       /* texto ajustado */
    }  
    
    
      /* Deixar os cards de ofertas mais próximos */
      .ofertas .card {
        margin-bottom: 15px; /* menor espaçamento vertical */
      }
      .ofertas .row {
        row-gap: 15px; /* controla espaço entre linhas */
      }
      
     #ofertasRow .col-sm-6 { padding: 5px; }
     
     /* ===== Compact grid: 8 colunas no desktop, responsivo em tablets/celular ===== */
    #ofertasRow {
      /* opcional: reduzir gutter total se quiser */
      margin-left: 0;
      margin-right: 0;
    }
    
    /* Aplica somente aos elementos que têm as 3 classes (seu markup atual) */
    #ofertasRow > .col-sm-6.col-md-4.col-lg-3 {
      padding-left: 6px;
      padding-right: 6px;
      box-sizing: border-box;
    }
    
    /* XL (>=1200px) -> 8 colunas => 100/8 = 12.5% */
    @media (min-width: 1200px) {
      #ofertasRow > .col-sm-6.col-md-4.col-lg-3 {
        flex: 0 0 12.5% !important;
        max-width: 12.5% !important;
      }
    }
    
    /* LG (>=992px && <1200px) -> 6 colunas */
    @media (min-width: 992px) and (max-width: 1199.98px) {
      #ofertasRow > .col-sm-6.col-md-4.col-lg-3 {
        flex: 0 0 16.6667% !important;
        max-width: 16.6667% !important;
      }
    }
    
    /* MD (>=768px && <992px) -> 4 colunas */
    @media (min-width: 768px) and (max-width: 991.98px) {
      #ofertasRow > .col-sm-6.col-md-4.col-lg-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
      }
    }
    
    /* SM (<768px) -> 2 colunas */
    @media (max-width: 767.98px) {
      #ofertasRow > .col-sm-6.col-md-4.col-lg-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
      }
    }
    
    /* Imagens dos cards: tamanho fixo e proporcional (sobrescreve inline se necessário) */
    #ofertasRow .product-image {
      width: 100% !important;
      height: 110px !important;         /* ajuste a altura que preferir */
      max-height: 110px !important;
      object-fit: cover !important;
      display: block;
      border-radius: 6px 6px 0 0;
    }
    
    
    .btn-add-lista {
      font-size: 0.75rem;   /* texto menor */
      padding: 2px 6px;     /* menos espaço interno */
    }

    /* Logo responsiva */
    .logo img {
      max-width: 100%;
      height: auto;
       align-items: center;      /* centraliza */
    }
    
    /* Reduz ainda mais em telas pequenas */
    @media (max-width: 767.98px) {
      .logo img {
        max-width: 280px;   /* ou ajuste o tamanho que quiser */
      }
    }
    
   /* ===== Barra de filtros responsiva (aplica só dentro de #ofertas) ===== */   /* ===== Barra de filtros responsiva (aplica só dentro de #ofertas) ===== */
    /* garante que os elementos possam quebrar linha e fiquem alinhados */
    #ofertas .row.mb-4 {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    
    /* Desktop (>=768px) mantém layout original: busca 1/3, filtros + ordenação 2/3 */
    @media (min-width: 768px) {
      #ofertas .row.mb-4 .col-md-4 {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
      }
      #ofertas .row.mb-4 .col-md-8 {
        flex: 0 0 66.6667%;
        max-width: 66.6667%;
        text-align: right;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
      }
    
      /* mantém select alinhado à direita e inline */
      #ofertas .row.mb-4 #ordenar {
        display: inline-block;
        width: auto;
        margin-left: 8px;
      }
    }
    
    /* Mobile (<768px) empilha: busca em cima, filtros abaixo e select por último */
    @media (max-width: 767.98px) {
      #ofertas .row.mb-4 {
        align-items: flex-start;
      }
    
      /* torna ambas as colunas 100% largura (empilha) */
      #ofertas .row.mb-4 .col-md-4,
      #ofertas .row.mb-4 .col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: left !important;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
      }
    
      /* espaçamento específico para o campo de busca */
      #ofertas .row.mb-4 .col-md-4 input#busca {
        margin-bottom: 8px;
      }
    
      /* filtros: quebra em várias linhas, botões com espaçamento e rolagem se ficar muito grande */
      #filtrosCategorias {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        margin-top: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
      }
      /* garante que os botões não quebrem o texto e fiquem compactos */
      #filtrosCategorias .btn {
        white-space: nowrap;
        flex: 0 0 auto;
        padding: 6px 10px;
        font-size: 0.85rem;
      }
    
      /* select de ordenação ocupa toda a largura e fica abaixo dos filtros */
      #ofertas .row.mb-4 #ordenar {
        display: block;
        width: 100%;
        margin-top: 8px;
        margin-left: 0;
      }
    }
    
    /* pequena melhoria: quando houver overflow horizontal, não mostrar barra visual demais */
    #filtrosCategorias::-webkit-scrollbar { height: 6px; }
    #filtrosCategorias::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 6px; }
    
    /* evita que o text-end do bootstrap quebre no mobile (força esquerda) */
    @media (max-width: 767.98px) {
      #ofertas .text-end { text-align: left !important; }
    }