/** * CSS da Página do Carrinho (cart.css) * * Cobre dois formatos do carrinho do WooCommerce: * * A) CART BLOCK (bloco Gutenberg — padrão do WooCommerce 8+) * Classes: .wc-block-cart, .wp-block-woocommerce-cart, etc. * Problema conhecido: o bloco aplica fundo escuro em alguns temas. * Aqui forçamos o fundo claro de volta. * * B) CARRINHO CLÁSSICO (shortcode [woocommerce_cart]) * Classes: .shop_table.cart, .cart_totals, .wc-proceed-to-checkout, etc. * Layout limpo com tabela de itens + coluna de totais. * * Carregado apenas na página do carrinho (is_cart()). * Ver functions.php → foryou_carregar_cart() */ /* ═══════════════════════════════════════════════════════════════ BASE DA PÁGINA Garante fundo claro em qualquer situação ═══════════════════════════════════════════════════════════════ */ /* A classe .woocommerce-cart é adicionada pelo WooCommerce ao quando o visitante está na página do carrinho. Usamos ela pra garantir que NADA nessa página herde um fundo escuro indesejado. */ .woocommerce-cart body, .woocommerce-cart .conteudo-principal, .woocommerce-cart main, .woocommerce-cart .site-main, .woocommerce-cart .content-area, .woocommerce-cart .hentry, .woocommerce-cart .entry-content { background-color: var(--cor-fundo) !important; color: var(--cor-texto) !important; } /* Espaçamento do conteúdo principal */ .woocommerce-cart .conteudo-principal { padding-bottom: 64px; } /* Título da página "Carrinho" / "Cart" */ .woocommerce-cart h1.entry-title, .woocommerce-cart h1.page-title, .woocommerce-cart .page-title { font-family: var(--fonte-titulos); font-size: clamp(1.6rem, 4vw, 2.2rem); color: var(--cor-texto); padding: 24px 16px 8px; max-width: 1200px; margin: 0 auto; } /* ═══════════════════════════════════════════════════════════════ A) CART BLOCK (WooCommerce 8+) Corrige o fundo escuro e adiciona padding mobile ═══════════════════════════════════════════════════════════════ */ /* Wrapper externo do bloco Gutenberg */ .wp-block-woocommerce-cart { background-color: var(--cor-fundo) !important; color: var(--cor-texto) !important; } /* Todos os wrappers internos do Cart Block recebem fundo claro. O bloco usa muitos containers aninhados, então cobrimos os principais. */ .wc-block-cart, .wc-block-cart-items, .wc-block-cart-items__header, .wc-block-cart-items__row, .wc-block-components-sidebar-layout, .wc-block-components-main, .wc-block-components-sidebar, .wc-block-components-totals-wrapper, .wc-block-components-order-summary, .wc-block-components-order-summary__content, .wc-block-cart__submit-container { background-color: var(--cor-fundo-branco) !important; color: var(--cor-texto) !important; } /* Container principal do bloco: limita largura, centraliza e dá respiro no topo */ .wc-block-cart { max-width: 1200px !important; margin: 0 auto !important; padding: 28px 24px 0 !important; /* 28px cria espaço entre o título e "PRODUTO" */ } /* Subtextos e labels dentro do bloco */ .wc-block-cart *, .wc-block-components-totals-wrapper * { color: var(--cor-texto); } /* Nome do produto no carrinho */ .wc-block-cart-item__product-name, .wc-block-cart-items__header-title { color: var(--cor-texto) !important; font-family: var(--fonte-titulos) !important; } /* Preço */ .wc-block-cart-item__prices .wc-block-components-product-price, .wc-block-cart-item__total .wc-block-components-product-price { color: var(--cor-texto) !important; font-weight: 700 !important; } /* Botão de remover item */ .wc-block-cart-item__remove-link { color: var(--cor-texto-suave) !important; } /* Botão "Continuar para finalização" do Cart Block ───────────────────────────────────────────────────────────────── O Cart Block usa a variável CSS --wp--preset--color--contrast para colorir o texto do botão. Essa variável é definida pelo tema e em muitos casos resolve para uma cor escura, deixando o texto invisível num fundo escuro. O !important em variáveis CSS (--var: val !important) é silenciado pelo navegador — NÃO funciona. Por isso, em vez de sobrescrever a variável, definimos a cor diretamente com !important usando seletores de alta especificidade (body.woocommerce-cart + *). */ body.woocommerce-cart .wc-block-cart__submit-button, body.woocommerce-cart .wc-block-cart__submit-container a, body.woocommerce-cart .wc-block-cart__submit-container button, body.woocommerce-cart .wc-block-cart__submit-container .wp-element-button { background-color: #1c1917 !important; /* Cor fixa (não variável) pra garantir */ color: #ffffff !important; border: none !important; border-radius: 10px !important; padding: 14px 24px !important; font-family: var(--fonte-principal) !important; font-size: 1rem !important; font-weight: 700 !important; width: 100% !important; display: block !important; text-align: center !important; text-decoration: none !important; cursor: pointer !important; transition: background-color 0.2s !important; } /* Cobre qualquer interno que o bloco possa usar pro texto */ body.woocommerce-cart .wc-block-cart__submit-button *, body.woocommerce-cart .wc-block-cart__submit-container a *, body.woocommerce-cart .wc-block-cart__submit-container button *, body.woocommerce-cart .wc-block-cart__submit-container .wp-element-button * { color: #ffffff !important; } body.woocommerce-cart .wc-block-cart__submit-button:hover, body.woocommerce-cart .wc-block-cart__submit-container a:hover, body.woocommerce-cart .wc-block-cart__submit-container button:hover, body.woocommerce-cart .wc-block-cart__submit-container .wp-element-button:hover { background-color: #a16207 !important; /* Dourado — cor fixa pra garantir */ color: #ffffff !important; } /* Totais do Cart Block */ .wc-block-components-totals-item { border-color: var(--cor-borda) !important; } .wc-block-components-totals-item__label { color: var(--cor-texto-suave) !important; font-size: 0.9rem !important; } .wc-block-components-totals-item__value { color: var(--cor-texto) !important; font-weight: 700 !important; } /* Cupom */ .wc-block-components-totals-coupon__button { color: var(--cor-destaque) !important; font-weight: 600 !important; } /* ── Mobile: padding lateral e espaçamento ─────────────────────── */ @media (max-width: 767px) { .wc-block-cart { padding: 0 16px !important; } .wc-block-cart-items__header { padding: 12px 0 !important; } /* Imagem do produto menor no mobile */ .wc-block-cart-item__image img { width: 72px !important; height: 72px !important; object-fit: cover; border-radius: 8px; } } /* ═══════════════════════════════════════════════════════════════ B) CARRINHO CLÁSSICO (shortcode [woocommerce_cart]) Estilo limpo para a tabela de itens + coluna de totais ═══════════════════════════════════════════════════════════════ */ /* Wrapper do WooCommerce na página */ .woocommerce-cart .woocommerce { max-width: 1200px; margin: 0 auto; padding: 0 16px 64px; } @media (min-width: 992px) { .woocommerce-cart .woocommerce { padding: 0 24px 64px; } } /* Tabela de itens do carrinho */ .woocommerce-cart table.shop_table { width: 100%; border-collapse: collapse; border: none; background: var(--cor-fundo-branco); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.05); margin-bottom: 32px; } .woocommerce-cart table.shop_table thead { background: var(--cor-muted); } .woocommerce-cart table.shop_table th { padding: 14px 16px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cor-texto-suave); border: none; text-align: left; } .woocommerce-cart table.shop_table td { padding: 16px; border-bottom: 1px solid var(--cor-borda); vertical-align: middle; color: var(--cor-texto); background: var(--cor-fundo-branco) !important; } .woocommerce-cart table.shop_table tr:last-child td { border-bottom: none; } /* Botão de remover o item (×) */ .woocommerce-cart table.shop_table .product-remove a { color: var(--cor-texto-suave) !important; font-size: 1.4rem; line-height: 1; display: block; text-align: center; transition: color 0.2s; } .woocommerce-cart table.shop_table .product-remove a:hover { color: #dc2626 !important; /* Vermelho ao passar o mouse */ } /* Imagem do produto na tabela */ .woocommerce-cart table.shop_table .product-thumbnail img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; } /* Nome do produto */ .woocommerce-cart table.shop_table .product-name a { color: var(--cor-texto); font-weight: 600; font-family: var(--fonte-titulos); transition: color 0.2s; } .woocommerce-cart table.shop_table .product-name a:hover { color: var(--cor-destaque); } /* Variações (ex: Cor: Azul marinho) */ .woocommerce-cart table.shop_table .product-name .variation { font-size: 0.82rem; color: var(--cor-texto-suave); margin-top: 4px; } /* Campo de quantidade */ .woocommerce-cart table.shop_table .qty { width: 60px !important; padding: 8px !important; text-align: center !important; border: 1.5px solid var(--cor-borda) !important; border-radius: 8px !important; font-family: var(--fonte-principal) !important; font-size: 0.9rem !important; font-weight: 600 !important; } /* Preços */ .woocommerce-cart table.shop_table .product-price, .woocommerce-cart table.shop_table .product-subtotal { font-weight: 700; font-family: var(--fonte-principal); color: var(--cor-texto); } /* Botão "Atualizar carrinho" */ .woocommerce-cart table.shop_table [name="update_cart"] { background: transparent; border: 1.5px solid var(--cor-borda); border-radius: 8px; padding: 8px 16px; font-family: var(--fonte-principal); font-size: 0.85rem; color: var(--cor-texto-suave); cursor: pointer; transition: border-color 0.2s, color 0.2s; } .woocommerce-cart table.shop_table [name="update_cart"]:hover { border-color: var(--cor-texto); color: var(--cor-texto); } /* ─ Seção de totais (lado direito no desktop) ─────────────────── */ .woocommerce-cart .cart-collaterals { width: 100%; } @media (min-width: 768px) { .woocommerce-cart .cart-collaterals { display: flex; justify-content: flex-end; } } .woocommerce-cart .cart_totals { background: var(--cor-fundo-branco); border: 1px solid var(--cor-borda); border-radius: 12px; padding: 24px; width: 100%; } @media (min-width: 768px) { .woocommerce-cart .cart_totals { width: 380px; } } .woocommerce-cart .cart_totals h2 { font-family: var(--fonte-titulos); font-size: 1.2rem; color: var(--cor-texto); margin: 0 0 20px; } .woocommerce-cart .cart_totals table { width: 100%; border-collapse: collapse; } .woocommerce-cart .cart_totals table th, .woocommerce-cart .cart_totals table td { padding: 10px 0; border-bottom: 1px solid var(--cor-borda); font-size: 0.92rem; background: transparent !important; } .woocommerce-cart .cart_totals table th { color: var(--cor-texto-suave); font-weight: 500; width: 40%; } .woocommerce-cart .cart_totals table td { color: var(--cor-texto); font-weight: 600; text-align: right; } .woocommerce-cart .cart_totals table .order-total th, .woocommerce-cart .cart_totals table .order-total td { font-size: 1.05rem; font-weight: 700; border-bottom: none; padding-top: 14px; } /* Botão "Finalizar compra" */ .woocommerce-cart .wc-proceed-to-checkout .checkout-button, .woocommerce-cart .wc-proceed-to-checkout a.button { display: block !important; width: 100% !important; text-align: center !important; background: var(--cor-texto) !important; color: #fff !important; border: none !important; border-radius: 10px !important; padding: 15px 24px !important; font-family: var(--fonte-principal) !important; font-size: 1rem !important; font-weight: 700 !important; margin-top: 16px !important; transition: background 0.2s, transform 0.15s !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer !important; } .woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover { background: var(--cor-destaque) !important; color: #fff !important; transform: translateY(-2px); } /* ─ Cupom ─────────────────────────────────────────────────────── */ .woocommerce-cart .coupon { display: flex; gap: 8px; margin-bottom: 12px; } .woocommerce-cart .coupon label { display: none; /* Label fica implícito no placeholder */ } .woocommerce-cart .coupon input.input-text { flex: 1; padding: 10px 14px; border: 1.5px solid var(--cor-borda); border-radius: 8px; font-family: var(--fonte-principal); font-size: 0.9rem; color: var(--cor-texto); background: var(--cor-fundo-branco); } .woocommerce-cart .coupon input.input-text:focus { border-color: var(--cor-destaque); outline: none; } .woocommerce-cart .coupon [name="apply_coupon"] { padding: 10px 18px; background: var(--cor-destaque); color: #fff; border: none; border-radius: 8px; font-family: var(--fonte-principal); font-size: 0.88rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.2s; } .woocommerce-cart .coupon [name="apply_coupon"]:hover { background: var(--cor-destaque-escuro); } /* ─ Mensagens de feedback do WooCommerce (ex: "cupom aplicado") ── */ .woocommerce-cart .woocommerce-message, .woocommerce-cart .woocommerce-error, .woocommerce-cart .woocommerce-info { border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; font-size: 0.9rem; list-style: none; border-left: 4px solid; } .woocommerce-cart .woocommerce-message { background: #f0fdf4; border-color: #22c55e; color: #166534; } .woocommerce-cart .woocommerce-error { background: #fef2f2; border-color: #dc2626; color: #991b1b; } .woocommerce-cart .woocommerce-info { background: #eff6ff; border-color: #3b82f6; color: #1e40af; } /* ─ "Carrinho vazio" ──────────────────────────────────────────── */ .woocommerce-cart .cart-empty { text-align: center; padding: 48px 16px; color: var(--cor-texto-suave); font-size: 1rem; } .woocommerce-cart .return-to-shop .button { display: inline-block; margin-top: 16px; padding: 12px 24px; background: var(--cor-destaque); color: #fff !important; border-radius: 8px; font-family: var(--fonte-principal); font-weight: 600; transition: background 0.2s; } .woocommerce-cart .return-to-shop .button:hover { background: var(--cor-destaque-escuro); } /* ═══════════════════════════════════════════════════════════════ SIDEBAR DO STOREFRONT NAS PÁGINAS DE LOJA ───────────────────────────────────────────────────────────── O Storefront renderiza uma barra lateral (#secondary) com widgets em todas as páginas WordPress comuns. O carrinho é uma dessas páginas, então "Recent Posts" e "Recent Comments" aparecem do lado. A remoção definitiva é via PHP em functions.php. Este CSS é o plano B: esconde via display:none caso o PHP falhe. ═══════════════════════════════════════════════════════════════ */ .woocommerce-cart #secondary, .woocommerce-cart .widget-area, .woocommerce-checkout #secondary, .woocommerce-checkout .widget-area, .woocommerce-account #secondary, .woocommerce-account .widget-area, .woocommerce-cart .widget_search, .woocommerce-cart .widget_recent_entries, .woocommerce-cart .widget_recent_comments { display: none !important; } /* Conteúdo principal ocupa 100% sem a sidebar ao lado */ .woocommerce-cart #primary, .woocommerce-cart .content-area, .woocommerce-checkout #primary, .woocommerce-account #primary { width: 100% !important; float: none !important; margin-right: 0 !important; } /* Bloco duplicado removido — estilos do botão estão acima, na seção "Botão Continuar para finalização do Cart Block". */