/* ========================== VARIÁVEIS E RESET ========================== */
:root{

  /* ================= BASE ================= */
  --bg-main: #ffffff;
  --bg-soft: #f6f1ec;        /* bege MUITO suave (luxo) */
  --bg-card: #ffffff;

  /* ================= TEXTO ================= */
  --text-main: #1a1a1a;      /* preto elegante */
  --text-soft: #6b5b53;      /* marrom leve */
  --text-muted: #9c8f87;

  /* ================= MARCA ================= */
  --brand: #f08a5d;          /* laranja sofisticado (menos gritante) */

  /* ================= DESTAQUE ================= */
  --gold: linear-gradient(
    to right,
    #c5a253,
    #f5e6b0,
    #a67c2d
  );

  /* ================= APOIO ================= */
  --border: #e8e2dc;
  --shadow-soft: rgba(0,0,0,0.06);
  --shadow-medium: rgba(0,0,0,0.12);
}



/* ========================== RESET ========================== */
body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  background: var(--bg-main);
  color: var(--text-main);
}
*, *::before, *::after { box-sizing: border-box; }

a:hover {
  color: var(--brand);
}

.cart-wrapper {
  position: relative;
}

/* Ícone */
.cart-icon {
  position: relative;
  cursor: pointer;
  font-size: 18px;
}

.cart-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: red;
  color: #fff;
  font-size: 10px;
  padding: 3px 6px;
  border-radius: 50%;
  display: none;
}

/* DROPDOWN LUXO */
.cart-dropdown {
  position: absolute;
  right: 0;
  top: 55px;
  width: 320px;
  max-height: 420px;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(18px);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  transform: translateY(-20px);
  opacity: 0;
  pointer-events: none;
  transition: all .35s ease;
  z-index: 9999;
}

/* ABERTO */
.cart-dropdown.active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}

/* MOBILE FULL WIDTH */
@media (max-width: 768px) {
  .cart-dropdown {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
}

/* HEADER */
.cart-header {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.cart-header h3 {
  font-weight: 500;
}

#closeCart {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
}

/* ITENS */
.cart-items {
  padding: 15px;
  overflow-y: auto;
  flex: 1;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.cart-item-info {
  flex: 1;
  font-size: 14px;
}

.cart-item-price {
  font-size: 13px;
  color: #666;
}

/* CONTROLE QUANTIDADE */
.qty-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qty-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: #f1f1f1;
  cursor: pointer;
  font-weight: bold;
}

.qty-number {
  font-size: 14px;
}

/* REMOVER */
.remove-item {
  font-size: 14px;
  color: #999;
  cursor: pointer;
}

/* FOOTER */
.cart-footer {
  padding: 15px;
  border-top: 1px solid rgba(0,0,0,0.05);
}

.cart-total {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

#checkoutBtn {
  width: 100%;
  background: #452021;
  color: #fff;
  border: none;
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: .3s;
}

#checkoutBtn:hover {
  opacity: 0.85;
}

section:nth-child(even) {
  background: var(--bg-main);
}

/* ========================== BOTÃO WHATSAPP ========================== */
.btn-wpp {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
  text-decoration: none;

  z-index: 9999; /* 🔥 ESSENCIAL */
}

/* ========================== TOPO ========================== */
.topo { width: 100%; display: fixed; position: sticky;
  top: 0;
  z-index: 9999;}

/* Linha superior (MANTIDA) */
.topo__superior {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-soft);
  color: var(--text-soft);
  padding: 0.3rem 1.5rem;
  font-size: 0.9rem;
}
.contatos { display: flex; gap: 0.6rem; text-decoration: none;}
.contatos .icon {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--white);
}
.contatos .whatsapp { background: var(--brown-dark); text-decoration: none;}
.contatos .instagram { background: var(--brown-dark); text-decoration: none;}

/* Linha principal */
.topo__principal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1.5rem;
  background: var(--bg-main);
  border-bottom: 1px solid var(--border);
}
.topo__logo img { max-height: 60px; border-radius: 10px; }

