/* * Archive Products — Shop / Categoria * Page-specific (carregado SÓ em is_shop() e is_product_taxonomy() via inc/hooks.php). * * Objetivo: padronizar TODOS os cards no mesmo formato (altura/imagem/título/preço/botão) * e dar polish premium combinando com o tema da página single-product (dual neon). * * Estratégia de uniformização: * - vira flexbox vertical → empurra .button pro bottom com margin-top:auto * - imagem em wrapper com aspect-ratio fixo + object-fit:cover (sem letterboxing) * - título com -webkit-line-clamp:2 (sempre 2 linhas, mesmo se texto curto) * - preço em altura fixa (não muda se for variável "$X - $Y" ou simples "$X") * - botão "Select options" / "Add to cart" sempre na MESMA altura no card * * Especificidade: usamos !important em quase tudo porque o widget Elementor * `wc-archive-products` injeta CSS inline DEPOIS do do plugin no . * * @package Blazerd_Store_Theme */ /* ============================================================ * 1. PAGE HEADER — título da loja/categoria + subtítulo * ============================================================ */ /* Wrapper geral da archive (Woo padrão usa .woocommerce-products-header) */ .woocommerce-products-header { text-align: left !important; /* Alinha à esquerda (não centro padrão WC) */ margin-bottom: 32px !important; /* Respiro antes do count/sort */ padding-left: 14px !important; /* Recuo pra alinhar com a borda CYAN à esquerda */ border-left: 4px solid var(--blz-cyan) !important; /* Barra ciano vertical (assinatura visual do tema) */ } /* Título "Shop Products" / nome da categoria */ .woocommerce-products-header__title.page-title { font-family: var(--blz-font-display), 'Rajdhani', sans-serif !important; /* Rajdhani — fonte gaming */ font-size: 32px !important; /* Tamanho do display title */ font-weight: 700 !important; /* Bold */ text-transform: uppercase !important; /* Caixa alta sempre */ letter-spacing: 1.5px !important; /* Espaçamento extra (premium feel) */ color: var(--blz-text-white) !important; /* Branco puro */ margin: 0 0 6px 0 !important; /* Sem margem extra (gap controlado pelo header wrapper) */ line-height: 1.1 !important; /* Linha apertada (visual compacto) */ } /* Descrição da categoria (se editor cadastrar no /admin/term.php) */ .term-description { color: var(--blz-text-muted) !important; /* Cinza suave */ font-size: 14px !important; /* Pequeno (subtítulo) */ line-height: 1.5 !important; /* Confortável */ margin: 0 !important; /* Sem margin extra */ max-width: 720px !important; /* Quebra antes do meio da tela (legibilidade) */ } /* ============================================================ * 2. TOP BAR — "Showing X results" + Sort dropdown * ============================================================ */ /* Container do "Showing X results" + form de ordenação (WC envolve em .woocommerce > primeiro

e

) */ /* WC NÃO envolve esses 2 em um wrapper — flutuam soltos. Hackeamos pra ficar em linha. */ .woocommerce-result-count { display: inline-block !important; /* Linha (não block) pra ficar lado-a-lado com sort */ font-size: 13px !important; /* Tamanho menor (info secundária) */ color: var(--blz-text-muted) !important; /* Cinza muted */ font-style: italic !important; /* Itálico (sutil, info marginal) */ font-family: var(--blz-font-main), 'Inter', sans-serif !important; /* Inter pra texto */ margin: 0 0 24px 0 !important; /* Espaço abaixo (antes do grid) */ padding: 8px 14px !important; /* Padding pra parecer chip */ background: rgba(15, 23, 42, 0.5) !important; /* Fundo dark sutil (vira chip) */ border: 1px solid rgba(255, 255, 255, 0.06) !important; /* Borda finíssima */ border-radius: 999px !important; /* Pill shape (chip arredondado) */ letter-spacing: 0.4px !important; /* Spacing levemente aberto */ } /* Form de ordenação (wrapper do nativo — repaginado pra parecer custom */ .woocommerce-ordering select.orderby { appearance: none !important; /* Remove styling nativo do navegador */ -webkit-appearance: none !important; /* Safari */ -moz-appearance: none !important; /* Firefox antigo */ background: rgba(15, 23, 42, 0.85) !important; /* Fundo dark sólido */ border: 1px solid rgba(255, 255, 255, 0.12) !important; /* Borda branca translúcida */ border-radius: 8px !important; /* Cantos suavemente arredondados */ padding: 10px 40px 10px 16px !important; /* Padding extra à direita pro chevron caber */ font-family: var(--blz-font-main), 'Inter', sans-serif !important; /* Inter (legibilidade) */ font-size: 13px !important; /* Pequeno (UI secundária) */ font-weight: 600 !important; /* Semibold pra destaque */ color: var(--blz-text) !important; /* Cinza claro */ cursor: pointer !important; /* Mãozinha */ text-transform: uppercase !important; /* CAIXA ALTA (combina com botões) */ letter-spacing: 0.8px !important; /* Spacing aberto */ /* Chevron custom em SVG inline (não depende de fontes externas) — seta branca pra baixo */ background-image: url("data:image/svg+xml;utf8,") !important; background-repeat: no-repeat !important; /* Não repete a SVG */ background-position: right 14px center !important; /* Cola à direita, centro vertical */ background-size: 12px 12px !important; /* Tamanho fixo do chevron */ transition: border-color 0.2s ease, box-shadow 0.2s ease !important; /* Transição suave no focus/hover */ min-width: 200px !important; /* Largura mínima (não fica apertado) */ } /* Hover do select */ .woocommerce-ordering select.orderby:hover { border-color: rgba(34, 211, 238, 0.4) !important; /* Borda ciano sutil no hover */ } /* Focus (teclado/acessibilidade) */ .woocommerce-ordering select.orderby:focus { outline: none !important; /* Remove outline padrão */ border-color: var(--blz-cyan) !important; /* Borda ciano forte */ box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15) !important; /* Ring ciano sutil */ } /* Opções do dropdown (alguns navegadores respeitam, outros não — é OS-native) */ .woocommerce-ordering select.orderby option { background: #0f172a !important; /* Fundo dark nas options */ color: var(--blz-text) !important; /* Texto cinza claro */ } /* Clear float depois do top bar (count + ordering) */ .woocommerce ul.products { clear: both !important; /* Limpa o float:right do ordering */ } /* ============================================================ * 3. GRID DE PRODUTOS — uniforme, responsivo, sem letterbox * ============================================================ */ /* — container principal do grid */ .woocommerce ul.products, .woocommerce-page ul.products { display: grid !important; /* Grid CSS (não flex) — controle preciso de colunas */ grid-template-columns: repeat(4, 1fr) !important; /* 4 colunas iguais no desktop */ gap: 22px !important; /* Espaço uniforme entre cards */ margin: 0 !important; /* Reset margin do WC */ padding: 0 !important; /* Reset padding do WC */ list-style: none !important; /* Sem bullets */ } /* Responsivo: 3 colunas em laptops menores */ @media (max-width: 1280px) { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(3, 1fr) !important; /* 3 cards por linha */ } } /* Responsivo: 2 colunas em tablets */ @media (max-width: 1024px) { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr) !important; /* 2 cards por linha */ gap: 16px !important; /* Gap menor em telas pequenas */ } } /* Responsivo: 1 coluna em mobile */ @media (max-width: 640px) { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: 1fr !important; /* 1 card por linha */ gap: 14px !important; /* Gap ainda menor */ } } /* ============================================================ * 4. CARD INDIVIDUAL — com flexbox vertical pra altura uniforme * ============================================================ */ .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { display: flex !important; /* Flex vertical pra empurrar botão pra baixo */ flex-direction: column !important; /* Pilha vertical (img → título → preço → botão) */ width: auto !important; /* Reset largura do WC */ margin: 0 !important; /* Sem margem (gap do grid cuida) */ padding: 16px !important; /* Padding interno uniforme */ background: linear-gradient(180deg, rgba(15, 23, 42, 0.75), rgba(15, 23, 42, 0.65)) !important; /* Gradient dark sutil top→bottom */ border: 1px solid rgba(255, 255, 255, 0.06) !important; /* Borda branca finíssima (delimita o card) */ border-radius: 14px !important; /* Cantos arredondados (premium feel) */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important; /* Sombra suave embaixo (eleva do fundo) */ backdrop-filter: blur(8px) !important; /* Blur de fundo (glassmorphism leve) */ -webkit-backdrop-filter: blur(8px) !important; /* Safari */ overflow: hidden !important; /* Esconde tudo que vazar (badge ::before, etc.) */ position: relative !important; /* Pro badge absoluto ficar dentro */ transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important; /* Transições suaves no hover */ float: none !important; /* Defensivo: WC antigo usava float */ list-style: none !important; /* Sem bullets */ text-align: left !important; /* Alinhamento padrão à esquerda (texto fica natural) */ box-sizing: border-box !important; /* Padding/border contam dentro */ } /* HOVER do card — lift + glow dual-color matching single-product theme */ .woocommerce ul.products li.product:hover, .woocommerce-page ul.products li.product:hover { transform: translateY(-4px) !important; /* Eleva 4px (sensação "flutua") */ border-color: rgba(34, 211, 238, 0.45) !important; /* Borda fica CIANO no hover */ background: linear-gradient(180deg, rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.75)) !important; /* Fundo um pouco mais sólido */ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), /* Sombra preta mais forte (eleva) */ 0 0 20px rgba(34, 211, 238, 0.18), /* Halo ciano externo */ 0 0 35px rgba(168, 85, 247, 0.10) !important; /* Halo roxo distante (assinatura dual-color) */ } /* ============================================================ * 5. IMAGEM — aspect-ratio APLICADO DIRETO NO (sem wrapper-hack) * ============================================================ */ /* IMPORTANTE: o markup real do WC/Elementor é: * * * * ← TÍTULO dentro do mesmo * ← PREÇO dentro do mesmo * * Select options * * * Por isso NÃO podemos transformar o num container com aspect-ratio + overflow:hidden * — fazendo isso, o título e o preço (que estão dentro do ) ficam CLIPADOS e a imagem * absolute cobre tudo. Solução: aspect-ratio vai direto no , o fica como link * transparente envolvendo img + título + preço em flow normal. */ /* O wrapper — só reseta defaults de link e herda cor do tema (sem mexer em layout) */ .woocommerce ul.products li.product > a.woocommerce-LoopProduct-link, .woocommerce ul.products li.product > a.woocommerce-loop-product__link, .woocommerce-page ul.products li.product > a.woocommerce-LoopProduct-link { display: block !important; /* Block (full-width clicável) */ text-decoration: none !important; /* Sem sublinhado */ color: inherit !important; /* Herda cor (texto não vira azul de link) */ width: 100% !important; /* Largura total do card */ } /* A IMAGEM — aspect-ratio + object-fit aplicados DIRETO nela */ .woocommerce ul.products li.product img, .woocommerce-page ul.products li.product img, .woocommerce ul.products li.product img.attachment-woocommerce_thumbnail { display: block !important; /* Block (remove gap inline) */ width: 100% !important; /* Preenche largura do card */ height: auto !important; /* Altura calculada pelo aspect-ratio */ aspect-ratio: 4 / 3 !important; /* Ratio 4:3 — uniformiza TODOS os cards */ object-fit: cover !important; /* Cobre a área (crop equilibrado, sem letterbox) */ object-position: center !important; /* Centraliza o crop */ margin: 0 0 14px 0 !important; /* Espaço abaixo (antes do título) */ padding: 0 !important; /* Reset padding */ border-radius: 10px !important; /* Cantos arredondados (combina com card) */ background: #0a0f1e !important; /* Fundo dark visível antes do load / sob PNG transparente */ transition: transform 0.4s ease !important; /* Transição suave do zoom */ box-shadow: none !important; /* Sem sombra herdada */ max-width: 100% !important; /* Defensivo: nunca ultrapassa o card */ position: static !important; /* OVERRIDE: sem absolute (era o bug anterior) */ } /* HOVER — zoom sutil na imagem (clipado pelo overflow:hidden do ) */ .woocommerce ul.products li.product:hover img, .woocommerce-page ul.products li.product:hover img { transform: scale(1.06) !important; /* Zoom 6% (sutil, não distorce) */ } /* ============================================================ * 6. BADGES — PREMIUM (top-right) + SALE (top-left) * ============================================================ */ /* Badge "Sale!" do WooCommerce (top-left do card) */ .woocommerce ul.products li.product .onsale, .woocommerce-page ul.products li.product .onsale { position: absolute !important; /* Absoluta dentro do
  • */ top: 22px !important; /* 22px do topo (alinhado com padding do card) */ left: 22px !important; /* 22px da esquerda */ z-index: 2 !important; /* Acima da imagem */ min-width: 0 !important; /* Reset width forçada do WC */ min-height: 0 !important; /* Reset height forçada do WC */ padding: 5px 10px !important; /* Padding interno do chip */ background: linear-gradient(135deg, #f43f5e, #ec4899) !important; /* Gradient rosa→pink (chama atenção) */ color: #ffffff !important; /* Texto branco puro */ font-family: var(--blz-font-main), 'Inter', sans-serif !important; /* Inter */ font-size: 10px !important; /* Pequeno */ font-weight: 800 !important; /* Extra bold */ text-transform: uppercase !important; /* Caixa alta */ letter-spacing: 1px !important; /* Spacing aberto */ border-radius: 6px !important; /* Cantos suavemente arredondados */ border: none !important; /* Sem borda */ line-height: 1 !important; /* Linha apertada */ box-shadow: 0 2px 8px rgba(244, 63, 94, 0.4) !important; /* Glow rosa */ text-align: center !important; /* Centraliza texto */ } /* Badge "PREMIUM" customizado — aplicado via JS/PHP em produtos com tag "premium". Como não temos hook PHP pra isso, deixo a regra pronta — pode ser usada com uma classe extra `.is-premium` no
  • (que adicionamos no template archive). */ .woocommerce ul.products li.product.is-premium::before { content: 'PREMIUM' !important; /* Texto do badge */ position: absolute !important; /* Absoluta no card */ top: 22px !important; /* Mesma altura do .onsale */ right: 22px !important; /* Top-right (oposto do sale) */ z-index: 3 !important; /* Acima de tudo */ padding: 5px 10px !important; /* Padding chip */ background: linear-gradient(135deg, #a855f7, #6366f1) !important; /* Gradient roxo→indigo (premium) */ color: #ffffff !important; /* Branco */ font-family: var(--blz-font-main), 'Inter', sans-serif !important; /* Inter */ font-size: 10px !important; /* Pequeno */ font-weight: 800 !important; /* Extra bold */ text-transform: uppercase !important; /* Caixa alta */ letter-spacing: 1.2px !important; /* Spacing */ border-radius: 6px !important; /* Arredondado */ line-height: 1 !important; /* Apertado */ box-shadow: 0 2px 8px rgba(168, 85, 247, 0.5) !important; /* Glow roxo */ pointer-events: none !important; /* Não bloqueia clique na img/título */ } /* ============================================================ * 7. TÍTULO DO PRODUTO — clamp 2 linhas (altura uniforme) * ============================================================ */ .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce-page ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h2.woocommerce-loop-product__title, .woocommerce ul.products li.product h3.woocommerce-loop-product__title { font-family: var(--blz-font-main), 'Inter', sans-serif !important; /* Inter (legibilidade) */ font-size: 15px !important; /* Tamanho leitura */ font-weight: 700 !important; /* Bold (destaque) */ line-height: 1.35 !important; /* Confortável p/ multi-linha */ color: var(--blz-text-white) !important; /* Branco puro */ margin: 0 0 10px 0 !important; /* Espaço antes do preço */ padding: 0 !important; /* Sem padding */ text-transform: uppercase !important; /* CAIXA ALTA (estilo gaming) */ letter-spacing: 0.5px !important; /* Spacing leve */ /* Clamp em 3 linhas — comporta nomes longos tipo "EDGE TOOL (MULTI ACCOUNT + ATK SPEED)" inteiros */ display: -webkit-box !important; /* Box flex pra line-clamp funcionar */ -webkit-line-clamp: 3 !important; /* Limita a 3 linhas (era 2 — não dava pra nomes grandes) */ line-clamp: 3 !important; /* Versão padrão (futuro) */ -webkit-box-orient: vertical !important; /* Orientação vertical do box */ overflow: hidden !important; /* Esconde linha 4+ */ text-overflow: ellipsis !important; /* Adiciona "..." no fim */ min-height: 4.05em !important; /* Reserva espaço pras 3 linhas (3 × 1.35 line-height — uniformidade entre cards) */ transition: color 0.2s ease !important; /* Transição suave no hover */ } /* HOVER do título — vira ciano (feedback de "clicável") */ .woocommerce ul.products li.product:hover .woocommerce-loop-product__title, .woocommerce-page ul.products li.product:hover .woocommerce-loop-product__title { color: var(--blz-cyan) !important; /* Cor ciano no hover */ } /* ============================================================ * 8. PREÇO — destaque ciano, altura fixa * ============================================================ */ .woocommerce ul.products li.product .price, .woocommerce-page ul.products li.product .price { color: var(--blz-cyan) !important; /* CIANO (destaque do preço) */ font-family: var(--blz-font-main), 'Inter', sans-serif !important; /* Inter (mais limpa pra números — Rajdhani ficava condensada/apertada) */ font-size: 17px !important; /* Levemente maior (Inter é mais larga que Rajdhani — compensa visualmente) */ font-weight: 700 !important; /* Bold */ margin: 0 0 14px 0 !important; /* Espaço antes do botão */ padding: 0 !important; /* Sem padding */ line-height: 1.2 !important; /* Linha apertada */ min-height: 24px !important; /* Altura mínima (ajustada pro novo font-size 17px) */ letter-spacing: 0.2px !important; /* Spacing bem leve (Inter já é legível, não precisa abrir muito) */ display: block !important; /* Block (full width) */ font-variant-numeric: tabular-nums !important; /* Números tabulares — todos os dígitos com mesma largura (alinha "13.53" e "31.27") */ } /* Os que o WC usa pra "~ US$" (símbolo de moeda) — também na Inter, peso médio */ .woocommerce ul.products li.product .price small, .woocommerce ul.products li.product .price .woocommerce-Price-currencySymbol, .woocommerce-page ul.products li.product .price small { font-family: var(--blz-font-main), 'Inter', sans-serif !important; /* Inter (consistente com o preço) */ font-size: 13px !important; /* Menor que o número (hierarquia visual) */ font-weight: 600 !important; /* Semibold (não tão pesado quanto o número) */ opacity: 0.85 !important; /* Levemente atenuado (chama menos atenção que o número) */ margin-right: 2px !important; /* Mini-gap antes do número */ letter-spacing: 0.3px !important; /* Spacing leve no "US$" */ } /* Preço de variável (formato "$X - $Y") — ambos os números na mesma linha */ .woocommerce ul.products li.product .price .woocommerce-Price-amount, .woocommerce-page ul.products li.product .price .woocommerce-Price-amount { color: inherit !important; /* Herda ciano do .price parent */ font-size: inherit !important; /* Herda tamanho */ font-weight: inherit !important; /* Herda bold */ background: none !important; /* Sem fundo (alguns temas adicionam) */ } /* Preço "old" riscado (quando em sale) — vira cinza riscado */ .woocommerce ul.products li.product .price del, .woocommerce-page ul.products li.product .price del { color: var(--blz-text-muted) !important; /* Cinza muted */ text-decoration: line-through !important; /* Riscado */ font-weight: 500 !important; /* Menos bold (info secundária) */ margin-right: 6px !important; /* Espaço antes do preço novo */ opacity: 0.7 !important; /* Mais sutil */ } /* Preço "new" (depois do desconto) — vira ROSA pra contrastar com cinza riscado */ .woocommerce ul.products li.product .price ins, .woocommerce-page ul.products li.product .price ins { background: none !important; /* Remove background padrão do */ color: #f43f5e !important; /* Rosa (destaque sale) */ text-decoration: none !important; /* Sem sublinhado (default do ) */ font-weight: 800 !important; /* Extra bold */ } /* ============================================================ * 9. BOTÃO "Add to cart" / "Select options" — bottom do card * ============================================================ */ .woocommerce ul.products li.product .button, .woocommerce-page ul.products li.product .button, .woocommerce ul.products li.product a.button.add_to_cart_button, .woocommerce ul.products li.product a.button.product_type_variable, .woocommerce ul.products li.product a.button.product_type_simple { display: flex !important; /* Flex pra centralizar conteúdo */ align-items: center !important; /* Centro vertical */ justify-content: center !important; /* Centro horizontal */ width: 100% !important; /* Largura total do card */ margin: auto 0 0 0 !important; /* Empurra pro BOTTOM via flex (margin-top:auto) */ padding: 11px 14px !important; /* Padding interno */ background: linear-gradient(135deg, #22d3ee, #a855f7) !important; /* Gradient dual-color (assinatura do tema) */ background-size: 200% 100% !important; /* Pro shimmer hover deslizar */ background-position: 0% 50% !important; /* Posição inicial */ border: none !important; /* Sem borda */ border-radius: 8px !important; /* Arredondado */ color: #ffffff !important; /* Branco puro */ font-family: var(--blz-font-main), 'Inter', sans-serif !important; /* Inter */ font-size: 12.5px !important; /* Pequeno-médio (compacto) */ font-weight: 800 !important; /* Extra bold */ text-transform: uppercase !important; /* CAIXA ALTA */ letter-spacing: 1.2px !important; /* Spacing aberto */ text-align: center !important; /* Centraliza texto */ text-decoration: none !important; /* Sem sublinhado (default do ) */ cursor: pointer !important; /* Mãozinha */ box-shadow: 0 4px 12px rgba(34, 211, 238, 0.25) !important; /* Glow ciano sutil */ transition: background-position 0.4s ease, transform 0.2s ease, box-shadow 0.25s ease !important; /* Transições suaves */ box-sizing: border-box !important; /* Padding/border dentro */ line-height: 1.2 !important; /* Linha apertada */ white-space: normal !important; /* Permite quebrar texto (Select options 2 palavras) */ word-break: break-word !important; /* Quebra se necessário */ min-height: 42px !important; /* Altura mínima fixa (uniformidade entre cards) */ } /* HOVER do botão — gradient desliza + glow mais forte */ .woocommerce ul.products li.product .button:hover, .woocommerce-page ul.products li.product .button:hover { background-position: 100% 50% !important; /* Gradient anima horizontalmente (efeito shimmer) */ transform: translateY(-1px) !important; /* Eleva 1px */ box-shadow: 0 6px 16px rgba(34, 211, 238, 0.35), /* Glow ciano mais forte */ 0 0 25px rgba(168, 85, 247, 0.18) !important; /* Halo roxo (dual color) */ } /* ACTIVE (clicando) do botão */ .woocommerce ul.products li.product .button:active, .woocommerce-page ul.products li.product .button:active { transform: translateY(0) !important; /* Volta pro lugar (sensação de press) */ box-shadow: 0 2px 8px rgba(34, 211, 238, 0.3) !important; /* Glow reduzido */ } /* Estado "loading" (clicou e WC tá processando AJAX) */ .woocommerce ul.products li.product .button.loading, .woocommerce-page ul.products li.product .button.loading { opacity: 0.7 !important; /* Mais transparente */ cursor: wait !important; /* Cursor de espera */ pointer-events: none !important; /* Bloqueia novos cliques */ } /* Botão "Added" (depois de adicionar com sucesso) */ .woocommerce ul.products li.product .added_to_cart { display: none !important; /* Esconde link "View cart" que WC injeta — feio na grade */ } /* ============================================================ * 10. RATING (estrelas embaixo do título, se produto tem reviews) * ============================================================ */ .woocommerce ul.products li.product .star-rating, .woocommerce-page ul.products li.product .star-rating { color: #fbbf24 !important; /* Amarelo (estrela) */ font-size: 13px !important; /* Pequeno */ margin: 0 0 8px 0 !important; /* Espaço abaixo */ float: none !important; /* Sem float (default WC tem float right) */ width: 5.4em !important; /* Largura padrão WC (5 estrelas) */ height: 1em !important; /* Altura controlada */ line-height: 1 !important; /* Linha apertada */ display: block !important; /* Block (próprio linha) */ } /* ============================================================ * 11. PAGINAÇÃO — botões custom matching theme * ============================================================ */ .woocommerce-pagination { margin: 36px 0 0 0 !important; /* Espaço acima (separa do grid) */ padding: 0 !important; /* Sem padding */ text-align: center !important; /* Centraliza */ clear: both !important; /* Limpa floats acima */ } .woocommerce-pagination ul.page-numbers { display: inline-flex !important; /* Flex inline pra ficarem em linha */ gap: 6px !important; /* Espaço entre páginas */ padding: 0 !important; /* Reset padding */ margin: 0 !important; /* Reset margin */ list-style: none !important; /* Sem bullets */ border: none !important; /* Reset border do WC */ } .woocommerce-pagination ul.page-numbers li { margin: 0 !important; /* Reset margin */ padding: 0 !important; /* Reset padding */ border: none !important; /* Reset border */ display: block !important; /* Block (não inline default) */ } .woocommerce-pagination ul.page-numbers li .page-numbers { display: flex !important; /* Flex pra centralizar conteúdo */ align-items: center !important; /* Centro vertical */ justify-content: center !important; /* Centro horizontal */ min-width: 40px !important; /* Largura mínima quadrada */ height: 40px !important; /* Altura fixa */ padding: 0 10px !important; /* Padding horizontal (números maiores cabem) */ background: rgba(15, 23, 42, 0.7) !important; /* Fundo dark */ border: 1px solid rgba(255, 255, 255, 0.08) !important; /* Borda finíssima */ border-radius: 8px !important; /* Arredondado */ color: var(--blz-text) !important; /* Cinza claro */ font-family: var(--blz-font-main), 'Inter', sans-serif !important; /* Inter */ font-size: 14px !important; /* Tamanho médio */ font-weight: 700 !important; /* Bold */ text-decoration: none !important; /* Sem sublinhado */ transition: all 0.2s ease !important; /* Transição suave */ } /* Hover de página */ .woocommerce-pagination ul.page-numbers li a.page-numbers:hover { background: rgba(34, 211, 238, 0.15) !important; /* Fundo ciano translúcido */ border-color: var(--blz-cyan) !important; /* Borda ciano */ color: var(--blz-text-white) !important; /* Texto branco */ transform: translateY(-1px) !important; /* Eleva 1px */ } /* Página ATIVA (atual) */ .woocommerce-pagination ul.page-numbers li .page-numbers.current { background: linear-gradient(135deg, #22d3ee, #a855f7) !important; /* Gradient dual-color */ border-color: transparent !important; /* Sem borda (gradient é o destaque) */ color: #ffffff !important; /* Branco */ box-shadow: 0 4px 12px rgba(34, 211, 238, 0.3) !important; /* Glow ciano */ } /* ============================================================ * 12. ESTADO VAZIO — "No products found" * ============================================================ */ .woocommerce-info, .woocommerce-no-products-found { background: rgba(15, 23, 42, 0.6) !important; /* Fundo dark */ border: 1px solid rgba(255, 255, 255, 0.08) !important; /* Borda finíssima */ border-left: 4px solid var(--blz-cyan) !important; /* Borda ciano à esquerda (info) */ border-radius: 8px !important; /* Arredondado */ padding: 18px 22px !important; /* Padding interno */ color: var(--blz-text) !important; /* Cinza claro */ font-family: var(--blz-font-main), 'Inter', sans-serif !important; /* Inter */ font-size: 14px !important; /* Tamanho leitura */ line-height: 1.5 !important; /* Confortável */ } /* ============================================================ * 13. REDUCED MOTION — desliga animações pra acessibilidade * ============================================================ */ @media (prefers-reduced-motion: reduce) { .woocommerce ul.products li.product, .woocommerce ul.products li.product img, .woocommerce ul.products li.product .button, .woocommerce-pagination ul.page-numbers li a.page-numbers { transition: none !important; /* Sem transições */ } .woocommerce ul.products li.product:hover { transform: none !important; /* Sem lift no hover */ } .woocommerce ul.products li.product:hover img { transform: none !important; /* Sem zoom no hover */ } }