:root{
            --brand:#8a3974;
            --brand-2:#ff69b4;
        }
        html,body{font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;}
        /* Header */
        .topo{
            position: sticky; top:0; z-index:1030;
            background: linear-gradient(120deg, rgba(138,57,116,.95), rgba(255,105,180,.9));
            backdrop-filter: blur(8px);
            color:#fff; padding: .75rem 0;
            box-shadow: 0 8px 24px rgba(0,0,0,.08);
        }
        .topo .brand{
            display:flex; align-items:center; gap:.75rem;
        }
        .topo img{height:48px; width:auto;}
        .btn-ghost{
            background: rgba(255,255,255,.15);
            border: 1px solid rgba(255,255,255,.25);
            color:#fff;
        }
        .btn-ghost:hover{background: rgba(255,255,255,.25); color:#fff;}

        /* Busca */
        .search-wrap{position:relative;}
        .search-wrap .form-control{
            padding-left: 2.5rem; border-radius: 999px;
            border:1px solid var(--brand);
        }
        .search-wrap .icon{
            position:absolute; left: .9rem; top: 50%; transform: translateY(-50%);
            color: var(--brand);
        }
        .search-wrap .clear-btn{
            position:absolute; right:.3rem; top:50%; transform: translateY(-50%);
        }

        /* Categorias */
        .cat-pill{
            border-radius: 999px;
            border:1px solid rgba(0,0,0,.1);
            padding:.5rem 1rem; font-weight:600; font-size:.9rem;
            transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
            text-decoration:none;
        }
        .cat-pill:hover{transform: translateY(-1px);}
        .cat-pill.active, .cat-pill:focus-visible{
            background: var(--brand); color:#fff; border-color:var(--brand);
        }

        /* Carrossel */
        .carousel-item{
            height: 250px;
            background: #f7f7f7;
        }
        .carousel-item img{
            width:100%; height:100%; object-fit: cover;
        }

        /* Cards */
        .produto-card.card{
            border:0; border-radius: 1rem;
            box-shadow: 0 10px 24px rgba(0,0,0,.08);
            transition: transform .25s ease, box-shadow .25s ease;
            height:100%;
        }
        .produto-card.card:hover{
            transform: translateY(-4px);
            box-shadow: 0 16px 36px rgba(0,0,0,.12);
        }
        .img-wrap{
            border-top-left-radius: 1rem; border-top-right-radius: 1rem;
            overflow:hidden; background:#fafafa; aspect-ratio: 4/3;
        }
        .img-wrap img{width:100%; height:100%; object-fit:cover; display:block;}
        .produto-titulo{font-size:1rem; font-weight:700; line-height:1.3;}
        .produto-descricao{color:#6c757d; font-size:.9rem;}
        .badge-preco{
            background: linear-gradient(120deg, var(--brand), var(--brand-2));
            font-weight:700;
        }
        .badge-cat{
            background:#f1e6ef; color: var(--brand); font-weight:600;
        }
        .btn-brand{
            background: var(--brand); border-color: var(--brand);
        }
        .btn-brand:hover{background: #a0458a; border-color:#a0458a;}

        /* Rodapé */
        .rodape{
            background: var(--brand);
            color:#fff; text-align:center; padding: 1.25rem;
            margin-top: 3rem;
        }

        /* Modo escuro refinado */
        [data-bs-theme="dark"] .cat-pill{border-color: rgba(255,255,255,.15);}
        [data-bs-theme="dark"] .badge-cat{background:#2c1f28; color:#f7c7ec;}
        [data-bs-theme="dark"] .search-wrap .form-control{border-color:#7b2f69;}
        [data-bs-theme="dark"] .carousel-item{background:#121212;}
        
        /* =========================
   MELHORIAS MOBILE (coloque no final do seu CSS)
   ========================= */

/* Header/topo mais compacto e sem quebrar layout */
@media (max-width: 576px){
  .topo .container{
    padding-left: 12px;
    padding-right: 12px;
    gap: .5rem;
  }
  .topo .brand{
    gap: .5rem;
    min-width: 0;           /* permite encolher */
    max-width: 68vw;        /* não ocupa a linha toda */
  }
  .topo .brand img{
    height: 36px; width: auto;
  }
  .topo .brand > div{ min-width: 0; }
  .topo .fw-bold.fs-5{
    font-size: 1rem !important;
    line-height: 1.15;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .topo .small{
    font-size: .82rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* Botões de rede social menores */
  .btn-ghost{
    padding: .4rem .6rem;
    font-size: .9rem;
  }
  .btn-ghost .me-1{ margin-right: .35rem !important; }

  /* Busca: mais espaço pro campo, ícones alinhados */
  .search-wrap .form-control{
    padding-left: 2.25rem;
    padding-right: 2.25rem;
    font-size: .95rem;
    border-radius: 999px;
  }
  .search-wrap .icon{ left: .75rem; }
  .search-wrap .clear-btn{ right: .25rem; }

  /* Carrossel mais baixo */
  .carousel-item{ height: 180px; }

  /* Categorias: viram “carrossel” horizontal rolável */
  section .d-flex.flex-wrap.gap-2.justify-content-center{
    flex-wrap: nowrap !important;
    overflow-x: auto;
    justify-content: flex-start !important;
    gap: .5rem !important;
    padding-bottom: .25rem;
    -webkit-overflow-scrolling: touch;
  }
  section .d-flex.flex-wrap.gap-2.justify-content-center::-webkit-scrollbar{ height: 6px; }
  section .d-flex.flex-wrap.gap-2.justify-content-center::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,.15); border-radius: 999px;
  }
  .cat-pill{ padding: .45rem .9rem; font-size: .9rem; user-select: none; -webkit-tap-highlight-color: transparent; }

  /* Cards de produto mais “clean” e com imagem quadrada */
  .img-wrap{ aspect-ratio: 1 / 1; } /* quadrada no mobile */
  .produto-card .card-body{ padding: .9rem; }
  .produto-titulo{ font-size: 1rem; }
  .badge-preco{ font-size: .9rem; }
  .badge-cat{ font-size: .75rem; }

  /* Descrição com clamp (2 linhas) pra não estourar */
  .produto-descricao{
    font-size: .9rem;
    margin-bottom: .75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Botões com melhor tocabilidade */
  .card .btn{ padding: .55rem .75rem; font-size: .95rem; }
  .rodape{ padding: 1rem; }
}

/* Telas MUITO estreitas */
@media (max-width: 380px){
  .topo .brand{ max-width: 60vw; }
  .topo .brand img{ height: 30px; }
  .topo .small{ display: none; }     /* esconde subtítulo se faltar espaço */
  .btn-ghost{
    padding: .35rem .5rem;
    font-size: .85rem;
  }
}

/* Prefere menos animação/transição */
@media (prefers-reduced-motion: reduce){
  .produto-card.card,
  .cat-pill{ transition: none; }
}

/* ====== CATEGORIAS — MOBILE UPGRADE ====== */
.cat-scroll {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding-bottom: .25rem;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
.cat-scroll .cat-pill,
.cat-scroll .btn-more-cats {
  scroll-snap-align: start;
  white-space: nowrap;
}
.btn-more-cats{
  border-radius: 999px;
  border:1px dashed rgba(0,0,0,.25);
  padding:.5rem .9rem;
  font-weight:600; font-size:.9rem;
  background: #fff;
}
.btn-more-cats:hover{ background:#f8f8f8; }

/* Modal de categorias */
.cats-modal .modal-content{
  border-radius:1rem;
}
.cats-modal .modal-header{
  border:0;
}
.cats-modal .modal-body{
  padding-top: 0;
}
.cats-search .form-control{
  border-radius:999px;
}
.cats-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:.5rem;
}
.cats-grid .cat-item{
  display:block;
  text-align:center;
  padding:.6rem .75rem;
  border:1px solid rgba(0,0,0,.1);
  border-radius:.8rem;
  text-decoration:none;
  font-weight:600;
  color:#333;
  background:#fff;
}
.cats-grid .cat-item.active{
  background: var(--brand);
  color:#fff;
  border-color: var(--brand);
}
@media (min-width: 576px){
  .cats-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* Mostrar versão mobile/desktop corretamente */
.cats-mobile{ display:none; }
.cats-desktop{ display:block; }
@media (max-width: 576px){
  .cats-mobile{ display:block; }
  .cats-desktop{ display:none; }
}
@media (max-width: 576px){
  .cats-desktop{ display: none !important; }
  .cats-mobile{ display: block !important; }
}

/* Slide mais baixo em telas até 576px (celulares) */
@media (max-width: 576px){
  #heroCarousel .carousel-item{
    height: 120px !important;      /* ajuste aqui: 120–160px fica bom */
  }
  #heroCarousel .carousel-control-prev-icon,
  #heroCarousel .carousel-control-next-icon{
    transform: scale(.8);          /* controles um pouco menores */
  }
  #heroCarousel .carousel-indicators{ bottom: 6px; } /* bolinhas mais próximas */
}
 
 
      /* Marca de indisponível e preços promocionais */
      .flag-indisp {
        position: absolute;
        top: .75rem;
        left: .75rem;
        z-index: 2;
      }

      /* ADICIONADO: badge de promoção */
      .flag-promo { /* ADICIONADO */
        position: absolute;
        top: .75rem;
        right: .75rem;
        z-index: 2;
        background: #ff3b30;
        color: #fff;
        font-weight: 700;
        border-radius: 9999px;
        padding: .3rem .6rem;
        box-shadow: 0 6px 14px rgba(255,59,48,.25);
      } /* ADICIONADO */

      .img-wrap {
        position: relative;
      }
      .price-wrap {
        display: flex;
        align-items: center;
        gap: .5rem;
        flex-wrap: wrap;
      }
      .price-old {
        text-decoration: line-through;
        opacity: .7;
      }
      .btn-reservar {
        --bs-btn-bg: #000000;
        --bs-btn-border-color: #6c757d;
        --bs-btn-hover-bg: #5c636a;
        --bs-btn-hover-border-color: #565e64;
      }
      .produto-card.indisponivel {
        opacity: .95;
      }


  /* Botão flutuante: Agende seu horário */
  .fab-agenda{
    position:fixed;
    right:16px;
    bottom:16px;
    z-index:1030; /* acima do conteúdo/Carrossel/Modal */
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.9rem 1.1rem;
    border-radius:999px;
    font-weight:600;
    text-decoration:none;
    box-shadow:0 8px 24px rgba(0,0,0,.15);
    background:#8a3974;          /* cor da sua brand */
    color:#fff;
    border:1px solid #7a2f66;
    transition:transform .15s ease, box-shadow .15s ease, opacity .2s ease;
  }
  .fab-agenda:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.18); color:#fff; }
  .fab-agenda:active{ transform:translateY(0); }
  .fab-agenda i{ font-size:1.1rem; }

  /* Evita que o botão esconda conteúdo colado no rodapé em telas pequenas */
  @media (max-width: 576px){
    body{ padding-bottom:84px; }
  }

  /* Acessibilidade: reduz animação para usuários que preferem menos movimento */
  @media (prefers-reduced-motion: reduce){
    .fab-agenda{ transition:none; }
  }