/* Menu */
.menu-desktop { display: flex; gap: 1.5rem; }
.menu-desktop a {
  text-decoration: none;
  color: var(--text-soft);
  font-weight: 600;
  background: white;
}

.menu-desktop a:hover {
  color: var(--brand);
}

/* container */
.dropdown {
  position: relative;
  display: inline-block;
}

/* botão principal */
.dropbtn {
  background: none;
  border: none;
  cursor: pointer;

  color: var(--brown-dark);
  font-weight: 600;
  font-size: 1rem;

  display: flex;
  align-items: center;
  gap: 5px;
}

/* seta */
.arrow {
  font-size: 0.7rem;
  margin-left: 5px;
  transition: 0.3s;
}

/* dropdown escondido */
/* escondido por padrão */
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;

  background: white;
  min-width: 200px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  z-index: 999;
}

/* seta gira */
.dropdown.active .arrow {
  transform: rotate(180deg);
  transition: 0.3s;
}

/* links internos */
.dropdown-content a {
  display: block;
  padding: 0.7rem 1rem;
  text-decoration: none;
  color: var(--brown-dark);
  font-size: 0.95rem;
}

/* hover efeito */
.dropdown-content a:hover {
  background: #f5f5f5;
  color: var(--orange);
}

.dropdown.active .dropdown-content {
  display: block;
}

/* gira só quando ativo */
.dropdown.active .arrow {
  transform: rotate(180deg);
}

/* Ações direita */
.top-actions { display: flex; align-items: center; gap: 1rem; }
.cart-icon { font-size: 1.6rem; color: var(--brand); transition: 0.2s; }
.cart-icon:hover { transform: scale(1.1); }

/* ========================== BUSCA ========================== */
.search-container { display: flex; justify-content: center; padding: 1.2rem; }
.search-wrapper {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 25px;
  padding: 1rem 1.5rem;
  width: 100%;
  max-width: 900px;
}
.search-wrapper input { border: none; outline: none; flex: 1; background: transparent; }
.search-wrapper button { border: none; background: none; cursor: pointer; }

/* ========================== MENU MOBILE AJUSTE ========================== */

/* Container */
.menu-lateral {
  position: fixed;
  top: 0;
  right: -260px;
  width: 260px;
  height: 100%;
  background: white;
  color: var(--brown-dark);
  transition: 0.3s;
  padding: 1.5rem;
  z-index: 1000;
}

.menu-lateral.active {
  right: 0;
}

/* 🔥 REMOVE BOLINHAS E PADRÃO */
.menu-lateral ul {
  list-style: none;       /* remove bolinhas */
  padding: 0;
  margin: 0;
}

/* Espaçamento dos itens */
.menu-lateral ul li {
  margin-bottom: 1rem;
}

/* 🔥 LINKS LIMPOS */
.menu-lateral ul li a {
  text-decoration: none;  /* remove sublinhado */
  color: var(--brown-dark); /* remove azul padrão */
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;

  display: block;
  padding: 0.6rem 0;

  border-bottom: 1px solid rgba(0,0,0,0.05); /* linha suave */
  transition: 0.2s;
}

/* 🔥 HOVER BONITO */
.menu-lateral ul li a:hover {
  color: var(--orange);
  transform: translateX(5px);
}

/* BOTÃO FECHAR */
.close-menu {
  font-size: 1.8rem;
  background: none;
  border: none;
  cursor: pointer;
  margin-bottom: 1rem;
  color: var(--brown-dark);
}

/* 🔥 ÍCONES SEM SUBLINHADO */
.menu-lateral .icon {
  text-decoration: none; /* remove linha dos ícones */
}

/* Ajuste dos ícones */
.menu-lateral .contatos {
  margin-top: 1rem;
  display: flex;
  gap: 0.6rem;
}

