/* ============================================================ DICE PEPTIDES — WOOCOMMERCE (Cart · Checkout · My Account) Brings WooCommerce's native cart/checkout/account markup into the Design System v1.0 light aesthetic. Loaded on WC pages only. Tokens only; no product/price/commerce data here (all from WooCommerce). ============================================================ */ .woocommerce-page-wrap { color: var(--text-secondary); } .woocommerce-page-wrap a { color: var(--accent); } .woocommerce-page-wrap a:hover { color: var(--accent-light); } /* ------------------------------------------------------------------ * TYPOGRAPHY OWNERSHIP — reassert the Dice font family on every WooCommerce * page (Cart / Checkout / My Account / Order-Received all carry .woocommerce-page). * * These are Elementor-templated pages, so the body gets Elementor's global font * kit (body class .elementor-kit-NN) which sets font-family explicitly on the * body → Oswald, on h1–h6 → Noto Sans, and on inputs/labels → Oswald, all of * which outrank the theme's `body { font-family: Inter }`. We reassert the * design-system family on the WC page (so everything that INHERITS * follows) plus the few elements Elementor sets EXPLICITLY (headings + form * controls + labels), which don't inherit. FAMILY ONLY — every size, weight, * letter-spacing and line-height is already the DS value and is left untouched. * `!important` is needed to beat Elementor's kit selectors (e.g. * `.elementor-kit-NN input:not([type=button]):not([type=submit])`) and matches * the existing Elementor-bleed guards further down this file. The family lives * in exactly one place — the --font-sans token in :root — so nothing is * duplicated. Icon fonts are untouched (we never target span/i/[class*=icon]). * ---------------------------------------------------------------- */ body.woocommerce-page { font-family: var(--font-sans) !important; } body.woocommerce-page :is(h1, h2, h3, h4, h5, h6, p, a, ul, ol, li, dl, dt, dd, table, caption, th, td, label, legend, fieldset, input, select, textarea, button, optgroup, option, strong, b, em, small, address, bdi, mark, abbr, blockquote, figcaption, .amount, .woocommerce-Price-amount, .woocommerce-Price-currencySymbol) { font-family: var(--font-sans) !important; } /* WooCommerce/browser render

italic; the DS uses upright text. */ body.woocommerce-page address { font-style: normal; } /* ---- Notices ---- */ .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, .woocommerce-notice { list-style: none; padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-md); margin: 0 0 var(--sp-6); font-size: 14px; border: 1px solid var(--border-default); background: var(--bg-surface); color: var(--text-primary); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); } .woocommerce-message { border-color: rgba(34,197,94,0.4); } .woocommerce-info { border-color: var(--accent); } .woocommerce-error { border-color: rgba(239,68,68,0.5); } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none; } .woocommerce-message .button, .woocommerce-error .button { margin-left: auto; } /* ---- Buttons ---- */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce .button { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); background: var(--accent-strong); color: #fff; border: none; border-radius: var(--radius-md); padding: 12px 24px; font-size: 14px; font-weight: 600; font-family: inherit; letter-spacing: 0.01em; cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast); text-transform: none; line-height: 1.4; min-height: 44px; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce .button:hover, .woocommerce #respond input#submit:hover { transform: translateY(-1px); box-shadow: var(--shadow-glow); background: var(--accent-strong); color: #fff; } .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce .button.alt { background: var(--accent-strong); } /* Secondary/ghost buttons (e.g. "Update cart", "Continue shopping") */ .woocommerce button.button[name="update_cart"], .woocommerce a.button.wc-backward, .woocommerce .button--secondary { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-default); } .woocommerce button.button[name="update_cart"]:hover, .woocommerce a.button.wc-backward:hover { border-color: var(--accent); color: var(--accent); box-shadow: none; } .woocommerce .checkout-button, .woocommerce #place_order { width: 100%; font-size: 15px; padding: 16px 32px; } /* ---- Form fields ---- */ .woocommerce form .form-row { margin: 0 0 var(--sp-4); } .woocommerce .input-text, .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce select, .woocommerce form .form-row .select2-selection, .select2-container .select2-selection { width: 100%; padding: 12px 16px; background: var(--bg-elevated); border: 1px solid var(--border-default) !important; border-radius: var(--radius-md); color: var(--text-primary); font-size: 14px; font-family: inherit; min-height: 46px; outline: none; } .woocommerce .input-text:focus, .woocommerce select:focus, .woocommerce textarea:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-dim); } .woocommerce form .form-row label, .woocommerce-checkout label, .woocommerce-page-wrap label { color: var(--text-secondary); font-size: 13px; font-weight: 500; } .woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text-primary); line-height: 44px; } .select2-dropdown, .select2-results { background: var(--bg-elevated); border-color: var(--border-default); color: var(--text-primary); } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--accent-strong); } /* ---- Tables (cart, order review, account orders) ---- */ .woocommerce table.shop_table { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); border-collapse: separate; border-spacing: 0; overflow: hidden; background: var(--bg-surface); margin: 0 0 var(--sp-6); width: 100%; } .woocommerce table.shop_table th { background: var(--bg-elevated); color: var(--text-primary); font-size: 12px; letter-spacing: 0.04em; padding: var(--sp-4); text-align: left; border: none; } .woocommerce table.shop_table td { padding: var(--sp-4); border-top: 1px solid var(--border-subtle); color: var(--text-secondary); vertical-align: middle; } .woocommerce table.shop_table .product-name a { color: var(--text-primary); font-weight: 600; } .woocommerce table.shop_table img { width: 56px; height: 56px; object-fit: contain; border-radius: var(--radius-sm); background: var(--stage); } .woocommerce .cart .product-price, .woocommerce .cart .product-subtotal, .woocommerce .amount { color: var(--text-primary); font-weight: 600; } .woocommerce .quantity input.qty { width: 72px; text-align: center; padding: 10px; background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-md); color: var(--text-primary); min-height: 44px; } .woocommerce a.remove { color: var(--text-muted) !important; font-weight: 700; border-radius: var(--radius-full); } .woocommerce a.remove:hover { color: #fff !important; background: var(--danger) !important; } /* Cart coupon + actions row */ .woocommerce .cart .actions { padding: var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: space-between; } .woocommerce .cart .actions .coupon { display: flex; gap: var(--sp-2); } /* ---- Cart totals + checkout order review ---- */ .cart_totals, .woocommerce-checkout-review-order { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--sp-6); } .cart_totals h2, .woocommerce-checkout-review-order h3, #order_review_heading { color: var(--text-primary); font-size: 20px; margin-bottom: var(--sp-4); } .cart_totals table th, .woocommerce-checkout-review-order-table th { color: var(--text-secondary); } .cart_totals .order-total .amount, .woocommerce-checkout-review-order-table .order-total .amount { color: var(--accent); font-size: 20px; } /* ---- Checkout layout ---- */ .woocommerce .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); } .woocommerce .col2-set .col-1, .woocommerce .col2-set .col-2 { width: auto; float: none; } .woocommerce-checkout h3 { color: var(--text-primary); } #payment, .woocommerce-checkout #payment { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--sp-5); } #payment ul.payment_methods { border: none; } #payment .payment_box { background: var(--bg-surface); border-radius: var(--radius-md); color: var(--text-secondary); } #payment .payment_box::before { display: none; } /* ---- My Account (Dice dashboard — matches account-preview.html) ---- */ .dash-welcome { margin-bottom: var(--sp-8); } .dash-welcome .t-label { display: block; margin-bottom: var(--sp-2); } .dash-welcome__title { color: var(--text-primary); } .dash { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: var(--sp-10); align-items: start; } .dash-sidebar { min-width: 0; } .dash-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .dash-nav li { margin: 0; } .dash-nav li a { display: flex; align-items: center; gap: var(--sp-3); padding: 11px var(--sp-4); border-radius: var(--radius-md); color: var(--text-secondary); border: 1px solid transparent; font-size: 14px; font-weight: 500; transition: color var(--dur-fast), background-color var(--dur-fast), border-color var(--dur-fast); } .dash-nav li a svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-muted); transition: color var(--dur-fast); } .dash-nav li a span { white-space: nowrap; } .dash-nav li a:hover { color: var(--text-primary); background: var(--bg-surface); } .dash-nav li a:hover svg { color: var(--text-secondary); } .dash-nav li.is-active a { color: var(--accent); background: var(--accent-dim); border-color: rgba(30,72,196,0.28); font-weight: 600; } .dash-nav li.is-active a svg { color: var(--accent); } .dash-content, .woocommerce-MyAccount-content { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--sp-8); color: var(--text-secondary); min-width: 0; } .woocommerce-MyAccount-content a:not(.button) { color: var(--accent); } .woocommerce-MyAccount-content mark { background: var(--accent-dim); color: var(--accent); } .woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3 { color: var(--text-primary); margin-bottom: var(--sp-4); } .woocommerce-MyAccount-content .woocommerce-Message--info, .woocommerce-MyAccount-content .woocommerce-info { background: var(--bg-elevated); } /* Login / register forms */ .woocommerce-form-login, .woocommerce-form-register, .woocommerce form.login, .woocommerce form.register { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--sp-8); max-width: 480px; } .woocommerce .col2-set.woocommerce-Addresses { grid-template-columns: 1fr 1fr; } @media (max-width:900px) { .woocommerce .col2-set, .dash, .woocommerce .col2-set.woocommerce-Addresses { grid-template-columns: 1fr; gap: var(--sp-6); } .woocommerce table.shop_table img { width: 44px; height: 44px; } } /* ============================================================ CLASSIC CHECKOUT — Dice layout (matches checkout-preview.html) Progress · 2-col (billing/shipping cards + sticky summary) · trust. ============================================================ */ /* The classic (shortcode) checkout + order-received render full-bleed; align their .woocommerce wrapper to the site container so they line up with the header and footer (the theme already does this for the block versions). */ body.woocommerce-checkout .woocommerce, body.woocommerce-order-received .woocommerce { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } /* Hide the third-party phone login/register box on CHECKOUT only — it's not part of the design there (guest checkout + billing email remain functional). Scoped to the checkout body so the My Account login form still renders. */ body.woocommerce-checkout .lwp_forms_login, body.woocommerce-checkout form.lwp-login-form-i, body.woocommerce-checkout form.ajax-auth { display: none !important; } /* Force themed form controls on checkout (beats plugin default backgrounds). */ .woocommerce-checkout .input-text, .woocommerce-checkout textarea, .woocommerce-checkout select, .co-checkout input[type="text"], .co-checkout input[type="email"], .co-checkout input[type="tel"], .co-checkout input[type="password"], .co-checkout textarea { background: var(--bg-elevated) !important; color: var(--text-primary) !important; border: 1px solid var(--border-default) !important; border-radius: var(--radius-md); } /* Progress indicator */ .co-progress { display: flex; justify-content: center; padding-block: var(--sp-6) var(--sp-8); } .co-steps { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .co-step { display: inline-flex; align-items: center; gap: var(--sp-3); } .co-step__dot { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-full); border: 1px solid var(--border-default); background: var(--bg-elevated); font-size: 12px; font-weight: 700; color: var(--text-muted); } .co-step__dot svg { width: 14px; height: 14px; } .co-step__label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .co-step__line { width: clamp(28px,7vw,72px); height: 1px; background: var(--border-default); } .co-step.is-done .co-step__dot { border-color: var(--success); color: var(--success); background: rgba(34,197,94,0.12); } .co-step.is-done .co-step__label { color: var(--text-secondary); } .co-step.is-done + .co-step__line { background: var(--success); } .co-step.is-current .co-step__dot { border-color: var(--accent); color: #fff; background: var(--accent-strong); box-shadow: var(--shadow-glow); } .co-step.is-current .co-step__label { color: var(--text-primary); } /* Two-column layout */ .co-layout { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: var(--sp-10); align-items: start; padding-bottom: var(--sp-12); } .co-main { display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; } .co-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--sp-8); } .co-card > h3, .co-card h3 { color: var(--text-primary); font-size: 18px; font-weight: 600; margin: 0 0 var(--sp-6); } /* Keep WooCommerce's native form-row layout (first/last sit side-by-side via woocommerce-layout.css floats); we only restyle spacing + labels. */ .co-card .form-row { margin: 0 0 var(--sp-4); } .co-card .woocommerce-billing-fields__field-wrapper::after, .co-card .woocommerce-shipping-fields__field-wrapper::after { content: ''; display: block; clear: both; } .co-card label { display: block; margin-bottom: var(--sp-2); font-size: 12px; font-weight: 600; color: var(--text-secondary); } .co-card .woocommerce-input-wrapper { width: 100%; } /* "Ship to a different address" toggle */ .co-card #ship-to-different-address label { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text-primary); font-weight: 600; font-size: 14px; margin: 0; } /* Sticky order summary */ .co-summary { position: sticky; top: calc(var(--nav-h) + var(--sp-4)); display: flex; flex-direction: column; gap: var(--sp-4); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: var(--sp-6); } .co-summary__title { color: var(--text-primary); font-size: 16px; font-weight: 600; margin: 0; } .co-summary .woocommerce-checkout-review-order { background: transparent; border: 0; padding: 0; } .co-summary table.shop_table { border: 0; background: transparent; margin: 0; } .co-summary table.shop_table th, .co-summary table.shop_table td { border: none; padding: var(--sp-2) 0; background: transparent; } .co-summary table.shop_table thead { display: none; } .co-summary table.shop_table tbody tr td { border-top: 1px solid var(--border-subtle); } .co-summary .cart-subtotal th, .co-summary .order-total th, .co-summary tfoot th { color: var(--text-secondary); font-weight: 500; } .co-summary tfoot tr:first-child th, .co-summary tfoot tr:first-child td { border-top: 1px solid var(--border-default); padding-top: var(--sp-4); } .co-summary .order-total th { color: var(--text-primary); font-size: 15px; font-weight: 600; } .co-summary .order-total .amount { color: var(--accent); font-size: 24px; font-weight: 800; } /* Payment methods as option cards */ #payment { background: transparent; border: 0; padding: 0; } #payment ul.payment_methods { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); border: 0; } #payment ul.payment_methods li { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 14px 16px; } #payment ul.payment_methods li:has(input:checked) { border-color: var(--accent); background: var(--accent-dim); } #payment ul.payment_methods li label { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text-primary); font-weight: 600; font-size: 14px; margin: 0; } /* Brand icon (Zelle / Venmo / Cash App) shown next to the method name. */ #payment ul.payment_methods li label img { height: 22px; width: auto; margin: 0; padding: 0; max-height: 22px; box-shadow: none; border-radius: 5px; vertical-align: middle; display: inline-block; float: none; } #payment ul.payment_methods li input[type="radio"] { accent-color: var(--accent); } #payment .payment_box { background: transparent; color: var(--text-secondary); font-size: 13px; padding: var(--sp-2) 0 0; margin: 0; } #payment .place-order { padding: 0; margin-top: var(--sp-2); } /* --- Guards against plugin / Elementor style bleed on checkout --- */ /* The native billing/shipping form headings ("Billing details", "Ship to a different address?") were inheriting a global h3 size (~38px) from a plugin; pin them to the Design System size. */ .woocommerce-checkout #customer_details h3, .co-card--billing > h3, .co-card--shipping > h3 { font-size: 18px !important; font-weight: 600 !important; line-height: 1.3 !important; color: var(--text-primary); margin: 0 0 var(--sp-6); } /* The "Checkout with Zelle" plugin paints its payment instructions box a lavender colour; render it as a themed card instead. */ .woocommerce-checkout #payment .payment_box, .woocommerce-checkout #payment li[class*="payment_method_"] .payment_box { background: var(--bg-surface) !important; color: var(--text-secondary) !important; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--sp-4); margin: var(--sp-3) 0 0; font-size: 13px; } .woocommerce-checkout #payment .payment_box * { color: inherit; } .woocommerce-checkout #payment .payment_box strong, .woocommerce-checkout #payment .payment_box b { color: var(--text-primary); } /* Trust-card titles are

