/* Ícone de denúncia: garantir que fique ABAIXO do modal e do seu footer */
#info.link-info {
  z-index: 9999 !important; /* Deve ser menor que o z-index do modal (99999) */
}

/* Products Grid Biolink Block Styles */

/* Preservar alinhamento do Quill.js no frontend */
/* IMPORTANTE: Remover qualquer alinhamento padrão que possa estar sendo aplicado */
#productModalDescription {
  text-align: left !important;
  /* Padrão: alinhamento à esquerda */
  color: #000000 !important;
  /* Preto puro por padrão */
}

/* Animações */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.product-card {
  animation: fadeIn 0.2s ease-out;
}

.product-card:nth-child(1) {
  animation-delay: 0.1s;
}

.product-card:nth-child(2) {
  animation-delay: 0.2s;
}

.product-card:nth-child(3) {
  animation-delay: 0.3s;
}

.product-card:nth-child(4) {
  animation-delay: 0.4s;
}

.product-card:nth-child(5) {
  animation-delay: 0.5s;
}

.product-card:nth-child(6) {
  animation-delay: 0.6s;
}

/* Estados especiais */
.product-card.unavailable {
  opacity: 0.6;
  filter: grayscale(50%);
}

.product-card.unavailable .card-body {
  background-color: #fff !important;
}

/* Destaque na busca */
.product-card .highlight {
  background-color: #fff3cd;
  padding: 2px 4px;
  border-radius: 2px;
}

/* Spinner de carregamento */
.spinner-border-sm {
  width: 1rem;
  height: 1rem;
}

/* Utilitários */
.d-flex {
  display: flex !important;
}

.align-items-center {
  align-items: center !important;
}

.justify-content-center {
  justify-content: center !important;
}

.text-center {
  text-align: center !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

.mt-auto {
  margin-top: auto !important;
}

.w-100 {
  width: 100% !important;
}

.h-100 {
  height: 100% !important;
}

.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.border-0 {
  border: 0 !important;
}

.rounded {
  border-radius: 0.25rem !important;
}

.btn-block {
  display: block;
  width: 100%;
}

.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

/* Tema escuro (se suportado) - REMOVIDO para não forçar dark mode no frontend */
/* O tema do frontend deve ser controlado pelo 66biolinks, não pelo plugin */

/* ============================================
   CORREÇÕES PARA BOTÃO DE PESQUISA E PREVIEW MOBILE
   ============================================ */

/* Barra de pesquisa - garantir que botão fique ao lado direito do campo */
.products-controls .input-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
}

.products-controls .form-control {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.products-controls .input-group-append {
  display: flex !important;
  flex-shrink: 0 !important;
  align-items: stretch !important;
}

.products-controls .product-search-btn {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left: none !important;
  align-self: stretch !important;
  height: 100% !important;
  min-height: 0 !important;
}

/* Botão limpar pesquisa (dentro do campo) */
.products-search-input-group {
  overflow: visible !important;
}
.products-search-input-group .position-relative {
  overflow: visible !important;
}
.products-controls .product-search-clear {
  pointer-events: auto !important;
  opacity: 0.7;
  min-width: 2rem;
  min-height: 1.5rem;
}
.products-controls .product-search-clear.product-search-clear-visible {
  display: block !important;
}
.products-controls .product-search-clear:hover {
  opacity: 1;
  color: #495057 !important;
}

/* REMOVIDO: Todas as regras de preview mobile que quebram o layout no backend */
/* O preview mobile deve usar o CSS padrão do 66biolinks sem interferências */
/* Mantidas apenas as regras essenciais para o botão de pesquisa funcionar corretamente */

/* ============================================
   ESTILOS DO FAVICON DA URL DE DESTINO NO CARD
   ============================================ */
.product-link-favicon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
  text-decoration: none !important;
  background-color: #f8f9fa; /* Fundo leve para destaque */
  padding: 4px;
  border-radius: 4px;
  border: 1px solid #eee;
  transition: all 0.2s ease;
  z-index: 2; /* Ficar clicável acima do card click */
}

.product-link-favicon-wrapper:hover {
  background-color: #fff;
  border-color: #ddd;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transform: translateY(-1px);
}

.product-link-favicon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
}



/* Garantir que elementos sem cor definida sejam pretos (não cinza) */
/* IMPORTANTE: Usar seletor mais específico para não sobrescrever cores definidas pelo usuário */
#productModalDescription>p:not([style*="color"]):not([class*="ql-color"]),
#productModalDescription>div:not([style*="color"]):not([class*="ql-color"]),
#productModalDescription p:not([style*="color"]):not([class*="ql-color"]):not([style*="background"]),
#productModalDescription div:not([style*="color"]):not([class*="ql-color"]):not([style*="background"]),
#productModalDescription span:not([style*="color"]):not([class*="ql-color"]):not([style*="background"]) {
  color: #000000 !important;
}


/* Alinhamento à esquerda - DEVE funcionar mesmo sem classe (padrão) */
#productModalDescription p:not([class*="ql-align"]):not([style*="text-align"]),
#productModalDescription div:not([class*="ql-align"]):not([style*="text-align"]),
#productModalDescription>*:not([class*="ql-align"]):not([style*="text-align"]) {
  text-align: left !important;
  /* Padrão: alinhamento à esquerda */
}

#productModalDescription .ql-align-left,
#productModalDescription p.ql-align-left,
#productModalDescription div.ql-align-left,
#productModalDescription [class*="ql-align-left"] {
  text-align: left !important;
}

#productModalDescription .ql-align-center,
#productModalDescription p.ql-align-center,
#productModalDescription div.ql-align-center,
#productModalDescription [class*="ql-align-center"] {
  text-align: center !important;
}

#productModalDescription .ql-align-right,
#productModalDescription p.ql-align-right,
#productModalDescription div.ql-align-right,
#productModalDescription [class*="ql-align-right"] {
  text-align: right !important;
}

#productModalDescription .ql-align-justify,
#productModalDescription p.ql-align-justify,
#productModalDescription div.ql-align-justify,
#productModalDescription [class*="ql-align-justify"] {
  text-align: justify !important;
}

/* Garantir que estilos do Quill sejam preservados */
/* Negrito bem visível e escuro - Sobrescreve qualquer estilo que possa estar interferindo */
#productModalDescription strong,
#productModalDescription b,
#productModalDescription .ql-bold,
#productModalDescription [style*="font-weight: bold"],
#productModalDescription [style*="font-weight:700"],
#productModalDescription [style*="font-weight:800"],
#productModalDescription [style*="font-weight:900"] {
  font-weight: 700 !important;
  /* 700 = bold mais forte que 400 */
  color: #000000 !important;
  /* Preto puro para máxima visibilidade */
  -webkit-font-smoothing: antialiased;
  /* Melhor renderização no Chrome/Safari */
  -moz-osx-font-smoothing: grayscale;
  /* Melhor renderização no Firefox */
}

/* Garantir que elementos dentro de strong/b também sejam escuros e grossos */
#productModalDescription strong *,
#productModalDescription b * {
  font-weight: 700 !important;
  color: #000000 !important;
  /* Preto puro mesmo dentro de strong/b */
}

/* CORREÇÃO: Remover classe text-muted que estava aplicando cor cinza */
/* Garantir que mesmo se text-muted for aplicada, o texto seja preto */
#productModalDescription.text-muted,
#productModalDescription {
  color: #000000 !important;
  /* Preto puro - sobrescreve text-muted */
}

/* Sobrescrever text-muted apenas para elementos em negrito */
#productModalDescription.text-muted strong,
#productModalDescription.text-muted b,
#productModalDescription strong,
#productModalDescription b {
  color: #000000 !important;
  /* Forçar preto mesmo com text-muted */
  font-weight: 700 !important;
}

#productModalDescription em,
#productModalDescription i {
  font-style: italic;
}

#productModalDescription u {
  text-decoration: underline;
}

#productModalDescription s,
#productModalDescription strike {
  text-decoration: line-through;
}

/* Preservar tamanho de fonte do Quill */
#productModalDescription .ql-size-small {
  font-size: 0.75em !important;
}

#productModalDescription .ql-size-large {
  font-size: 1.5em !important;
}

#productModalDescription .ql-size-huge {
  font-size: 2.5em !important;
}

/* Preservar família de fonte do Quill */
#productModalDescription .ql-font-serif,
#productModalDescription [class*="ql-font-serif"] {
  font-family: Georgia, "Times New Roman", serif !important;
}

#productModalDescription .ql-font-monospace,
#productModalDescription [class*="ql-font-monospace"] {
  font-family: Monaco, "Courier New", monospace !important;
}

/* Fontes latinas */
#productModalDescription .ql-font-arial,
#productModalDescription [class*="ql-font-arial"] {
  font-family: Arial, Helvetica, sans-serif !important;
}

#productModalDescription .ql-font-times-new-roman,
#productModalDescription [class*="ql-font-times-new-roman"] {
  font-family: 'Times New Roman', Times, serif !important;
}

#productModalDescription .ql-font-georgia,
#productModalDescription [class*="ql-font-georgia"] {
  font-family: Georgia, serif !important;
}

#productModalDescription .ql-font-verdana,
#productModalDescription [class*="ql-font-verdana"] {
  font-family: Verdana, Geneva, sans-serif !important;
}

#productModalDescription .ql-font-tahoma,
#productModalDescription [class*="ql-font-tahoma"] {
  font-family: Tahoma, Geneva, sans-serif !important;
}

#productModalDescription .ql-font-trebuchet-ms,
#productModalDescription [class*="ql-font-trebuchet-ms"] {
  font-family: 'Trebuchet MS', Helvetica, sans-serif !important;
}

#productModalDescription .ql-font-courier-new,
#productModalDescription [class*="ql-font-courier-new"] {
  font-family: 'Courier New', Courier, monospace !important;
}

#productModalDescription .ql-font-helvetica,
#productModalDescription [class*="ql-font-helvetica"] {
  font-family: Helvetica, Arial, sans-serif !important;
}

#productModalDescription .ql-font-impact,
#productModalDescription [class*="ql-font-impact"] {
  font-family: Impact, Charcoal, sans-serif !important;
}

#productModalDescription .ql-font-comic-sans-ms,
#productModalDescription [class*="ql-font-comic-sans-ms"] {
  font-family: 'Comic Sans MS', cursive, sans-serif !important;
}

/* Garantir que outras fontes do Quill sejam preservadas */
#productModalDescription [class*="ql-font-"] {
  font-family: inherit !important;
}

/* Font-weight customizado */
#productModalDescription [style*="font-weight: 400"],
#productModalDescription [style*="font-weight:400"] {
  font-weight: 400 !important;
}

#productModalDescription [style*="font-weight: 500"],
#productModalDescription [style*="font-weight:500"] {
  font-weight: 500 !important;
}

#productModalDescription [style*="font-weight: 600"],
#productModalDescription [style*="font-weight:600"] {
  font-weight: 600 !important;
}

#productModalDescription [style*="font-weight: 700"],
#productModalDescription [style*="font-weight:700"] {
  font-weight: 700 !important;
}

#productModalDescription [style*="font-weight: 800"],
#productModalDescription [style*="font-weight:800"] {
  font-weight: 800 !important;
}

#productModalDescription [style*="font-weight: 900"],
#productModalDescription [style*="font-weight:900"] {
  font-weight: 900 !important;
}

/* Permitir imagens na descrição (inseridas via código HTML) */
#productModalDescription img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 10px auto;
}

/* Garantir que scripts e iframes sejam removidos */
#productModalDescription script,
#productModalDescription iframe,
#productModalDescription object,
#productModalDescription embed {
  display: none !important;
}

/* FORÇAR FUNDOS CLAROS - Sobrescrever qualquer tema dark do Bootstrap */
.biolink-block-products-grid .form-control,
.biolink-block-products-grid input,
.biolink-block-products-grid textarea,
.biolink-block-products-grid select {
  background-color: #fff !important;
  color: #212529 !important;
  border-color: #ced4da !important;
}

.biolink-block-products-grid .form-control:focus,
.biolink-block-products-grid input:focus,
.biolink-block-products-grid textarea:focus,
.biolink-block-products-grid select:focus {
  background-color: #fff !important;
  color: #212529 !important;
  border-color: #80bdff !important;
}

.biolink-block-products-grid .input-group-text {
  background-color: #f8f9fa !important;
  color: #495057 !important;
  border-color: #ced4da !important;
}

/* Botões categorias (pills e demais): contraste WCAG AA */
.biolink-block-products-grid .btn-light {
  background-color: #e9ecef !important;
  color: #212529 !important;
  border-color: #dee2e6 !important;
}

.biolink-block-products-grid .btn-light:hover,
.biolink-block-products-grid .btn-light:focus {
  background-color: #dee2e6 !important;
  color: #212529 !important;
  border-color: #ced4da !important;
}