.menu-toggle {
  display: none;

  font-size: 1.8rem;
  cursor: pointer;

  /* 🔥 REMOVE VISUAL DE BOTÃO */
  background: white;
  border: none;
  outline: none;
  box-shadow: none;

  /* 🔥 REMOVE ESTILO NATIVO MOBILE */
  appearance: none;
  -webkit-appearance: none;

  /* 🔥 REMOVE "QUADRADO" AO TOCAR */
  -webkit-tap-highlight-color: transparent;

  /* 🔥 REMOVE ESPAÇAMENTO ESTRANHO */
  padding: 0;
  margin: 0;

  /* 🔥 GARANTE CENTRALIZAÇÃO */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
}

/* botão "Produtos" */
.menu-toggle-sub {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;

  font-size: 1.05rem;
  font-weight: 600;

  background: none;
  border: none;
  cursor: pointer;

  padding: 0.6rem 0;
  color: var(--brown-dark);
  font-family: 'Montserrat', sans-serif;
}

.arrow {
  transition: transform 0.3s ease;
  font-size: 0.8rem;
}

.has-submenu.active .arrow {
  transform: rotate(180deg);
}

/* submenu escondido por padrão */
.submenu {
  list-style: none;
  padding-left: 1rem;
  margin: 0;

  max-height: 0;
  overflow: hidden;

  transition: max-height 0.3s ease;
}

/* quando ativo */
.has-submenu.active .submenu {
  max-height: 500px; /* suficiente pra expandir */
}

/* links do submenu */
.submenu li a {
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0.9;
  padding: 0.4rem 0;
  border: none;
  font-family: 'Montserrat', sans-serif;
}

/* ========================== INTRO ========================== */
.intro { text-align: center; padding: 1rem; }

/* ========================== CÍRCULOS LUXO ========================== */

.tipos-wrapper {
  display: flex;
  justify-content: center;
  margin: 60px 0;
}

.tipos {
  display: flex;
  gap: 40px;
  padding: 10px;
  overflow-x: auto;
}

.tipos::-webkit-scrollbar {
  display: none;
}

.circle-card {
  text-decoration: none;
}

/* CÍRCULO BASE */
.circle {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #f6f1ec;
  /* border: 1px solid #e5e5e5; */

  transition: all 0.4s ease;
  color: #6b5b53;
}

/* REMOVE visual pesado */
.circle svg {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.15; /* bem sutil */
}

.circle text {
  font-size: 6px;
  letter-spacing: 2px;
  fill: #6b5b53;
  font-weight: bold;
}

/* TEXTO CENTRAL */
.circle-center {
  position: relative;
  z-index: 2;

  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;

  color: #6b5b53;
  text-align: center;
}

/* HOVER LUXO */
.circle:hover {
  border-color: #111;
  transform: translateY(-6px);
}

/* EFEITO PREMIUM */
.circle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(0,0,0,0.03), transparent 70%);
  opacity: 0;
  transition: 0.4s;
}

.circle:hover::after {
  opacity: 1;
}

/* ========================== FILTROS ========================== */
.filtros-wrapper { padding: 2rem 0 0; position: relative;}

/* Linha base */
.filtros {
  display: flex;
  gap: 0.8rem;
  overflow-x: auto;
  padding: 0 1rem;
  border-bottom: 1px solid #ddd;
  align-items: flex-end;
  justify-content: center;
}
.filtros::-webkit-scrollbar { display: none; }

/* BOTÕES - fonte e estilo atualizado */
.filtros a {
  flex: 0 0 160px;
  min-width: 160px;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  padding: 0.7rem 1rem;

  background: transparent;
  color: var(--text-soft);
  border-bottom: 2px solid transparent;
  box-shadow: none;
  background-size: 250% 200%;

  text-decoration: none;
  font-weight: 600;

  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;

  border: none;

  position: relative;
  top: 3px;

  transition: all 0.3s ease;
  white-space: nowrap;

}

