/* =========================================================
   JR NATAL - Página inicial
   ========================================================= */
:root {
  --vermelho: #a50418;
  --vermelho-escuro: #8c0a0a;
  --vermelho-nav: #a30b12;
  --vermelho-tarja: #c62828;
  --vermelho-filtro: #b20f10;
  --vermelho-vitrine: #c5290b;
  --verde: #2d5a2b;
  --verde-pix: #5cb82e;
  --dourado: #b8913a;
  --cinza: #f2f2f2;
  --cinza-texto: #777;
  --texto: #111;
  --container: 1370px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: var(--texto);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }
button, input, select { font-family: inherit; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
}

.icon { width: 24px; height: 24px; flex-shrink: 0; }

/* ---------------------------------------------------------
   Cabeçalho desktop
   --------------------------------------------------------- */
.header { background: #fff; position: relative; z-index: 50; }

.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 94px;
}

.logo img { width: 210px; height: auto; }

.search {
  flex: 0 1 240px;
  display: flex;
  align-items: center;
  background: #d9d9d9;
  border-radius: 4px;
  height: 44px;
  padding: 0 14px 0 24px;
}
.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 15px;
  color: #333;
  outline: none;
}
.search input::placeholder { color: #fff; }
.search button { border: 0; background: none; cursor: pointer; color: var(--vermelho); padding: 0; display: flex; }
.search .icon { width: 20px; height: 20px; }

.header-itens { display: flex; align-items: center; gap: 22px; }

.header-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--vermelho-escuro);
  font-size: 13px;
  line-height: 1.25;
  position: relative;
  cursor: pointer;
}
.header-item .icon { width: 28px; height: 28px; color: var(--vermelho-escuro); }
.header-item strong { font-weight: 600; }