.biolink-block-products-grid .btn-light.active {
  background-color: #0056b3 !important;
  color: #fff !important;
  border-color: #0056b3 !important;
}

.biolink-block-products-grid .card {
  background-color: #fff !important;
  color: #212529 !important;
}

.biolink-block-products-grid .card-body {
  background-color: #fff !important;
  color: #212529 !important;
}

/* Contraste WCAG AA: texto legível (≥4.5:1 em fundo claro) */
.biolink-block-products-grid .text-muted {
  color: #434343 !important;
}

/* Garantir que botões mantenham cores corretas */
/* Botão Ver produto: contraste WCAG AA */
.biolink-block-products-grid .btn-primary {
  background-color: #0056b3 !important;
  border-color: #0056b3 !important;
  color: #fff !important;
}

.biolink-block-products-grid .btn-primary:hover,
.biolink-block-products-grid .btn-primary:focus {
  background-color: #004085 !important;
  border-color: #004085 !important;
  color: #fff !important;
}

.biolink-block-products-grid .btn-outline-primary {
  color: #007bff !important;
  border-color: #007bff !important;
  background-color: transparent !important;
}

.biolink-block-products-grid .btn-outline-primary:hover,
.biolink-block-products-grid .btn-outline-primary:focus {
  background-color: #007bff !important;
  border-color: #007bff !important;
  color: #fff !important;
}

.biolink-block-products-grid .btn-link {
  color: #007bff !important;
}

.biolink-block-products-grid .btn-link:hover {
  color: #0056b3 !important;
}

/* Garantir que mensagens e textos também fiquem claros */
.biolink-block-products-grid #no-products-219,
.biolink-block-products-grid [id^="no-products-"] {
  background-color: transparent !important;
  color: #495057 !important;
}

.biolink-block-products-grid .alert,
.biolink-block-products-grid .alert-warning {
  background-color: #fff3cd !important;
  color: #856404 !important;
  border-color: #ffeaa7 !important;
}

/* Garantir que spinner também seja visível */
.biolink-block-products-grid .spinner-border {
  border-color: #007bff !important;
  border-right-color: transparent !important;
}

/* ----- Botão "Carregar Mais" (fundo sempre visível, mesmo sem foco) ----- */
.biolink-block-products-grid [id^="load-more-container-"] {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}
/* Forçar fundo em todos os estados para vencer .btn-outline-primary do tema */
.biolink-block-products-grid button[id^="load-more-btn-"],
.biolink-block-products-grid button[id^="load-more-btn-"]:hover,
.biolink-block-products-grid button[id^="load-more-btn-"]:focus,
.biolink-block-products-grid button[id^="load-more-btn-"]:active,
.biolink-block-products-grid button[id^="load-more-btn-"]:focus-visible {
  background-color: rgba(0, 123, 255, 0.22) !important;
  color: #e7f1ff !important;
  border-color: #3395ff !important;
  min-width: 11rem;
  padding: 0.6rem 1.75rem;
  font-size: 1rem;
  font-weight: 500;
  border-width: 1.5px;
  border-radius: 0.375rem;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
}
.biolink-block-products-grid button[id^="load-more-btn-"]:hover:not(:disabled),
.biolink-block-products-grid button[id^="load-more-btn-"]:focus:not(:disabled),
.biolink-block-products-grid button[id^="load-more-btn-"]:active:not(:disabled) {
  background-color: #007bff !important;
  color: #fff !important;
  border-color: #007bff !important;
  transform: translateY(-1px);
}
.biolink-block-products-grid button[id^="load-more-btn-"]:active:not(:disabled) {
  transform: translateY(0);
}

/* ----- Paginação (botões maiores e com contraste em fundo escuro) ----- */
.biolink-block-products-grid .products-grid-pagination-wrap {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  padding: 0.75rem 0;
}
.biolink-block-products-grid .products-grid-pagination-wrap nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.75rem;
}
.biolink-block-products-grid .products-grid-pagination-pages {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0.2rem;
}
/* Números de página: fundo e texto visíveis em tema escuro */
.biolink-block-products-grid .products-grid-pagination-pages .btn {
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0.45rem 0.6rem;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 0.375rem;
  border-width: 1.5px;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
}
.biolink-block-products-grid .products-grid-pagination-pages .btn-outline-secondary {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}
.biolink-block-products-grid .products-grid-pagination-pages .btn-outline-secondary:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.22) !important;
  color: #f1f5f9 !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}
/* Anterior / Próxima: maior e com contraste */
.biolink-block-products-grid .products-grid-pagination-prev,
.biolink-block-products-grid .products-grid-pagination-next {
  min-width: 0;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 0.375rem;
  border-width: 1.5px;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}
.biolink-block-products-grid .products-grid-pagination-prev:hover:not(:disabled),
.biolink-block-products-grid .products-grid-pagination-next:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.22) !important;
  color: #f1f5f9 !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}
.biolink-block-products-grid .products-grid-pagination-prev:disabled,
.biolink-block-products-grid .products-grid-pagination-next:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.biolink-block-products-grid [id^="pagination-info-"] {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.95rem;
  color: #cbd5e1 !important;
  opacity: 0.95;
}

/* Mobile/tablet: só "Ver mais" (sem botões 1, 2, 3 … Anterior/Próxima) */
@media (max-width: 991px) {
  .biolink-block-products-grid .products-grid-pagination-wrap {
    display: none !important;
  }
}

/* Área reservada: evita layout shift ao alternar Carregar Mais / paginação */
.biolink-block-products-grid .products-grid-actions-wrap {
  position: relative;
}

/* ----- Skeleton loading (troca de página / filtro) ----- */
.biolink-block-products-grid .product-card-skeleton {
  pointer-events: none;
  animation: products-grid-skeleton-pulse 1.2s ease-in-out infinite;
}
.biolink-block-products-grid .product-card-skeleton .product-skeleton-image,
.biolink-block-products-grid .product-card-skeleton .product-skeleton-line,
.biolink-block-products-grid .product-card-skeleton .product-skeleton-btn {
  background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.12) 50%, rgba(0,0,0,0.06) 75%);
  background-size: 200% 100%;
  animation: products-grid-skeleton-shine 1.5s ease-in-out infinite;
  border-radius: 0.25rem;
}
.biolink-block-products-grid .product-card-skeleton .product-skeleton-image {
  width: 100%;
  padding-top: 100%;
  min-height: 120px;
}
.biolink-block-products-grid .product-card-skeleton .product-skeleton-line {
  height: 0.875rem;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}
.biolink-block-products-grid .product-card-skeleton .product-skeleton-line:nth-child(3) {
  width: 70%;
}
.biolink-block-products-grid .product-card-skeleton .product-skeleton-btn {
  height: 2.25rem;
  margin-top: 0.75rem;
  width: 100%;
  max-width: 140px;
}
@keyframes products-grid-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
@keyframes products-grid-skeleton-shine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Skeleton em layout lista: altura fixa por linha = mesma dos cards reais (100px mobile, 120px desktop) */
.products-grid.layout-mobile-list .product-item.product-card-skeleton--list,
.products-grid[class*="layout-desktop-list_"] .product-item.product-card-skeleton--list {
  margin-bottom: 0.75rem !important;
}
.products-grid.layout-mobile-list .product-card-skeleton--list.product-card-wrapper,
.products-grid[class*="layout-desktop-list_"] .product-card-skeleton--list.product-card-wrapper {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  min-height: 0 !important;
}
.products-grid.layout-mobile-list .product-card-skeleton--list .card,
.products-grid[class*="layout-desktop-list_"] .product-card-skeleton--list .card {
  display: flex;
  flex-direction: row;
  height: 100px !important;
  min-height: 100px !important;
  max-height: 100px !important;
  align-items: stretch;
  overflow: hidden;
}
.products-grid.layout-mobile-list .product-card-skeleton--list .product-skeleton-media-row,
.products-grid[class*="layout-desktop-list_"] .product-card-skeleton--list .product-skeleton-media-row {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  border-radius: 0.5rem 0 0 0.5rem;
  overflow: hidden;
}
.products-grid.layout-mobile-list .product-card-skeleton--list .product-skeleton-media-row {
  max-width: 144px;
  min-width: 100px;
  width: 100px;
  height: 100px !important;
  min-height: 100px !important;
  max-height: 100px !important;
}
.products-grid.layout-mobile-list .product-card-skeleton--list .product-skeleton-media-row .product-skeleton-image,
.products-grid[class*="layout-desktop-list_"] .product-card-skeleton--list .product-skeleton-media-row .product-skeleton-image {
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
  height: 100px !important;
  min-height: 100px !important;
  max-height: 100px !important;
  padding-top: 0 !important;
  flex-shrink: 0;
}
.products-grid.layout-mobile-list .product-card-skeleton--list .card-body {
  flex: 1;
  min-width: 0;
  padding: 0.35rem 0.5rem;
  display: flex;
  flex-direction: column;
  min-height: 0 !important;
  height: 100px !important;
  max-height: 100px !important;
  overflow: hidden;
}
.products-grid.layout-mobile-list .product-card-skeleton--list .product-skeleton-line,
.products-grid.layout-mobile-list .product-card-skeleton--list .product-skeleton-btn {
  height: 0.6rem;
  margin-top: 0.2rem;
  margin-bottom: 0;
  flex-shrink: 0;
}
.products-grid.layout-mobile-list .product-card-skeleton--list .product-skeleton-line:nth-child(3) {
  width: 50%;
}
.products-grid.layout-mobile-list .product-card-skeleton--list .product-skeleton-btn {
  margin-top: auto;
  order: 999;
  height: 1.5rem;
  min-height: 1.5rem;
  max-height: 1.5rem;
}
@media (min-width: 768px) {
  .products-grid[class*="layout-desktop-list_"] .product-card-skeleton--list .card {
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
  }
  .products-grid[class*="layout-desktop-list_"] .product-card-skeleton--list .product-skeleton-media-row {
    max-width: 160px;
    min-width: 120px;
    width: 120px;
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
  }
  .products-grid[class*="layout-desktop-list_"] .product-card-skeleton--list .product-skeleton-media-row .product-skeleton-image {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
    padding-top: 0 !important;
  }
  .products-grid[class*="layout-desktop-list_"] .product-card-skeleton--list .card-body {
    min-height: 0 !important;
    height: 120px !important;
    max-height: 120px !important;
    padding: 0.35rem 0.5rem;
  }
  .products-grid[class*="layout-desktop-list_"] .product-card-skeleton--list .product-skeleton-line,
  .products-grid[class*="layout-desktop-list_"] .product-card-skeleton--list .product-skeleton-btn {
    height: 0.6rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
  }
  .products-grid[class*="layout-desktop-list_"] .product-card-skeleton--list .product-skeleton-btn {
    margin-top: auto;
    order: 999;
    height: 1.75rem;
    min-height: 1.75rem;
    max-height: 1.75rem;
  }
}

/* Produtos - Tamanhos responsivos */
.product-card-wrapper {
  padding: 0.5rem;
}

.product-card {
  transition: transform 0.2s, box-shadow 0.2s;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* Corpo do card: ocupa espaço restante e empurra o botão para o rodapé */
.product-card .card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
}
.product-card .card-body .btn.mt-auto,
.product-card .card-body a.btn.mt-auto {
  margin-top: auto !important;
  flex-shrink: 0;
}

/* Botão "Ver produto" – regra única para todos os viewports: texto centralizado, sem quebra */
.biolink-block-products-grid .product-card .card-body .btn-primary,
.biolink-block-products-grid .product-card .card-body .btn-outline-primary,
.biolink-block-products-grid .product-card .card-body a.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 0.5rem 1rem;
  line-height: 1.25;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15) !important;
}

/* Card, título e área de mídia clicáveis para abrir o modal */
.product-card {
  cursor: pointer;
}

.product-card .card-title,
.product-card .product-card-title {
  cursor: pointer;
}

.product-card a.btn,
.product-card button {
  cursor: pointer;
}

/* Container da galeria - aspect-ratio evita “pulo” ao carregar imagem */
.product-gallery {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  min-height: 100px;
  overflow: hidden;
  position: relative;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-card .card-img-top,
.product-card .product-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Mostrar imagem completa em vez de cortar */
  object-position: center;
  transition: opacity 0.3s ease;
  display: block;
  background: #f8f9fa;
  /* Fundo claro para espaços vazios */
}

/* Telas médias e grandes - padding do wrapper */
@media (min-width: 992px) {
  .product-card-wrapper {
    padding: 0.75rem;
  }
}

@media (min-width: 1200px) {
  .product-card-wrapper {
    padding: 1rem;
  }
}

/* Modal de Produto */
#productModal .product-modal-gallery {
  border-radius: 0.375rem 0.375rem 0 0;
}

#productModal .product-modal-nav {
  transition: all 0.2s;
}

#productModal .product-modal-nav:hover {
  background: rgba(255, 255, 255, 1) !important;
  transform: translateY(-50%) scale(1.1);
}