.filtros a:hover {
  color: var(--text-main);
  border-bottom: 2px solid var(--brand);
  transform: none;
}

.filtros a:active {
  transform: translateY(1px);

  border-bottom: 2px solid #7a5a00;

  box-shadow: inset 0 3px 6px rgba(0,0,0,0.3);
}



/* ========================== AVALIAÇÕES ========================== */
.avaliacoes { padding: 2rem 1rem; text-align: center; }
.avaliacoes-container {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 1rem 0;
  scroll-snap-type: x mandatory;
}
.avaliacoes-container::-webkit-scrollbar { display: none; }
.avaliacao-card {
  flex: 0 0 280px;
  background: var(--white);
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  scroll-snap-align: start;
  transition: transform 0.3s ease;
}
.avaliacao-card:hover { transform: translateY(-5px); }
.avaliacao-card h3 { margin: 0; font-size: 1rem; color: var(--brown-dark); }

/* Estrelas */
.stars { color: #ffb400; font-size: 1.2rem; margin: 0.3rem 0 0.8rem; }
.avaliacao-card img { width: 100%; border-radius: 8px; object-fit: cover; }

/* ========================== CTA FINAL ========================== */
.cta-final { padding: 3rem 1rem; text-align: center; background: #7e523d !important; color: white;}
.cta-final h2 { margin: 0; color: white; }
.cta-final .linha { width: 60px; height: 2px; background: #7e523d; margin: 10px auto 20px; }

/* SIGA-NOS */
.siga { font-weight: bold; margin-bottom: 10px; }
.social-icons { display: flex; justify-content: center; gap: 1.2rem; margin-bottom: 2rem; text-decoration: none;}
.social-icons a { font-size: 1.6rem; color: white; transition: transform 0.2s, color 0.2s; text-decoration: none;}
.social-icons a:hover { transform: scale(1.2); background: var(--brand); }

/* Newsletter */
.newsletter { max-width: 400px; margin: 0 auto; }
.titulo-news { font-size: 0.95rem; margin-bottom: 10px; }
.newsletter form { display: flex; gap: 0.5rem; }
.newsletter input { flex: 1; padding: 0.6rem; border: 1px solid #ccc; outline: none; }
.newsletter button {
  padding: 0.6rem 1rem;
  border: none;
  background: black;
  color: white;
  cursor: pointer;
  transition: 0.3s;
}
.newsletter button:hover { background: white; color: black; }

/* Mobile */
@media (max-width: 480px) {
  .newsletter form { flex-direction: column; }
  .newsletter button { width: 100%; }
}

/* ========================== RESPONSIVO ========================== */
.desktop-only { display: flex; }
.mobile-only { display: none; }
@media (max-width:768px) {
  .menu-desktop { display: none; background: transparent;}
  .mobile-only { display: block; background: transparent;}
  .tipos { justify-content: flex-start; }
  .filtros { justify-content: flex-start; }
  .slide img { height: 220px; }
}
.scroll-btn {
  display: flex;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  font-size: 0.8rem;
  background: rgba(0,0,0,0.2);
  color: var(--white);
  border-radius: 50%;
  border: none;
  opacity: 0.4;
}

/* ========================== SEPARADOR ========================== */
hr { border: none; border-top: 1px solid #ddd; margin: 2rem 0; width: 100%; }

/* ========================== PRODUTOS LUXO ========================== */

.produtos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 60px 40px;
  max-width: 1300px;
  margin: 0 auto;
  padding: 60px 40px;
  justify-content: center;
  justify-items: center;
}

/* REMOVE COMPLETAMENTE O VISUAL DE CARD */
.card {
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* IMAGEM */
.card img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  background: #f5f1eb; /* bege suave */
  transition: 0.5s;
}

/* efeito luxo */
.card:hover img {
  transform: scale(1.04);
}

/* CONTEÚDO */
.card-content {
  padding: 20px 10px;
  gap: 8px;
}

/* NOME DO PRODUTO */
.card h3 {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 10px 0 5px;
}

/* DESCRIÇÃO */
.card .card-desc {
  font-size: 13px;
  color: #777;
  max-width: 220px;
}

/* PREÇO (ESTILO PREMIUM) */
.card .price {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  margin: 10px 0;
  color: #111;
  letter-spacing: 1px;
}

/* BOTÃO FLUTUANTE */
.card .btn-acquire {
  margin-top: 10px;

  padding: 10px 22px;

  border: 1px solid #111;
  background: transparent;
  color: #111;

  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;

  cursor: pointer;
  transition: all 0.3s ease;

  /* sensação de “flutuar” */
  transform: translateY(0);
}

/* HOVER BOTÃO */
.card:hover .btn-acquire {
  transform: translateY(-4px);
}

/* hover elegante */
.card .btn-acquire:hover {
  background: #111;
  color: white;
}

/* REMOVE ANIMAÇÕES EXAGERADAS */
.card .btn-acquire::before,
.card .btn-acquire::after {
  display: none;
}

/* large tablets / small desktops: 3 colunas */
@media (max-width: 1024px) {
  .produtos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    padding: 50px 28px;
  }
  .card img { height: 180px; }
}

/* tablets / landscape mobile: 2 colunas */
@media (max-width: 768px) {
  .produtos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 40px 18px;
  }
  .card img { height: 160px; }
}

/* mobile estreito: 1 coluna */
@media (max-width: 480px) {
  .produtos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 18px 10px; }
  .produtos .card img { height: 140px; }
  .produtos .card { padding: 8px; }
}

/* ========================== RODAPÉ ========================== */
/* ========================== FOOTER PREMIUM ========================== */

.site-footer {
  background: #fff;
  color: var(--brown-dark);
  font-family: 'Montserrat', sans-serif;
  border-top: 1px solid rgba(0,0,0,0.05);
}

/* GRID */
.footer-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.5rem;
  padding: 3rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* COLUNAS */
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* MARCA */
.footer-brand h2 {
  margin: 0;
  color: var(--orange);
}

.footer-brand p {
  font-size: 0.9rem;
  opacity: 0.8;
  line-height: 1.4;
}

/* TÍTULOS */
.footer-col h3 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: var(--brown-dark);
}

