/* =============================================================================
   cadiz-grid.css — CADIZ Theme
   Página de categoria/busca: toolbar (ordenar + filtrar), modal "Filtrar por"
   e grade de produtos, no padrão visual aprovado (referência Konte).

   Carregado depois de cadiz.css no layout.tpl.

   [25/08/2026] Renomeado de "cadiz-grid-v4.css" pra "cadiz-grid-v5.css" —
   removido o efeito sticky da barra de ordenar/filtrar (Seção 4 abaixo).
   Com o cabeçalho agora aparecendo/sumindo durante a rolagem, a barra
   sticky (que ficava presa no topo tentando acompanhar a altura do
   cabeçalho) passou a competir espaço com ele. Agora ela fica parada na
   posição normal da página, sem prender em lugar nenhum.
============================================================================= */

/* ── Margem/alinhamento compartilhado — mesma régua do header/footer ──
   Desktop ≥992px: 85px · Tablet 768–991px: 40px · Mobile <768px: 20px */
.cadiz-content-edge {
  max-width: 100% !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}
@media (min-width: 768px) {
  .cadiz-content-edge { padding-left: 40px !important; padding-right: 40px !important; }
}
@media (min-width: 992px) {
  .cadiz-content-edge { padding-left: 85px !important; padding-right: 85px !important; }
}
.cadiz-content-edge .row { margin-left: 0 !important; margin-right: 0 !important; }
.cadiz-content-edge > .row > [class*="col"] { padding-left: 0 !important; padding-right: 0 !important; }

/* ── Toolbar (linha de ordenar + filtrar acima da grade) ── */
.category-controls.cadiz-toolbar,
.category-controls.cadiz-toolbar .category-controls-container,
.category-controls.cadiz-toolbar .category-controls-row {
  background: transparent !important;
}
.cadiz-toolbar { padding: 20px 0; border-bottom: 1px solid rgba(22,22,25,0.08); }
.cadiz-toolbar .category-controls-row { align-items: center; }

.cadiz-toolbar-left { display: block; }
.cadiz-toolbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  margin-left: auto;
}

.cadiz-product-count {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: #838889;
  white-space: nowrap;
}

.cadiz-filter-trigger {
  display: flex !important;
  align-items: center;
  gap: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #161619;
  cursor: pointer;
  white-space: nowrap;
}
.cadiz-filter-icon { width: 15px; height: 15px; }

.cadiz-sort-inline {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.cadiz-sort-inline .radio-button-item { list-style: none; }
.cadiz-sort-inline .radio-button-label {
  display: inline-flex;
  align-items: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #838889;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
}
.cadiz-sort-inline input:checked + .radio-button-content .radio-button-label,
.cadiz-sort-inline .radio-button-item.selected .radio-button-label {
  color: #161619;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.cadiz-sort-feedback { font-size: 12px; color: #838889; }
.cadiz-sort-inline .radio-button-icons-container,
.cadiz-sort-inline .radio-button-icons,
.cadiz-sort-inline input[type="radio"] { display: none !important; } /* só o texto — sem bolinha/check nativo */

/* Toolbar mobile (Ordenar | Filtrar) — some no desktop, some inline substitui no mobile */
.cadiz-mobile-toolbar-row { display: none; }
@media (max-width: 767.98px) {
  .cadiz-toolbar-left { display: none; }
  .cadiz-toolbar-right { display: none; }
  .cadiz-mobile-toolbar-row {
    display: flex;
    padding-top: 4px;
  }
  .cadiz-mobile-sort-trigger-wrap,
  .cadiz-mobile-filter-trigger-wrap { flex: 1; }
  .cadiz-mobile-filter-trigger-wrap { text-align: right; }
  .cadiz-mobile-sort-trigger,
  .cadiz-mobile-filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: #161619;
  }
  .cadiz-mobile-sort-trigger svg { width: 12px; height: 12px; }
}

/* ── Modal "Filtrar por" ──
   Obs.: a classe nativa "modal-right-md" nunca resolve certo no Recife
   (o parâmetro modal_position_desktop do embed vem sem valor real, gerando
   "modal--md" em vez de "modal-right-md") — por isso a regra de largura usa
   só ".cadiz-filters-modal.modal-show", sem depender dela. */
.cadiz-filters-modal.modal-show { width: 600px !important; }
@media (max-width: 767.98px) {
  .cadiz-filters-modal.modal-show { width: 100% !important; }
}

.cadiz-filters-modal .modal-header {
  padding: 50px 60px 0 !important;
}
.cadiz-filters-modal .modal-header .row { align-items: center; }
.cadiz-filters-modal .modal-header .col.p-3 {
  padding: 0 !important;
  font-family: 'Tenor Sans', serif;
  font-size: 18px;
  color: #161619;
}
.cadiz-filters-modal .modal-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: #161619;
}
.cadiz-filters-modal .modal-close svg { width: 13px; height: 13px; }

