/* KNX Loja — Visual e Filtros (30/10/2026). Cores da loja: azul do menu e verde do botão ativo. */
:root { --knx-azul: #0a5cad; --knx-verde: #3aa935; --knx-cinza: #6b7280; --knx-borda: #e5e7eb; --knx-fundo: #f6f8fb; }

/* ---------- 1) quadros de categoria ---------- */
.products .product-category .thumb-info { border-radius: 10px; overflow: hidden; box-shadow: 0 1px 2px rgba(15, 23, 42, .08); transition: box-shadow .35s ease, transform .35s ease; }
.products .product-category .thumb-info-wrapper img { transition: transform .8s cubic-bezier(.2, .7, .2, 1), filter .5s ease; will-change: transform; }
.products .product-category a:hover .thumb-info,
.products .product-category a:focus-visible .thumb-info { box-shadow: 0 14px 32px rgba(15, 23, 42, .22); transform: translateY(-3px); }
.products .product-category a:hover .thumb-info-wrapper img,
.products .product-category a:focus-visible .thumb-info-wrapper img { transform: scale(1.07); filter: brightness(1.08) saturate(1.06); }
.products .product-category .thumb-info-title { padding: 1.1em 1.2em 1em !important; }
.products .product-category h3.sub-title {
  font-family: inherit; font-size: clamp(14px, 1.15vw, 17px) !important; line-height: 1.18 !important; font-weight: 700 !important;
  letter-spacing: .02em !important; text-transform: uppercase; color: #fff !important; margin: 0 0 6px !important;
  word-break: normal !important; overflow-wrap: normal !important; hyphens: manual; text-wrap: balance;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.products .product-category .thumb-info-type { font-size: 11px !important; letter-spacing: .04em; color: rgba(255, 255, 255, .85) !important; text-transform: none; }
.products .product-category .thumb-info-type mark.count {
  display: inline-block; min-width: 22px; padding: 1px 7px; margin-right: 4px; border-radius: 999px;
  background: var(--knx-verde); color: #fff; font-weight: 700; text-align: center;
}

/* ---------- 2) lateral com cara de app ---------- */
.porto-woo-category-sidebar .widget { background: #fff; border: 1px solid var(--knx-borda) !important; border-radius: 12px; padding: 16px 18px 12px !important; margin-bottom: 18px !important; }
.porto-woo-category-sidebar .widget-title {
  position: relative; cursor: pointer; user-select: none; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .08em;
  text-transform: uppercase; color: #111827 !important; margin: 0 0 10px !important; padding-right: 24px;
}
.porto-woo-category-sidebar .widget-title .toggle { display: none !important; }
.porto-woo-category-sidebar .widget-title::after {
  content: ""; position: absolute; right: 2px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--knx-cinza); border-bottom: 2px solid var(--knx-cinza); transform: rotate(45deg); transition: transform .25s ease;
}
.porto-woo-category-sidebar .widget.knx-fechado .widget-title::after { transform: rotate(-45deg); margin-top: -3px; }
.porto-woo-category-sidebar .widget > ul { transition: opacity .25s ease; }
.porto-woo-category-sidebar .widget.knx-fechado > ul { display: none; }
.porto-woo-category-sidebar .widget.knx-fechado .widget-title { margin-bottom: 0 !important; }

/* lista de categorias em árvore */
.porto-woo-category-sidebar .product-categories, .porto-woo-category-sidebar .product-categories ul { list-style: none; margin: 0; padding: 0; }
.porto-woo-category-sidebar .product-categories ul.children { margin: 2px 0 4px 10px; padding-left: 10px; border-left: 2px solid var(--knx-borda); }
.porto-woo-category-sidebar .product-categories li { display: flex; flex-wrap: wrap; align-items: center; border: 0 !important; padding: 0 !important; }
.porto-woo-category-sidebar .product-categories li > a {
  flex: 1; display: block; padding: 6px 8px; border-radius: 8px; color: #374151 !important; font-size: 14px; text-decoration: none !important;
  transition: background .2s ease, color .2s ease;
}
.porto-woo-category-sidebar .product-categories li > a:hover { background: var(--knx-fundo); color: var(--knx-azul) !important; }
.porto-woo-category-sidebar .product-categories li.current-cat > a { background: rgba(58, 169, 53, .12); color: #1f6f1c !important; font-weight: 700; }
.porto-woo-category-sidebar .product-categories li.current-cat-parent > a { color: #111827 !important; font-weight: 600; }
.porto-woo-category-sidebar .product-categories li > ul { flex-basis: 100%; order: 3; }
.porto-woo-category-sidebar .product-categories .toggle { display: none !important; }
.porto-woo-category-sidebar .count {
  order: 2; font-size: 11px !important; font-weight: 700; color: var(--knx-cinza) !important; background: var(--knx-fundo);
  border-radius: 999px; padding: 1px 8px; margin-left: 6px; line-height: 18px;
}

/* filtros com caixinha de marcar (Fabricante, Linha) */
.porto-woo-category-sidebar .woocommerce-widget-layered-nav-list { list-style: none; margin: 0; padding: 0; }
.porto-woo-category-sidebar .woocommerce-widget-layered-nav-list li { display: flex; align-items: center; padding: 0 !important; border: 0 !important; }
.porto-woo-category-sidebar .woocommerce-widget-layered-nav-list li a {
  flex: 1; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; font-size: 14px !important;
  color: #374151 !important; text-transform: none !important; text-decoration: none !important; transition: background .2s ease;
}
.porto-woo-category-sidebar .woocommerce-widget-layered-nav-list li a::before {
  content: ""; flex: 0 0 18px; width: 18px; height: 18px; border: 2px solid #c7cdd6; border-radius: 5px; background: #fff;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.porto-woo-category-sidebar .woocommerce-widget-layered-nav-list li a:hover { background: var(--knx-fundo); }
.porto-woo-category-sidebar .woocommerce-widget-layered-nav-list li a:hover::before { border-color: var(--knx-azul); }
.porto-woo-category-sidebar .woocommerce-widget-layered-nav-list li.chosen a { font-weight: 700; color: #111827 !important; }
.porto-woo-category-sidebar .woocommerce-widget-layered-nav-list li.chosen a::before {
  background: var(--knx-verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center/12px no-repeat;
  border-color: var(--knx-verde); box-shadow: 0 0 0 3px rgba(58, 169, 53, .18);
}

/* ---------- etiquetas dos filtros ativos ---------- */
.knx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.knx-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px; line-height: 1.2;
  background: #eef5ff; color: var(--knx-azul) !important; border: 1px solid #cfe1fb; text-decoration: none !important; transition: background .2s, border-color .2s;
}
.knx-chip span { color: var(--knx-cinza); }
.knx-chip b { font-size: 16px; line-height: 1; }
.knx-chip:hover { background: #ddeafe; border-color: #a9c8f5; }
.knx-chip-limpar { background: transparent; border-color: transparent; color: var(--knx-cinza) !important; text-decoration: underline !important; }

/* ---------- 3) troca sem recarregar ---------- */
.main-content { transition: opacity .2s ease; }
body.knx-carregando .main-content { opacity: .35; pointer-events: none; }
body.knx-carregando .porto-woo-category-sidebar { pointer-events: none; }
.knx-barra { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100000; background: linear-gradient(90deg, var(--knx-azul), var(--knx-verde)); transition: width .4s ease, opacity .3s ease; }

@media (prefers-reduced-motion: reduce) {
  .products .product-category .thumb-info, .products .product-category .thumb-info-wrapper img, .main-content, .knx-barra { transition: none !important; }
}