/* LINKS */
.footer-col ul {
  list-style: none;
  padding: 0;
}

.footer-col ul li a {
  text-decoration: none;
  color: var(--brown-dark);
  font-size: 0.9rem;
  opacity: 0.8;
  transition: 0.2s;
}

.footer-col ul li a:hover {
  color: var(--orange);
  opacity: 1;
  padding-left: 5px;
}

/* SOCIAL */
.social-icons {
  display: flex;
  gap: 0.8rem;
  margin-top: 0.5rem;
}

.social-icons a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--card-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brown-dark);
  transition: 0.25s;
}

.social-icons a:hover {
  background: var(--orange);
  color: #fff;
  transform: translateY(-3px);
}

/* ÍCONES */
.icon-list {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.icon-item {
  position: relative;
  font-size: 20px;
  cursor: pointer;
  color: var(--brown-dark);
}

/* TOOLTIP */
.icon-item .label {
  position: absolute;
  bottom: 130%;
  left: 0;
  background: var(--brown-dark);
  color: #fff;
  padding: 4px 7px;
  border-radius: 5px;
  font-size: 10px;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}

.icon-item:hover .label {
  opacity: 1;
  visibility: visible;
}

/* PAGAMENTOS */
.payments i {
  font-size: 1.6rem;
  opacity: 0.7;
  transition: 0.2s;
}

.payments i:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* LINHA EXTRA */
.footer-extra {
  text-align: center;
  padding: 1rem;
  background: var(--card-bg);
  font-size: 0.85rem;
  color: var(--brown-dark);
}

/* BASE */
.footer-bottom {
  background: #111; /* preto elegante */
  color: white;
  text-align: center;
  padding: 1rem;
  font-size: 0.85rem;
}

.dev-link {
  color: var(--white);
  text-decoration: none;
}

.dev-link:hover {
  text-decoration: underline;
}

/* RESPONSIVO */
@media (max-width: 768px) {
  .footer-top {
    padding: 2rem 1rem;
  }

  .footer-brand {
    text-align: center;
    align-items: center;
  }

  .social-icons {
    justify-content: center;
  }
}

/* destauqe */
/* DESTAQUES: carrossel horizontal com scroll snap */
.destaques-carousel {
  position: relative;
  margin: 0 auto 2rem;
  max-width: 1200px;
  padding: 0 48px; /* espaço para botões */
  box-sizing: border-box;
}

.destaques-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 18px 6px;
  scroll-behavior: smooth;
}