#productModal .product-modal-nav:active {
  transform: translateY(-50%) scale(0.95);
}

/* Reservar espaço antes da imagem carregar (evita pulo/layout shift ao abrir modal) */
#productModal .product-modal-image-container {
  min-height: 200px;
  aspect-ratio: 1 / 1;
  transition: opacity 0.3s;
}

#productModal .product-modal-image-container img {
  transition: opacity 0.3s;
}

#productModal .product-read-more {
  font-weight: 500;
}

#productModal .product-read-more:hover {
  text-decoration: underline !important;
}

/* Botão "Mais" na descrição */
.product-description {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Estilos para descrição HTML rica */
.product-description p,
.product-description div {
  margin-bottom: 0.5rem;
}

.product-description p:last-child,
.product-description div:last-child {
  margin-bottom: 0;
}

.product-description h1,
.product-description h2,
.product-description h3 {
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.product-description h1 {
  font-size: 1.5rem;
}

.product-description h2 {
  font-size: 1.25rem;
}

.product-description h3 {
  font-size: 1.1rem;
}

.product-description ul,
.product-description ol {
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}

.product-description a {
  color: #007bff;
  text-decoration: underline;
}

.product-description a:hover {
  color: #0056b3;
}

.product-read-more {
  display: inline !important;
  white-space: nowrap;
  font-weight: 500;
  cursor: pointer;
  margin-left: 4px;
  vertical-align: baseline;
}

.product-description-short {
  display: inline;
}

.product-card .product-description {
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.5;
}


/* Garantir que botão "Mais" apareça */
.product-read-more {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin-left: 4px;
  padding: 0;
  border: none;
  background: none;
  color: #007bff;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 500;
}

.product-read-more:hover {
  color: #0056b3;
  text-decoration: underline;
}

/* Remove o "salto" do modal do Bootstrap (só quando fechado; quando .show, usamos transform para centralizar) */
#productModal.fade:not(.show) .modal-dialog {
    transform: none !important;
}

/* Modal centralizado e melhorado - seguindo padrão 66biolinks */
/* left:0 right:0 evita assimetria com scrollbar (100vw inclui scrollbar e desloca) */
#productModal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 99999 !important;
  overflow-x: visible !important; /* visible evita corte lateral do modal */
  overflow-y: auto !important; /* Permite scroll no próprio container */
}

/* Quando FECHADO: ficar atrás de outros modais (ex: Compartilhar) e não capturar toques/cliques */
#productModal:not(.show) {
  z-index: 1000 !important; /* Abaixo do modal Bootstrap 1050 */
  pointer-events: none !important;
}

/* O fundo (backdrop) – centraliza o modal horizontalmente */
#productModal.show {
  background-color: rgba(0, 0, 0, 0.6) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important; /* Começa do topo, não do centro */
  padding: 1rem !important;
}

/* Ajuste do Dialog: sem borda própria (a borda fica só no .modal-content) */
#productModal .modal-dialog,
#productModal .product-modal-dialog {
  border: none !important;
  box-shadow: none !important;
}

#productModal .product-modal-dialog {
  width: 100% !important;
  max-width: 650px !important;
  margin: 0.5rem auto !important;
  pointer-events: none;
  z-index: 10001 !important;
  position: relative !important;
  display: block !important;
}

/* Desktop: centralização absoluta (left 50% + translateX -50%) - mais confiável que flex */
@media (min-width: 576px) {
  #productModal.show {
    display: block !important; /* block para permitir absolute no filho */
    padding: 0 !important; /* sem padding para overlay ocupar 100% da viewport */
  }
  #productModal.show .modal-dialog,
  #productModal.show .product-modal-dialog {
    position: absolute !important;
    left: 50% !important;
    top: 1rem !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    width: 650px !important;
    max-width: calc(100vw - 2rem) !important;
    flex-shrink: 0 !important;
  }
  /* Footer fixo: centralizado na viewport (position fixed relativo ao viewport) */
  #productModal.show .modal-footer {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 650px !important;
    max-width: calc(100vw - 2rem) !important;
  }
}

/* Quando tem vídeo no desktop, expandir largura e altura */
@media (min-width: 992px) {
  #productModal.product-modal-video-active-modal .product-modal-dialog {
    max-width: 900px !important;
    margin-top: 0.25rem !important; /* Ainda mais perto do topo quando vídeo */
  }
}

@media (max-width: 575px) {
  #productModal.show {
    padding: 0.5rem !important;
  }
  #productModal .product-modal-dialog {
    margin: 1rem auto !important;
  }
}

#productModal .modal-content {
    pointer-events: auto; /* Cliques no card branco são capturados */
    z-index: 10002 !important;
    opacity: 1 !important;
    background: #fff !important;
    position: relative;
    padding: 0 !important;
    border-radius: calc(2 * var(--border-radius, 0.5rem));
    overflow: visible;
    max-height: calc(100vh - 1.5rem);
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* Bordas laterais suaves: linha fina clara + sombra leve (evita contorno escuro) */
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.03) !important;
}


/* Garantir que o conteúdo do modal não tenha blur - regras específicas */
#productModal .modal-dialog,
#productModal .modal-content,
#productModal .modal-header,
#productModal .modal-body,
#productModal .modal-footer,
#productModal .product-modal-gallery,
#productModal .product-modal-image-container,
#productModal .product-modal-image,
#productModal .product-modal-nav,
#productModal .product-modal-indicator,
#productModal .product-modal-description-container,
#productModal #productModalDescription,
#productModal #productModalLabel,
#productModal #productModalImage,
#productModal #productModalLink,
#productModal * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  /* Garantir que nenhum blur seja aplicado */
  -webkit-filter: none !important;
  /* Garantir que elementos sejam clicáveis */
  pointer-events: auto !important;
}

/* Garantir que o modal-header tenha fundo branco e seja visível */
#productModal .modal-header {
  background: #fff !important;
  opacity: 1 !important;
  color: #000 !important;
}

/* Modal body: área rolável; footer fica fixo no fim */
#productModal .modal-body {
  background: #fff !important;
  opacity: 1 !important;
  color: #000 !important;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  padding-bottom: 0.5rem !important;
}

/* Quando descrição expandida, modal mantém comportamento fluido com scroll interno */
#productModal.description-expanded .modal-body {
  overflow-y: auto !important;
}

#productModal.description-expanded .modal-dialog {
  max-height: calc(100vh - 2rem) !important;
}

#productModal.description-expanded .modal-content {
  max-height: calc(100vh - 2rem) !important;
  overflow: hidden !important;
}

/* Botão "Ver produto" fixo na parte inferior; mesma largura do modal-content (650px) para evitar corte por overflow */
#productModal.show .modal-footer {
  position: fixed !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 650px !important;
  margin: 0 !important;
  z-index: 10003 !important;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15) !important;
  border-top: 1px solid #eee !important;
  border-radius: 0 0 calc(2 * var(--border-radius, 0.5rem)) calc(2 * var(--border-radius, 0.5rem)) !important;
  padding-top: 1rem !important;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0)) !important;
  padding-left: calc(1.5rem + 3px) !important;
  padding-right: calc(1.5rem + 3px) !important;
}

/* Mobile: footer ocupa toda a largura (sem cantos arredondados para encostar nas bordas) */
@media (max-width: 575px) {
  #productModal.show .modal-footer {
    max-width: 100% !important;
    border-radius: 0 !important;
  }
}

/* Conteúdo do footer alinhado ao modal */
#productModal.show .modal-footer .product-modal-footer-wrapper {
  max-width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

#productModal .modal-footer {
  background: #fff !important;
  opacity: 1 !important;
  color: #000 !important;
  flex-shrink: 0 !important;
  position: sticky !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10 !important;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15) !important;
  border-top: 1px solid #eee !important;
  margin-top: auto !important;
  padding: 1rem 1.5rem !important;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0)) !important;
}

/* Garantir que o modal-content tenha position relative para elementos absolute funcionarem */
#productModal .modal-content {
  position: relative !important;
}

/* Espaço no fim do body para o rodapé fixo não tapar o conteúdo */
#productModal.show .modal-body {
  padding-bottom: 5.5rem !important;
}
#productModal .modal-body {
  padding-bottom: 0.5rem !important;
}

/* Garantir que o modal-content use flex para o footer ficar sempre no fim */
#productModal .modal-content {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

/* Garantir que o modal-body seja scrollável */
#productModal .modal-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  min-height: 0 !important;
}

/* Header: título à esquerda, botão X circular à direita (ao lado do título) */
#productModal .modal-header.product-modal-header,
#productModal .product-modal-header {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
  padding: 0.75rem 1.5rem 0.5rem 1.5rem !important;
  width: 100% !important;
  border-bottom: none !important;
  position: relative !important;
  box-sizing: border-box !important;
}

#productModal .modal-title,
#productModal .product-modal-title {
  color: #000 !important;
  opacity: 1 !important;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding-right: 0.5rem !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  box-sizing: border-box !important;
}

/* Título em telas pequenas: reduz tamanho da fonte para caber em 2 linhas */
@media (max-width: 767px) {

  #productModal .modal-title,
  #productModal .product-modal-title {
    font-size: 1rem !important;
    /* Menor em mobile para garantir 2 linhas */
    line-height: 1.3 !important;
    padding-right: 0 !important;
    /* Botão está centralizado, não precisa de espaço extra */
  }
}

/* Título em telas médias: tamanho moderado */
@media (min-width: 768px) and (max-width: 991px) {

  #productModal .modal-title,
  #productModal .product-modal-title {
    font-size: 1.15rem !important;
    line-height: 1.35 !important;
  }
}

/* Título em telas grandes: tamanho maior mas ainda limitado a 2 linhas */
@media (min-width: 992px) {

  #productModal .modal-title,
  #productModal .product-modal-title {
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
  }

  /* Em telas muito grandes, pode aumentar um pouco mais */
  @media (min-width: 1200px) {

    #productModal .modal-title,
    #productModal .product-modal-title {
      font-size: 1.3rem !important;
    }
  }
}

/* Garantir que a descrição seja visível com cor preta por padrão */
#productModal #productModalDescription {
  color: #000000 !important;
  /* Preto puro para máxima legibilidade */
  opacity: 1 !important;
}

/* Garantir que parágrafos e divs sem cor definida sejam pretos */
/* IMPORTANTE: Não sobrescrever cores definidas pelo usuário */
#productModal #productModalDescription>p:not([style*="color"]):not([class*="ql-color"]),
#productModal #productModalDescription>div:not([style*="color"]):not([class*="ql-color"]),
#productModal #productModalDescription p:not([style*="color"]):not([class*="ql-color"]):not([style*="background"]),
#productModal #productModalDescription div:not([style*="color"]):not([class*="ql-color"]):not([style*="background"]),
#productModal #productModalDescription span:not([style*="color"]):not([class*="ql-color"]):not([style*="background"]) {
  color: #000000 !important;
}


/* Garantir que o backdrop do modal não afete o conteúdo e não bloqueie cliques */
#productModal.show~.modal-backdrop,
.modal-backdrop.show {
  backdrop-filter: blur(0px) !important;
  -webkit-backdrop-filter: blur(0px) !important;
  z-index: 9999 !important;
  /* Backdrop não deve bloquear cliques no modal */
}

/* Garantir que o backdrop fique ATRÁS do modal */
body.modal-open .modal-backdrop {
  z-index: 9999 !important;
}

/* Garantir que o modal fique ACIMA do backdrop */
body.modal-open #productModal {
  z-index: 10000 !important;
}

body.modal-open #productModal .modal-dialog {
  z-index: 10001 !important;
}

body.modal-open #productModal .modal-content {
  z-index: 10002 !important;
}

/* Garantir que todos os elementos interativos do modal sejam clicáveis */
#productModal button,
#productModal a,
#productModal .product-modal-nav,
#productModal .close,
#productModal .modal-header .close,
#productModal .modal-footer .btn,
#productModal .modal-footer a {
  pointer-events: auto !important;
  z-index: 10003 !important;
  position: relative;
  cursor: pointer !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Garantir que o modal-backdrop não bloqueie cliques no modal */
body.modal-open .modal-backdrop,
.modal-backdrop.show,
.show.fade.modal-backdrop {
  pointer-events: none !important;
  /* Permitir cliques através do backdrop */
}