/* Fundo e margem interna: mesmo off-white (#F7F4EE) e mesmo respiro
   (50px 60px) do drawer padrão da página de produto. A margem vai no
   .modal-body inteiro — não só no .filters-properties-container — porque
   Categorias, Ordenar por, slider de preço e os botões Filtrar/Limpar são
   blocos irmãos dele dentro do modal. O .modal-body nativo tem a classe
   Bootstrap "p-0" (padding:0 !important), por isso precisa de seletor
   mais específico pra vencer. CADIZ-grid-pendente-DOM-spec.md, seção 2. */
.cadiz-filters-modal,
.cadiz-filters-modal .modal-body {
  background: #F7F4EE !important;
}
.cadiz-filters-modal .modal-body {
  padding: 50px 60px !important;
  overflow-y: auto;
}
.cadiz-filters-modal .filters-properties-container {
  padding: 0 !important;
}

/* Todo texto secundário dentro do painel: sempre menor que o corpo padrão (14px) */
.cadiz-filter-label {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #838889;
  margin-bottom: 12px;
}

.cadiz-dropdown-section { margin-bottom: 32px; }
.cadiz-select-wrap { position: relative; }
.cadiz-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(22,22,25,0.15);
  border-radius: 0;
  background: transparent;
  padding: 12px 32px 12px 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: #161619;
}
.cadiz-select-caret {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 11px;
  height: 11px;
  pointer-events: none;
  color: #838889;
}

/* Preço nativo — mantém a lógica/AJAX rodando por baixo (cadiz-grid.js
   sincroniza os inputs reais com o slider), mas some da tela: no aprovado
   via DOM só o slider aparece, sem os campos "De"/"Até" nativos visíveis. */
.cadiz-native-filters .cadiz-price-filter { margin-bottom: 0; }
.cadiz-native-filters .cadiz-price-filter .form-group,
.cadiz-native-filters .filter-input-price-container,
.cadiz-native-filters .js-filter-input-price-container {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
} /* escondido visualmente, mas continua funcional/acessível — não usa display:none
     pra não quebrar o listener nativo de input/change */
.js-cadiz-price-submit-hidden { display: none !important; } /* clique disparado via cadiz-grid.js pelo slider/botão Filtrar */

.cadiz-price-slider-wrap { margin: 20px 0 32px; }
.cadiz-price-slider-track {
  position: relative;
  height: 2px;
  background: rgba(22,22,25,0.15);
  margin: 0 6px 16px;
}
.cadiz-price-slider-range {
  position: absolute;
  height: 2px;
  background: #161619;
}
.cadiz-price-slider-handle {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #161619;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.cadiz-price-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: #838889;
}
.cadiz-price-label .cadiz-price-from,
.cadiz-price-label .cadiz-price-to { color: #161619; }

.cadiz-filter-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}
.cadiz-filter-apply-btn,
.cadiz-filter-reset-btn {
  display: block;
  width: 100%;
  padding: 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
}
.cadiz-filter-apply-btn {
  background: #161619;
  color: #F7F4EE;
  border: 1px solid #161619;
}
.cadiz-filter-reset-btn {
  background: transparent;
  color: #161619;
  border: 1px solid rgba(22,22,25,0.2);
}

/* ── Grade de produtos: 3 por linha desktop, 2 por linha mobile ──
   (product-card / product-price / product-inst já vêm de cadiz.css —
   aqui só o espaçamento da grade em si) */
.category-body .js-product-table.row-grid {
  margin-left: -10px;
  margin-right: -10px;
}
.cadiz-grid-item { padding-left: 10px; padding-right: 10px; margin-bottom: 32px; }
.cadiz-grid-item.cadiz-hidden-by-category { display: none !important; }


/* ── Espaçamento acima do breadcrumb + título da categoria (ex.: "Novidades") —
   estava colado no menu principal, aumentado o respiro entre eles.
   Origem: CADIZ-filtro-DOM-spec.md, seção de grid/filtro (bloco 3). ── */
.page-header.py-4 {
  padding-top: 56px !important;
}

/* =============================================================================
   A partir daqui: CADIZ-grid-pendente-DOM-spec.md, seções 2-6 (redesign
   estilo Konte do popup "Filtrar por") — aprovado ao vivo por Nina, nunca
   tinha sido transcrito pros arquivos reais até agora.
============================================================================= */

/* ── 1) Dropdowns Categorias/Ordenar por: só a linha embaixo, sem caixa ── */
.cadiz-filters-modal .cadiz-select {
  border: none !important;
  border-bottom: 1px solid rgba(22,22,25,0.15) !important;
  padding: 0 24px 12px 0 !important;
}
/* Outline azul nativo do navegador ao focar um <select> — muito destoante
   agora que os dropdowns perderam a caixa (viraram só linha embaixo). No
   lugar: a própria linha escurece (mesma lógica de "selecionado" do resto
   do tema). */