/* cada item ocupa um "card" com largura controlada */
.destaques-item {
  flex: 0 0 calc(25% - 15px); /* 4 por vez em desktop */
  scroll-snap-align: start;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

/* ajuste responsivo: 3 / 2 / 1 por linha */
@media (max-width: 1024px) {
  .destaques-item { flex: 0 0 calc(33.333% - 13px); }
}
@media (max-width: 768px) {
  .destaques-item { flex: 0 0 calc(50% - 10px); }
}
@media (max-width: 480px) {
  .destaques-item { flex: 0 0 calc(100% - 12px); }
}

/* botões prev/next */
.destaques-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 30;
  font-size: 20px;
  color: var(--accent, #452021);
}
.destaques-btn.prev { left: 8px; }
.destaques-btn.next { right: 8px; }

/* dots (paginação) */
/*
.destaques-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
  padding: 6px 0;
}
.destaques-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.12);
  cursor: pointer;
  padding: 0;
}
.destaques-dots button.active {
  background: var(--brand, #f08a5d);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
*/

/* remove barra de rolagem visual (opcional) */
.destaques-track::-webkit-scrollbar { height: 8px; }
.destaques-track::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.08); border-radius: 999px; }

/* acessibilidade: foco visível */
.destaques-btn:focus, .destaques-dots button:focus { outline: 2px solid rgba(68,34,17,0.12); outline-offset: 2px; }

/* Nota discreta e sofisticada dentro do dropdown do carrinho */
.cart-note {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  margin: 12px 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,248,244,0.95));
  border: 1px solid rgba(69,32,33,0.06);
  box-shadow: 0 8px 28px rgba(17,17,17,0.04);
  color: #4b3a36;
  font-size: 13px;
  line-height: 1.35;
  z-index: 2;
}

/* botão de fechar discreto no canto superior direito */
.cart-note .cn-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.04);
  color: #2f1f1d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: background .12s ease, transform .12s ease;
  padding: 0;
}
.cart-note .cn-close:hover,
.cart-note .cn-close:focus {
  background: rgba(69,32,33,0.08);
  transform: translateY(-2px);
  outline: none;
  box-shadow: 0 6px 14px rgba(69,32,33,0.06);
}

/* ícone circular sutil */
.cart-note .cn-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f08a5d;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(165,125,60,0.12);
  flex: 0 0 40px;
}

/* corpo do texto */
.cart-note .cn-body { display:flex; flex-direction:column; gap:6px; }
.cart-note .cn-title {
  font-weight: 600;
  color: #2f1f1d;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-size: 12px;
}
.cart-note .cn-text {
  color: #5f4f4b;
  font-size: 13px;
  max-width: 360px;
  white-space: normal;
}

/* responsivo */
@media (max-width: 520px) {
  .cart-note { padding: 10px; margin: 10px; gap:10px; }
  .cart-note .cn-icon { width:34px; height:34px; flex:0 0 34px; }
  .cart-note .cn-text { max-width: 100%; font-size: 13px; }
  .cart-note .cn-close { top: 6px; right: 6px; width: 28px; height: 28px; }
}