.header-item .dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  min-width: 260px;
  padding: 16px;
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0,0,0,.15);
  color: #333;
  font-size: 13px;
  z-index: 60;
}
.header-item .dropdown::before {
  content: "";
  position: absolute;
  top: -14px; left: 0; right: 0; height: 14px;
}
.header-item:hover .dropdown { display: block; }
.dropdown p { margin: 0 0 10px; }
.dropdown p:last-child { margin-bottom: 0; }
.dropdown form { display: flex; gap: 6px; margin-top: 8px; }
.dropdown input { flex: 1; border: 1px solid #ddd; border-radius: 4px; padding: 8px; }
.dropdown button { border: 0; background: var(--vermelho-tarja); color: #fff; border-radius: 4px; padding: 8px 12px; font-weight: 600; cursor: pointer; }

.cart { position: relative; }
.cart .badge, .fav .badge {
  position: absolute;
  top: -8px; right: -6px;
  background: var(--vermelho-tarja);
  color: #fff;
  font-size: 9px;
  width: 15px; height: 15px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

/* Menu de categorias */
.nav { background: var(--vermelho-nav); }
.nav-list {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
}
.nav-list > li { position: relative; display: flex; }
.nav-list > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.3;
  padding: 0 12px;
  transition: background .2s;
}
.nav-list > li:hover > a { background: rgba(0,0,0,.12); }
.nav-list .ver-mais { gap: 6px; text-transform: uppercase; }
.nav-list .ver-mais .icon { width: 18px; height: 18px; }
.nav-list .oferta > a { background: var(--vermelho-tarja); border-radius: 4px; text-transform: uppercase; margin: 0; }

.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  min-width: 220px;
  padding: 12px 0;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  border-radius: 0 0 6px 6px;
  z-index: 40;
}
.nav-list > li:hover .submenu { display: block; }
.submenu a { display: block; padding: 7px 20px; color: #444; font-size: 14px; }
.submenu a:hover { color: var(--vermelho); background: #fafafa; }

/* ---------------------------------------------------------
   Cabeçalho mobile
   --------------------------------------------------------- */
.header-mobile, .mobile-bar, .menu-mobile { display: none; }

/* ---------------------------------------------------------
   Banner principal
   --------------------------------------------------------- */
.banner-home img { width: 100%; height: auto; }
.banner-home .swiper-pagination-bullet-active { background: #fff; }

.barra-oferta {
  background: var(--vermelho-tarja);
  color: #fff;
  text-align: center;
  padding: 0;
}
.barra-oferta .swiper-slide {
  font-weight: 600;
  font-size: 18px;
  padding: 18px 16px 36px;
}
.barra-oferta .swiper-pagination { bottom: 12px !important; }
.barra-oferta .swiper-pagination-bullet { background: #fff; opacity: .5; width: 7px; height: 7px; }
.barra-oferta .swiper-pagination-bullet-active { opacity: 1; }

/* ---------------------------------------------------------
   Banners gerais
   --------------------------------------------------------- */
.box-banner { display: block; border-radius: 4px; overflow: hidden; }
.box-banner img { width: 100%; height: auto; transition: transform .4s; }
.box-banner:hover img { transform: scale(1.02); }

.banner-tarja { margin-top: 64px; }

.banners-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.banners-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* Espaço reservado para banners ainda não criados */
.banner-vazio {
  width: 100%;
  border-radius: 4px;
  border: 2px dashed rgba(255,255,255,.55);
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.12) 0 2px, transparent 3px) 0 0 / 40px 40px,
    linear-gradient(135deg, var(--verde) 0%, #1f3f1e 55%, var(--vermelho) 100%);
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
}
.banner-vazio small { font-weight: 400; font-size: 14px; opacity: .85; }

/* Tarja de benefícios */
.beneficios { padding: 36px 0 16px; }
.beneficio {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.beneficio-icone { width: 52px; height: 52px; margin-bottom: 14px; color: #111; }
.beneficio-icone.pix { color: #111; }
.beneficio strong { font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.beneficio span { font-size: 13px; color: #444; }

/* Paginação dourada padrão dos carrosséis */
.swiper-pagination-bullet { background: #d6c39a; opacity: 1; width: 8px; height: 8px; }
.swiper-pagination-bullet-active { background: var(--dourado); }
.swiper-pag-static { position: static !important; margin-top: 20px; text-align: center; }

/* ---------------------------------------------------------
   Títulos de seção
   --------------------------------------------------------- */
.section { padding: 56px 0 0; }
.section-header { text-align: center; margin-bottom: 36px; }
.title-section {
  font-size: 32px;
  font-weight: 500;
  color: var(--vermelho-escuro);
  margin: 0;
}
.section-header.line::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: var(--dourado);
  margin: 18px auto 0;
  border-radius: 2px;
}

/* Categorias */
.categoria { text-align: center; display: block; }
.categoria .thumb {
  width: 144px;
  height: 144px;
  margin: 0 auto 14px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.categoria img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.categoria:hover img { transform: scale(1.06); }
.categoria span { color: var(--vermelho-escuro); font-size: 16px; font-weight: 500; }
.categoria .thumb-produto { background: #fff; border: 5px solid var(--vermelho); }
.categoria .thumb-produto img { object-fit: contain; padding: 10px; }

/* Carrossel com poucos itens: centraliza sem paginação */
.poucos-itens .swiper-wrapper { justify-content: center; gap: 24px; }
.poucos-itens .swiper-slide { width: auto; flex-shrink: 0; }
.poucos-itens .swiper-pagination { display: none; }

/* Filtro de categorias */
.filtro {
  background: var(--vermelho-filtro);
  color: #fff;
  margin-top: 56px;
  padding: 32px 0;
}
.filtro .title-section { color: #fff; font-size: 32px; margin-bottom: 24px; }
.filtro-form {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 46px;
  flex-wrap: wrap;
}
.filtro-campo { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 1 406px; }
.filtro-campo label { font-weight: 600; font-size: 16px; }
.filtro-campo select {
  width: 100%;
  height: 44px;
  border: 0;
  border-radius: 3px;
  padding: 0 14px;
  font-size: 15px;
  background: #e8e8e8;
  color: #333;
}
.filtro-form button {
  height: 44px;
  padding: 0 28px;
  min-width: 160px;
  border: 0;
  border-radius: 3px;
  background: #fff;
  color: var(--dourado);
  font-size: 16px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}
.filtro-form button .icon { width: 20px; height: 20px; }

/* Vitrine "Aproveite" com fundo vermelho */
.vitrine-destaque {
  background: #fff;
  padding: 44px 0 40px;
}
.vitrine-destaque .section-header { margin-bottom: 28px; }
.vitrine-destaque .section-header p { margin: 10px 0 0; font-size: 15px; color: #444; }
.vitrine-destaque .product { background: #fff; border: 1px solid #eee; border-radius: 4px; padding: 10px; }

/* Botão "Ver tudo" abaixo das vitrines */
.ver-tudo { text-align: center; margin-top: 24px; }
.btn-ver-tudo {
  display: inline-block;
  min-width: 220px;
  padding: 13px 32px;
  border-radius: 3px;
  background: var(--vermelho);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .5px;
  transition: background .2s;
}
.btn-ver-tudo:hover { background: var(--vermelho-escuro); }

/* ---------------------------------------------------------
   Card de produto
   --------------------------------------------------------- */
.product {
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  color: var(--texto);
  padding: 10px 10px 0;
}
.product-image {
  position: relative;
  aspect-ratio: 1 / 1;
  margin-bottom: 8px;
}
.product-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity .35s;
}
.product-image .img-2 { opacity: 0; }
.product:hover .product-image .img-2 { opacity: 1; }
.product:hover .product-image .has-2 { opacity: 0; }

.tag-circle {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  background: var(--vermelho-tarja);
  color: #fff;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 3px;
}
.tag-icon {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: var(--vermelho-tarja);
  color: #fff;
  width: 37px;
  height: 26px;
  border-radius: 3px;
  display: grid;
  place-items: center;
}
.tag-icon .icon { width: 15px; height: 15px; }
.tag-validade {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: var(--vermelho-tarja);
  color: #fff;
  border: 2px solid #fff;
  outline: 1px solid var(--vermelho-tarja);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.1;
  padding: 2px 4px;
  border-radius: 3px;
  text-transform: uppercase;
}

.product-name {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  min-height: 39px;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.economize {
  background: var(--vermelho-tarja);
  color: #fff;
  font-size: 14px;
  padding: 6px;
  border-radius: 3px;
  margin-bottom: 8px;
}
.old-price { color: var(--vermelho-tarja); text-decoration: line-through; font-size: 13px; }
.current-price { color: var(--vermelho-escuro); font-size: 22px; font-weight: 600; margin-top: 2px; }
.installments { color: var(--vermelho-tarja); font-size: 13px; margin-top: 8px; }
.installments b { font-weight: 600; }
.pix { color: var(--verde-pix); font-weight: 600; font-size: 15px; margin-top: auto; padding-top: 12px; }

.product-body { display: flex; flex-direction: column; flex: 1; padding-bottom: 14px; }

.product-footer { margin-top: auto; }
.rating {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #444;
  margin-bottom: 8px;
}
.stars { position: relative; display: inline-block; line-height: 0; }
.stars-base, .stars-cheias { display: inline-flex; gap: 2px; white-space: nowrap; }
.stars-base { color: #ddd; }
.stars-cheias { position: absolute; top: 0; left: 0; overflow: hidden; color: #f5b301; }
.stars .icon { width: 15px; height: 15px; flex-shrink: 0; }
.rating .nota { font-weight: 600; color: #333; }

.buy {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-bottom: 10px;
}
.qty {
  display: flex;
  align-items: center;
  gap: 2px;
}
.qty input {
  width: 58px;
  height: 36px;
  border: 0;
  background: #ececec;
  border-radius: 3px;
  text-align: center;
  font-size: 13px;
  -moz-appearance: textfield;
}
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.qty-btns { display: flex; flex-direction: column; }
.qty-btns button {
  border: 0;
  background: none;
  font-size: 14px;
  line-height: 1;
  padding: 1px 4px;
  cursor: pointer;
  color: #333;
}
.btn-comprar {
  flex: 1;
  height: 36px;
  border: 0;
  border-radius: 3px;
  background: var(--vermelho);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: background .2s;
}
.btn-comprar:hover { background: var(--vermelho-escuro); }
.btn-comprar .icon { width: 16px; height: 16px; }
.btn-comprar.added { background: var(--verde); }

.showcase .swiper-slide { height: auto; }

/* ---------------------------------------------------------
   Mini banners com produto
   --------------------------------------------------------- */
.mini-banners { padding-top: 64px; }
.mini-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  margin-bottom: 8px;
}
.mini-row > * { min-width: 0; }
/* width explícito: as margens auto do .swiper fariam o item do grid crescer até o conteúdo */
.mini-produto { padding: 10px; overflow: hidden; width: 100%; }
.mini-produto .item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
.mini-produto .item img { width: 190px; height: 250px; object-fit: contain; }
.mini-produto .info { text-align: center; max-width: 260px; }
.mini-produto .nome { color: var(--vermelho-escuro); font-size: 21px; font-weight: 500; line-height: 1.1; }
.mini-produto .preco { color: var(--vermelho-escuro); font-weight: 600; margin: 8px 0 14px; }
.mini-produto .btn-comprar { width: 100%; font-size: 13px; }

/* ---------------------------------------------------------
   Marcas
   --------------------------------------------------------- */
.marcas img { width: 100%; height: 90px; object-fit: cover; }
.marcas .swiper-slide { display: flex; align-items: center; }
.marca-jr { background: #fff; width: 274px; max-width: 100%; height: 90px; display: grid; place-items: center; padding: 0 22px; border: 1px solid #eee; }
.marca-jr img { height: auto; object-fit: contain; }
.mini-produto .old-price { margin-top: 8px; }
.mini-produto .old-price + .preco { margin-top: 0; }

/* Instagram */
.instagram {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 80px 0 40px;
}
.instagram h3 { margin: 0; font-size: 25px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.instagram h3 .icon { color: #e1061b; width: 26px; height: 26px; }
.instagram a { color: #e1061b; font-size: 18px; }

/* ---------------------------------------------------------
   Rodapé (mesmo modelo da JR Varejista)
   --------------------------------------------------------- */
.rodape {
  padding: 80px 0 30px;
  background: #0d1f1b;
  color: rgba(255,255,255,.7);
  font-family: "Inter", "Montserrat", Arial, sans-serif;
  text-align: center;
}
.rodape-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  margin-bottom: 50px;
}
.rodape h4 { margin: 0 0 20px; font-size: 1.15rem; font-weight: 700; color: rgba(255,255,255,.7); }
.rodape-links h4 { color: #fff; font-family: "Montserrat", sans-serif; font-size: 1rem; }

.app-badges { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.app-btn img { width: 160px; height: auto; border-radius: 8px; transition: transform .3s; }
.app-btn:hover img { transform: translateY(-3px); }

.rodape-links li { margin-bottom: 12px; }
.rodape-links a { color: rgba(255,255,255,.6); font-size: .9rem; transition: color .3s; }
.rodape-links a:hover { color: #daa520; }

.rodape-atendimento p { font-size: .9rem; margin: 0 0 12px; line-height: 1.6; }
.rodape-atendimento strong { color: rgba(255,255,255,.85); }
.whatsapp-destaque { color: #daa520; font-weight: 800; font-size: 1.1rem; text-decoration: underline; margin-left: 6px; }
.redes-sociais { display: flex; justify-content: center; align-items: center; gap: 15px; margin-top: 20px; }
.redes-sociais a { color: #fff; display: flex; transition: color .3s; }
.redes-sociais a:hover { color: #daa520; }
.redes-sociais .icon { width: 22px; height: 22px; }

.rodape-pagamento p { color: #fff; font-weight: 600; margin: 0 0 15px; }
.bandeiras { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }

.rodape-endereco { padding-bottom: 20px; font-size: .85rem; color: rgba(255,255,255,.6); }
.rodape-endereco p { margin: 0; }
.rodape-copyright {
  font-size: .8rem;
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 30px 16px 0;
}
.copyright-logo { display: inline-block; height: 14px; width: auto; vertical-align: middle; }

/* ---------------------------------------------------------
   Páginas institucionais (empresa, FAQ, políticas, termos)
   --------------------------------------------------------- */
.pagina-institucional {
  max-width: 800px;
  margin: 64px auto 80px;
  padding: 0 20px;
  line-height: 1.8;
  color: #333;
  font-size: 15px;
}
.pagina-institucional h1 { font-size: 2.2rem; margin: 0 0 40px; color: var(--vermelho-escuro); text-align: center; line-height: 1.3; }
.pagina-institucional h2 { font-size: 1.4rem; margin: 30px 0 15px; color: var(--vermelho-escuro); }
.pagina-institucional p { margin: 0 0 20px; text-align: justify; }
.pagina-institucional ul { list-style: disc; padding-left: 22px; margin-bottom: 20px; }
.voltar-loja { display: inline-block; margin-bottom: 40px; color: var(--vermelho-escuro); font-weight: 700; }
.alerta { background: #fdfdfd; border-left: 4px solid #daa520; padding: 20px; margin: 30px 0; font-style: italic; }
.faq-item { border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 20px; }
.caixa-rastreio { background: #f9f9f9; border: 1px solid #eee; padding: 30px; border-radius: 15px; margin: 40px 0; text-align: center; }
.caixa-rastreio input { width: 100%; max-width: 400px; padding: 15px; border: 2px solid #ddd; border-radius: 8px; margin-bottom: 20px; font-size: 1rem; }
.caixa-rastreio p { text-align: center; }
.btn-rastrear {
  background: var(--vermelho);
  color: #fff;
  padding: 15px 40px;
  border: 0;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: opacity .3s, transform .3s;
}
.btn-rastrear:hover { opacity: .9; transform: scale(1.02); }

/* ---------------------------------------------------------
   Página de coleção
   --------------------------------------------------------- */
.nav-list > li.ativo > a { background: rgba(0,0,0,.18); }

.pagina-colecao {
  background: var(--vermelho-escuro);
  padding: 56px 0 72px;
}

.breadcrumb {
  color: #fff;
  font-size: 15px;
  font-style: italic;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.breadcrumb a:hover { text-decoration: underline; }

.colecao {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

/* Filtros */
.filtros-topo, .filtros-overlay, .btn-abrir-filtros { display: none; }

.filtro-box {
  background: #fff;
  border-radius: 4px;
  padding: 14px 12px 16px;
  margin-bottom: 30px;
}
.filtro-box h3 { margin: 0 0 14px; font-size: 18px; font-weight: 500; }
.filtro-box li { margin-bottom: 10px; }
.filtro-box li:last-child { margin-bottom: 0; }
.filtro-box label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--vermelho-tarja);
  font-size: 14px;
}
.filtro-box input { accent-color: var(--vermelho); width: 15px; height: 15px; margin: 0; }
.filtro-box small { color: #333; font-size: 11px; }

.btn-filtrar, .btn-limpar {
  width: 100%;
  border: 0;
  border-radius: 3px;
  height: 38px;
  font-weight: 500;
  cursor: pointer;
  text-transform: uppercase;
}
.btn-filtrar { background: #12a512; color: #fff; display: none; }
.btn-limpar { background: transparent; color: #fff; text-decoration: underline; text-transform: none; }

/* Listagem */
.listagem-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.colecao-titulo { color: #fff; font-size: 28px; font-weight: 600; margin: 0; }
.listagem-acoes { display: flex; align-items: center; gap: 12px; color: #fff; }
.listagem-acoes label { font-weight: 600; font-size: 14px; }
.listagem-acoes select {
  height: 44px;
  min-width: 206px;
  border: 0;
  border-radius: 3px;
  padding: 0 14px;
  font-size: 14px;
  background: #eee;
}
.modo-exibicao { display: flex; gap: 6px; }
.modo-exibicao button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.modo-exibicao button.ativo { background: rgba(255,255,255,.75); color: #fff; }
.modo-exibicao .icon { width: 26px; height: 26px; }

.resultado { color: rgba(255,255,255,.8); font-size: 13px; margin: 0 0 18px; }

.grade-produtos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 10px;
}
.grade-produtos .product { background: #fff; border-radius: 4px; padding: 10px; }
.sem-resultado { grid-column: 1 / -1; color: #fff; text-align: center; font-size: 16px; padding: 40px 0; }

/* Modo lista */
.grade-produtos.modo-lista { grid-template-columns: 1fr; gap: 12px; }
.modo-lista .product {
  display: grid;
  grid-template-columns: 180px 1fr 240px;
  align-items: center;
  gap: 24px;
  text-align: left;
}
.modo-lista .product-image { margin: 0; }
.modo-lista .product-body { padding: 0; }
.modo-lista .product-name { min-height: 0; }
.modo-lista .economize { align-self: flex-start; padding: 6px 12px; }
.modo-lista .product-footer { margin: 0; }

/* Paginação */
.paginacao { display: flex; justify-content: center; gap: 6px; margin-top: 48px; flex-wrap: wrap; }
.paginacao button {
  min-width: 40px;
  height: 40px;
  border: 0;
  border-radius: 3px;
  background: #fff;
  color: var(--vermelho-escuro);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}
.paginacao button.ativo { background: var(--dourado); color: #fff; }
.paginacao button:disabled { opacity: .4; cursor: default; }

@media (max-width: 1200px) {
  .grade-produtos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
  .pagina-colecao { padding: 24px 0 48px; }
  .breadcrumb { margin-bottom: 16px; font-size: 13px; }
  .colecao { grid-template-columns: 1fr; gap: 0; }

  .colecao-titulo { font-size: 22px; width: 100%; }
  .listagem-acoes { width: 100%; flex-wrap: wrap; gap: 8px; }
  .listagem-acoes label { display: none; }
  .listagem-acoes select { flex: 1; min-width: 0; }
  .modo-exibicao { display: none; }
  .btn-abrir-filtros {
    display: block;
    flex: 1;
    height: 44px;
    border: 0;
    border-radius: 3px;
    background: #fff;
    color: var(--vermelho-escuro);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
  }

  /* Filtros viram painel lateral */
  .filtros {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(320px, 85vw);
    background: var(--vermelho-escuro);
    z-index: 110;
    overflow-y: auto;
    padding: 0 16px 24px;
    padding-top: env(safe-area-inset-top, 0px);
    transform: translateX(-100%);
    transition: transform .3s;
  }
  .filtros-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-size: 18px;
    padding: 16px 0;
  }
  .filtros-topo button { border: 0; background: none; color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
  .filtro-box { margin-bottom: 16px; }
  .btn-filtrar { display: block; }
  .filtros-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 105;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s;
  }
  .filtros-abertos .filtros { transform: none; }
  .filtros-abertos .filtros-overlay { opacity: 1; visibility: visible; }

  .grade-produtos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .grade-produtos .product { padding: 8px; }
}

/* ---------------------------------------------------------
   Página de produto
   --------------------------------------------------------- */
.pagina-produto { padding-top: 32px; }
.breadcrumb-produto { color: var(--vermelho-tarja); font-size: 14px; margin-bottom: 32px; }

.produto {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.foto-principal {
  position: relative;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  padding: 12px;
  aspect-ratio: 1 / 1;
}
.foto-principal img { width: 100%; height: 100%; object-fit: contain; }
.foto-principal .tag-circle { top: 12px; right: 12px; font-size: 13px; padding: 5px 12px; }

.miniaturas { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.miniaturas button {
  width: 90px;
  height: 90px;
  padding: 5px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}
.miniaturas button.ativo { border-color: var(--vermelho-tarja); }
.miniaturas img { width: 100%; height: 100%; object-fit: contain; }

.produto-compra {
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  padding: 28px 30px;
  text-align: center;
  position: sticky;
  top: 16px;
}
.produto-compra h1 { font-size: 26px; font-weight: 600; line-height: 1.3; margin: 0 0 12px; }
.produto-ref { color: var(--vermelho-tarja); font-size: 12px; margin: 0 0 8px; }
.produto-compra .rating { margin-bottom: 18px; }
.produto-precos { margin-bottom: 20px; }
.produto-precos .old-price { font-size: 15px; }
.produto-precos .current-price { font-size: 32px; }
.produto-precos .installments { font-size: 15px; }
.produto-precos .economize { display: inline-block; margin: 12px 0 0; padding: 6px 16px; }
.pix-info { color: var(--verde-pix); font-size: 15px; margin: 10px 0 0; }

.produto-compra .buy { justify-content: center; align-items: center; gap: 12px; padding-bottom: 16px; }
.qty-label { font-weight: 600; font-size: 14px; }
.produto-compra .qty input { height: 46px; width: 80px; font-size: 17px; }

/* Botão principal — mesmo padrão da JR Varejista */
.btn-checkout {
  width: 100%;
  background: #1a3c34;
  color: #fff;
  border: none;
  padding: 18px;
  font-size: 1.2rem;
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  transition: background .3s, transform .3s;
  margin-bottom: 12px;
  font-family: inherit;
}
.btn-checkout:hover { background: #24524a; transform: scale(1.02); }
.secure-checkout { text-align: center; font-size: 14px; color: #555; }
.compra-segura { font-size: 12px; color: #444; margin: 16px 0 0; }

.produto-descricao { max-width: 900px; margin: 64px auto 0; font-size: 16px; line-height: 1.7; color: #222; }
.produto-descricao h2 {
  font-size: 22px;
  font-weight: 600;
  color: var(--vermelho-escuro);
  margin: 40px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--vermelho-tarja);
  display: inline-block;
}
.produto-descricao h2:first-child { margin-top: 0; }
.tabela-caracteristicas { width: 100%; border-collapse: collapse; }
.tabela-caracteristicas th, .tabela-caracteristicas td { text-align: left; padding: 10px 14px; border-bottom: 1px solid #eee; }
.tabela-caracteristicas th { width: 40%; font-weight: 600; background: #fafafa; }
.lista-pagamento { list-style: disc; padding-left: 20px; }

.relacionados { padding-bottom: 24px; }

@media (max-width: 991px) {
  .pagina-produto { padding-top: 16px; }
  .breadcrumb-produto { margin-bottom: 16px; font-size: 12px; }
  .produto { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .produto-compra { position: static; padding: 20px 16px; }
  .produto-compra h1 { font-size: 20px; }
  .produto-precos .current-price { font-size: 28px; }
  .produto-compra .buy { flex-wrap: nowrap; }
  .produto-compra .qty { width: auto; margin: 0; }
  .produto-compra .qty input { width: 80px; }
  .btn-checkout { padding: 18px; font-size: 1.1rem; }
  .miniaturas button { width: 70px; height: 70px; }
  .produto-descricao { margin-top: 40px; font-size: 15px; }
  .produto-descricao h2 { font-size: 19px; }
}

/* Barra de cookies */
.cookies {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  background: #1a1a1a;
  color: #fff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 14px 14px 20px;
  font-size: 15px;
  z-index: 80;
}
.cookies a { text-decoration: none; }
.cookies button { border: 0; background: var(--vermelho); color: #fff; font-weight: 600; padding: 10px 22px; border-radius: 3px; cursor: pointer; }

/* Botão flutuante de atendimento */
.chat-float {
  position: fixed;
  right: 20px;
  bottom: 96px;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 10px;
}
.chat-float .balao {
  background: #fff;
  border-radius: 24px;
  padding: 12px 18px;
  font-size: 13px;
  color: #555;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
}
.chat-float .avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px #ffd54f, 0 4px 14px rgba(0,0,0,.2);
  display: grid;
  place-items: center;
  padding: 8px;
}

/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */
@media (max-width: 1200px) {
  .header-item .label-hide { display: none; }
  .header-itens { gap: 16px; }
  .nav-list > li > a { font-size: 14px; padding: 0 8px; }
  .rodape-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */
@media (max-width: 991px) {
  body { padding-bottom: 64px; }

  .header, .nav { display: none; }

  .header-mobile {
    display: block;
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    background: #fff;
    z-index: 60;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
  }
  /* menu | logo centralizado | contato + carrinho */
  .header-mobile .top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 10px 16px;
    gap: 12px;
  }
  .header-mobile .acoes-topo { display: flex; justify-content: flex-end; gap: 6px; }
  .menu-mobile .painel ul a.contato-menu { display: flex; align-items: center; gap: 10px; color: var(--vermelho-escuro); }
  .menu-mobile .contato-menu .icon { width: 20px; height: 20px; }
  .header-mobile .logo img { width: 150px; }
  .header-mobile .btn-icon {
    border: 0;
    background: none;
    color: var(--vermelho-escuro);
    padding: 5px;
    display: flex;
    position: relative;
    cursor: pointer;
  }
  .header-mobile .search { margin: 0 16px 10px; flex: none; height: 40px; }

  .mobile-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-top: 1px solid #eee;
    box-shadow: 0 -2px 10px rgba(0,0,0,.06);
    z-index: 70;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mobile-bar a, .mobile-bar button {
    flex: 1;
    border: 0;
    background: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 0 6px;
    font-size: 10px;
    color: var(--vermelho-escuro);
    position: relative;
    cursor: pointer;
  }
  .mobile-bar .icon { width: 22px; height: 22px; }
  .mobile-bar .badge {
    position: absolute;
    top: 4px;
    left: calc(50% + 6px);
    background: var(--vermelho-tarja);
    color: #fff;
    font-size: 9px;
    width: 15px; height: 15px;
    border-radius: 50%;
    display: grid;
    place-items: center;
  }

  /* Menu lateral */
  .menu-mobile {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 100;
    visibility: hidden;
  }
  .menu-mobile .overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.5);
    opacity: 0;
    transition: opacity .3s;
  }
  .menu-mobile .painel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(320px, 85vw);
    background: #fff;
    transform: translateX(-100%);
    transition: transform .3s;
    overflow-y: auto;
  }
  .menu-mobile.open { visibility: visible; }
  .menu-mobile.open .overlay { opacity: 1; }
  .menu-mobile.open .painel { transform: none; }
  .menu-mobile .painel-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--vermelho-nav);
    color: #fff;
    padding: 16px;
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    font-weight: 600;
    font-size: 16px;
  }
  .menu-mobile .painel-topo button { border: 0; background: none; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
  .menu-mobile .painel ul a {
    display: block;
    padding: 14px 18px;
    border-bottom: 1px solid #f0f0f0;
    font-weight: 500;
    color: #333;
  }
  .menu-mobile .painel ul a.destaque { color: var(--vermelho); font-weight: 700; }

  /* No celular os benefícios já rolam logo abaixo; a faixa e o filtro ficam só no computador */
  .barra-oferta, .filtro, .so-desktop { display: none; }

  /* No celular a vitrine "Aproveite" sobe para antes de "Nossas Coleções" */
  main.home { display: flex; flex-direction: column; }
  main.home > .banner-home, main.home > .beneficios { order: -2; }
  main.home > .vitrine-destaque { order: -1; padding-top: 32px; }
  main.home > .banner-meio { margin-top: 32px; }

  .banner-tarja { margin-top: 32px; }
  .beneficio strong { font-size: 13px; }
  .beneficio span { font-size: 12px; }

  .section { padding-top: 40px; }
  .section-header { margin-bottom: 24px; }
  .title-section, .filtro .title-section { font-size: 22px; }

  .categoria .thumb { width: 110px; height: 110px; }
  .categoria span { font-size: 14px; }

  .filtro { margin-top: 40px; }
  .filtro-form { gap: 14px; }
  .filtro-campo { flex: 1 1 100%; }
  .filtro-form button { width: 100%; }

  .product-name { font-size: 13px; }
  .current-price { font-size: 18px; }
  .economize { font-size: 12px; }
  .buy { flex-wrap: wrap; }
  .qty { width: 100%; justify-content: center; margin-bottom: 4px; }
  .qty input { width: 100%; }
  .btn-comprar { width: 100%; flex: none; }

  .banners-grid-2, .mini-row { grid-template-columns: 1fr; }
  .mini-banners { padding-top: 40px; }
  .mini-row.invert .mini-produto { order: 2; }
  .mini-produto .item { gap: 16px; }
  .mini-produto .item img { width: 130px; height: 170px; }
  .mini-produto .nome { font-size: 16px; }

  .marcas img, .marca-jr { height: 70px; }

  .instagram { padding: 48px 0 32px; }
  .instagram h3 { font-size: 20px; }
  .instagram a { font-size: 16px; }

  .rodape { padding: 56px 0 24px; }
  .rodape-grid { grid-template-columns: 1fr; }
  .pagina-institucional { margin-top: 32px; }
  .pagina-institucional h1 { font-size: 1.7rem; margin-bottom: 28px; }
  .pagina-institucional p { text-align: left; }

  .cookies { bottom: 76px; left: 12px; right: 12px; font-size: 12px; flex-direction: column; text-align: center; }
  .chat-float { bottom: 80px; right: 12px; }
  .chat-float .balao { padding: 9px 14px; font-size: 12px; }
  .chat-float .avatar { width: 56px; height: 56px; }
  .cookies:not([hidden]) ~ .chat-float { display: none; }
}

@media (max-width: 480px) {
  .banners-grid-3 { grid-template-columns: 1fr; }
}

.mini-row.unico { grid-template-columns: minmax(0, 1fr); }
.title-section.titulo-colecao { font-weight: 700; }
.section-header.cabecalho-colecao { text-align: left; }
.tag-circle.tag-selo { background: #1f6b3a; font-weight: 600; }

/* Adesivo redondo (vitrine "Mais Vendidos") */
.adesivo {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 2;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e53935, #b71c1c);
  border: 2px dashed rgba(255,255,255,.85);
  outline: 2px solid #c62828;
  color: #fff;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  padding: 5px;
  display: grid;
  place-items: center;
  text-align: center;
  line-height: 1.05;
  transform: rotate(-12deg);
  box-shadow: 0 3px 8px rgba(0,0,0,.25);
}
@media (max-width: 991px) { .adesivo { width: 44px; height: 44px; font-size: 6px; } }

@media (min-width: 992px) { .so-mobile { display: none !important; } }

/* Respiro entre o último banner e o rodapé */
main.home { padding-bottom: 64px; }
@media (max-width: 991px) { main.home { padding-bottom: 40px; } }

/* ---------------------------------------------------------
   Bloco de compra da página do produto (padrão JR Varejista)
   --------------------------------------------------------- */
.produto-compra { text-align: left; font-family: "Inter", "Montserrat", Arial, sans-serif; border-radius: 16px; }
.produto-compra h1 { font-size: 26px; font-weight: 700; line-height: 1.3; margin: 0 0 6px; color: #1a1a1a; }
.product-status { font-size: .85rem; color: #999; margin-bottom: 8px; }
.verified-icon { display: inline-block; width: 18px; height: 18px; background: #2196f3; border-radius: 50%; position: relative; vertical-align: middle; }
.verified-icon::after { content: ''; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.produto-compra .produto-ref { color: #999; margin-bottom: 16px; }

.testimonial-summary { display: flex; align-items: center; margin-bottom: 20px; }
.avatar-group { display: flex; margin-right: 34px; }
.avatar-item { margin-right: -18px; position: relative; }
.avatar-item img { width: 46px; height: 46px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.12); transition: transform .3s; }
.avatar-item:hover { z-index: 5; }
.avatar-item:hover img { transform: scale(1.15) translateY(-4px); }
.stars-small { color: #ffb400; letter-spacing: 2px; font-size: 18px; line-height: 1; }
.rating-info p { margin: 4px 0 0; font-size: 14px; color: #333; }

.urgency-box { background: #fff; border: 1.5px solid #e9ecef; padding: 15px; border-radius: 12px; margin-bottom: 22px; box-shadow: 0 4px 15px rgba(0,0,0,.03); text-align: center; }
.urgency-header { display: inline-flex; align-items: center; gap: 8px; }
.urgency-title { color: #c62828; font-weight: 800; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .5px; }
.urgency-fire { display: inline-block; animation: fogo 1s ease-in-out infinite alternate; }
.pulse-dot-red { width: 10px; height: 10px; background: #f00; border-radius: 50%; animation: pulso-vermelho 1.5s infinite; }
@keyframes pulso-vermelho { 0% { box-shadow: 0 0 0 0 rgba(255,0,0,.7); } 70% { box-shadow: 0 0 0 10px rgba(255,0,0,0); } 100% { box-shadow: 0 0 0 0 rgba(255,0,0,0); } }
@keyframes fogo { from { transform: scale(1) rotate(-4deg); } to { transform: scale(1.15) rotate(4deg); } }

.produto-compra .subtitle { font-size: 16px; color: #333; margin: 0 0 6px; }
.option-group { margin-bottom: 22px; }
.option-group label { display: block; font-weight: 700; color: #1a3c34; margin-bottom: 10px; }
.variant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.variant-btn { border: 2px solid #eee; background: #fff; border-radius: 12px; padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; font-size: 13px; color: #333; transition: border-color .2s, background .2s; }
.variant-btn strong { font-size: 15px; color: #1a1a1a; }
.variant-btn .variant-preco { font-size: 12px; color: #1a3c34; font-weight: 700; margin-top: 2px; }
.variant-btn:hover { border-color: #b9c8c2; }
.variant-btn.active { border-color: #1a3c34; background: rgba(26,60,52,.05); }

.produto-compra .produto-precos { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 22px; }
.preco-label { font-size: 18px; color: #333; padding-top: 6px; }
.preco-bloco { flex: 1; min-width: 0; }
.preco-de { color: #999; font-size: 15px; }
.preco-linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.preco-atual { color: #b8860b; font-size: 34px; font-weight: 800; letter-spacing: -.5px; }
.preco-off { background: #111; color: #fff; font-weight: 800; font-size: 15px; padding: 3px 10px; border-radius: 20px; }
.preco-parcelas { font-size: 18px; color: #333; margin: 8px 0 4px; }
.tabela-parcelas summary { color: #555; text-decoration: underline; cursor: pointer; font-size: 15px; margin-bottom: 12px; }
.tabela-parcelas ul { list-style: none; padding: 8px 12px; margin: 0 0 12px; border: 1px solid #eee; border-radius: 10px; font-size: 13px; }
.tabela-parcelas li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed #eee; }
.tabela-parcelas li:last-child { border-bottom: 0; }
.tabela-parcelas li span:last-child { color: #2e7d32; }
.pix-box { display: flex; align-items: center; gap: 22px; background: #f2fbf7; border: 1px solid #cdeee0; border-radius: 12px; padding: 14px 18px; margin-bottom: 16px; }
.pix-logo { color: #32bcad; font-weight: 800; font-size: 14px; white-space: nowrap; }
.pix-box strong { font-size: 18px; color: #1a1a1a; }
.pix-box div div { font-size: 14px; }
.pix-off { display: inline-block; background: #43a047; color: #fff; font-weight: 700; font-size: 13px; padding: 4px 9px; border-radius: 6px; margin: 6px 0; }
.pix-box p { margin: 0; color: #666; font-size: 13px; }
.savings-badge { display: inline-block; background: #111; color: #fff; font-weight: 700; padding: 8px 16px; border-radius: 20px; font-size: 15px; }

.produto-compra .buy { justify-content: flex-start; }
.produto-compra .secure-checkout, .produto-compra .compra-segura { text-align: center; }

@media (max-width: 991px) {
  .produto-compra h1 { font-size: 22px; }
  .preco-atual { font-size: 30px; }
  .preco-label { display: none; }
}

/* Faixa de cards passando (padrão JR Varejista) */
.testimonial-marquee-wrapper {
  margin-top: 20px;
  overflow: hidden;
  padding: 10px 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
}
.marquee-content { display: flex; gap: 15px; width: max-content; animation: rolar-faixa 30s linear infinite; }
.testimonial-marquee-wrapper:hover .marquee-content { animation-play-state: paused; }
.marquee-card { background: #fdfdfd; border: 1px solid #eee; padding: 12px 15px; border-radius: 12px; width: 220px; flex-shrink: 0; box-shadow: 0 4px 10px rgba(0,0,0,.02); text-align: left; }
.mc-header { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 6px; }
.mc-name { font-weight: 700; font-size: .85rem; color: #333; }
.mc-verified { background: #e6f7ef; color: #27ae60; font-size: .65rem; font-weight: 700; padding: 2px 7px; border-radius: 10px; white-space: nowrap; }
.mc-text { font-size: .78rem; color: #555; line-height: 1.4; margin: 0; }
@keyframes rolar-faixa { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 7.5px)); } }
@media (prefers-reduced-motion: reduce) { .marquee-content { animation: none; } }

/* Colunas do produto não podem crescer com a faixa que passa */
.produto > * { min-width: 0; }
.testimonial-marquee-wrapper { max-width: 100%; }

/* Foto que ocupa o círculo inteiro (sem bordas do quadrado aparecendo) */
.categoria .thumb-produto.thumb-cheia img { object-fit: cover; padding: 0; width: 100%; height: 100%; border-radius: 50%; }