/* WooCommerce dark-theme overrides — maps Woo's default markup onto Veltide's design tokens (defined in veltide.css). Full custom Woo templates can replace this later; this makes the default templates on-brand. */ .woocommerce, .woocommerce-page { color: var(--foreground); } .woocommerce-breadcrumb { max-width: 80rem; margin: 1.25rem auto 0; padding: 0 1.25rem; font-size: .8rem; color: var(--muted-foreground); } .woocommerce-breadcrumb a { color: var(--muted-foreground); } .woocommerce-breadcrumb a:hover { color: var(--foreground); } /* Container width to match theme */ .woocommerce div.product, .woocommerce .products, .woocommerce-cart .woocommerce, .woocommerce-checkout .woocommerce, .woocommerce-account .woocommerce, .woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { max-width: 80rem; margin-left: auto; margin-right: auto; padding-left: 1.25rem; padding-right: 1.25rem; } .woocommerce div.product { padding-top: 2rem; padding-bottom: 3.5rem; } /* Titles + price */ .woocommerce div.product .product_title, .woocommerce .products h2, .woocommerce .related > h2, .woocommerce .upsells > h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; color: var(--foreground); } .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--foreground); font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; } .woocommerce ul.products li.product .price { color: var(--foreground); font-weight: 600; } .woocommerce div.product .woocommerce-product-details__short-description { color: var(--muted-foreground); } /* Buttons -> brand cyan */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce .button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce .single_add_to_cart_button { background-color: var(--primary) !important; color: var(--primary-foreground) !important; border: none !important; border-radius: .5rem !important; font-weight: 600 !important; padding: .7rem 1.4rem !important; box-shadow: none !important; text-shadow: none !important; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .single_add_to_cart_button:hover { opacity: .9; } .woocommerce a.added_to_cart { color: var(--brand) !important; } .woocommerce span.onsale { background: var(--brand); color: var(--brand-foreground); } /* Product grid cards */ .woocommerce ul.products li.product { background: var(--card); border: 1px solid var(--border); border-radius: 1rem; padding: 1rem; text-align: left; list-style: none; } .woocommerce ul.products li.product a img, .woocommerce div.product div.images img { border-radius: .75rem; background: var(--card); margin-bottom: .75rem; } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-display); color: var(--foreground); font-size: 1rem; padding: .25rem 0; } .woocommerce ul.products li.product .button { margin-top: .5rem; } /* Tabs */ .woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; } .woocommerce div.product .woocommerce-tabs ul.tabs::before { border-color: var(--border); } .woocommerce div.product .woocommerce-tabs ul.tabs li { background: var(--card); border-color: var(--border); border-radius: .4rem .4rem 0 0; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--background); border-bottom-color: var(--background); } .woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--foreground); } .woocommerce div.product .woocommerce-tabs .panel h2 { font-family: var(--font-display); color: var(--foreground); } /* Forms / inputs / quantity */ .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce .quantity .qty, .woocommerce-input-wrapper input, .woocommerce table.cart td.actions .coupon .input-text, .select2-container--default .select2-selection--single { background: var(--background) !important; color: var(--foreground) !important; border: 1px solid var(--input) !important; border-radius: .4rem !important; padding: .5rem !important; } /* Tables (cart, account, spec) */ .woocommerce table.shop_table { border-color: var(--border); background: var(--card); border-radius: .75rem; } .woocommerce table.shop_table th, .woocommerce table.shop_table td { border-color: var(--border); color: var(--foreground); } /* Notices */ .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews { background: var(--card); border-top-color: var(--brand); color: var(--foreground); } /* Star ratings use brand */ .woocommerce .star-rating span::before, .woocommerce p.stars a::before { color: var(--brand); } /* Account nav */ .woocommerce-account .woocommerce-MyAccount-navigation ul li { border-color: var(--border); } .woocommerce-account .woocommerce-MyAccount-navigation ul li a { color: var(--foreground); } /* ---- WooCommerce Blocks (Cart / Checkout block editor markup) ---- */ .wc-block-components-button:not(.is-link), .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button, .wp-block-woocommerce-cart .wc-block-cart__submit-button, .wc-block-components-totals-coupon__button { background-color: var(--primary) !important; color: var(--primary-foreground) !important; border: none !important; border-radius: .5rem !important; font-weight: 600 !important; box-shadow: none !important; } .wc-block-components-button:not(.is-link):hover { opacity: .9; } .wc-block-components-button.is-link, a.wc-block-components-button { color: var(--brand) !important; } /* Block prices / totals / titles */ .wc-block-components-product-name, .wc-block-components-product-metadata, .wc-block-cart-item__total, .wc-block-components-totals-item__value, .wc-block-components-order-summary-item__total-price, .wp-block-woocommerce-cart-order-summary-block, .wc-block-components-formatted-money-amount { color: var(--foreground); } .wc-block-components-totals-item, .wc-block-components-panel { color: var(--muted-foreground); } .wp-block-woocommerce-cart-order-summary-block, .wc-block-cart__totals-title, .wc-block-components-totals-footer-item { color: var(--foreground) !important; } /* Block inputs / selects dark */ .wc-block-components-text-input input, .wc-block-components-text-input .input-text, .wc-block-checkout__form input[type="text"], .wc-block-checkout__form input[type="email"], .wc-block-checkout__form input[type="tel"], .wc-block-components-select .components-form-token-field__input, .wc-block-components-quantity-selector input { background: var(--background) !important; color: var(--foreground) !important; border: 1px solid var(--input) !important; } .wc-block-components-text-input label, .wc-block-components-checkout-step__title, .wc-block-components-title { color: var(--foreground) !important; } /* Block selects / country + state comboboxes — the WHITE is the container, not the (transparent)