/* =========================
   RESET / PRIORIDADES LOCAIS
   Colocar este bloco no FINAL do CSS para sobrepor regras globais
   ========================= */

/* Garante box-sizing consistente (se já estiver no reset, ok) */
*, *::before, *::after { box-sizing: border-box; }

/* =========================
   CARROSSEL - BASE
   ========================= */
.carousel {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  -webkit-tap-highlight-color: transparent;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
  will-change: transform;
  touch-action: pan-y; /* permite swipe horizontal sem bloquear rolagem vertical */
}

/* Cada slide ocupa 100% da largura do container; altura será definida pelo JS */
.carousel .slide {
  min-width: 100%;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: transparent;
  height: auto; /* JS deve definir slide.style.height = sliceHeight */
}

/* Imagem: forçar escala por largura, impedir regras que forcem altura */
.carousel .slide img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  object-fit: none; /* evita interferência do object-fit */
  transform: translateY(0);
  transition: transform 0.3s ease;
  will-change: transform;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* =========================
   CONTROLES (setas e bolinhas)
   ========================= */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: var(--beige, #f5efe6);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brown-dark, #452021);
  cursor: pointer;
  transition: background 0.25s, color 0.25s, transform 0.12s;
  z-index: 40;
}
.carousel-btn:hover { transform: translateY(-50%) scale(1.03); }
.carousel-btn.prev { left: 12px; }
.carousel-btn.next { right: 12px; }

.carousel-dots {
  position: absolute;
  bottom: 12px;
  width: 100%;
  text-align: center;
  z-index: 40;
}
.carousel-dots span {
  width: 10px;
  height: 10px;
  background: rgba(0,0,0,0.12);
  display: inline-block;
  border-radius: 50%;
  margin: 6px 6px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.carousel-dots .active {
  background: var(--white, #fff);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transform: scale(1.05);
}

/* =========================
   Acessibilidade / foco
   ========================= */
.carousel-btn:focus,
.carousel-dots span:focus {
  outline: 2px solid rgba(69,32,33,0.12);
  outline-offset: 2px;
}

/* =========================
   OVERRIDES PARA REGRAS GLOBAIS CONFLITANTES
   (ex.: .slide img { height: 220px } em media queries)
   ========================= */

/* Torna estas regras mais específicas para garantir prioridade */
body .carousel .slide img,
.carousel .slide img {
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
}

/* Remove qualquer altura forçada por media queries genéricas */
@media (max-width: 768px) {
  .carousel .slide img { height: auto !important; max-height: none !important; }
}

/* Se houver regras específicas para .card img ou outras imagens, não afetam o carrossel */
.carousel img { display: block; }

/* =========================
   FALLBACK VISUAL (caso JS não rode)
   - mostra a imagem inteira, mas com altura controlada
   ========================= */
.carousel.no-js .slide {
  /* fallback: altura proporcional baseada na largura (768/1366) */
  height: calc(100vw * (768 / 1366));
}
.carousel.no-js .slide img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

/* =========================
   DICAS DE PERFORMANCE / TOUCH
   ========================= */
.carousel-track,
.carousel .slide img {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* =========================
   RESPONSIVO ADICIONAL
   ========================= */
/* EXIBE apenas no PC */
@media (max-width: 480px) {

  .carousel {
    display: none;
  }

}

.carousel {
  display: none !important;
}

/* =========================
   NOTA: o JS deve:
   - esperar o load da imagem (img.naturalWidth/naturalHeight)
   - calcular displayedWidth = slide.clientWidth
   - scale = displayedWidth / naturalWidth
   - displayedHeight = naturalHeight * scale
   - sliceHeight = displayedHeight / sections
   - definir slide.style.height = `${sliceHeight}px`
   - definir img.style.width = `${displayedWidth}px`
   - definir img.style.transform = `translateY(-${i * sliceHeight}px)`
   - adicionar listener resize + orientationchange para recalcular
   ========================= */