/* Garantir que o #backdrop não interfira com o modal - REGRAS FORTES PARA SOBRESCREVER 66BIOLINKS */
body.modal-open #backdrop,
body.modal-open #backdrop.link-body-backdrop,
#productModal.show~#backdrop,
#productModal.show+#backdrop,
body:has(#productModal.show) #backdrop,
body:has(#productModal.show) #backdrop.link-body-backdrop {
  z-index: 9998 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  display: none !important;
  /* Backdrop do body deve ficar atrás do modal backdrop e sem blur */
}

/* Garantir que o #backdrop seja desativado quando o modal estiver aberto - REGRAS ADICIONAIS */
#productModal.show~#backdrop,
body.modal-open #backdrop,
body.modal-open #backdrop.link-body-backdrop {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Garantir que o modal-backdrop do Bootstrap não interfira (usamos o fundo do próprio #productModal) */
body.modal-open .modal-backdrop,
.modal-backdrop.show,
.modal-backdrop {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Garantir que o link-content não bloqueie o modal, mas permita scroll */
body.modal-open .link-content,
body:has(#productModal.show) .link-content {
  pointer-events: auto !important;
  /* Permitir interação para scroll */
}

/* Permitir scroll da página quando modal estiver aberto */
body.modal-open,
body:has(#productModal.show),
html.modal-open {
  overflow: auto !important;
  /* Permitir scroll */
  padding-right: 0 !important;
  /* Remover padding do scrollbar */
  position: relative !important;
  /* Não fixar posição */
}

/* Garantir que html também permita scroll */
html.modal-open {
  overflow: auto !important;
}

body.modal-open #productModal {
  pointer-events: auto;
}

/* Dialog: altura adaptável - calc(100%-2rem) em mobile; desktop sobrescreve com 650px via @media 576px */
#productModal .product-modal-dialog {
  max-width: calc(100% - 2rem);
  margin: 1.75rem auto !important;
  display: block !important;
  pointer-events: none;
}

/* Conteúdo do modal: altura controlada e bordas laterais suaves */
#productModal .modal-content {
  pointer-events: auto;
  width: 100%;
  position: relative;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: calc(2 * var(--border-radius, 0.5rem));
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.03) !important;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 1.5rem) !important;
  min-height: 0;
  overflow: hidden !important;
}

/* Quando descrição expandida, mantemos o scroll interno para o footer continuar fixo */
#productModal.description-expanded .modal-content {
  max-height: calc(100vh - 1rem) !important;
}

/* Corpo do modal: onde o scroll real acontece */
#productModal .modal-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  -webkit-overflow-scrolling: touch;
}

/* Ajustes para telas muito curtas (landscape mobile): galeria em coluna para não espremer mídia */
@media (max-height: 500px), (orientation: landscape) and (max-height: 520px) {
  #productModal .modal-content {
    max-height: calc(100vh - 1rem) !important;
  }
  #productModal .product-modal-dialog {
    margin: 0.5rem auto !important;
    max-width: calc(100vw - 1rem) !important;
  }

  /* Galeria em coluna: imagem/vídeo em cima (largura total), miniaturas em faixa horizontal abaixo */
  #productModal .product-modal-gallery-wrapper {
    padding: 0.2rem 0.5rem 0.35rem 0.5rem;
  }

  #productModal .product-modal-gallery {
    flex-direction: column !important;
    align-items: stretch;
    min-height: 0;
    gap: 0.35rem;
  }

  #productModal .product-modal-image-container {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 100% !important;
    min-height: min(220px, 45vh) !important;
    max-height: min(280px, 50vh) !important;
    order: 1;
    overflow: visible !important;
  }

  #productModal .product-modal-image-container.product-modal-video-active {
    aspect-ratio: 16 / 9;
    min-height: min(180px, 40vh) !important;
    max-height: min(260px, 48vh) !important;
  }

  #productModal .product-modal-image-container img,
  #productModal .product-modal-image {
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: contain !important;
    object-position: center;
  }

  /* Miniaturas em linha horizontal rolável abaixo da mídia */
  #productModal .product-modal-thumbnails {
    flex-direction: row !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: 72px !important;
    min-height: 56px;
    width: 100% !important;
    border-left: none !important;
    border-top: 1px solid #e0e0e0;
    padding: 0.35rem 0 0 !important;
    margin: 0 !important;
    gap: 0.35rem;
    order: 2;
    -webkit-overflow-scrolling: touch;
  }

  #productModal .product-modal-thumbnail,
  #productModal .product-modal-thumbnail-wrapper img {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    flex-shrink: 0;
  }
}

/* Quando descrição expandida, modal-content pode expandir */
#productModal.description-expanded .modal-content {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

@media (min-width: 576px) {
  #productModal .product-modal-dialog {
    max-width: calc(100% - 3rem);
    margin: 1.5rem auto;
  }
}

@media (min-width: 768px) {

  #productModal .product-modal-dialog,
  #productModal .modal-dialog {
    max-width: 600px;
    /* Menor para desktop */
    margin: 0.5rem auto !important;
    /* Centralizar horizontalmente */
  }
}

@media (min-width: 992px) {

  #productModal .product-modal-dialog,
  #productModal .modal-dialog {
    max-width: 650px;
    /* Tamanho moderado estilo Mercado Livre */
    margin: 0.5rem auto !important;
    /* Centralizar horizontalmente */
  }
}

@media (min-width: 1200px) {

  #productModal .product-modal-dialog,
  #productModal .modal-dialog {
    max-width: 700px;
    /* Máximo controlado para desktop */
    margin: 0.5rem auto !important;
    /* Centralizar horizontalmente */
  }

  /* Footer: sticky no desktop grande; manter max-width 700px para alinhar com modal */
  #productModal .modal-footer {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
  }
  #productModal.show .modal-footer {
    max-width: 700px !important;
  }

  /* Garantir que modal-dialog esteja centralizado no desktop grande */
  #productModal .modal-dialog,
  #productModal .product-modal-dialog {
    margin: 2rem auto !important;
    /* Centralizar horizontalmente */
  }

  /* Ajustar padding inferior do modal-body no desktop grande */
  #productModal .modal-body {
    padding-bottom: 0.5rem !important;
  }
}

/* Conteúdo do modal: altura adaptável - expande quando descrição expandida */
#productModal .modal-content {
  border-radius: calc(2 * var(--border-radius, 0.5rem));
  overflow: visible;
  max-height: calc(100vh - 1.5rem);
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 0 !important;
  /* Remover qualquer padding padrão do Bootstrap */
}

/* Quando descrição expandida, modal-content pode expandir além da viewport */
#productModal:has(.product-modal-description-container.expanded) .modal-content {
  max-height: none !important;
  overflow: visible !important;
}

/* Modal em tela inteira no mobile: container ocupa 100% da tela e botão "Ver produto" sempre visível no rodapé */
@media (max-width: 767px) {

  /* Overlay do modal: tela cheia, sem centralizar o dialog (stretch) */
  body.modal-open #productModal.modal,
  body.modal-open #productModal.modal.show,
  #productModal.modal.show {
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    padding: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
  }

  /* Dialog: ocupa toda a altura disponível, sem margem */
  body.modal-open #productModal .modal-dialog.product-modal-dialog,
  body.modal-open #productModal .modal-dialog,
  #productModal .modal-dialog.product-modal-dialog,
  #productModal .modal-dialog {
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Conteúdo do modal: flex column para o footer ficar sempre no fim - pode expandir quando descrição expandida */
  #productModal .modal-content {
    min-height: 0 !important;
    height: auto !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    overflow: visible !important;
  }

  /* Quando descrição expandida no mobile, modal mantém comportamento fluido */
  #productModal.description-expanded .modal-content {
    max-height: 100vh !important;
    overflow: hidden !important;
  }

  /* Quando descrição expandida, modal-body continua com scroll interno */
  #productModal.description-expanded .modal-body {
    overflow-y: auto !important;
  }

/* Rodapé sticky no fim: "Ver produto" sempre visível dentro do modal */
#productModal .modal-footer {
  flex-shrink: 0 !important;
  position: sticky !important;
  bottom: 0 !important;
  padding: 1rem 1.5rem !important;
  background: #fff !important;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1) !important;
  border-top: 1px solid #eee !important;
  z-index: 10 !important;
  margin-top: auto !important; /* Empurra para o final do content */
  width: 100% !important;
}

/* Container do rodapé com flexbox para o ícone e botão */
#productModal .product-modal-footer-wrapper {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  gap: 0.75rem !important; /* Espaço entre o ícone e o botão */
}

/* Ícone de domínio ao lado do botão */
#productModal .product-modal-domain-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 8px;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  transition: all 0.2s ease;
  flex-shrink: 0; /* Impede que o botão esmague o ícone */
}

#productModal .product-modal-domain-icon-link:hover {
  background-color: #e9ecef;
  border-color: #dee2e6;
  transform: translateY(-2px);
}

#productModal .product-modal-favicon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

/* No mobile, ajustar padding inferior para safe areas */
@media (max-width: 767px) {
  #productModal .modal-footer {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0)) !important;
  }
}

  /* Botão "Ver produto" no rodapé do modal */
  #productModal .modal-footer .btn,
  #productModal .modal-footer a.btn {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Ajustar padding inferior do modal-body no mobile */
  #productModal .modal-body {
    padding-bottom: 0.5rem !important;
  }

  /* Header no mobile */
  #productModal .modal-header.product-modal-header,
  #productModal .product-modal-header {
    padding: 0.6rem 1rem 0.5rem 1rem !important;
  }

  #productModal .modal-title,
  #productModal .product-modal-title {
    padding-left: 0 !important;
    padding-right: 0.5rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


#productModal .modal-content {
  position: relative !important;
  padding: 0 !important;
}

/* Botão Fechar: circular, cinza escuro, X branco - ao lado do título (estilo do primeiro print) */
#productModal .product-modal-close-btn,
#productModal .modal-header .close {
  flex-shrink: 0 !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  border: none !important;
  background-color: #6c757d !important;
  color: #fff !important;
  font-size: 0.875rem !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, transform 0.15s ease !important;
  z-index: 1051 !important;
}

#productModal .product-modal-close-btn:hover,
#productModal .modal-header .close:hover {
  background-color: #5a6268 !important;
  color: #fff !important;
  transform: scale(1.05) !important;
}

#productModal .product-modal-close-btn:active,
#productModal .modal-header .close:active {
  transform: scale(0.95) !important;
}

@media (min-width: 768px) {

  #productModal .product-modal-close-btn,
  #productModal .modal-header .close {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    font-size: 1rem !important;
  }

  #productModal .modal-header.product-modal-header,
  #productModal .product-modal-header {
    padding: 0.75rem 1.5rem 0.5rem 1.5rem !important;
  }

  /* Garantir que modal-dialog esteja centralizado no desktop */
  #productModal .modal-dialog,
  #productModal .product-modal-dialog {
    margin: 2rem auto !important;
    /* Centralizar horizontalmente */
  }

  /* Footer sticky no desktop também */
  #productModal .modal-footer {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
  }

  /* Ajustar padding inferior do modal-body no desktop */
  #productModal .modal-body {
    padding-bottom: 0.5rem !important;
  }
}

/* Galeria: imagem à esquerda, miniaturas verticais à direita (desktop e mobile) */
#productModal .product-modal-gallery-wrapper {
  background: #fff !important;
  padding: 0.25rem 0.75rem 0.5rem 0.75rem;
}

#productModal .product-modal-gallery {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.2rem;
  position: relative;
  min-height: 280px;
  background: #fff !important;
}

#productModal .product-modal-image-container {
  flex: 1;
  min-width: 0;
}

/* Miniaturas do modal: roláveis (scroll) para não quebrar o container quando há muitas */
#productModal .product-modal-thumbnails {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: auto;
  max-height: min(400px, 50vh);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 0 0.25rem;
  margin: 0;
  border-left: 1px solid #e0e0e0;
  flex-shrink: 0;
  overscroll-behavior: contain;
}

#productModal .product-modal-thumbnail {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border: 2px solid transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #fff;
  padding: 2px;
  flex-shrink: 0;
}

#productModal .product-modal-thumbnail:hover {
  border-color: #007bff;
  transform: scale(1.05);
}

#productModal .product-modal-thumbnail.active {
  border-color: #007bff !important;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* Miniaturas de vídeo */
#productModal .product-modal-thumbnail-wrapper {
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

#productModal .product-modal-thumbnail-wrapper:hover {
  transform: scale(1.05);
}

#productModal .product-modal-thumbnail-video {
  border: 2px solid transparent;
}

#productModal .product-modal-thumbnail-video.active,
#productModal .product-modal-thumbnail-wrapper.active .product-modal-thumbnail-video {
  border-color: #007bff !important;
}

/* Miniatura de vídeo: recortar barras pretas (letterboxing) do thumbnail do YouTube */
#productModal .product-modal-thumbnail-video,
#productModal .product-modal-thumbnail-wrapper .product-modal-thumbnail-video,
#productModal .product-modal-thumbnails img.product-modal-thumbnail-video {
  object-fit: cover !important;
  object-position: center !important;
}

#productModal .product-modal-thumbnail-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}

#productModal .product-modal-thumbnail-play-icon i {
  font-size: 1.8rem;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease;
}

#productModal .product-modal-thumbnail-wrapper:hover .product-modal-thumbnail-play-icon i {
  transform: scale(1.2);
}