.cadiz-filters-modal .cadiz-select:focus {
  outline: none !important;
  box-shadow: none !important;
  border-bottom-color: #161619 !important;
}

/* ── 2) Checkboxes em geral (Recife nativo) — mais delicados, na paleta
   CADIZ. Vale pra qualquer filtro por checkbox futuro (hoje Cor e Tamanho
   já não usam mais isso, ver blocos 3 e 4 abaixo). ── */
.cadiz-native-filters .checkbox-icon {
  width: 14px !important;
  height: 14px !important;
  border: 1px solid rgba(22,22,25,0.25) !important;
  border-radius: 0 !important;
  background: transparent !important;
  transition: background .15s ease;
}
.cadiz-native-filters input:checked + .checkbox .checkbox-icon {
  background: #161619 !important;
  border-color: #161619 !important;
}
.cadiz-native-filters .checkbox-text {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  color: #838889 !important;
}
.cadiz-native-filters input:checked + .checkbox .checkbox-text {
  color: #161619 !important;
  text-decoration: underline !important;
  text-underline-offset: 4px;
}

/* ── 3) Cor: lista horizontal, só texto, sem checkbox ── */
[data-component="list.filter-color"] .list-unstyled {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 20px !important;
  margin: 0 !important;
}
[data-component="list.filter-color"] .checkbox-container {
  padding: 0 !important;
}
[data-component="list.filter-color"] .checkbox-icon {
  display: none !important;
}
[data-component="list.filter-color"] .checkbox {
  padding-left: 0 !important;
}
[data-component="list.filter-color"] .checkbox-text {
  cursor: pointer;
}

/* ── 4) Tamanho: some a lista de checkbox nativa — vira <select> customizado
   via JS (cadiz-grid.js, buildSizeSelect()) ── */
[data-component="list.filter-size"] .list-unstyled {
  display: none !important;
}

/* ── 5) Espaçamento (46px) entre cada opção do painel — era 32px entre
   Categorias/Ordenar por/Cor, e 0px entre Cor/Tamanho (ficavam grudados) ── */
.cadiz-filters-modal .cadiz-dropdown-section {
  margin-bottom: 46px !important;
}
[data-component="list.filter-color"] {
  margin-bottom: 46px !important;
}
[data-component="list.filter-size"] {
  margin-bottom: 46px !important;
}

/* Títulos "Cor"/"Tamanho" (h6 nativo do Recife) padronizados com o mesmo
   estilo de .cadiz-filter-label já usado em Categorias/Ordenar por —
   senão ficam em Red Hat Display 14px/600/preto, destoando do resto. */
[data-component="list.filter-color"] h6,
[data-component="list.filter-size"] h6 {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #838889 !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

/* ── 6) Popup "Ordenar por" do mobile (#sort-by) — alinhado ao desktop,
   sem bolinha de rádio, só texto na fonte da CADIZ. Relabel/reorder das
   opções fica em cadiz-grid.js. ── */
#sort-by .list-unstyled { margin: 0; padding: 0 24px; }
#sort-by .list-unstyled li { list-style: none; border-bottom: 1px solid rgba(22,22,25,0.08); }
#sort-by .list-unstyled li:last-child { border-bottom: none; }
#sort-by .list-unstyled .radio-button-icons-container,
#sort-by .list-unstyled input[type="radio"] {
  display: none !important;
}
#sort-by .list-unstyled .radio-button-content {
  padding: 16px 0 !important;
}
#sort-by .list-unstyled .radio-button-label {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #838889 !important;
}
#sort-by .list-unstyled .radio-button-item.selected .radio-button-label {
  color: #161619 !important;
  text-decoration: underline !important;
  text-underline-offset: 4px;
}
/* Bug real: o <a class="radio-button-item"> nativo tem margin-bottom: 15px
   próprio, somado aos 16px de padding acima — o espaço de baixo de cada
   opção ficava com 31px contra só 16px em cima. Zera a margem nativa. */
#sort-by .list-unstyled a.radio-button-item {
  margin: 0 !important;
}

/* =============================================================================
   A partir daqui: CADIZ-revisao-geral-DOM-spec-GRADE-v6.md, seções 2-6 e 9
   (revisão geral da página de categoria, sessão de 21-22/07/2026) — aprovado
   ao vivo por Nina, transcrito agora pro arquivo real.
============================================================================= */

/* ── Seção 2 — banner de foto por categoria (ativado nativamente quando a
   categoria tem imagem cadastrada no painel, category.images) ── */
