/* ============================================================ NUVEM SOFISTICADA — Loja WooCommerce Migrado do campo "CSS Adicional" (Aparência → Personalizar) para plugin próprio (2026-07-08) — mesmo CSS, duas mudanças: 1. Google Fonts self-hosted (era @import, dependência externa, igual ao que já fizemos na homepage) — ver assets/fonts/. 2. Passa a ser um ficheiro .css enfileirado (wp_enqueue_style), em vez de inline no — o browser passa a poder guardar isto em cache entre páginas, o "CSS Adicional" não deixava. ============================================================ */ /* ── FONTES self-hosted (mesmas da homepage, ver ns-homepage/assets/fonts/) ── */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/space-grotesk-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('fonts/jetbrains-mono-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --ns-blue: #046BD2; --ns-blue2: #2E9BFF; --ns-gold: #F59E0B; --ns-gold2: #D97706; --ns-green: #16A34A; --ns-black: #0a0a0a; --ns-gray: #6b7280; --ns-border: #e5e7eb; --ns-radius: 12px; } /* ── Tipografia global loja ── */ .woocommerce-page, .woocommerce { font-family: 'Space Grotesk', sans-serif; } /* ============================================================ LAYOUT O NS Filters v2 já não usa sidebar (é uma barra horizontal injectada dentro do próprio loop, ver ns-filters-v2.php). O .ast-woocommerce-container fica em bloco normal, sem grid — NÃO reintroduzir aqui um grid de colunas fixas, isso é o que causava o overflow horizontal em mobile (230px + gap nunca cabe num ecrã de 400px, e este CSS carrega em TODAS as páginas, incluindo produto individual). ============================================================ */ .ast-woocommerce-container { display: block !important; } .woocommerce-page .widget-area { display: none !important; } /* ============================================================ GRELHA DE PRODUTOS — 4 colunas, 12 por página ============================================================ */ .woocommerce ul.products { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 18px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; float: none !important; } .woocommerce ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; padding: 0 !important; background: #fff !important; border: 1px solid var(--ns-border) !important; border-radius: var(--ns-radius) !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; position: relative !important; transition: box-shadow .2s, transform .2s, border-color .2s !important; } /* Linha azul no topo de cada card */ .woocommerce ul.products li.product::before { content: '' !important; position: absolute !important; top: 0; left: 0; right: 0 !important; height: 3px !important; background: linear-gradient(90deg, #046BD2, #2E9BFF) !important; z-index: 2 !important; } .woocommerce ul.products li.product:hover { box-shadow: 0 8px 28px rgba(4,107,210,.12) !important; transform: translateY(-3px) !important; border-color: var(--ns-blue) !important; } /* Imagem */ .woocommerce ul.products li.product img { width: 100% !important; height: 170px !important; object-fit: contain !important; padding: 16px 12px 8px !important; display: block !important; transition: transform .2s !important; } .woocommerce ul.products li.product:hover img { transform: scale(1.04) !important; } /* Categoria eyebrow */ .woocommerce ul.products li.product .ast-woo-product-category { font-size: 10px !important; font-weight: 700 !important; color: var(--ns-gray) !important; text-transform: uppercase !important; letter-spacing: .07em !important; padding: 0 14px 4px !important; display: block !important; } /* Título */ .woocommerce ul.products li.product h2, .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: 'Space Grotesk', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; color: var(--ns-black) !important; line-height: 1.4 !important; padding: 4px 14px 8px !important; margin: 0 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; min-height: 38px !important; } /* Preço */ .woocommerce ul.products li.product .price { font-family: 'JetBrains Mono', monospace !important; font-size: 17px !important; font-weight: 700 !important; color: var(--ns-green) !important; padding: 0 14px 10px !important; margin: 0 !important; display: block !important; letter-spacing: -.02em !important; } .woocommerce ul.products li.product .price del { font-size: 12px !important; color: #bbb !important; font-weight: 400 !important; display: block !important; } .woocommerce ul.products li.product .price ins { text-decoration: none !important; color: var(--ns-green) !important; } /* Botão */ .woocommerce ul.products li.product a.button, .woocommerce ul.products li.product .add_to_cart_button { display: block !important; margin: auto 14px 14px !important; padding: 9px 14px !important; background: var(--ns-gold) !important; color: #412402 !important; border: none !important; border-radius: 8px !important; font-family: 'Space Grotesk', sans-serif !important; font-size: 12px !important; font-weight: 700 !important; text-align: center !important; text-transform: uppercase !important; letter-spacing: .04em !important; text-decoration: none !important; cursor: pointer !important; transition: background .15s !important; box-shadow: none !important; } .woocommerce ul.products li.product a.button:hover { background: var(--ns-gold2) !important; color: #412402 !important; } /* Esconder texto "Out of stock" azul duplicado */ .woocommerce ul.products li.product .out-of-stock, .woocommerce ul.products li.product mark.out-of-stock, .woocommerce span.onsale { display: none !important; } /* ============================================================ BARRA TOPO — resultados + ordenação (nota: o NS Filters v2 já traz a sua própria contagem/ordenação na barra horizontal e remove as nativas do WooCommerce em shop/categoria — estas regras aqui só afectam onde a nativa ainda aparecer, ex. outras listagens) ============================================================ */ .woocommerce-result-count { font-size: 13px !important; color: var(--ns-gray) !important; font-family: 'Space Grotesk', sans-serif !important; } .woocommerce-ordering select { font-family: 'Space Grotesk', sans-serif !important; font-size: 13px !important; border: 1px solid var(--ns-border) !important; border-radius: 8px !important; padding: 7px 12px !important; background: #fff !important; outline: none !important; } /* ============================================================ PAGINAÇÃO ============================================================ */ .woocommerce nav.woocommerce-pagination ul { border: none !important; display: flex !important; gap: 6px !important; justify-content: center !important; flex-wrap: wrap !important; } .woocommerce nav.woocommerce-pagination ul li { border: none !important; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { font-family: 'Space Grotesk', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; border: 1px solid var(--ns-border) !important; border-radius: 8px !important; padding: 7px 13px !important; color: #333 !important; background: #fff !important; min-width: 36px !important; text-align: center !important; transition: all .15s !important; } .woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--ns-blue) !important; border-color: var(--ns-blue) !important; color: #fff !important; } .woocommerce nav.woocommerce-pagination ul li span.current { background: var(--ns-blue) !important; border-color: var(--ns-blue) !important; color: #fff !important; } /* ============================================================ PRODUTO INDIVIDUAL ============================================================ */ .woocommerce div.product .product_title { font-family: 'Space Grotesk', sans-serif !important; font-size: clamp(1.4rem, 3vw, 2rem) !important; font-weight: 700 !important; color: var(--ns-black) !important; letter-spacing: -.02em !important; line-height: 1.2 !important; margin-bottom: .5rem !important; } .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--ns-green) !important; font-size: 2rem !important; font-weight: 700 !important; font-family: 'JetBrains Mono', monospace !important; letter-spacing: -.02em !important; } .woocommerce div.product p.price del, .woocommerce div.product span.price del { color: #bbb !important; font-weight: 400 !important; font-size: 1.1rem !important; } /* Botão compra */ .woocommerce div.product form.cart .single_add_to_cart_button { background: var(--ns-gold) !important; color: #412402 !important; border: none !important; font-family: 'Space Grotesk', sans-serif !important; font-weight: 700 !important; font-size: 15px !important; border-radius: 10px !important; padding: 14px 32px !important; text-transform: uppercase !important; letter-spacing: .04em !important; transition: background .15s !important; box-shadow: none !important; } .woocommerce div.product form.cart .single_add_to_cart_button:hover { background: var(--ns-gold2) !important; color: #412402 !important; } /* Stock */ .woocommerce div.product .stock.in-stock { color: var(--ns-green) !important; font-weight: 700 !important; font-size: 13px !important; } .woocommerce div.product .stock.out-of-stock { color: #dc2626 !important; font-weight: 700 !important; font-size: 13px !important; } /* Tabs — remover bullets, estilo linha */ .woocommerce div.product .woocommerce-tabs ul.tabs { list-style: none !important; display: flex !important; gap: 0 !important; padding: 0 !important; margin: 0 !important; border-bottom: 2px solid var(--ns-border) !important; background: none !important; } .woocommerce div.product .woocommerce-tabs ul.tabs::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none !important; } .woocommerce div.product .woocommerce-tabs ul.tabs li { list-style: none !important; background: none !important; border: none !important; border-bottom: 2px solid transparent !important; margin-bottom: -2px !important; border-radius: 0 !important; padding: 0 !important; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { font-family: 'Space Grotesk', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; color: var(--ns-gray) !important; padding: 10px 20px !important; text-transform: uppercase !important; letter-spacing: .05em !important; display: block !important; text-decoration: none !important; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--ns-blue) !important; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ns-blue) !important; } .woocommerce div.product .woocommerce-tabs .panel { padding: 1.5rem 0 !important; border: none !important; background: none !important; margin: 0 !important; } /* Etiquetas e categoria */ .woocommerce div.product .posted_in a, .woocommerce div.product .tagged_as a { color: var(--ns-blue) !important; font-weight: 600 !important; } /* Galeria produto */ .woocommerce div.product div.images { margin-bottom: 0 !important; } .woocommerce div.product div.images img { border-radius: 10px !important; border: 1px solid var(--ns-border) !important; } /* Rede de segurança — nenhum elemento deve ultrapassar a largura do ecrã */ html, body { overflow-x: hidden !important; max-width: 100% !important; } img, table, iframe, video { max-width: 100% !important; height: auto; } /* ============================================================ RESPONSIVO ============================================================ */ @media (max-width: 1200px) { .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 900px) { .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; } } @media (max-width: 480px) { .woocommerce ul.products { grid-template-columns: 1fr !important; } }