/* Container de imagem: centralizado - imagem nunca cortada (overflow visible + contain) */
#productModal .product-modal-image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-height: 250px;
  max-height: 70vh;
  padding: 1rem;
  position: relative;
  margin: 0 auto;
  overflow: visible !important;
  background: #f8f9fa;
}

/* Desktop: imagem menor para caber modal inteiro na tela (título + imagem + botão visíveis) */
@media (min-width: 992px) {
  /* Modal não ultrapassa a viewport */
  #productModal.show .modal-content,
  #productModal .modal-content {
    max-height: calc(100vh - 1rem) !important;
  }

  #productModal .product-modal-gallery-wrapper {
    flex-shrink: 0;
  }

  /* Galeria com altura limitada: sobra espaço garantido para título + rodapé "Ver produto" */
  #productModal .product-modal-gallery {
    min-height: 200px;
    align-items: stretch;
    max-height: calc(100vh - 16rem);
  }

  /* Container da imagem: reduzido para o rodapé nunca ser cortado */
  #productModal .product-modal-image-container {
    min-height: 200px;
    max-height: calc(100vh - 16rem);
    padding: 0.75rem;
  }

  #productModal .product-modal-image-container .product-modal-image,
  #productModal .product-modal-image {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain !important;
    object-position: center;
  }

  #productModal .product-modal-thumbnails {
    max-height: calc(100vh - 16rem);
  }
}

/* Imagem do modal clicável para zoom */
#productModal .product-modal-image-container {
  cursor: zoom-in;
}
#productModal .product-modal-image-container:has(img[src=""]) {
  cursor: default;
}

/* Overlay de zoom ao clicar na imagem do modal */
.product-modal-image-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 100050;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  cursor: zoom-out;
}
.product-modal-image-zoom-overlay img {
  max-width: 95vw;
  max-height: 95vh;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  border-radius: 0.25rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.product-modal-image-zoom-overlay .product-modal-image-zoom-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  z-index: 1;
}
.product-modal-image-zoom-overlay .product-modal-image-zoom-close:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* Vídeo YouTube: container 16:9, iframe preenche 100% */
#productModal .product-modal-image-container.product-modal-video-active {
  aspect-ratio: 16 / 9;
  width: 100%;
  /* Limitar a largura para que a altura (baseada no ratio 16:9) nunca ultrapasse 60vh */
  max-width: min(100%, calc(60vh * 16 / 9)) !important;
  max-height: 60vh !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0.5rem auto !important;
  position: relative;
  overflow: visible !important; /* Não cortar controles do vídeo */
  align-self: center;
  background: #000;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#productModal .product-modal-image-container.product-modal-video-active iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 8px;
}

/* Tamanho padrão para todas as imagens no modal - Mostra imagem completa, nunca cortada */
#productModal .product-modal-image {
  /* Mostrar imagem completa - escala para caber sem cortar (sem min que force overflow) */
  max-width: 100%;
  max-height: 70vh;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;

  /* Sempre imagem inteira visível, centralizada */
  object-fit: contain !important;
  object-position: center;

  /* Visual */
  border-radius: 0.25rem;
  display: block;
  margin: 0 auto;

  /* Sombra sutil para destacar a imagem */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

  /* Transição suave */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efeito hover sutil na imagem */
#productModal .product-modal-image:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

/* Setas de navegação - Escondidas (não necessárias com miniaturas) */
#productModal .product-modal-image-container .product-modal-nav {
  display: none !important;
}

/* Indicador de imagem - Escondido (não necessário com miniaturas) */
#productModal .product-modal-indicator {
  display: none !important;
}

/* Indicador de imagem */
#productModal .product-modal-indicator {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  z-index: 10;
  pointer-events: none;
}

/* Garantir que imagens muito pequenas ou muito grandes tenham comportamento consistente */
#productModal .product-modal-image-container::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

/* Forçar dimensões mínimas e máximas para o container */
#productModal .product-modal-image-container {
  box-sizing: border-box;
}

/* Container de descrição expansível verticalmente (expandir mostra texto completo; modal expande verticalmente) */
#productModal .product-modal-description-container {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid #eee;
  flex-shrink: 0;
  background: #fff;
}

/* Área de descrição: quando recolhida, mostra apenas 100 caracteres */
#productModal .product-modal-description-content {
  max-height: min(50vh, 320px);
  overflow-y: auto;
  overflow-x: hidden;
  transition: max-height 0.35s ease;
  padding-right: 0.5rem;
}

/* Quando expandida, remove limite de altura para permitir expansão vertical do modal */
#productModal .product-modal-description-container.expanded .product-modal-description-content {
  max-height: none !important;
  overflow-y: visible !important;
}

/* Quando descrição expandida, modal expande verticalmente em vez de ter scroll interno */
#productModal .product-modal-description-container.expanded~.modal-footer,
body:has(#productModal .product-modal-description-container.expanded) #productModal .modal-body {
  flex: 1 1 auto;
}

#productModal .product-modal-description-toggle {
  margin-top: 0.5rem;
  font-weight: 500;
  color: #007bff !important;
  text-decoration: none !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0.25rem 0;
}

#productModal .product-modal-description-toggle:hover {
  color: #0056b3 !important;
  text-decoration: underline !important;
}

#productModal .product-modal-description-toggle .fa-chevron-down {
  transition: transform 0.25s ease;
  margin-left: 0.25rem;
}

#productModal .product-modal-description-container.expanded .product-modal-description-toggle .fa-chevron-down {
  transform: rotate(180deg);
}

#productModal #productModalDescription {
  line-height: 1.65;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 0.9375rem;
  color: #000000 !important;
  /* Preto puro por padrão */
}

/* Garantir que elementos sem cor definida sejam pretos */
/* IMPORTANTE: Não sobrescrever cores definidas pelo usuário */
#productModal #productModalDescription>p:not([style*="color"]):not([class*="ql-color"]),
#productModal #productModalDescription>div:not([style*="color"]):not([class*="ql-color"]),
#productModal #productModalDescription p:not([style*="color"]):not([class*="ql-color"]):not([style*="background"]),
#productModal #productModalDescription div:not([style*="color"]):not([class*="ql-color"]):not([style*="background"]),
#productModal #productModalDescription span:not([style*="color"]):not([class*="ql-color"]):not([style*="background"]) {
  color: #000000 !important;
}


/* Footer do modal */
#productModal .modal-footer {
  padding: 1rem 1.5rem;
  /* Flutuante: já definido acima (position: sticky; box-shadow) */
}

/* Mobile: ajustar footer para alinhar conteúdo à esquerda */
@media (max-width: 767px) {
  #productModal .modal-footer {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  #productModal .modal-footer .btn,
  #productModal .modal-footer a.btn {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Zoom/Lupa para Mobile - Sem Modal */
.product-image-zoom-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.product-image-zoom-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-image-zoomed {
  max-width: 100%;
  max-height: calc(100% - 100px);
  /* Espaço para miniaturas */
  object-fit: contain;
  border-radius: 0.25rem;
}

.product-image-zoom-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-size: 1.25rem;
  transition: all 0.2s ease;
}

.product-image-zoom-close:hover {
  background: rgba(255, 255, 255, 1);
  transform: scale(1.1);
}

/* Linha de mídia do card: imagem à esquerda + miniaturas em coluna à direita */
.product-card-media-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
  border-radius: 0.5rem 0.5rem 0 0;
  background: #fff;
}

.product-card-media-row .product-gallery {
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 0.5rem 0 0 0;
}

.product-card-media-row .product-gallery:only-child {
  border-radius: 0.5rem 0.5rem 0 0;
}

/* Miniaturas do card: coluna vertical à direita da imagem */
.product-card-thumbnails {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  background: #f8f9fa;
  border-top: 1px solid #eee;
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
}

.product-card-thumbnails-vertical {
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  padding: 0.35rem;
  gap: 0.25rem;
  border-top: none;
  border-left: 1px solid #eee;
  width: 44px;
  min-height: 100%;
  border-radius: 0 0.5rem 0 0;
}

.product-card-thumbnail {
  transition: all 0.2s ease;
  cursor: pointer;
  object-fit: contain !important;
  /* Mostrar imagem completa nas miniaturas */
  background: #f8f9fa !important;
  /* Fundo claro para espaços vazios */
}

.product-card-thumbnail:hover {
  opacity: 1 !important;
  transform: scale(1.15);
  border-color: #007bff !important;
  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

.product-card-thumbnail.active {
  border-color: #007bff !important;
  border-width: 2px !important;
  opacity: 1 !important;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
}

.product-card-thumbnail:active {
  transform: scale(1.05);
}

/* Categoria no card: clicável para filtrar (contraste WCAG AA ≥4.5:1 em fundo claro) */
.biolink-block-products-grid .product-card-category,
.product-card-category.text-muted,
button.product-card-category.btn-link {
  font-size: 0.8125rem;
  text-decoration: none !important;
  border: none;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: color 0.2s ease;
  color: #434343 !important;
}

.biolink-block-products-grid .product-card-category:hover,
.product-card-category:hover {
  color: #004494 !important;
}

/* Botão Play na miniatura de vídeo (estilo YouTube – chama mais atenção) */
.product-card-thumbnail-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  z-index: 1;
}

.product-card-thumbnail-play-yt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 50%;
  font-size: 10px;
  padding-left: 2px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.product-card-thumbnail-video:hover .product-card-thumbnail-play-yt {
  background: rgba(255, 0, 0, 0.9);
  box-shadow: 0 2px 8px rgba(255, 0, 0, 0.4);
}

/* Expansão de Descrição no Mobile */
.product-description-full {
  display: block;
  margin-top: 0.5rem;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Miniaturas horizontais no mobile (para zoom) */
.product-image-zoom-thumbnails {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  max-width: 90%;
  overflow-x: auto;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 0.5rem;
  backdrop-filter: blur(10px);
}

.product-image-zoom-thumbnail {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border: 2px solid transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.product-image-zoom-thumbnail:hover,
.product-image-zoom-thumbnail.active {
  border-color: #fff;
  transform: scale(1.1);
}

/* Responsividade mobile */
@media (max-width: 767px) {

  /* Modal em tela inteira no mobile: expandir para baixo, botão "Ver produto" flutuante visível */
  #productModal .product-modal-dialog {
    max-width: 100%;
    margin: 0;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
  }

  /* Mobile vertical: imagem/vídeo em cima (largura total), miniaturas em faixa horizontal abaixo */
  #productModal .product-modal-gallery-wrapper {
    padding: 0.2rem 0.5rem 0.35rem 0.5rem;
  }

  #productModal .product-modal-gallery {
    flex-direction: column !important;
    align-items: stretch;
    min-height: 0;
    gap: 0.35rem;
  }

  #productModal .product-modal-image-container {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 100% !important;
    min-height: 200px;
    max-height: 50vh;
    padding: 0.75rem;
    background: #f8f9fa;
    order: 1;
    overflow: visible !important;
  }

  /* Vídeo no modal: proporção 16:9 */
  #productModal .product-modal-image-container.product-modal-video-active {
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9;
    align-self: center;
  }

  /* Imagem sempre inteira visível: contain, sem corte em cima/baixo/lados */
  #productModal .product-modal-image {
    object-fit: contain !important;
    object-position: center;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: auto !important;
    height: auto !important;
  }

  /* Miniaturas em faixa horizontal rolável abaixo da mídia */
  #productModal .product-modal-thumbnails {
    flex-direction: row !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: 72px !important;
    min-height: 56px;
    width: 100% !important;
    border-left: none !important;
    border-top: 1px solid #e0e0e0;
    padding: 0.35rem 0 0 !important;
    margin: 0 !important;
    gap: 0.35rem;
    order: 2;
    -webkit-overflow-scrolling: touch;
  }

  #productModal .product-modal-thumbnail,
  #productModal .product-modal-thumbnail-wrapper img {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    flex-shrink: 0;
  }

  /* Melhorar layout dos produtos no mobile */
  .product-card .card-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    min-height: auto;
    /* Permitir expansão */
  }

  .product-description {
    position: relative;
  }

  .product-description-full {
    display: block;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #e9ecef;
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  /* Garantir que botão "Ver Produto" fique visível após expansão */
  .product-card .btn-primary {
    margin-top: auto;
    /* Empurrar para baixo */
    order: 999;
    /* Garantir que fique por último */
  }

  #productModal .product-modal-nav {
    width: 40px;
    height: 40px;
  }

  #productModal .product-modal-prev {
    left: 0.5rem;
  }

  #productModal .product-modal-next {
    right: 0.5rem;
  }
}

/* ============================================
   SISTEMA DE GRID E LISTAS (MOBILE & DESKTOP)
   ============================================ */
.products-grid,
.products-grid * {
    box-sizing: border-box;
}

/* Sem padding nas bordas: o container pai já limita; 0 evita desperdício de espaço */
.biolink-block-products-grid .products-controls,
.products-grid {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}

