/* * Design system tokens below are pulled straight from Elementor > Site Settings * (Global Colors / Global Fonts) for this site — the same source used on the * home page — so editing them there keeps the store in sync automatically. */ :root { --acai-purple-dark: var(--e-global-color-6597c5e, #261559); --acai-purple: var(--e-global-color-e02c158, #471ea7); --acai-green: var(--e-global-color-ac09bde, #1db954); --acai-white: var(--e-global-color-40a42a5, #ffffff); --acai-black: var(--e-global-color-7bfb270, #000000); --acai-bg: var(--e-global-color-c66bccf, #f3f3f3); --acai-text: var(--e-global-color-text, #4a4a4a); --acai-border: #e4e0ea; --acai-font-heading: var(--e-global-typography-primary-font-family, "Roboto"), sans-serif; --acai-font-body: var(--e-global-typography-text-font-family, "Roboto"), sans-serif; --acai-radius-sm: 5px; --acai-radius-md: 8px; --acai-radius-lg: 16px; --acai-shadow: 0 4px 18px rgba(38, 21, 89, 0.08); --acai-shadow-hover: 0 10px 28px rgba(38, 21, 89, 0.14); --acai-gap: 20px; /* Brand green (--acai-green) fails WCAG AA (2.6:1) for white text on a solid fill. This darker variant is for solid CTAs only — the brand green itself stays untouched for icons/accents where text contrast isn't a factor. */ --acai-green-safe: #14793a; --acai-focus-ring: 0 0 0 3px rgba(71, 30, 167, 0.35); } html { /* Header is sticky; without this a keyboard-focused element can land underneath it (WCAG 2.2 AA "Focus Not Obscured"). */ scroll-padding-top: 110px; } /* Visible focus ring for every interactive element WooCommerce renders. Removing the native outline without a replacement (as this file did before) fails keyboard-navigation accessibility. */ .woocommerce a:focus-visible, .woocommerce button:focus-visible, .woocommerce input:focus-visible, .woocommerce select:focus-visible, .woocommerce textarea:focus-visible, .elementor-menu-cart__toggle_button:focus-visible { outline: none; box-shadow: var(--acai-focus-ring); border-radius: var(--acai-radius-sm); } /* ---------- Base ---------- */ .woocommerce, .woocommerce-page, .woocommerce *:not([class*="elementor-"]) { font-family: var(--acai-font-body); } .woocommerce, .woocommerce-page { color: var(--acai-text); } .woocommerce h1, .woocommerce h2, .woocommerce h3, .woocommerce h4 { font-family: var(--acai-font-heading) !important; color: var(--acai-purple-dark) !important; font-weight: 600; } /* * !important below is load-bearing: Elementor Pro's own WooCommerce widget * CSS scopes its default colors through long ancestor chains like * `.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce * .woocommerce-MyAccount-navigation ul li a` — 4+ classes deep. A plain * `.woocommerce a` (specificity 0,1,1) can never out-specify that, no matter * which stylesheet loads last, so every color/background rule in this file * that touches an element inside those widgets needs !important to win. */ /* * Excludes anything Elementor generated ([class*="elementor-"]) — buttons, * icon-list links, the mini-cart, etc. all carry their own explicit colors * from their widget settings and must not be overridden. This rule is only * for plain links WooCommerce itself prints as page content: breadcrumbs, * "compras recentes" style dashboard text, order tables, notices. */ /* * The admin-bar exclusion matters: `.woocommerce` sits on , so without it * this rule reaches every link on the page — including the WordPress admin bar, * whose items turned purple against its dark background for logged-in users. * * It has to be `:not(:where(#wpadminbar *))` rather than `:not(#wpadminbar *)`. * A bare `:not()` takes the specificity of its most specific argument, so the * id would push this selector to (1,2,1) and let it outrank the page's own * button rules — which is what turned the cart's "Finalizar compra" label * purple on a purple fill. `:where()` contributes zero, keeping the selector at * (0,2,1) exactly as it was before the exclusion existed. * * `[class*="hda-"]` is excluded for the same reason as Elementor's own classes: * our components paint themselves completely. Without it this rule outranked * them (0,2,1 + !important beats a plain `.hda-*` class) and repainted their * text purple — the WhatsApp button on the delivery block came out purple on * green, and the support card's hover turned dark purple on purple. Every * `.hda-*` link sets its own color, so nothing here loses styling. */ .woocommerce a:not([class*="elementor-"]):not(:where(#wpadminbar *, [class*="hda-"])) { color: var(--acai-purple) !important; } .woocommerce a:not([class*="elementor-"]):not(:where(#wpadminbar *, [class*="hda-"])):hover { color: var(--acai-purple-dark) !important; } .woocommerce-notices-wrapper { max-width: 1140px; margin: 0 auto; padding: 0 20px; } .woocommerce-message, .woocommerce-error, .woocommerce-info { border-top-color: var(--acai-purple) !important; border-radius: var(--acai-radius-md); background: #fff; box-shadow: var(--acai-shadow); padding: 1em 2em 1em 3.5em !important; } .woocommerce-message::before { color: var(--acai-green) !important; } .woocommerce-error::before { color: #d9534f !important; } .woocommerce-info::before { color: var(--acai-purple) !important; } .woocommerce-breadcrumb { max-width: 1140px; margin: 0 auto 20px; padding: 14px 20px; font-size: 13px; color: #9c98a6; display: flex; align-items: center; gap: 8px; } .woocommerce-breadcrumb::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f015"; color: var(--acai-purple); } .woocommerce-breadcrumb a { color: var(--acai-purple-dark) !important; text-decoration: none; } .woocommerce-breadcrumb a:hover { text-decoration: underline; } /* ---------- Buttons (shared) ---------- */ /* * Elementor Pro's own bundled widget CSS (custom-pro-widget-woocommerce-cart.min.css * etc.) ships hardcoded button colors — e.g. `.checkout-button{background-color:#5bc0de}` * and a generic `.button{background-color:var(--e-a-bg-default)}` that renders as a * near-invisible white-on-white button for "Atualizar carrinho" / "Aplicar cupom". * These rules are duplicated with the Elementor widget wrapper classes prefixed * and !important, so they win regardless of the page-builder's own CSS load order. */ .woocommerce a.button, .woocommerce button.button:not(.single_add_to_cart_button), .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce .checkout-button, .woocommerce input#place_order, .elementor-widget-woocommerce-cart .woocommerce a.button, .elementor-widget-woocommerce-cart .woocommerce button.button, .elementor-widget-woocommerce-checkout-page .woocommerce a.button, .elementor-widget-woocommerce-checkout-page .woocommerce button.button, .elementor-widget-woocommerce-checkout-page .woocommerce input#place_order { background: var(--acai-purple) !important; color: #fff !important; font-family: var(--e-global-typography-accent-font-family, var(--acai-font-body)); font-weight: 600; border: none !important; border-radius: var(--acai-radius-sm); padding: 13px 28px; letter-spacing: 0.2px; transition: background-color 0.2s ease, transform 0.15s ease; } .woocommerce a.button:hover, .woocommerce button.button:not(.single_add_to_cart_button):hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce .checkout-button:hover, .woocommerce input#place_order:hover { background: var(--acai-purple-dark) !important; color: #fff !important; transform: translateY(-1px); } .woocommerce a.button.alt, .woocommerce button.button.alt:not(.single_add_to_cart_button), .woocommerce input.button.alt, .elementor-widget-woocommerce-cart .woocommerce .checkout-button.alt { /* Darker than the brand green — white text on the brand green is only 2.6:1 contrast, below WCAG AA's 4.5:1 minimum for button text. */ background: var(--acai-green-safe) !important; } .woocommerce a.button.alt:hover, .woocommerce button.button.alt:not(.single_add_to_cart_button):hover, .woocommerce input.button.alt:hover { background: #0f5c2c; } /* The "Compre agora" button on the JetEngine product-grid card binds its background directly to the brand green global color (white text on it), same contrast failure as above — corrected here without touching the global color swatch itself, since that's also used for non-text accents. */ .jet-listing-grid .elementor-widget-button a.elementor-button { background-color: var(--acai-green-safe) !important; } .jet-listing-grid .elementor-widget-button a.elementor-button:hover { background-color: #0f5c2c !important; } .woocommerce a.remove { color: #c25 !important; border-radius: 50%; } /* ---------- Shop / Archive grid ---------- */ .woocommerce ul.products, .woocommerce-archive-products ul.products { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--acai-gap); margin: 0 0 30px !important; } .woocommerce ul.products li.product { background: #fff; border-radius: var(--acai-radius-lg); box-shadow: var(--acai-shadow); padding: 18px 18px 24px; margin: 0 !important; width: auto !important; float: none !important; text-align: center; transition: box-shadow 0.25s ease, transform 0.25s ease; } .woocommerce ul.products li.product:hover { box-shadow: var(--acai-shadow-hover); transform: translateY(-4px); } .woocommerce ul.products li.product img { border-radius: var(--acai-radius-md); margin-bottom: 14px; } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--acai-font-heading); font-size: 16px; font-weight: 600; color: var(--acai-purple-dark) !important; padding: 0; margin: 0 0 6px; } .woocommerce ul.products li.product .price { color: var(--acai-purple) !important; font-weight: 700; font-size: 16px; } .woocommerce ul.products li.product .price del { color: #b6b0c2; opacity: 1; font-weight: 400; margin-right: 6px; } .woocommerce ul.products li.product .button { margin-top: 14px; display: inline-block; font-size: 13px; padding: 10px 22px; } .woocommerce span.onsale { background: var(--acai-green); border-radius: 50%; font-family: var(--acai-font-body); font-weight: 700; min-height: 3.5em; min-width: 3.5em; top: 10px; left: 10px; } .woocommerce nav.woocommerce-pagination ul { border: none; gap: 8px; display: flex; } .woocommerce nav.woocommerce-pagination ul li { border: none !important; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { border-radius: var(--acai-radius-sm) !important; border: 1px solid var(--acai-border) !important; color: var(--acai-purple-dark) !important; } .woocommerce nav.woocommerce-pagination ul li a:hover, .woocommerce nav.woocommerce-pagination ul li span.current { background: var(--acai-purple) !important; color: #fff !important; border-color: var(--acai-purple) !important; } .woocommerce .woocommerce-ordering select, .woocommerce .woocommerce-result-count { font-family: var(--acai-font-body); } .woocommerce .woocommerce-ordering select { border-radius: var(--acai-radius-sm); border-color: var(--acai-border); padding: 8px 32px 8px 12px; } /* ---------- Cart page ---------- */ .woocommerce table.shop_table { border: none; border-radius: var(--acai-radius-lg); box-shadow: var(--acai-shadow); overflow: hidden; border-collapse: separate; border-spacing: 0; } .woocommerce table.shop_table th { background: var(--acai-bg) !important; color: var(--acai-purple-dark) !important; font-family: var(--acai-font-heading); font-weight: 600; border: none; padding: 16px; } .woocommerce table.shop_table td { border-top: 1px solid var(--acai-border); border-left: none; border-right: none; border-bottom: none; padding: 16px; vertical-align: middle; } .woocommerce table.shop_table td.product-thumbnail img { border-radius: var(--acai-radius-sm); width: 72px; } .woocommerce table.shop_table td.product-name a { color: var(--acai-purple-dark) !important; font-weight: 600; } .woocommerce table.cart .quantity .qty { border-radius: var(--acai-radius-sm); border: 1px solid var(--acai-border); height: 44px; width: 64px; text-align: center; } .woocommerce-cart-form__cart-item .product-subtotal { color: var(--acai-purple) !important; font-weight: 700; } .woocommerce .cart-collaterals { margin-top: 30px; } .woocommerce .cart-collaterals .cart_totals { background: #fff; border-radius: var(--acai-radius-lg); box-shadow: var(--acai-shadow); padding: 24px 28px; float: none; width: 100%; max-width: 420px; margin-left: auto; } .woocommerce .cart-collaterals .cart_totals h2 { font-size: 19px; margin-bottom: 14px; } .woocommerce .cart-collaterals .cart_totals table { border: none; } .woocommerce .cart-collaterals .cart_totals table th, .woocommerce .cart-collaterals .cart_totals table td { border: none; border-top: 1px solid var(--acai-border); padding: 12px 0; } .woocommerce .cart-collaterals .cart_totals .order-total .amount { color: var(--acai-purple) !important; font-size: 20px; font-weight: 700; } .woocommerce-cart-form .coupon { display: flex; gap: 10px; align-items: center; } .woocommerce-cart-form .coupon .input-text { border-radius: var(--acai-radius-sm); border: 1px solid var(--acai-border); height: 46px; padding: 0 14px; } /* ---------- Checkout ---------- */ .woocommerce-checkout .col2-set, .woocommerce-checkout #customer_details { background: #fff; border-radius: var(--acai-radius-lg); box-shadow: var(--acai-shadow); padding: 28px 30px; } .woocommerce-checkout h3#order_review_heading, .woocommerce-checkout h3 { font-size: 19px; margin: 30px 0 16px; } .woocommerce-checkout .form-row label { font-weight: 600; color: var(--acai-purple-dark) !important; font-size: 13px; } .woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row select, .woocommerce-checkout .form-row textarea, .woocommerce-checkout .select2-selection { border-radius: var(--acai-radius-sm) !important; border: 1px solid var(--acai-border) !important; padding: 12px 14px !important; height: auto !important; box-shadow: none !important; } .woocommerce-checkout .form-row input.input-text:focus, .woocommerce-checkout .form-row select:focus, .woocommerce-checkout .form-row textarea:focus { border-color: var(--acai-purple) !important; box-shadow: var(--acai-focus-ring) !important; outline: none; } #order_review, table.woocommerce-checkout-review-order-table { background: #fff; border-radius: var(--acai-radius-lg); box-shadow: var(--acai-shadow); padding: 24px 28px; } table.woocommerce-checkout-review-order-table { border: none; } table.woocommerce-checkout-review-order-table th, table.woocommerce-checkout-review-order-table td { border: none; border-top: 1px solid var(--acai-border); } .woocommerce-checkout ul.wc_payment_methods { border-top: 1px solid var(--acai-border); padding-top: 16px; } .woocommerce-checkout ul.payment_methods li { padding: 14px 0; } .woocommerce-checkout .payment_box { background: var(--acai-bg) !important; border-radius: var(--acai-radius-sm); border: none !important; } .woocommerce-checkout .payment_box::before { border-bottom-color: var(--acai-bg) !important; } #place_order { width: 100%; font-size: 16px; padding: 16px; margin-top: 10px; } /* ---------- My account ---------- */ .woocommerce-account .woocommerce-MyAccount-navigation { background: #fff; border-radius: var(--acai-radius-lg); box-shadow: var(--acai-shadow); padding: 10px; } .woocommerce-account .woocommerce-MyAccount-navigation ul { margin: 0; } .woocommerce-account .woocommerce-MyAccount-navigation li { border: none; margin-bottom: 4px; } .woocommerce-account .woocommerce-MyAccount-navigation li a, .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-navigation ul li a { display: block; padding: 12px 16px; border-radius: var(--acai-radius-sm); color: var(--acai-purple-dark) !important; font-weight: 600; font-size: 14px; background: transparent !important; } .woocommerce-account .woocommerce-MyAccount-navigation li a:hover, .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-navigation ul li a:hover { background: var(--acai-bg) !important; } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a, .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-navigation ul li.is-active a { background: var(--acai-purple) !important; color: #fff !important; } .woocommerce-account .woocommerce-MyAccount-content { background: #fff; border-radius: var(--acai-radius-lg); box-shadow: var(--acai-shadow); padding: 28px 30px; } .woocommerce-account .woocommerce-MyAccount-content table.shop_table { box-shadow: none; } .woocommerce-account mark.order-status { background: var(--acai-bg); color: var(--acai-purple-dark); border-radius: var(--acai-radius-sm); padding: 4px 12px; font-weight: 600; text-transform: none; } .woocommerce-account .woocommerce-Address { background: var(--acai-bg); border-radius: var(--acai-radius-md); padding: 20px; } .woocommerce-account .woocommerce-Address-title h3 { font-size: 16px; } .woocommerce form.login, .woocommerce form.register, .woocommerce form.edit-account, .woocommerce-ResetPassword { background: #fff; border-radius: var(--acai-radius-lg); box-shadow: var(--acai-shadow); padding: 28px 30px; max-width: 480px; } .woocommerce form .form-row label { font-weight: 600; color: var(--acai-purple-dark) !important; font-size: 13px; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { border-radius: var(--acai-radius-sm); border: 1px solid var(--acai-border); padding: 12px 14px; } .woocommerce form .form-row input.input-text:focus { border-color: var(--acai-purple); box-shadow: var(--acai-focus-ring); outline: none; } .woocommerce-LostPassword { font-size: 13px; margin-top: 10px; } /* ---------- Menu cart / mini cart ---------- */ .elementor-menu-cart__toggle_button { background: transparent !important; box-shadow: none !important; padding: 8px !important; } .elementor-menu-cart__toggle_button svg, .elementor-menu-cart__toggle_button i { color: var(--acai-purple-dark) !important; fill: var(--acai-purple-dark) !important; font-size: 22px; } .elementor-menu-cart__toggle_button .elementor-button-text { font-family: var(--acai-font-body); } .elementor-menu-cart__product-name { color: var(--acai-purple-dark); } .elementor-menu-cart__container .elementor-button { border-radius: var(--acai-radius-sm) !important; background: var(--acai-purple) !important; } /* ---------- JetEngine product listing grid (shop page) ---------- */ .jet-listing-grid__items { max-width: 1140px; margin: 0 auto; padding: 0 20px 30px; } .jet-listing-grid--426 .elementor-widget-button a.elementor-button { border-radius: var(--acai-radius-sm) !important; width: 100%; } /* * Elementor Pro's WooCommerce widgets (cart, checkout, my-account, purchase * summary) hardcode a light blue (#5bc0de) in several other places beyond the * main CTA buttons already handled above: the outline/secondary "View" and * "Pay"-style buttons in tables, the remove-item (×) hover color, and the * quantity/coupon field focus border. This block replaces all of them with * the brand purple so no stray blue survives anywhere in the store. */ .woocommerce a.button:not(.alt), .woocommerce-Button.button:not(.alt) { background: transparent !important; border: 2px solid var(--acai-purple) !important; color: var(--acai-purple) !important; } .woocommerce a.button:not(.alt):hover { background: var(--acai-purple) !important; color: #fff !important; } .woocommerce a.remove:hover, .woocommerce .remove:hover { color: var(--acai-purple) !important; background: transparent !important; } .woocommerce input.input-text:focus, .woocommerce select:focus, .woocommerce .qty:focus { border-color: var(--acai-purple) !important; box-shadow: var(--acai-focus-ring) !important; outline: none; } /* ---------- Header: announcement bar ---------- */ .horizonte-announcement-bar { background: var(--acai-purple-dark) !important; } .horizonte-announcement-bar .elementor-icon-list-items { justify-content: center; flex-wrap: wrap; gap: 4px 40px; } .horizonte-announcement-bar .elementor-icon-list-item { color: #fff !important; font-size: 13px; } .horizonte-announcement-bar .elementor-icon-list-icon i { color: var(--acai-green) !important; } /* ---------- Header: nav row ---------- */ /* * Hardcoded instead of relying on Elementor's globals-bound background * (`__globals__.background_color`), which compiled into a broken * `.elementor-motion-effects-layer` rule that didn't reliably paint — and * the white nav-menu/button text depends on that dark background actually * being there, so it's pinned white here too rather than trusting the * widgets' own (also globals-bound) text-color settings. */ .horizonte-nav-row { background: var(--acai-purple-dark) !important; } .horizonte-nav-row .elementor-nav-menu .elementor-item, .horizonte-nav-row .elementor-nav-menu .elementor-item:visited { color: #fff !important; } .horizonte-nav-row .elementor-nav-menu .elementor-item:hover, .horizonte-nav-row .elementor-nav-menu .elementor-item:focus { color: var(--acai-green) !important; } .horizonte-nav-row .elementor-widget-button .elementor-button { background-color: var(--acai-purple) !important; color: #fff !important; } .horizonte-nav-row .elementor-widget-button .elementor-button:hover { background-color: var(--acai-purple-dark) !important; border-color: #fff !important; } /* ---------- Header: main row ---------- */ .horizonte-main-row { background: #fff; } /* ---------- Header: search widget ---------- */ .widget_product_search .woocommerce-product-search { position: relative; display: flex; } .widget_product_search .search-field { width: 100%; border: 1px solid var(--acai-border); border-radius: var(--acai-radius-sm); padding: 12px 46px 12px 16px; font-family: var(--acai-font-body); } .widget_product_search .search-field:focus { border-color: var(--acai-purple); box-shadow: var(--acai-focus-ring); outline: none; } .widget_product_search button[type="submit"] { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: transparent !important; border: none !important; color: var(--acai-purple-dark) !important; width: 36px; height: 36px; padding: 0 !important; cursor: pointer; } /* ---------- Header: account status ---------- */ .horizonte-account-status { display: flex; align-items: center; gap: 8px; text-decoration: none !important; color: var(--acai-purple-dark) !important; } .horizonte-account-status__icon { display: flex; } .horizonte-account-status__text { display: flex; flex-direction: column; line-height: 1.2; } .horizonte-account-status__text strong { font-size: 13px; } .horizonte-account-status__text small { font-size: 12px; color: var(--acai-text); } /* ---------- Quantity stepper (cart; product page restyles it) ---------- */ .horizonte-qty-wrapper { display: inline-flex; align-items: stretch; border: 1px solid var(--acai-border); border-radius: var(--acai-radius-sm); overflow: hidden; } .horizonte-qty-wrapper .qty { border: none !important; border-left: 1px solid var(--acai-border) !important; border-right: 1px solid var(--acai-border) !important; border-radius: 0 !important; text-align: center; width: 56px !important; } .horizonte-qty-btn { background: var(--acai-bg); border: none; width: 40px; font-size: 18px; font-weight: 700; color: var(--acai-purple-dark); cursor: pointer; transition: background-color 0.15s ease; } .horizonte-qty-btn:hover { background: var(--acai-purple); color: #fff; } /* ---------- Page-level min-height (cart / checkout / my account) ---------- */ /* * These pages have thin, variable-length content (an empty cart, a single * line item, a bare login form). Without a floor, the footer rides straight * up against the content on a short cart, which reads as broken/unfinished. */ .elementor-973, .elementor-974, .elementor-975 { min-height: 75vh; } /* ---------- Responsive ---------- */ @media (max-width: 767px) { .woocommerce ul.products { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .single-product form.cart { flex-direction: column; align-items: stretch; } .woocommerce .cart-collaterals .cart_totals { max-width: 100%; } .woocommerce-checkout .col2-set, .woocommerce-checkout #customer_details, #order_review, table.woocommerce-checkout-review-order-table, .woocommerce form.login, .woocommerce form.register, .woocommerce form.edit-account, .woocommerce-account .woocommerce-MyAccount-content { padding: 20px; } }