.category-banner {
  position: relative;
  height: 400px !important;
}
.category-banner-image {
  display: block;
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: center center;
}
.category-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(29,29,29,0.55) 0%, rgba(29,29,29,0.18) 45%, transparent 70%);
  pointer-events: none;
}
.category-banner-info.over-image {
  z-index: 1;
  background: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.category-banner-info .h-100 {
  align-items: flex-end !important;
  justify-content: flex-start !important;
  padding: 0 20px 32px;
}
@media (min-width: 768px) {
  .category-banner-info .h-100 { padding-left: 40px !important; padding-right: 40px !important; }
}
@media (min-width: 992px) {
  .category-banner-info .h-100 { padding-left: 85px !important; padding-right: 85px !important; }
}
.category-banner-info .container {
  text-align: left !important;
  padding: 0 !important;
  max-width: none !important;
}
.category-banner-info .page-header {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 6px;
}
.category-banner-info .breadcrumbs,
.category-banner-info .breadcrumbs .crumb {
  color: #F7F4EE !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.category-banner-info h1 {
  color: #F7F4EE !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

/* ── Seção 3 — alinhamento da descrição da categoria (margem esquerda,
   mesma régua .cadiz-content-edge do resto da página) ── */
body.template-category .category-banner + .container {
  max-width: 100% !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
@media (min-width: 768px) {
  body.template-category .category-banner + .container {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}
@media (min-width: 992px) {
  body.template-category .category-banner + .container {
    padding-left: 85px !important;
    padding-right: 85px !important;
  }
}
body.template-category .category-banner + .container p.text-center {
  text-align: left !important;
}

/* ── Seção 4 — barra de ordenar/filtrar. Ganha fundo sólido (a regra antiga
   de background:transparent, no topo deste arquivo, era pensada pra barra
   sticky) e corrige o alinhamento vertical dos links de ordenação.

   [25/08/2026] Sticky removido — a barra nativa (.category-controls) vem
   com "position: sticky; top: 0" por padrão, e a versão anterior deste CSS
   ajustava esse "top" pra 60px (altura fixa do cabeçalho antigo). Agora
   que o cabeçalho pode aparecer/sumir durante a rolagem (efeito Headroom),
   uma barra presa no topo brigava de espaço com ele. A barra agora fica
   parada na posição normal da página (não acompanha mais a rolagem). ── */
.js-category-controls.category-controls.cadiz-toolbar {
  position: static !important;
  top: auto !important;
}
.category-controls.cadiz-toolbar,
.category-controls.cadiz-toolbar .category-controls-container,
.category-controls.cadiz-toolbar .category-controls-row {
  background: #F7F4EE !important;
}
.cadiz-sort-inline .radio-button-item {
  margin-bottom: 0 !important;
}

/* ── Seção 5 — barra mobile: ícone de filtro + contagem de produtos (HTML
   novo em filters-modals.tpl), underline no "Ordenar por" (sem flecha) e
   alinhamento do bloco "Filtrar" na margem direita (a coluna .col-auto
   nativa se comportava como .col comum, dividindo espaço 50/50). ── */
.cadiz-mobile-sort-text {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cadiz-mobile-product-count {
  color: #838889;
  font-size: 12px;
  margin-right: 12px;
  white-space: nowrap;
}
.cadiz-mobile-filter-trigger-wrap {
  display: flex;
  align-items: center;
  flex: 0 0 auto !important;
  width: auto !important;
  margin-left: auto !important;
  justify-content: flex-end;
}
.cadiz-mobile-filter-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Seção 6 — popup "Ordenar por" (mobile, #sort-by): espaçamento dobrado
   acima do título e abaixo dos botões, fundo padrão do site (era branco
   puro) e margens laterais padronizadas em 20px (título/lista/X viviam a
   offsets diferentes entre si). ── */
#sort-by .modal-header {
  padding-top: 16px !important;
}
#sort-by .modal-body {
  padding-bottom: 30px !important;
}
#sort-by,
#sort-by .modal-header,
#sort-by .modal-body {
  background-color: #F7F4EE !important;
}
#sort-by .modal-header .col.p-3 {
  padding-left: 20px !important;
}
#sort-by .modal-header .col-auto a {
  padding-right: 20px !important;
}
#sort-by .modal-body {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#sort-by .modal-body ul {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* ── Seção 9 — contador "Filtrar (N)": menor que o texto "Filtrar" e sem
   gap ao redor do número. O "display:inline" só funciona de verdade porque
   o JS (cadiz-grid-v4.js, wrapFilterTriggerLabel) tira o badge de ser filho
   direto do container flex — ver comentário lá. ── */
.js-filters-total-badge {
  display: inline !important;
  font-size: 11px !important;
  line-height: 1;
  vertical-align: middle;
}