s and were caught by the same global h3 bleed. / .co-trust .trust-cardtitle { font-size: 14px !important; font-weight: 600 !important; line-height: 1.3 !important; } / Order-received / order view: stack Billing + Shipping on the same left alignment (WooCommerce's default floats them into a staggered 2-up), and leave a generous gap before the footer. / .woocommerce-customer-details .col2-set.addresses, .woocommerce-customer-details .woocommerce-columns--addresses { display: block; } .woocommerce-customer-details .col2-set .col-1, .woocommerce-customer-details .col2-set .col-2, .woocommerce-customer-details .woocommerce-column { float: none; width: 100%; max-width: 560px; margin: 0 0 var(--sp-6); } .woocommerce-customer-details { padding-bottom: var(--sp-24); } / Order-received / order-view section headings ("Order details", "Billing address", "Shipping address") were rendering at the global plugin h2 size (~38px); pin them to the Design System scale. / .woocommerce-order-detailstitle, .woocommerce-order-details h2, .woocommerce-order .woocommerce-order-detailstitle { font-size: 20px !important; font-weight: 600 !important; line-height: 1.3 !important; color: var(--text-primary); margin: var(--sp-10) 0 var(--sp-4); } .woocommerce-columntitle, .woocommerce-customer-details h2 { font-size: 15px !important; font-weight: 600 !important; line-height: 1.3 !important; color: var(--text-primary); margin: 0 0 var(--sp-3); } #payment #place_order { width: 100%; font-size: 16px; padding: 17px 32px; } #payment .woocommerce-terms-and-conditions-wrapper { font-size: 12px; color: var(--text-muted); margin-bottom: var(--sp-3); } / The privacy paragraph moved out of this wrapper to the foot of the card (see inc/checkout.php §4b). If no terms-and-conditions content is configured the wrapper is now empty, and its margin-bottom would leave 12px of phantom gap above the compliance card. `:not(:has())` collapses it only when it has no ELEMENT children — a terms checkbox or T&C excerpt keeps it visible. (It is never truly `:empty`: the template leaves whitespace text nodes inside.) / #payment .woocommerce-terms-and-conditions-wrapper:not(:has()) { display: none; } / Trust section / .co-trust { padding-block: var(--sp-12); border-top: 1px solid var(--border-subtle); } .trust-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: var(--sp-4); } .trust-card { display: flex; flex-direction: column; gap: var(--sp-3); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--sp-6); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .trust-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-hover); } .trust-cardicon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--accent-dim); color: var(--accent); } .trust-cardicon svg { width: 20px; height: 20px; } .trust-cardtitle { font-size: 14px; font-weight: 600; color: var(--text-primary); } .trust-cardtext { font-size: 12px; color: var(--text-secondary); line-height: 1.6; } / Returning-customer login + coupon toggles (native) / .woocommerce-form-login-toggle, .woocommerce-form-coupon-toggle { margin-bottom: var(--sp-4); } .checkout_coupon.woocommerce-form-coupon { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--sp-6); margin-bottom: var(--sp-6); } @media (max-width:960px) { / minmax(0,1fr) — NOT a bare 1fr — so wide inner content (the order-review table, tabular totals) can't expand the track past the viewport. / .co-layout { grid-template-columns: minmax(0,1fr); gap: var(--sp-6); } .co-summary { position: static; min-width: 0; } .trust-grid { grid-template-columns: repeat(3,1fr); } } @media (max-width:600px) { .co-card .woocommerce-billing-fieldsfield-wrapper, .co-card .woocommerce-shipping-fieldsfield-wrapper { grid-template-columns: 1fr; } .co-card { padding: var(--sp-5); } .trust-grid { grid-template-columns: 1fr; } } / ============================================================ CHECKOUT CONVERSION REFINEMENTS (v2) Server-rendered enhancements from inc/checkout.php. Emphasis is carried by spacing + type, not fills/borders. No JS involved. Later in the file so these win over the base rules above. ============================================================ / / --- Summary: more breathing room, calmer title --- / .co-summary { gap: var(--sp-6); padding: var(--sp-8) var(--sp-6); } .co-summary .co-summary__title { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); } .co-summary table.shop_table th, .co-summary table.shop_table td { padding: var(--sp-3) 0; } .co-summary #payment { margin-top: var(--sp-2); } / Total: slightly larger, tighter tracking for a premium feel / .co-summary .order-total .amount { font-size: 28px; letter-spacing: -0.02em; } / --- Payment: monochrome, Apple-like, subtle selected emphasis --- / #payment ul.payment_methods { gap: var(--sp-3); } #payment ul.payment_methods li { transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast) var(--ease-out); } #payment ul.payment_methods li:hover { border-color: var(--accent-light); transform: translateY(-1px); box-shadow: var(--shadow-card); } #payment ul.payment_methods li:has(input:checked) { box-shadow: 0 0 0 1.5px var(--accent), 0 6px 18px rgba(30,72,196,0.12); } / Brand icons rendered monochrome so the section stays in the Dice language (no competing brand colours); the selected method restores full opacity. / #payment ul.payment_methods li label img { filter: grayscale(1); opacity: 0.8; transition: opacity var(--dur-fast); } #payment ul.payment_methods li:has(input:checked) label img { opacity: 1; } / --- BAC Water add-on card (in the summary, below products) --- / .dice-bac-row td { border: 0 !important; padding: var(--sp-5) 0 !important; } .dice-bac { display: flex; align-items: center; gap: var(--sp-4); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--sp-4); box-shadow: var(--shadow-card); transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .dice-bac:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); } .dice-bacimg { width: 52px !important; height: 52px !important; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); object-fit: cover; flex: none; background: var(--bg-panel); } .dice-bacbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .dice-bacbadge { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--warning); background: rgba(224,130,26,0.12); border-radius: var(--radius-full); padding: 3px 9px; } .dice-bacic { width: 12px; height: 12px; flex: none; } .dice-bacname { font-size: 14px; font-weight: 600; color: var(--text-primary); } .dice-bacdesc { font-size: 12px; color: var(--text-secondary); } .dice-bacaction { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; } .dice-bacprice { font-size: 13px; font-weight: 600; color: var(--text-primary); } .dice-bacprice .amount { color: var(--text-primary); font-size: 13px; font-weight: 600; } .dice-bacadd { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--warning); color: var(--warning); background: var(--bg-surface); font-weight: 700; font-size: 13px; border-radius: var(--radius-full); padding: 9px 16px; white-space: nowrap; transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-out); } .dice-bacadd .dice-bacic { width: 14px; height: 14px; } .dice-bacadd:hover { background: var(--warning); color: #fff; transform: translateY(-1px); } / Added state — calm confirmation, not a disappearance / .dice-bac--added { border-color: rgba(18,161,80,0.35); } .dice-bac--added .dice-bacimg { width: 44px !important; height: 44px !important; } .dice-bacadded { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--success); } .dice-bacadded .dice-bacic { width: 15px; height: 15px; } .dice-bacmeta { font-size: 12px; color: var(--text-muted); } .dice-bacremove { align-self: center; flex: none; font-size: 12px; font-weight: 600; color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; transition: color var(--dur-fast); } .dice-bacremove:hover { color: var(--danger); } / --- Inline savings note (no container) --- / .dice-savings-row td { border: 0 !important; padding: var(--sp-2) 0 0 !important; } .co-savings { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--success); } .co-savingsic { width: 14px; height: 14px; flex: none; } / --- Compact "How payment works" (above the pay button) --- / .co-payhelp { display: flex; flex-direction: column; gap: 6px; margin: var(--sp-2) 0 var(--sp-4); } .co-payhelptitle { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); } .co-payhelpsteps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; } .co-payhelpstep { display: inline-flex; align-items: center; } .co-payhelpstep b { color: var(--accent); font-weight: 800; font-size: 11px; margin-right: 5px; } .co-payhelpsep { color: var(--border-default); } / Place Order: force full-width + unfloated so the payment-help (above) and the trust row (below) stack cleanly. WooCommerce core floats #place_order right, which otherwise shrinks it to content width and lets the after-submit trust row wrap beside it (overlapping). / .co-summary #payment .place-order { overflow: visible; } .co-summary #payment #place_order { float: none !important; width: 100% !important; margin: 0; } .co-payhelp, .co-flow, .co-trustrow { clear: both; } / --- Trust row beneath the pay button --- / .co-trustrow { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-4); } .co-trustrowitem { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-secondary); } .co-trustrowic { width: 14px; height: 14px; color: var(--success); flex: none; } / --- Trust grid: 3 cards (de-duplicated), centred --- / .trust-grid { grid-template-columns: repeat(3,1fr); max-width: 860px; margin-inline: auto; gap: var(--sp-5); } @media (max-width:820px){ .trust-grid { grid-template-columns: 1fr; max-width: 460px; } } @media (prefers-reduced-motion: reduce) { .dice-bac, .dice-bac__add, #payment ul.payment_methods li { transition: none; } } / ============================================================ PAYMENT METHOD CARDS (checkout) + PAYMENT INSTRUCTIONS (order confirmation) Redesign of the manual-payment flow (inc/payment-instructions.php + woocommerce/checkout/payment-method.php + thankyou.php). The checkout card ONLY helps choose a method (no payment details); all recipient/amount/ reference details live on the confirmation card below. Premium, rounded, airy, blue-accented, mobile-first. ============================================================ / / --- FLAT payment selector (Apple Pay / Stripe / Shopify feel) --- iPhone-15-Pro-first (390px). Each method is ONE clean row [radio · name · Recommended-pill · logo]; the selected row expands to a FLAT section (no nested box, no border, no divider, no shadow) with a subtitle, three short ✓ points and a reservation line. Collapsed rows ~52–56px, expanded ~140–160px, so Place Order stays reachable without excessive scrolling. Only touches the payment method list. / / Row: single horizontal line; the payment_box wraps to a full-width second line below (preserving WooCommerce's native slide animation on selection). / #payment ul.payment_methods li { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; padding: 14px 16px; } #payment ul.payment_methods li > input[type="radio"] { flex: none; } #payment ul.payment_methods li > label { flex: 1; display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0; font-size: 15px; font-weight: 600; } / Official brand logo, far right, full colour, one consistent size / #payment ul.payment_methods li > label img { margin-left: auto; height: 26px; max-height: 26px; width: auto; filter: none; opacity: 1; border-radius: 6px; box-shadow: none; } / "Recommended" pill sits in the row, right after the method name / .woocommerce-checkout #payment ul.payment_methods li .pm-recommend { display: inline-flex; align-items: center; gap: 3px; flex: none; font-size: 10px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border-radius: var(--radius-full); padding: 2px 8px; white-space: nowrap; line-height: 1.4; } / Expanded content: TRULY FLAT — the checklist sits directly on the selected card background (one surface, no inner box/border/shadow). The high-specificity selector below (body + li[class=dice] + .payment_box, incl. !important) is required to beat WooCommerce/plugin rules that otherwise paint .payment_box white — that white fill was the "box inside the card". / body.woocommerce-checkout #payment li[class="payment_method_dice_"] .payment_box { flex: 1 0 100%; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 6px 0 0 !important; } / Remove WooCommerce's speech-bubble triangle/pointer above the payment box — the selected card must be one clean rectangle (no notch/arrow artifact). / #payment .payment_box::before, #payment .payment_box::after, .woocommerce-checkout #payment li[class="payment_method_"] .payment_box::before, .woocommerce-checkout #payment li[class="payment_method_"] .payment_box::after { content: none !important; display: none !important; border: 0 !important; } #payment .payment_box .paycard { display: flex; flex-direction: column; gap: 6px; background: none; border: 0; box-shadow: none; } #payment .payment_box .paycard__checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } #payment .payment_box .paycard__checks li { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.25; color: var(--text-secondary); background: none; border: 0; padding: 0; } .woocommerce-checkout #payment .payment_box .paycard__check { width: 13px; height: 13px; flex: none; color: var(--success); } / Reserved line — same typography as the checklist, no emoji, no checkmark, flush-left with the checkmarks. / .woocommerce-checkout #payment .payment_box .paycardreserve { margin: 0; padding: 0; font-size: 13px; font-weight: 400; line-height: 1.25; color: var(--text-secondary); } / --- Single-line payment flow (above the pay button) --- / / Stays on ONE line at every width. `nowrap` + non-shrinking, non-breaking items is what prevents the wrap; overflow-x is the last-resort valve, and it only actually engages below ~340px (measured: fits without scrolling from 360px up — see the mobile block). `safe center` keeps the first step reachable when it DOES overflow — plain `center` would push the left edge out of scroll range — and browsers that don't parse it fall back to the `center` declared just above it. / .co-flow { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; justify-content: safe center; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; gap: 8px; margin: var(--sp-3) 0 var(--sp-4); font-size: 12px; color: var(--text-secondary); } .co-flow::-webkit-scrollbar { display: none; } .co-flowstep { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; flex: none; white-space: nowrap; } .co-flowstep b { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: var(--radius-full); background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 800; flex: none; } .co-flowarrow { color: var(--text-muted); flex: none; } / --- Privacy notice: last content in the summary card, under the trust row --- Card fine print: centred to sit with the trust row directly above it, one step smaller than the 12px it inherited before, and tighter leading. / / Gap above must be declared at the SAME specificity as the typography rule below, otherwise that rule's reset wins and the paragraph butts against the trust row. / .woocommerce-checkout #payment .co-privacy { margin: var(--sp-3) 0 0; padding: 0; } .woocommerce-checkout #payment .co-privacy, .woocommerce-checkout #payment .co-privacy p { font-family: var(--font-sans); font-size: 11.5px; font-weight: 400; line-height: 1.4; color: var(--text-muted); text-align: center; text-wrap: balance; } / WooCommerce's paragraph carries its own margins; the wrapper owns the spacing. / .woocommerce-checkout #payment .co-privacy p { margin: 0; padding: 0; } / The "privacy policy" link rendered 16px Oswald #0B4E97 inside a 12px Inter paragraph — a third larger, in a different family, mid-sentence. Cause: the Elementor kit ships `.elementor-kit-39 a` (0,1,1) setting font-family/size/weight/line-height/letter-spacing/colour DIRECTLY on the anchor, and a directly-matching rule always beats the wrapper's INHERITED type. Kit CSS also loads AFTER the theme's, so winning needs specificity, not order: this selector is (1,2,1). `font: inherit` folds family, size, weight and leading back to the paragraph in one declaration; letter-spacing is not part of that shorthand, so it is restored separately. Only the colour and underline are kept — and the colour is pinned to Dice blue, since the kit was painting it its own #0B4E97. URL and behaviour are untouched. / .woocommerce-checkout #payment .co-privacy a, .woocommerce-checkout #payment .co-privacy .woocommerce-privacy-policy-link { font: inherit; letter-spacing: inherit; text-transform: none; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .woocommerce-checkout #payment .co-privacy a:hover { color: var(--accent-strong); } / --- Required compliance confirmation (above the pay button) --- Reads as one more checkout card: white, 1px subtle border, 12px radius, compact padding, checkout body type. Deliberately NO tint, icon, or shadow — a coloured "alert" would look bolted on and would signal a problem rather than a routine confirmation. / .co-comply { display: flex; align-items: flex-start; gap: 10px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 14px; margin: var(--sp-3) 0 var(--sp-2); } / Specificity note: this sits inside WooCommerce's `.form-row.place-order`, so core's `.woocommerce form .form-row label` (0,2,2) applies — it would impose `line-height: 2` and add ~2 lines of height to a 3-line paragraph. Qualifying with #payment outranks it cleanly, without !important. / .woocommerce-checkout #payment .co-comply .co-complytext { display: block; margin: 0; padding: 0; font-family: var(--font-sans); font-size: 12px; font-weight: 500; line-height: 1.45; letter-spacing: 0; color: var(--text-secondary); cursor: pointer; } .woocommerce-checkout #payment .co-comply .co-complybox { flex: none; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; } / Invalid only AFTER a submit attempt, never on a pristine form — :invalid alone would border it red before the customer has done anything wrong. / .woocommerce-checkout #payment .co-comply:has(.co-complybox:user-invalid) { border-color: var(--danger); } @media (max-width: 767px) { / Phones. MEASURED: the row needs ~259px at 12px, but WooCommerce leaves only 228px at a 390px viewport — #payment contributes 20px/side (woocommerce.css L116, via `.woocommerce-checkout #payment`) and core's `.woocommerce-checkout #payment div.form-row{padding:1em}` (1,2,1 — it outranks our `#payment .place-order{padding:0}`) another 15px/side. So 70px of the width is padding. At that width NO readable size fits: even 9px needs 234px. Cancelling those two insets on THIS element only (nothing else moves; -35px lands the row exactly on the summary card's content edge) buys back the 70px and lets the type stay legible — 10.3px at 390px, 12px by 480px. Everything else about the row is untouched. / .co-flow { --cf: clamp(9.5px, 2.65vw, 12px); / ~6% slack vs the measured max at every width 360-430 / font-size: var(--cf); gap: calc(var(--cf) 0.45); margin: var(--sp-2) -35px var(--sp-3); } .co-flowstep { gap: calc(var(--cf) * 0.38); } /* Circle scales off the row's font size, not its own, so the numeral stays centred and the proportions match desktop (1.5x / 0.9x of 18px / 11px). / .co-flowstep b { width: calc(var(--cf) 1.5); height: calc(var(--cf) * 1.5); font-size: calc(var(--cf) * 0.9); } .co-comply { padding: 12px; gap: 9px; } .woocommerce-checkout #payment .co-comply .co-complytext { font-size: 11.5px; line-height: 1.4; } } /* --- Order Confirmation: premium payment-instruction card --- / .pay-instruct { max-width: 560px; margin: var(--sp-8) auto var(--sp-10); background: var(--bg-surface); border: 1px solid rgba(15,26,51,0.06); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-6); animation: payInstructIn var(--dur-slow) var(--ease-out) both; } @keyframes payInstructIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } / Progress stepper — quiet, supporting; thin lines + small labels / .pay-progress { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: flex; align-items: flex-start; } .pay-progressstep { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; text-align: center; } .pay-progressstep::before { content: ""; position: absolute; top: 7px; left: -50%; width: 100%; height: 1px; background: var(--border-default); z-index: 0; } .pay-progressstep:first-child::before { display: none; } .pay-progressstep.is-current::before { background: var(--success); } .pay-progressdot { position: relative; z-index: 1; width: 15px; height: 15px; border-radius: var(--radius-full); background: var(--bg-surface); border: 1.5px solid var(--border-default); display: inline-flex; align-items: center; justify-content: center; color: #fff; } .pay-progressdot svg { width: 9px; height: 9px; } .pay-progressstep.is-done .pay-progressdot { background: var(--success); border-color: var(--success); } .pay-progressstep.is-current .pay-progressdot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .pay-progresslabel { font-size: 9.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--text-muted); line-height: 1.2; } .pay-progressstep.is-done .pay-progresslabel { color: var(--text-secondary); } .pay-progressstep.is-current .pay-progresslabel { color: var(--accent); } / Header with method logo / .pay-instructheader { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; } .pay-instructlogo { width: 48px; height: 48px; border-radius: 12px; margin-bottom: 6px; box-shadow: var(--shadow-card); } .pay-instructtitle { font-size: clamp(21px, 4vw, 26px); font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.15; margin: 0; } .pay-instructmethod { font-size: 14px; font-weight: 600; color: var(--text-secondary); margin: 0; } .pay-instructreserved { font-size: 13px; color: var(--text-secondary); margin: 4px 0 0; } .pay-instructverify { font-size: 12.5px; color: var(--text-muted); margin: 3px 0 0; } .pay-instructverify strong { font-weight: 600; color: var(--text-secondary); } / Amount Due — the hero: centered label + big value; the Copy control sits in the card's upper-right corner (never centered beneath the amount). / .pay-hero { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 18px; background: var(--accent-dim); border-radius: var(--radius-lg); } .pay-herolabel { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .pay-herovalue { font-size: clamp(34px, 9vw, 44px); font-weight: 800; letter-spacing: -0.03em; color: var(--text-primary); line-height: 1.05; } .pay-instruct .pay-hero .dp-copy-btn { position: absolute; top: 10px; right: 10px; } / Summary rows — flexbox: label+value hug the left, a small Copy pill hugs the right. Values dominate; labels are quiet gray uppercase. / .pay-summary { display: flex; flex-direction: column; margin: 0; } .pay-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: 12px 2px; } .pay-row + .pay-row { border-top: 1px solid rgba(15,26,51,0.06); } .pay-rowmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pay-rowlabel { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin: 0; } .pay-row__value { font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 0; word-break: break-word; line-height: 1.15; } / Copy control — a fully ISOLATED component (.dp-copy-btn), NOT a WooCommerce button. It's a bare