/* ========================================================= CriaVisual — WooCommerce (grid sólida + cartões + single) Seguro para filtros (não tocamos em .woocommerce .products) ========================================================= */ /* ---------- Paletas ---------- */ :root{ --cvw-primary: var(--cv-primary, #0ea5e9); --cvw-primary-strong: var(--cv-primary-strong, #0284c7); --cvw-accent: var(--cv-accent, #22c55e); --cvw-ink: var(--cv-text, #0f172a); --cvw-muted: var(--cv-muted, #6b7280); --cvw-card: var(--cv-surface, #ffffff); --cvw-border: #e5e7eb; --cvw-shadow: var(--cv-shadow, 0 8px 24px rgba(2,8,23,.08)); } /* Paleta antiga (roxa) só quando o tem .cv-shop-skin */ body.cv-shop-skin{ --cvw-primary: #7c3aed; --cvw-primary-strong: #6d28d9; --cvw-accent: #06b6d4; --cvw-ink: #0f172a; --cvw-muted: #6b7280; --cvw-card: #ffffff; --cvw-border: #e5e7eb; --cvw-shadow: 0 6px 22px rgba(2,6,23,.06); } /* ========================================================= LISTAGENS — força GRID (Woo clássico + Woo Blocks) ========================================================= */ /* WooCommerce clássico (apenas o UL real de produtos) */ .woocommerce ul.products{ display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; list-style: none; padding: 0; margin: 0; align-items: stretch; } @media (max-width:1200px){ .woocommerce ul.products{ grid-template-columns: repeat(3,1fr); } } @media (max-width:960px){ .woocommerce ul.products{ grid-template-columns: repeat(2,1fr); } } @media (max-width:560px){ .woocommerce ul.products{ grid-template-columns: 1fr; } } /* Woo Blocks (Gutenberg) */ .wc-block-grid__products{ display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; list-style: none; padding: 0; margin: 0; align-items: stretch; } @media (max-width:1200px){ .wc-block-grid__products{ grid-template-columns: repeat(3,1fr); } } @media (max-width:960px){ .wc-block-grid__products{ grid-template-columns: repeat(2,1fr); } } @media (max-width:560px){ .wc-block-grid__products{ grid-template-columns: 1fr; } } /* Remove floats/larguras herdadas só nos items de produtos */ .woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .wc-block-grid__products .wc-block-grid__product{ float: none !important; width: auto !important; margin: 0 !important; box-sizing: border-box; } /* ========================================================= CARTÕES — visual consistente (clássico + blocks) ========================================================= */ .woocommerce ul.products li.product, .wc-block-grid__products .wc-block-grid__product{ background: var(--cvw-card); border: 1px solid var(--cvw-border); border-radius: 12px; overflow: hidden; box-shadow: var(--cvw-shadow); transition: transform .12s ease, box-shadow .12s ease; display: flex !important; flex-direction: column; padding: 0 !important; } .woocommerce ul.products li.product:hover, .wc-block-grid__products .wc-block-grid__product:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px rgba(2,8,23,.10); } /* Thumb 1:1 consistente */ .woocommerce ul.products li.product a img, .woocommerce ul.products li.product img, .wc-block-grid__products .wc-block-grid__product img{ width: 100% !important; max-width: 100% !important; height: auto; display: block; aspect-ratio: 1 / 1; object-fit: cover; background: #f3f4f6; } /* Espaçamento interno (título, preço, rating, botão) */ .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product .price, .woocommerce ul.products li.product .star-rating, .woocommerce ul.products li.product .button{ margin-left: 12px; margin-right: 12px; } /* Blocks: títulos/botões/price */ .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-title, .wc-block-grid__products .wc-block-grid__product .wp-block-button, .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-price{ margin-left: 12px; margin-right: 12px; } /* Título (clássico) */ .woocommerce ul.products li.product .woocommerce-loop-product__title{ margin-top: 10px; margin-bottom: 4px; font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--cvw-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 40px; } /* Título (blocks) */ .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-title{ margin-top: 10px; margin-bottom: 4px; font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--cvw-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 40px; } /* Preço */ .woocommerce ul.products li.product .price, .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-price{ color: var(--cvw-primary-strong); font-weight: 800; margin-top: 6px; } /* Rating */ .woocommerce ul.products li.product .star-rating{ margin: 2px 12px 0; opacity: .95; } /* Botão (clássico) */ .woocommerce ul.products li.product .button{ width: 100%; border-radius: 10px; background: var(--cvw-primary); border-color: var(--cvw-primary); color: #fff; padding: 10px 14px; margin-top: 10px; margin-bottom: 12px; font-weight: 700; } .woocommerce ul.products li.product .button:hover{ background: var(--cvw-primary-strong); border-color: var(--cvw-primary-strong); } /* Botão (blocks) */ .wc-block-grid__products .wc-block-grid__product .wp-block-button .wp-block-button__link{ display: block; width: 100%; border-radius: 10px; background: var(--cvw-primary) !important; border: 1px solid var(--cvw-primary) !important; color: #fff !important; padding: 10px 14px; font-weight: 700; text-align: center; } .wc-block-grid__products .wc-block-grid__product .wp-block-button .wp-block-button__link:hover{ background: var(--cvw-primary-strong) !important; border-color: var(--cvw-primary-strong) !important; } /* A11y: foco visível nos botões do card */ .woocommerce ul.products li.product .button:focus, .wc-block-grid__products .wc-block-grid__product .wp-block-button .wp-block-button__link:focus{ outline: 3px solid color-mix(in srgb, var(--cvw-primary) 45%, transparent); outline-offset: 2px; } /* Badge Woo (onsale) */ .woocommerce span.onsale{ position: absolute; left: 10px; top: 10px; background: #fef3c7; color: #92400e; border: 1px solid #fde68a; border-radius: 999px; min-width: auto; min-height: auto; padding: 6px 10px; line-height: 1; font-weight: 700; box-shadow: 0 8px 16px rgba(253, 230, 138, .35); z-index: 2; } /* ========================================================= SINGLE PRODUCT — layout e botões (opcional via .cv-shop-skin) ========================================================= */ .cv-shop-skin.single-product .product{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 34px; } @media (max-width:992px){ .cv-shop-skin.single-product .product{ display:block; } } .cv-shop-skin.single-product .woocommerce-product-gallery{ background:#fff; border:1px solid var(--cvw-border); border-radius:14px; padding:12px; box-shadow: var(--cvw-shadow); } .cv-shop-skin.single-product .summary.entry-summary{ background:#fff; border:1px solid var(--cvw-border); border-radius:14px; padding:16px 18px; box-shadow: var(--cvw-shadow); } .cv-shop-skin.single-product .product_title{ font-size:28px; font-weight:800; color: var(--cvw-ink); } .cv-shop-skin.single-product .summary .price{ font-size:22px; font-weight:800; color: var(--cvw-ink); } .cv-shop-skin.single-product .single_add_to_cart_button{ background: var(--cvw-primary); border-color: var(--cvw-primary); border-radius:10px; font-weight:700; } .cv-shop-skin.single-product .single_add_to_cart_button:hover{ background: var(--cvw-primary-strong); border-color: var(--cvw-primary-strong); } .cv-shop-skin.single-product .woocommerce-tabs .wc-tabs li a{ border-radius:8px 8px 0 0; } .cv-shop-skin.single-product .woocommerce-Tabs-panel{ background:#fff; border:1px solid var(--cvw-border); border-radius: 0 14px 14px 14px; padding:16px; box-shadow: var(--cvw-shadow); } /* ========================================================= AJUSTES FINOS / COMPAT ========================================================= */ /* Neve/temas que empurram largura fixa no li */ .woocommerce ul.products.columns-1 li.product, .woocommerce ul.products.columns-2 li.product, .woocommerce ul.products.columns-3 li.product, .woocommerce ul.products.columns-4 li.product{ width: auto !important; } /* Woo Blocks removem margem própria */ .wc-block-grid__products .wc-block-grid__product{ margin: 0 !important; } /* Evitar thumbs minúsculas por regras genéricas */ .woocommerce ul.products li.product .attachment-woocommerce_thumbnail{ width: 100% !important; } /* Breadcrumb e paginação */ .woocommerce-breadcrumb{ color: var(--cvw-muted); margin: 0 0 12px; } .woocommerce nav.woocommerce-pagination ul{ border:none; } .woocommerce nav.woocommerce-pagination ul li{ border:none; margin:0 4px; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span{ border:1px solid var(--cvw-border); border-radius:8px; padding:8px 12px; } .woocommerce nav.woocommerce-pagination ul li span.current{ background: var(--cvw-primary); color:#fff; border-color: var(--cvw-primary); } /* ========================================================= PATCH — filtros sempre visíveis/alinhados (Neve + Blocks + widgets) ========================================================= */ /* 1) Filtros em Blocks (Gutenberg) — garantir display */ .wc-block-product-filters, .wc-block-woocommerce-product-categories, .wc-block-product-categories, .wc-block-product-search, .wc-block-price-filter, .wc-block-attribute-filter, .wc-block-active-filters, .wc-block-checkbox-list, .wc-block-dropdown-selector{ display:block !important; visibility:visible !important; } /* 2) Widgets clássicos (sidebar) — garantir display */ .woocommerce .widget, .woocommerce .widget-area, .widget_product_categories, .widget_search, .widget_price_filter, .woocommerce-widget-layered-nav, .woocommerce-widget-layered-nav .woocommerce-widget-layered-nav-list, .woocommerce-product-search{ display:block !important; visibility:visible !important; } /* 3) Corrige resets agressivos */ .woocommerce .widget, .wc-block-product-filters{ margin:0 0 16px; } /* 4) Campo de pesquisa “produto” */ .woocommerce-product-search, .wc-block-product-search{ max-width:100%; } .woocommerce-product-search input[type="search"], .wc-block-product-search input[type="search"]{ width:100%; border:1px solid var(--cvw-border); border-radius:8px; padding:10px 12px; } .woocommerce-product-search button, .wc-block-product-search button{ border-radius:8px; } /* 5) Lista de categorias (widget + block) */ .widget_product_categories ul, .wc-block-product-categories ul{ list-style:none; margin:8px 0 0; padding:0; } .widget_product_categories li, .wc-block-product-categories li{ margin:0; padding:6px 0; border-bottom:1px solid rgba(15,23,42,.06); } .widget_product_categories a, .wc-block-product-categories a{ text-decoration:none; color:var(--cvw-ink, #0f172a); } .widget_product_categories a:hover, .wc-block-product-categories a:hover{ text-decoration:underline; } /* 6) Garante que filtros NÃO entram no grid dos produtos */ .wc-block-product-filters, .widget-area, #secondary, .shop-sidebar, .nv-sidebar, .nv-sidebar-wrap{ display:block; /* não herdar grid/flex do content */ } /* 7) Compat com a top-bar de ordenação/contagem */ .woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering{ display:block; margin:0 0 12px; } /* 8) Se algum tema/UCSS pôs .products (genérico) em grid, desfaz para filhos que não são UL */ .woocommerce .products:not(ul){ display:block !important; } /* 9) Compat extra com layout do Neve (evitar que o wrapper force grid/flex nos filtros) */ .woocommerce .nv-content-wrap .nv-content, .woocommerce .nv-content-wrap .nv-sidebar-wrap{ display:block; } /* 10) Sidebar/filtros visíveis em mobile (Neve tende a colapsar) */ @media (max-width:960px){ .nv-sidebar, .nv-sidebar-wrap, #secondary{ display:block !important; } } /* 11) Espaçamento vertical consistente entre filtros/blocks e grelha */ .wc-block-product-filters, .wc-block-product-search, .wc-block-price-filter, .wc-block-attribute-filter, .widget-area .widget, #secondary .widget{ margin-bottom:16px; } /* ===== Loja do Parceiro: grelha respirável ===== */ .cv-partner-shop ul.products{ display: grid; grid-template-columns: repeat(var(--cv-cols, 3), minmax(0,1fr)); gap: 18px; /* espaço entre cards */ list-style: none; margin: 0; padding: 0; } /* se quiseres que siga o "columns-X" do Woo automaticamente */ .cv-partner-shop ul.products[class*="columns-"] { display: grid; gap: 18px; } .cv-partner-shop ul.products.columns-2 { grid-template-columns: repeat(2,1fr); } .cv-partner-shop ul.products.columns-3 { grid-template-columns: repeat(3,1fr); } .cv-partner-shop ul.products.columns-4 { grid-template-columns: repeat(4,1fr); } .cv-partner-shop ul.products li.product{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; box-shadow: 0 8px 24px rgba(2,8,23,.08); padding:0 !important; transition: transform .12s ease, box-shadow .12s ease; } .cv-partner-shop ul.products li.product:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px rgba(2,8,23,.10); } /* thumbs 1:1 consistentes nos cards do parceiro */ .cv-partner-shop ul.products li.product img{ width:100% !important; height:auto; display:block; aspect-ratio:1/1; object-fit:cover; background:#f3f4f6; } /* padding interno leve (quando o template do card não tem) */ .cv-partner-shop .woocommerce-loop-product__title, .cv-partner-shop .price, .cv-partner-shop .star-rating, .cv-partner-shop .button{ margin-left:12px; margin-right:12px; }