/** * WooCommerce layout overrides for the Pro theme. * * Uses design tokens (--mais-spacing-*) from . */ /* Add-to-cart form: flex layout — first child full width, rest on next row (auto width) */ .x-wc-add-to-cart-form, .woocommerce div.product form.cart { display: flex; flex-direction: row; flex-wrap: wrap; } .woocommerce div.product form.cart > *:first-child { flex: 1 1 100%; } .woocommerce div.product form.cart > *:not(:first-child) { flex: 0 0 auto; } /* Prevent empty ::before/::after from becoming flex items (avoids unwanted gap) */ .x-wc-add-to-cart-form::before, .x-wc-add-to-cart-form::after, .woocommerce div.product form.cart::before, .woocommerce div.product form.cart::after { content: none; } .woocommerce div.product p.stock, .woocommerce div.product form.cart, .containerCalculator { margin: 0; } .woocommerce div.product p.stock, .containerCalculator .col-75 p { display: none; visibility: hidden; } .woocommerce div.product form.cart { gap: var(--mais-spacing-md); } .containerCalculator { display: flex !important; flex-direction: column; flex-wrap: nowrap; gap: var(--mais-spacing-md); margin: 0 !important; padding: 0 !important; background-color: transparent !important; border-radius: 0 !important; } .containerCalculator .col-75 { margin: 0 !important; display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: var(--mais-spacing-md) !important; } .containerCalculator .col-75 p { margin: 0 !important; } .woocommerce div.product form.cart .single_add_to_cart_button { /* Layout */ display: inline-block; padding: var(--mais-spacing-xs) var(--mais-spacing-2xl); /* Typography */ font-family: var(--mais-font-headline-family); font-size: var(--mais-font-size-sm); font-weight: 400; line-height: var(--mais-line-height-snug); text-align: center; text-transform: uppercase; /* Colors */ background-color: var(--mais-color-blue); color: var(--mais-color-cream) !important; border: 2px solid var(--mais-color-blue); /* Shape */ border-radius: var(--mais-radius-pill); /* Reset WooCommerce defaults */ cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s; } .woocommerce div.product form.cart .single_add_to_cart_button:hover { /* Hover: slight darkening (opcional, o átomo usa effects_alt com rotate) */ filter: brightness(0.95); } .woocommerce div.product form.cart .single_add_to_cart_button.alt { /* Layout */ display: inline-block; padding: var(--mais-spacing-xs) var(--mais-spacing-2xl); /* Typography */ font-family: var(--mais-font-headline-family); font-size: var(--mais-font-size-xs); font-weight: 500; line-height: var(--mais-line-height-snug); text-align: center; text-transform: uppercase; /* Colors — fundo transparente, borda e texto azul */ background-color: transparent; color: var(--mais-color-blue); border: 2px solid var(--mais-color-blue); /* Shape */ border-radius: var(--mais-radius-pill); /* Reset */ cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s; } .woocommerce div.product form.cart .single_add_to_cart_button.alt:hover { background-color: var(--mais-color-blue); color: var(--mais-color-cream); border-color: var(--mais-color-blue); } .woocommerce div.product form.cart div.quantity { margin: 0 !important; display: flex; flex-direction: row; align-content: stretch; align-items: stretch; flex-wrap: wrap; } /* Form inputs: transparent background, 2px blue border (match button style) */ .woocommerce div.product form.cart .containerCalculator input[type="text"], .woocommerce div.product form.cart .quantity input.qty { width: 100%; padding: var(--mais-spacing-xs); background-color: transparent; border: 2px solid var(--mais-color-blue); border-radius: 4px; box-sizing: border-box; color: var(--mais-color-blue); } .woocommerce div.product form.cart .containerCalculator input[type="text"]::placeholder, .woocommerce div.product form.cart .quantity input.qty::placeholder { color: var(--mais-color-blue); } .woocommerce div.product form.cart .containerCalculator input[type="text"]:focus, .woocommerce div.product form.cart .quantity input.qty:focus { border-color: var(--mais-color-pink); outline: none; } .calculatorRow { display: flex; flex-direction: column; flex-wrap: nowrap; gap: var(--mais-spacing-md); } .resultado-frete { margin-left: -3px; color: var(--mais-color-blue); display: none; } /* Align table with container width and remove default td padding */ .resultado-frete table { width: 100%; padding: 0; } .resultado-frete td { padding: 0; } #destiny-shipping-mehor-envio { margin-left: 3px; } /* ------------------------------ Cart page: buttons + notices ------------------------------ */ /* Keep cart tables full-width inside custom layouts */ .woocommerce-cart table.shop_table { width: 100%; } /* Reuse product add-to-cart visual language */ .woocommerce-cart .wc-proceed-to-checkout a.checkout-button, .woocommerce .woocommerce-message .button.wc-forward, .woocommerce-cart .actions .button, .woocommerce-cart .actions button.button, .woocommerce-cart .actions input.button, .woocommerce-cart .shipping-calculator-button, .woocommerce-cart .coupon .button, .woocommerce-cart .coupon button.button, .woocommerce-cart .coupon input.button, .woocommerce-cart .cart_totals .button, .woocommerce-cart .cart_totals a.button, .woocommerce-cart .return-to-shop .button.wc-backward, .woocommerce .return-to-shop .button.wc-backward { display: inline-block; padding: 0.45rem 1.1rem; font-family: var(--mais-font-headline-family); font-size: var(--mais-font-size-xs); font-weight: 500; line-height: var(--mais-line-height-snug); text-align: center; text-transform: uppercase; background-color: var(--mais-color-blue); color: var(--mais-color-cream); border: 2px solid var(--mais-color-blue); border-radius: var(--mais-radius-pill); cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover, .woocommerce-cart .actions .button:hover, .woocommerce-cart .actions button.button:hover, .woocommerce-cart .actions input.button:hover, .woocommerce-cart .shipping-calculator-button:hover, .woocommerce .woocommerce-message .button.wc-forward:hover, .woocommerce-cart .coupon .button:hover, .woocommerce-cart .coupon button.button:hover, .woocommerce-cart .coupon input.button:hover, .woocommerce-cart .cart_totals .button:hover, .woocommerce-cart .cart_totals a.button:hover, .woocommerce-cart .return-to-shop .button.wc-backward:hover, .woocommerce .return-to-shop .button.wc-backward:hover { filter: brightness(0.95); background-color: var(--mais-color-blue); color: var(--mais-color-cream); border-color: var(--mais-color-blue); } .woocommerce-cart .actions .button:disabled, .woocommerce-cart .actions button.button:disabled, .woocommerce-cart .actions input.button:disabled { opacity: 1; background-color: transparent; color: var(--mais-color-blue); border-color: var(--mais-color-blue); cursor: not-allowed; } /* Outline card style for WooCommerce notices (empty cart included) */ .woocommerce-cart .woocommerce-info, .woocommerce-cart .woocommerce-message, .woocommerce-cart .woocommerce-error, .woocommerce-cart .cart-empty { position: relative; margin: 0 0 var(--mais-spacing-lg); padding: var(--mais-spacing-md) var(--mais-spacing-lg) var(--mais-spacing-md) calc(var(--mais-spacing-lg) + 1.5rem); background-color: transparent; color: var(--mais-color-blue); border: 2px solid var(--mais-color-blue); border-radius: var(--mais-radius-md); } .woocommerce-cart .woocommerce-info::before, .woocommerce-cart .woocommerce-message::before, .woocommerce-cart .woocommerce-error::before { left: var(--mais-spacing-lg); top: 50%; transform: translateY(-50%); color: var(--mais-color-blue); } .woocommerce-cart .woocommerce-message, .woocommerce-cart .woocommerce-info, .woocommerce-cart .woocommerce-error { display: flex; align-items: center; gap: var(--mais-spacing-md); } /* Force cart text + borders to MAIS blue */ .woocommerce-cart .shop_table, .woocommerce-cart .shop_table th, .woocommerce-cart .shop_table td, .woocommerce-cart .cart_totals table, .woocommerce-cart .cart_totals table th, .woocommerce-cart .cart_totals table td, .woocommerce-cart .cart_totals h2, .woocommerce-cart .product-name a, .woocommerce-cart .product-price, .woocommerce-cart .product-subtotal, .woocommerce-cart .product-quantity, .woocommerce-cart .cart_totals .amount, .woocommerce-cart .cart_totals .includes_tax, .woocommerce-cart .order-total .amount, .woocommerce-cart .cart-subtotal .amount, .woocommerce-cart .woocommerce-shipping-destination, .woocommerce-cart .woocommerce-shipping-calculator, .woocommerce-cart .woocommerce-shipping-calculator p { color: var(--mais-color-blue) !important; border-color: var(--mais-color-blue) !important; } .woocommerce-cart .shop_table td, .woocommerce-cart .shop_table th, .woocommerce-cart .cart_totals table tr th, .woocommerce-cart .cart_totals table tr td { border-top-color: var(--mais-color-blue) !important; border-bottom-color: var(--mais-color-blue) !important; } .woocommerce-cart .cart_totals .includes_tax, .woocommerce-cart .cart_totals .tax_label { color: var(--mais-color-blue) !important; opacity: 0.85; } .woocommerce-cart .coupon input.input-text, .woocommerce-cart .quantity input.qty, .woocommerce-cart .shipping-calculator-form input.input-text, .woocommerce-cart .shipping-calculator-form select, .woocommerce-cart .shipping-calculator-form input[type="text"] { background-color: transparent; color: var(--mais-color-blue); border: 2px solid var(--mais-color-blue); } .woocommerce-cart .coupon input.input-text::placeholder, .woocommerce-cart .shipping-calculator-form input.input-text::placeholder, .woocommerce-cart .shipping-calculator-form input[type="text"]::placeholder { color: var(--mais-color-blue); opacity: 0.75; }