/* Responsivo: grid e itens podem encolher dentro do container do tema sem cortar colunas */
.products-grid {
    min-width: 0;
}
.products-grid .product-item,
.products-grid .product-card {
    min-width: 0; /* Permite o card encolher dentro da célula do grid (evita overflow em lista 3 col) */
}

/* Remover padding dos itens quando o grid já está compensando */
.products-grid .product-item { /* Removido .row */
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* 1. REGRAS GERAIS PARA TODOS OS ITENS */
.products-grid .product-item {
  width: 100%; /* Fallback */
  padding-right: 15px;
  padding-left: 15px;
}

/* Estado de carregamento (busca/filtro): feedback visual */
.products-grid.loading {
  opacity: 0.65;
  pointer-events: none;
  min-height: 120px;
}

/* ============================================
   MOBILE (Telas menores que 768px)
   ============================================ */
@media (max-width: 767px) {

  /* Mesmo 0 no mobile: container pai define os limites */
  .biolink-block-products-grid .products-controls,
  .products-grid {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
  }

  /* Mobile: 1 Coluna (Normal) – grid explícito para prevalecer sobre qualquer regra desktop */
  .products-grid.layout-mobile-grid_1_col {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .products-grid.layout-mobile-grid_1_col .product-item {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Mobile: 2 Colunas */
  .products-grid.layout-mobile-grid_2_col {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .products-grid.layout-mobile-grid_2_col .product-item {
    flex: none;
    max-width: none;
    padding-right: 0;
    padding-left: 0;
  }

  /* Mobile: Lista (Miniatura + Nome) – 1 coluna; miniaturas verticais visíveis em tamanho reduzido (30px), igual à versão funcional products-grid (6) */
  .products-grid.layout-mobile-list {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .products-grid.layout-mobile-list .product-item {
    flex: 0 0 100%;
    max-width: 100%;
    height: auto;
    min-height: auto;
  }

  .products-grid.layout-mobile-list .product-card {
    display: flex;
    flex-direction: row;
    height: auto;
    min-height: auto;
    align-items: flex-start;
  }

  .products-grid.layout-mobile-list .product-card-media-row {
    flex: 0 0 auto;
    max-width: 144px;
    /* Ajuste para ter um pouco mais de respiro */
    min-width: 100px;
    height: 100px;
    /* Altura fixa para manter a consistência */
  }

  .products-grid.layout-mobile-list .product-card-media-row .product-gallery {
    flex: 0 0 100px;
    /* Largura fixa da imagem principal */
    max-width: 100px;
    height: 100px;
    flex-shrink: 0;
    /* Impede que a imagem encolha */
  }

  .products-grid.layout-mobile-list .product-card-media-row .product-gallery img {
    height: 100px;
    object-fit: contain;
    background: #f8f9fa;
  }

  .products-grid.layout-mobile-list .product-card-thumbnails-vertical {
    min-height: 100px;
    width: 40px;
    padding: 0.25rem;
  }

  .products-grid.layout-mobile-list .product-card-thumbnails-vertical .product-card-thumbnail,
  .products-grid.layout-mobile-list .product-card-thumbnails-vertical .product-card-thumbnail-video,
  .products-grid.layout-mobile-list .product-card-thumbnails-vertical .product-card-thumbnail-more {
    width: 30px !important;
    height: 30px !important;
  }

  .products-grid.layout-mobile-list .product-card-thumbnail {
    object-fit: contain !important;
    background: #f8f9fa !important;
  }

  .products-grid.layout-mobile-list .card-body {
    flex: 1;
    padding: 1rem;
    min-width: 0;
    min-height: 100px; /* Alinha com a área de mídia para botões no mesmo nível */
    display: flex;
    flex-direction: column;
    overflow: visible;
  }

  .products-grid.layout-mobile-list .card-title {
    font-size: 1rem;
    margin-bottom: 0;
    flex: 1;
  }

  .products-grid.layout-mobile-list .product-price {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
  }

  .products-grid.layout-mobile-list .btn {
    font-size: 0.875rem;
    padding: 0.25rem 0.75rem;
  }

  .products-grid.layout-mobile-list .card-body .btn-primary {
    margin-top: auto;
    order: 999;
  }

  /* Mobile: só complementa a regra global do botão (largura total e tamanho) */
  .products-grid.layout-mobile-grid_1_col .product-card .card-body .btn-primary,
  .products-grid.layout-mobile-grid_2_col .product-card .card-body .btn-primary,
  .products-grid.layout-mobile-list .product-card .card-body .btn-primary {
    width: 100%;
    min-height: 40px;
    font-size: 0.9rem;
  }
}

/* ============================================
   LAYOUT ADAPTATIVO DESKTOP (Grid CSS)
   ============================================ */
@media (min-width: 768px) {

  /* Ativamos o Grid CSS para o container principal.
     O Grid é superior ao Flexbox para este caso porque ele se adapta à largura do ELEMENTO PAI,
     não apenas à largura da tela. Isso respeita as configurações de "Largura do Contêiner" (Pequeno/Médio/Grande) do Biolinks. */
  .products-grid[class*="layout-desktop-grid_"],
  .products-grid[class*="layout-desktop-list_"] {
    display: grid !important;
    gap: 1.25rem; /* Espaçamento uniforme entre os cards */
  }

  /* Resetamos as classes de coluna do Bootstrap para o Grid assumir o controle */
  .products-grid .product-item {
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin-bottom: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    flex: none !important;
  }

  /* 1. Definição Base (Máximo que o usuário escolheu) */
  .products-grid.layout-desktop-grid_1_col,
  .products-grid.layout-desktop-list_1_col {
    grid-template-columns: repeat(1, 1fr);
  }

  .products-grid.layout-desktop-grid_2_col,
  .products-grid.layout-desktop-list_2_col {
    grid-template-columns: repeat(2, 1fr);
  }

  .products-grid.layout-desktop-grid_3_col,
  .products-grid.layout-desktop-list_3_col {
    grid-template-columns: repeat(3, 1fr);
  }

  /* minmax menor (200px) para caber no container ao redimensionar; breakpoints abaixo reduzem colunas a tempo */
  .products-grid.layout-desktop-grid_4_col,
  .products-grid.layout-desktop-list_4_col {
    grid-template-columns: repeat(4, minmax(200px, 1fr));
  }

  /* 2. Ajustes baseados na "Largura do Contêiner" (Configuração nativa do 66biolinks)
     Targeting .col-md-X classes that wrap the .link-content in biolink.php */

  /* Container Pequeno (col-md-6): Sempre 1 coluna independente da escolha */
  .col-md-6 .products-grid[class*="layout-desktop-"] {
    grid-template-columns: repeat(1, 1fr) !important;
  }

  /* Container Médio (col-md-8): Máximo de 2 colunas para evitar esmagamento */
  .col-md-8 .products-grid.layout-desktop-grid_3_col,
  .col-md-8 .products-grid.layout-desktop-grid_4_col,
  .col-md-8 .products-grid.layout-desktop-list_3_col,
  .col-md-8 .products-grid.layout-desktop-list_4_col {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Container Grande (col-md-10): Máximo de 3 colunas */
  .col-md-10 .products-grid.layout-desktop-grid_4_col,
  .col-md-10 .products-grid.layout-desktop-list_4_col {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Container Extra Grande (col-md-12): Mantém o que foi definido na Base (até 4 colunas) */

}

/* Responsivo DESKTOP: 4 colunas só em telas bem largas; antes disso 3 ou 2 colunas. Apenas (min-width:768px) para não sobrescrever o layout mobile. */
@media (min-width: 768px) and (max-width: 1320px) {
  .biolink-block-products-grid .products-grid.layout-desktop-grid_4_col,
  .biolink-block-products-grid .products-grid.layout-desktop-list_4_col {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .biolink-block-products-grid .products-grid.layout-desktop-grid_4_col,
  .biolink-block-products-grid .products-grid.layout-desktop-list_4_col {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Lista 3 e 4 col: cards em lista são largos – passar a 2 col cedo para não cortar (só desktop) */
@media (min-width: 768px) and (max-width: 1050px) {
  .biolink-block-products-grid .products-grid.layout-desktop-list_3_col,
  .biolink-block-products-grid .products-grid.layout-desktop-list_4_col {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Grid 3 col e lista 3 col em janelas ainda mais estreitas (só desktop) */
@media (min-width: 768px) and (max-width: 800px) {
  .biolink-block-products-grid .products-grid.layout-desktop-grid_3_col,
  .biolink-block-products-grid .products-grid.layout-desktop-list_3_col {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Em grid de 4 colunas, esconder miniaturas verticais para dar mais espaço ao card */
@media (min-width: 768px) {
  .products-grid.layout-desktop-grid_4_col .product-card-thumbnails-vertical {
    display: none !important;
  }
  .products-grid.layout-desktop-grid_4_col .product-card-media-row .product-gallery {
    border-radius: 0.5rem 0.5rem 0 0;
  }
  /* Lista 4 colunas: ocultar miniaturas verticais também */
  .products-grid.layout-desktop-list_4_col .product-card-thumbnails-vertical {
    display: none !important;
  }
  .products-grid.layout-desktop-list_4_col .product-card-media-row .product-gallery {
    border-radius: 0.5rem 0.5rem 0 0;
  }
}

/* 4 colunas (grid e lista): cards mais compactos para elementos não quebrarem */
@media (min-width: 768px) {
  .products-grid.layout-desktop-grid_4_col .product-card-wrapper,
  .products-grid.layout-desktop-list_4_col .product-card-wrapper {
    padding: 0.35rem;
  }
  .products-grid.layout-desktop-grid_4_col .product-card .card-body,
  .products-grid.layout-desktop-list_4_col .product-card .card-body {
    padding: 0.5rem 0.6rem;
  }
  .products-grid.layout-desktop-grid_4_col .product-card .product-card-title,
  .products-grid.layout-desktop-list_4_col .product-card .product-card-title {
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
    line-height: 1.3;
  }
  .products-grid.layout-desktop-grid_4_col .product-card .card-body .justify-content-between,
  .products-grid.layout-desktop-list_4_col .product-card .card-body .justify-content-between {
    margin-bottom: 0.35rem;
  }
  .products-grid.layout-desktop-grid_4_col .product-card .product-price,
  .products-grid.layout-desktop-list_4_col .product-card .product-price {
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
  }
  .products-grid.layout-desktop-list_4_col .product-card .card-body {
    min-height: 100px;
  }
}

/* ============================================
   ESTRUTURA DA LISTA DESKTOP (768px ou mais)
   ============================================ */
@media (min-width: 768px) {

  /* Configuração estrutural para as Listas no Desktop */
  .products-grid[class*="layout-desktop-list_"] .product-card {
    display: flex;
    flex-direction: row;
    height: auto;
    min-height: auto;
    align-items: flex-start;
  }

  .products-grid[class*="layout-desktop-list_"] .product-card-media-row {
    flex: 0 0 auto;
    max-width: 160px; /* Pouco maior que mobile */
    min-width: 120px;
    height: 120px;
  }

  .products-grid[class*="layout-desktop-list_"] .product-card-media-row .product-gallery {
    flex: 0 0 120px;
    max-width: 120px;
    height: 120px;
    flex-shrink: 0;
  }

  .products-grid[class*="layout-desktop-list_"] .product-card-media-row .product-gallery img {
    height: 120px;
    object-fit: contain;
    background: #f8f9fa;
  }

  .products-grid[class*="layout-desktop-list_"] .product-card-thumbnails-vertical {
    min-height: 120px;
    width: 40px;
    padding: 0.25rem;
  }

  .products-grid[class*="layout-desktop-list_"] .product-card-thumbnails-vertical .product-card-thumbnail,
  .products-grid[class*="layout-desktop-list_"] .product-card-thumbnails-vertical .product-card-thumbnail-video,
  .products-grid[class*="layout-desktop-list_"] .product-card-thumbnails-vertical .product-card-thumbnail-more {
    width: 30px !important;
    height: 30px !important;
  }

  .products-grid[class*="layout-desktop-list_"] .card-body {
    flex: 1;
    padding: 1rem;
    min-width: 0;
    min-height: 120px; /* Alinha altura com a área de mídia para botões no mesmo nível */
    display: flex;
    flex-direction: column;
    overflow: visible;
  }

  .products-grid[class*="layout-desktop-list_"] .card-body .btn-primary {
    margin-top: auto;
    flex-shrink: 0;
    order: 999;
  }
}

/* Responsividade do Modal - Modal não é usado no mobile */

.biolink-block-products-grid {
  position: relative;
  overflow-x: hidden;
  max-width: 100%;
  min-width: 0; /* Permite encolher dentro do container pai do tema (flex/grid) */
}

.biolink-block-products-grid .biolink-block-header {
  text-align: center;
}

.biolink-block-products-grid .biolink-block-title {
  color: var(--biolink-text-color, #000);
  font-size: 1.5rem;
  margin-bottom: 0;
}

/* Controles de produto */
.products-controls .input-group-text {
  background-color: #f8f9fa !important;
  border-color: #dee2e6 !important;
  color: #495057 !important;
}

.products-controls .form-control {
  background-color: #fff !important;
  color: #212529 !important;
  border-color: #ced4da !important;
}

.products-controls .form-control:focus {
  background-color: #fff !important;
  color: #212529 !important;
  border-color: #80bdff !important;
}

/* ============================================
   ESTILOS DE CATEGORIAS
   ============================================ */

/* Estilo Pills (Padrão) */
.products-controls .category-filters.category-style-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
}

.products-controls .category-filters.category-style-pills .btn {
  margin: 0.125rem;
  white-space: nowrap;
  background-color: #f8f9fa !important;
  color: #212529 !important;
  border-color: #ced4da !important;
}

.products-controls .category-filters.category-style-pills .btn:hover,
.products-controls .category-filters.category-style-pills .btn:focus {
  background-color: #e2e6ea !important;
  color: #212529 !important;
  border-color: #dae0e5 !important;
}

.products-controls .category-filters.category-style-pills .btn.active,
.products-controls .category-filters .btn.active {
  background-color: #007bff !important;
  border-color: #007bff !important;
  color: #fff !important;
}

/* Reservado para uso futuro: Estilo Dropdown
.products-controls .category-filters.category-style-dropdown {
  display: block;
}

.products-controls .category-filters.category-style-dropdown .category-dropdown-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 300px;
}

.products-controls .category-filters.category-style-dropdown .category-dropdown-btn {
  background-color: #f8f9fa !important;
  color: #212529 !important;
  border-color: #ced4da !important;
}

.products-controls .category-filters.category-style-dropdown .category-dropdown-btn:hover,
.products-controls .category-filters.category-style-dropdown .category-dropdown-btn:focus {
  background-color: #e2e6ea !important;
  color: #212529 !important;
  border-color: #dae0e5 !important;
}

.products-controls .category-filters.category-style-dropdown .category-dropdown-menu {
  background-color: #fff !important;
  border-color: #ced4da !important;
}

.products-controls .category-filters.category-style-dropdown .category-dropdown-item {
  background-color: #fff !important;
  color: #212529 !important;
}

.products-controls .category-filters.category-style-dropdown .category-dropdown-item:hover,
.products-controls .category-filters.category-style-dropdown .category-dropdown-item.active {
  background-color: #f8f9fa !important;
  color: #212529 !important;
}
*/

/* ============================================
   ESTILOS DO FAVICON DA URL DE DESTINO NO CARD
   ============================================ */
.product-link-favicon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
  text-decoration: none !important;
  background-color: #f8f9fa; /* Fundo leve para destaque */
  padding: 4px;
  border-radius: 4px;
  border: 1px solid #eee;
  transition: all 0.2s ease;
  z-index: 2; /* Ficar clicável acima do card click */
}

.product-link-favicon-wrapper:hover {
  background-color: #fff;
  border-color: #ddd;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transform: translateY(-1px);
}

.product-link-favicon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
}


.biolink-block-products-grid .input-group,
.biolink-block-products-grid .input-group-prepend {
  background-color: transparent !important;
  position: relative;
  overflow: visible;
}

.biolink-block-products-grid .input-group-append {
  background-color: transparent !important;
  display: flex !important;
  align-items: stretch !important;
}

/* Garantir que products-controls não interfira no posicionamento do dropdown */
.products-controls {
  position: relative;
  overflow: visible;
}

/* Botão Buscar: contraste WCAG AA (texto branco em fundo azul escuro) */
.biolink-block-products-grid .product-search-btn {
  background-color: #0056b3 !important;
  border-color: #0056b3 !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left: none !important;
  align-self: stretch !important;
  height: 100% !important;
  min-height: 0 !important;
}

.biolink-block-products-grid .product-search-btn:hover,
.biolink-block-products-grid .product-search-btn:focus {
  background-color: #004085 !important;
  border-color: #004085 !important;
  color: #fff !important;
}

/* Reservado: Tabs + Dropdown (estilos desativados)
.products-controls .category-filters.category-style-tabs .btn {
  background-color: #f8f9fa !important;
  color: #212529 !important;
  border-color: #ced4da !important;
}

.products-controls .category-filters.category-style-tabs .btn:hover {
  background-color: #e2e6ea !important;
  color: #212529 !important;
}

.products-controls .category-filters.category-style-tabs .btn.active {
  background-color: #007bff !important;
  color: #fff !important;
  border-color: #007bff !important;
}

.products-controls .category-filters.category-style-dropdown .category-dropdown-btn {
  width: 100%;
  text-align: left;
  padding: 0.5rem 1rem;
  background: #fff !important;
  color: #212529 !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 0.375rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.products-controls .category-filters.category-style-dropdown .category-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff !important;
  color: #212529 !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 0.375rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin !important;
  scrollbar-color: #c1c1c1 #f1f1f1 !important;
  z-index: 1000;
  display: none;
  margin-top: 0.25rem;
}

.products-controls .category-filters.category-style-dropdown .category-dropdown-menu.show {
  display: block;
}

.products-controls .category-filters.category-style-dropdown .category-dropdown-item {
  display: block;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border: none;
  background: #fff !important;
  color: #212529 !important;
  width: 100%;
  text-align: left;
  transition: background-color 0.2s;
}

.products-controls .category-filters.category-style-dropdown .category-dropdown-item:hover,
.products-controls .category-filters.category-style-dropdown .category-dropdown-item.active {
  background-color: var(--primary);
  color: white;
}

.products-controls .category-filters.category-style-tabs {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin !important;
  scrollbar-color: #c1c1c1 #f1f1f1 !important;
}

.products-controls .category-filters.category-style-tabs::-webkit-scrollbar {
  height: 8px !important;
}

.products-controls .category-filters.category-style-tabs::-webkit-scrollbar-track {
  background: #f1f1f1 !important;
  border-radius: 4px !important;
}

.products-controls .category-filters.category-style-tabs::-webkit-scrollbar-thumb {
  background: #c1c1c1 !important;
  border-radius: 4px !important;
}

.products-controls .category-filters.category-style-tabs::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8 !important;
}

.products-controls .category-filters.category-style-dropdown .category-dropdown-menu::-webkit-scrollbar {
  width: 8px !important;
}

.products-controls .category-filters.category-style-dropdown .category-dropdown-menu::-webkit-scrollbar-track {
  background: #f1f1f1 !important;
  border-radius: 4px !important;
}

.products-controls .category-filters.category-style-dropdown .category-dropdown-menu::-webkit-scrollbar-thumb {
  background: #c1c1c1 !important;
  border-radius: 4px !important;
}

.products-controls .category-filters.category-style-dropdown .category-dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8 !important;
}
*/

/* Scrollbar para Modal - FORÇAR ESTILO CLARO */
#productModal *::-webkit-scrollbar,
.product-modal-description-container *::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

#productModal *::-webkit-scrollbar-track,
.product-modal-description-container *::-webkit-scrollbar-track {
  background: #f1f1f1 !important;
  border-radius: 4px !important;
}

#productModal *::-webkit-scrollbar-thumb,
.product-modal-description-container *::-webkit-scrollbar-thumb {
  background: #c1c1c1 !important;
  border-radius: 4px !important;
}

#productModal *::-webkit-scrollbar-thumb:hover,
.product-modal-description-container *::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8 !important;
}

#productModal *,
.product-modal-description-container * {
  scrollbar-width: thin !important;
  scrollbar-color: #c1c1c1 #f1f1f1 !important;
}

/* Scrollbar para todos os elementos dentro do bloco - FORÇAR ESTILO CLARO */
.biolink-block-products-grid *::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

.biolink-block-products-grid *::-webkit-scrollbar-track {
  background: #f1f1f1 !important;
  border-radius: 4px !important;
}

.biolink-block-products-grid *::-webkit-scrollbar-thumb {
  background: #c1c1c1 !important;
  border-radius: 4px !important;
}

.biolink-block-products-grid *::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8 !important;
}

.biolink-block-products-grid * {
  scrollbar-width: thin !important;
  scrollbar-color: #c1c1c1 #f1f1f1 !important;
}

/* Reservado: Tabs (border/btn), Vertical, Icons
.products-controls .category-filters.category-style-tabs {
  border-bottom: 2px solid #dee2e6;
  margin-bottom: 1rem;
}

.products-controls .category-filters.category-style-tabs .btn {
  margin: 0;
  border-radius: 0;
  border: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  padding: 0.75rem 1rem;
  background: transparent;
  color: #6c757d;
}

.products-controls .category-filters.category-style-tabs .btn:hover {
  background-color: #fff !important;
  color: var(--primary);
}

.products-controls .category-filters.category-style-tabs .btn.active {
  background: transparent;
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

.products-controls .category-filters.category-style-vertical {
  display: block;
}

.products-controls .category-filters.category-style-vertical .category-vertical-toggle {
  width: 100%;
  text-align: left;
  padding: 0.75rem 1rem;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  margin-bottom: 0.5rem;
  transition: background-color 0.2s;
}

.products-controls .category-filters.category-style-vertical .category-vertical-toggle:hover {
  background-color: #e9ecef;
}

.products-controls .category-filters.category-style-vertical .category-vertical-toggle i {
  transition: transform 0.2s;
}

.products-controls .category-filters.category-style-vertical .category-vertical-list.show~.category-vertical-toggle i,
.products-controls .category-filters.category-style-vertical .category-vertical-toggle:has(+ .category-vertical-list.show) i {
  transform: rotate(180deg);
}

.products-controls .category-filters.category-style-vertical .category-vertical-list {
  display: none;
  flex-direction: column;
  gap: 0.25rem;
}

.products-controls .category-filters.category-style-vertical .category-vertical-list.show {
  display: flex;
}

.products-controls .category-filters.category-style-vertical .btn {
  width: 100%;
  text-align: left;
  margin: 0;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

.products-controls .category-filters.category-style-vertical .btn.active {
  background-color: #0056b3 !important;
  border-color: #0056b3 !important;
  color: #fff !important;
}

.products-controls .category-filters.category-style-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.products-controls .category-filters.category-style-icons .btn {
  width: 48px;
  height: 48px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: relative;
  margin: 0.25rem;
}

.products-controls .category-filters.category-style-icons .btn i {
  font-size: 1.25rem;
}

.products-controls .category-filters.category-style-icons .btn.active {
  background-color: #007bff !important;
  border-color: #007bff !important;
  color: white;
}

.products-controls .category-filters.category-style-icons .btn[data-category="all"] i::before {
  content: "\f0ca";
}

.products-controls .category-filters.category-style-icons .btn[data-category*="eletronicos"] i::before {
  content: "\f1c0";
}

.products-controls .category-filters.category-style-icons .btn[data-category*="roupas"] i::before {
  content: "\f553";
}

.products-controls .category-filters.category-style-icons .btn[data-category*="casa"] i::before {
  content: "\f015";
}

.products-controls .category-filters.category-style-icons .btn[data-category*="esportes"] i::before {
  content: "\f1e3";
}

.products-controls .category-filters.category-style-icons .btn[data-category*="livros"] i::before {
  content: "\f02d";
}

.products-controls .category-filters.category-style-icons .btn[data-category*="beleza"] i::before {
  content: "\f580";
}

.products-controls .category-filters.category-style-icons .btn[data-category*="automotivo"] i::before {
  content: "\f1b9";
}
*/

/* Estilo Scroll Horizontal */
.products-controls .category-filters.category-style-scroll {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin !important;
  scrollbar-color: #c1c1c1 #f1f1f1 !important;
  gap: 0.5rem;
  padding: 0.5rem 0;
  position: relative;
  width: 100%;
  max-width: 100%;
  /* Garantir que primeira categoria seja sempre visível */
  scroll-padding-left: 0;
  scroll-padding-right: 0;
}

/* Categorias (scroll): contraste WCAG AA — apenas cor/background, sem alterar layout */
.products-controls .category-filters.category-style-scroll .btn {
  flex-shrink: 0;
  white-space: nowrap;
  margin: 0;
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
  overflow: visible;
  text-overflow: clip;
  min-width: fit-content;
  background-color: #e9ecef !important;
  color: #212529 !important;
  border-color: #dee2e6 !important;
}

.products-controls .category-filters.category-style-scroll .btn:hover,
.products-controls .category-filters.category-style-scroll .btn:focus {
  background-color: #dee2e6 !important;
  color: #212529 !important;
  border-color: #ced4da !important;
}

.products-controls .category-filters.category-style-scroll .btn.active {
  background-color: #0056b3 !important;
  border-color: #0056b3 !important;
  color: #fff !important;
}

/* Scrollbar styling for webkit browsers - FORÇAR ESTILO CLARO */
.products-controls .category-filters.category-style-scroll::-webkit-scrollbar {
  height: 8px !important;
  width: 8px !important;
}

.products-controls .category-filters.category-style-scroll::-webkit-scrollbar-track {
  background: #f1f1f1 !important;
  border-radius: 4px !important;
}

.products-controls .category-filters.category-style-scroll::-webkit-scrollbar-thumb {
  background: #c1c1c1 !important;
  border-radius: 4px !important;
}

.products-controls .category-filters.category-style-scroll::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8 !important;
}

/* Scrollbar para Firefox - FORÇAR ESTILO CLARO */
.products-controls .category-filters.category-style-scroll {
  scrollbar-width: thin !important;
  scrollbar-color: #c1c1c1 #f1f1f1 !important;
}

/* Grade de produtos */
.products-grid {
  max-width: 100%;
  min-width: 0;
}

.products-grid .product-card-wrapper {
  padding: 0 0.5rem;
}

.products-grid .product-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border-radius: 0.5rem;
  overflow: hidden;
}

.products-grid .product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Galeria de produtos */
.product-gallery {
  position: relative;
  border-radius: 0.5rem 0.5rem 0 0;
  overflow: hidden;
}

.product-gallery .product-image {
  transition: transform 0.3s ease;
  cursor: pointer;
}

.product-gallery:hover .product-image {
  transform: scale(1.05);
}

/* Placeholder também deve manter altura fixa */
.product-gallery .product-placeholder {
  width: 100%;
  height: 100%;
  min-height: 200px;
  border-radius: 0.5rem 0.5rem 0 0;
}

/* Indicador de galeria */
.gallery-indicator {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
}

.gallery-indicator i {
  opacity: 0.9;
}

/* Overlay para produtos indisponíveis */
.product-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.product-overlay .overlay-content {
  text-align: center;
  color: white;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 0.5rem;
  max-width: 80%;
}

/* Card de produto */
.product-card {
  background-color: #fff !important;
  color: #212529 !important;
}

.product-card .card-body {
  padding: 1rem;
  flex: 1 1 auto;
  /* Permitir expansão */
  min-height: 0;
  /* Permitir que o conteúdo defina a altura */
  background-color: #fff !important;
  color: #212529 !important;
}

.product-card .card-title {
  font-size: 1rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #212529 !important;
}

.product-card .card-text {
  font-size: 0.875rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #6c757d !important;
}

/* Estado colapsado da descrição */
.product-card .product-description:not(.expanded) {
  min-height: 3em;
  max-height: 4.5em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Estado expandido da descrição */
.product-card .product-description.expanded {
  min-height: auto;
  max-height: none;
  overflow: visible;
  display: block;
  -webkit-line-clamp: none;
  -webkit-box-orient: initial;
}

.product-card .product-price {
  font-size: 1.1rem;
}

/* Botões */
.product-card .btn {
  border-radius: 0.375rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.product-card .btn:hover {
  transform: translateY(-1px);
}

/* Responsividade */
@media (max-width: 576px) {

  /* Pills - menor em mobile */
  .products-controls .category-filters.category-style-pills .btn {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }

  /* Reservado: Dropdown/Tabs/Vertical/Icons em mobile
  .products-controls .category-filters.category-style-dropdown .category-dropdown-wrapper {
    max-width: 100%;
  }

  .products-controls .category-filters.category-style-tabs {
    padding-bottom: 0.5rem;
  }

  .products-controls .category-filters.category-style-tabs .btn {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
  }

  .products-controls .category-filters.category-style-vertical .btn {
    font-size: 0.875rem;
  }

  .products-controls .category-filters.category-style-icons .btn {
    width: 40px;
    height: 40px;
  }

  .products-controls .category-filters.category-style-icons .btn i {
    font-size: 1rem;
  }
  */

  /* Scroll - já é responsivo */
  .products-controls .category-filters.category-style-scroll .btn {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
  }

  .products-grid .product-card-wrapper {
    margin-bottom: 1rem;
  }

  .product-card .card-body {
    padding: 0.75rem;
  }

  .product-card .card-title {
    font-size: 0.9rem;
  }
}

@media (min-width: 768px) {
  .products-controls .category-filters.category-style-pills {
    justify-content: center;
  }

  .products-controls .category-filters.category-style-scroll {
    justify-content: flex-start;
    max-width: 100%;
    margin: 0;
    padding: 0.5rem 0;
  }

  .products-controls .category-filters.category-style-scroll .btn {
    font-size: 0.8125rem;
    padding: 0.35rem 0.7rem;
    overflow: visible;
  }

  /* Histórico de pesquisas - Popover/Modal customizado */
  .products-search-history-dropdown {
    position: fixed;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    max-height: 400px;
    overflow: hidden;
    display: none;
    font-family: inherit;
    min-width: 300px;
    max-width: 500px;
    box-sizing: border-box;
    animation: fadeInDown 0.2s ease-out;
  }

  @keyframes fadeInDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .products-search-history-dropdown.show {
    display: block;
  }

  /* No mobile, usar largura maior e posicionamento diferente */
  @media (max-width: 768px) {
    .products-search-history-dropdown {
      left: 1rem !important;
      right: 1rem !important;
      width: auto !important;
      min-width: auto !important;
      max-width: calc(100% - 2rem) !important;
      max-height: 50vh;
      border-radius: 0.75rem;
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
      z-index: 9999 !important;
      /* Garantir que apareça acima de tudo no mobile */
      background: #ffffff !important;
      /* Fundo branco sólido no mobile */
    }

    /* Garantir que o header também tenha fundo sólido no mobile */
    .products-search-history-header {
      background-color: #f5f5f5 !important;
    }

    /* Garantir que os itens também tenham fundo sólido no mobile */
    .products-search-history-item {
      background-color: #ffffff !important;
    }
  }

  /* Header do histórico - alinhado à esquerda */
  .products-search-history-header {
    padding: 0.75rem 1rem;
    background-color: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #666666;
    text-align: left;
    letter-spacing: 0.02em;
  }

  /* Container dos itens - alinhado à esquerda */
  .products-search-history-items {
    max-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
  }

  /* Scrollbar personalizada para o histórico */
  .products-search-history-items::-webkit-scrollbar {
    width: 6px;
  }

  .products-search-history-items::-webkit-scrollbar-track {
    background: #f5f5f5;
  }

  .products-search-history-items::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
  }

  .products-search-history-items::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }

  /* Item do histórico - alinhado à esquerda, largura conforme conteúdo */
  .products-search-history-item {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1rem;
    margin: 0.125rem 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease;
    background-color: #ffffff;
    color: #333333;
    font-size: 0.875rem;
    border-radius: 0.25rem;
    width: fit-content;
    max-width: calc(100% - 1.5rem);
    white-space: nowrap;
    box-sizing: content-box;
    flex-shrink: 0;
    align-self: flex-start;
  }

  .products-search-history-item:last-child {
    margin-bottom: 0.5rem;
  }

  .products-search-history-item:hover {
    background-color: #f8f9fa;
  }

  .products-search-history-item:active {
    background-color: #eeeeee;
  }

  /* Ícone do item - espaço adequado após o ícone */
  .products-search-history-item i {
    margin-right: 0.75rem !important;
    /* 12px - espaço visível entre ícone e texto */
    color: #999999;
    font-size: 0.8125rem;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
    display: inline-block;
  }

  .products-search-history-item:hover i {
    color: #666666;
  }

  /* Texto do item - largura conforme conteúdo */
  .products-search-history-item span {
    flex: 0 0 auto;
    overflow: visible;
    white-space: nowrap;
    max-width: none;
  }

  /* Responsivo - Mobile */
  @media (max-width: 768px) {
    .products-search-history-dropdown {
      max-height: 280px;
      left: 0;
      right: 0;
      width: 100%;
      max-width: 100%;
      min-width: 100%;
      box-sizing: border-box;
    }

    .products-search-history-header {
      padding: 0.625rem 0.875rem;
      font-size: 0.75rem;
      text-align: left;
    }

    .products-search-history-items {
      padding: 0.375rem 0;
      width: 100%;
      min-width: 100%;
      max-width: 100%;
      overflow-x: hidden;
    }

    .products-search-history-item {
      padding: 0.625rem 0.875rem;
      margin: 0.2rem 0.875rem;
      font-size: 0.8125rem;
      max-width: calc(100% - 1.75rem);
      width: fit-content;
      min-width: 0;
    }

    .products-search-history-item i {
      margin-right: 0.75rem !important;
      /* 12px no mobile - espaço visível */
      font-size: 0.8125rem;
      display: inline-block;
    }

    .products-search-history-item span {
      overflow: visible;
      white-space: nowrap;
      max-width: none;
      display: inline-block;
    }
  }

  /* ============================================
   SKELETON LOADING - Feedback Visual Melhorado
   ============================================ */

  /* Skeleton loading para cards durante busca */
  .products-grid.loading .product-card {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
    overflow: hidden;
  }

  .products-grid.loading .product-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    z-index: 1;
  }

  @keyframes shimmer {
    0% {
      background-position: -200% 0;
    }

    100% {
      background-position: 200% 0;
    }
  }

  /* Garantir que o conteúdo do card fique abaixo do shimmer */
  .products-grid.loading .product-card>* {
    position: relative;
    z-index: 0;
  }

  /* Reservado: Icons em mobile
  .products-controls .category-filters.category-style-icons {
    justify-content: center;
  }
  */
}

@media (min-width: 992px) {

  /* Telas grandes - garantir que primeira categoria seja visível */
  .products-controls .category-filters.category-style-scroll {
    max-width: 100%;
    margin: 0;
    padding: 0.5rem 0;
    justify-content: flex-start;
  }

  .products-controls .category-filters.category-style-scroll .btn {
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
    overflow: visible;
  }
}

@media (min-width: 1200px) {

  /* Telas muito grandes - manter scroll funcional sem limitar largura */
  .products-controls .category-filters.category-style-scroll {
    max-width: 100%;
    margin: 0;
    padding: 0.5rem 0;
  }

  .products-controls .category-filters.category-style-scroll .btn {
    font-size: 0.7rem;
    padding: 0.25rem 0.55rem;
  }
}

/* ============================================
   CORREÇÕES DE LAYOUT - FAVICON E CARD DO PRODUTO
   ============================================ */
.product-card .card-body .justify-content-between {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /* Altura mínima para alinhar o botão "Ver produto" com ou sem favicon */
    min-height: 28px;
}

.product-card .card-body .justify-content-between > div:only-child,
.product-card .card-body .justify-content-between > .product-card-category {
    /* Empurra o único elemento (categoria) para a esquerda */
    margin-right: auto !important;
}

.product-card .card-body .justify-content-between > .product-link-favicon-wrapper {
    /* Mantém o espaçamento do favicon */
    margin-left: 0.5rem !important;
}

/* Desktop: favicon flutuante no canto direito do botão (mesma linha), botão sempre alinhado */
@media (min-width: 768px) {
  .product-card .card-body {
    position: relative;
  }
  .product-card .card-body .product-link-favicon-wrapper {
    position: absolute;
    right: 0;
    bottom: 0;
    margin-left: 0 !important;
    /* Alinha verticalmente com o centro do botão (altura ~44px) */
    margin-bottom: 0;
  }
  /* Espaço simétrico no botão para o favicon no canto e texto sempre centralizado */
  .product-card .card-body a.btn.mt-auto {
    padding-left: 2.25rem;
    padding-right: 2.25rem;
  }
}

/* ============================================
   ACESSIBILIDADE: ÁREA DE TOQUE E FOCUS VISÍVEL
   ============================================ */
/* Mínimo 44px para toque (mobile) */
.biolink-block-products-grid .category-filters .btn.category-filter,
.biolink-block-products-grid .product-search-btn,
.biolink-block-products-grid .product-card .btn-primary,
.biolink-block-products-grid .product-card .btn-outline-primary,
.biolink-block-products-grid .products-grid-clear-filters {
    min-height: 44px;
    min-width: 44px;
}

/* Botão "Limpar filtros": contraste WCAG AA */
.biolink-block-products-grid .products-grid-clear-filters {
    background-color: #e9ecef;
    border-color: #dee2e6;
    color: #212529;
    font-weight: 500;
}
.biolink-block-products-grid .products-grid-clear-filters:hover {
    background-color: #dee2e6;
    border-color: #ced4da;
    color: #212529;
}
.biolink-block-products-grid .products-grid-clear-filters:active,
.biolink-block-products-grid .products-grid-clear-filters:focus {
    background-color: rgba(108, 117, 125, 0.25);
    border-color: #545b62;
    color: #212529;
}

.biolink-block-products-grid .product-card {
    min-height: 44px;
}

/* Focus visível para teclado */
.biolink-block-products-grid .category-filters .btn:focus-visible,
.biolink-block-products-grid .product-search-btn:focus-visible,
.biolink-block-products-grid .product-card .btn:focus-visible,
.biolink-block-products-grid .products-grid-clear-filters:focus-visible,
#productModal .product-modal-close-btn:focus-visible,
#productModal .btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
.biolink-block-products-grid .product-card:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}