/* ============================================================ Bit of Comfort — WooCommerce commerce styling (split out) Loaded only on commerce pages (is_woocommerce/cart/checkout/account) via boc_assets() so the marketing/content pages stay lean. Depends on the design tokens in style.css. ============================================================ */ /* ============================================================ WOOCOMMERCE COMMERCE STYLING (cart / checkout / my-account) Cart · Checkout · My Account CSS only. Brands Woo-owned output to match the theme tokens. Markup reality (verified against staging 2026-06): · /cart/ and /checkout/ -> BLOCK markup (.wp-block-woocommerce-cart / -checkout, .wc-block-components-*) · /my-account/ -> CLASSIC markup (.woocommerce form.woocommerce-form-login, .woocommerce-MyAccount-*) Classic shortcode selectors are also covered defensively so a future switch back to the [woocommerce_cart] shortcut still looks branded. Specificity: every rule is prefixed with .woocommerce-page (present on the of all three pages) or .woocommerce, giving (0,2,x) which beats the theme's `.woocommerce-page img { height:auto }` (0,1,1). Tokens only — no hardcoded brand colors/spacing. ============================================================ */ /* ============================================================ 1. BUTTONS — block + classic -> .boc-btn / .boc-btn--primary ============================================================ */ /* Classic buttons (My Account, login, shortcode cart/checkout) */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce input.button[type="submit"], .woocommerce #respond input#submit, .woocommerce .woocommerce-button, .woocommerce-page a.button, .woocommerce-page button.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--boc-space-2); background: var(--boc-cta); color: #fff; border: 0; border-radius: var(--boc-radius); font-family: inherit; font-weight: 700; font-size: 0.95rem; line-height: 1.2; padding: 0.7em 1.4em; cursor: pointer; text-align: center; text-decoration: none; transition: filter 0.15s, background 0.15s; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce .woocommerce-button:hover, .woocommerce-page a.button:hover, .woocommerce-page button.button:hover { background: var(--boc-cta-hover); } /* Primary / call-to-action classic buttons stay brand blue (per comps: "Apply Coupon", "Proceed To Checkout", "view order" are all blue). */ .woocommerce button.button.alt, .woocommerce a.button.alt, .woocommerce input.button.alt, .woocommerce .checkout-button, .woocommerce-page button.button.alt { background: var(--boc-cta); } .woocommerce button.button.alt:hover, .woocommerce a.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce .checkout-button:hover, .woocommerce-page button.button.alt:hover { background: var(--boc-cta-hover); } /* Block buttons (cart / checkout) */ .woocommerce-page .wc-block-components-button:not(.is-link) { display: inline-flex; align-items: center; justify-content: center; gap: var(--boc-space-2); background: var(--boc-cta); color: #fff; border: 0; border-radius: var(--boc-radius); font-family: inherit; font-weight: 700; font-size: 0.95rem; padding: 0.7em 1.4em; min-height: 48px; cursor: pointer; transition: filter 0.15s, background 0.15s; } .woocommerce-page .wc-block-components-button:not(.is-link):hover { background: var(--boc-cta-hover); } .woocommerce-page .wc-block-components-button:not(.is-link) .wc-block-components-button__text { color: #fff; } /* Primary block CTAs (proceed to checkout, place order) -> full-width blue */ .woocommerce-page .wc-block-cart__submit-button, .woocommerce-page .wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button, .woocommerce-page .wc-block-components-checkout-place-order-button { width: 100%; } /* "is-link" text buttons (e.g. remove item, edit) stay inline links */ .woocommerce-page .wc-block-components-button.is-link { color: var(--boc-blue); font-weight: 600; } .woocommerce-page .wc-block-components-button.is-link:hover { color: var(--boc-blue-dark); } /* ============================================================ 2. FORM INPUTS / SELECTS — match theme inputs + focus ring ============================================================ */ /* Classic inputs */ .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce-page form .form-row input.input-text, .woocommerce .woocommerce-Input.input-text, .woocommerce input.input-text, .woocommerce select, .woocommerce-page select, .woocommerce textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--boc-line); border-radius: var(--boc-radius); background: #fff; font-family: inherit; font-size: 0.95rem; color: var(--boc-ink); transition: border-color 0.15s, box-shadow 0.15s; } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce .woocommerce-Input.input-text:focus, .woocommerce input.input-text:focus, .woocommerce select:focus, .woocommerce-page select:focus, .woocommerce textarea:focus { outline: none; border-color: var(--boc-blue); box-shadow: 0 0 0 3px var(--boc-blue-tint); } .woocommerce form .form-row label, .woocommerce-page form .form-row label, .woocommerce-account .woocommerce-form-row label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 6px; color: var(--boc-ink); } /* Block text inputs (checkout fields) */ .woocommerce-page .wc-block-components-text-input input[type="text"], .woocommerce-page .wc-block-components-text-input input[type="email"], .woocommerce-page .wc-block-components-text-input input[type="tel"], .woocommerce-page .wc-block-components-text-input input[type="number"], .woocommerce-page .wc-block-components-text-input input[type="password"], .woocommerce-page .wc-block-components-select__select, .woocommerce-page .wc-block-components-combobox-control input, .woocommerce-page .wc-block-components-textarea { border: 1px solid var(--boc-line); border-radius: var(--boc-radius); color: var(--boc-ink); font-family: inherit; } .woocommerce-page .wc-block-components-text-input.is-active input, .woocommerce-page .wc-block-components-text-input input:focus, .woocommerce-page .wc-block-components-select__select:focus, .woocommerce-page .wc-block-components-combobox-control input:focus { outline: none; border-color: var(--boc-blue); box-shadow: 0 0 0 3px var(--boc-blue-tint); } /* Floating label active color */ .woocommerce-page .wc-block-components-text-input.is-active label, .woocommerce-page .wc-block-components-text-input input:focus + label { color: var(--boc-blue); } /* Checkboxes / radios pick up the brand accent */ .woocommerce-page .wc-block-components-checkbox__input, .woocommerce-page .wc-block-components-radio-control__input, .woocommerce input[type="checkbox"], .woocommerce input[type="radio"] { accent-color: var(--boc-blue); } /* ============================================================ 3. TABLES — classic shop_table / cart / orders ============================================================ */ .woocommerce table.shop_table, .woocommerce-page table.shop_table, .woocommerce table.woocommerce-orders-table, .woocommerce table.woocommerce-table--order-details { width: 100%; border-collapse: collapse; border: 1px solid var(--boc-line); border-radius: var(--boc-radius); overflow: hidden; margin-bottom: var(--boc-space-5); } /* Cart table header is a solid blue bar (per comp) */ .woocommerce table.shop_table.cart thead th, .woocommerce-page table.shop_table.cart thead th { background: var(--boc-blue); color: #fff; font-family: var(--boc-font-head); font-weight: 700; font-size: 0.9rem; text-align: left; padding: 12px var(--boc-space-3); border-bottom: 0; } /* Other tables (orders, order details) use a light header */ .woocommerce table.shop_table thead th, .woocommerce table.shop_table tfoot th, .woocommerce table.woocommerce-orders-table thead th { background: var(--boc-bg-alt); color: var(--boc-ink); font-family: var(--boc-font-head); font-weight: 700; font-size: 0.9rem; text-align: left; padding: 12px var(--boc-space-3); border-bottom: 1px solid var(--boc-line); } .woocommerce table.shop_table td, .woocommerce table.shop_table th, .woocommerce table.woocommerce-orders-table td, .woocommerce table.woocommerce-table--order-details td, .woocommerce table.woocommerce-table--order-details th { padding: 12px var(--boc-space-3); border-top: 1px solid var(--boc-line); color: var(--boc-ink); font-size: 0.92rem; vertical-align: middle; } .woocommerce table.shop_table .product-name a { color: var(--boc-blue); font-weight: 600; } /* Block cart line-items table (the main cart list, JS-rendered) */ .woocommerce-page .wc-block-cart-items { border: 1px solid var(--boc-line); border-radius: var(--boc-radius); overflow: hidden; } .woocommerce-page .wc-block-cart-items__header, .woocommerce-page table.wc-block-cart-items thead th { background: var(--boc-blue); color: #fff; font-family: var(--boc-font-head); font-weight: 700; font-size: 0.9rem; text-transform: none; } .woocommerce-page .wc-block-cart-items__row, .woocommerce-page table.wc-block-cart-items tbody td { border-top: 1px solid var(--boc-line); } /* ============================================================ 4. CART / CHECKOUT PANELS as bordered cards ============================================================ */ /* Classic cart totals + checkout order review */ .woocommerce .cart_totals, .woocommerce-page .cart_totals, .woocommerce-checkout #order_review, .woocommerce .woocommerce-checkout-review-order { border: 1px solid var(--boc-line); border-radius: var(--boc-radius); padding: var(--boc-space-4); background: #fff; } .woocommerce .cart_totals h2, .woocommerce-checkout #order_review_heading { font-size: 1.2rem; color: var(--boc-ink); margin: 0 0 var(--boc-space-3); } /* Block order summary / sidebar cards */ .woocommerce-page .wc-block-components-sidebar .wc-block-components-panel, .woocommerce-page .wc-block-components-order-summary, .woocommerce-page .wp-block-woocommerce-cart-order-summary-block, .woocommerce-page .wc-block-checkout__sidebar > .wc-block-components-totals-wrapper, .woocommerce-page .wc-block-cart__sidebar .wc-block-components-totals-wrapper { border: 1px solid var(--boc-line); border-radius: var(--boc-radius); background: #fff; } .woocommerce-page .wp-block-woocommerce-cart-order-summary-block { padding: var(--boc-space-4); } /* Totals rows */ .woocommerce-page .wc-block-components-totals-item, .woocommerce .cart_totals tr th, .woocommerce .cart_totals tr td { color: var(--boc-ink); } .woocommerce-page .wc-block-components-totals-footer-item, .woocommerce-page .wc-block-components-totals-item.wc-block-components-totals-footer-item { font-family: var(--boc-font-head); color: var(--boc-ink); border-top: 2px solid var(--boc-line); } /* ============================================================ 5. QUANTITY + COUPON ============================================================ */ /* Block quantity stepper */ .woocommerce-page .wc-block-components-quantity-selector { border: 1px solid var(--boc-line); border-radius: var(--boc-radius); overflow: hidden; } .woocommerce-page .wc-block-components-quantity-selector__input { color: var(--boc-ink); font-family: inherit; font-weight: 600; } .woocommerce-page .wc-block-components-quantity-selector__button { color: var(--boc-blue); transition: background 0.15s, color 0.15s; } .woocommerce-page .wc-block-components-quantity-selector__button:hover { background: var(--boc-blue-tint); } /* Classic quantity input */ .woocommerce .quantity .qty { width: 72px; height: 44px; text-align: center; border: 1px solid var(--boc-line); border-radius: var(--boc-radius); font-family: inherit; font-size: 1rem; color: var(--boc-ink); } /* Block coupon row */ .woocommerce-page .wc-block-components-totals-coupon__form .wc-block-components-text-input input { border: 1px solid var(--boc-line); border-radius: var(--boc-radius); } .woocommerce-page .wc-block-components-totals-coupon__button { background: var(--boc-blue); color: #fff; border-radius: var(--boc-radius); } .woocommerce-page .wc-block-components-totals-coupon__button:hover { background: var(--boc-blue-dark); } .woocommerce-page .wc-block-components-panel__button { color: var(--boc-blue); font-weight: 600; } /* Classic coupon row */ .woocommerce form.checkout_coupon, .woocommerce .cart .coupon { border-radius: var(--boc-radius); } /* ============================================================ 6. NOTICES — brand colors (block + classic) ============================================================ */ /* Classic notices */ .woocommerce-page .woocommerce-message, .woocommerce-page .woocommerce-info, .woocommerce-page .woocommerce-error, .woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error { border-radius: var(--boc-radius); border: 1px solid var(--boc-line); border-top: 3px solid var(--boc-blue); background: var(--boc-blue-tint); color: var(--boc-ink); padding: var(--boc-space-3) var(--boc-space-4); font-size: 0.92rem; list-style: none; } .woocommerce-page .woocommerce-message::before, .woocommerce-page .woocommerce-info::before { color: var(--boc-blue); } .woocommerce-page .woocommerce-error, .woocommerce .woocommerce-error { border-top-color: var(--boc-red); background: color-mix(in srgb, var(--boc-red) 10%, #fff); } .woocommerce-page .woocommerce-error::before { color: var(--boc-red); } .woocommerce-page .woocommerce-message a.button, .woocommerce-page .woocommerce-info a.button { background: var(--boc-blue); } /* Block notice banners */ .woocommerce-page .wc-block-components-notice-banner { border-radius: var(--boc-radius); border: 1px solid var(--boc-line); border-left: 4px solid var(--boc-blue); background: var(--boc-blue-tint); color: var(--boc-ink); } .woocommerce-page .wc-block-components-notice-banner.is-error { border-left-color: var(--boc-red); background: color-mix(in srgb, var(--boc-red) 10%, #fff); } .woocommerce-page .wc-block-components-notice-banner.is-success { border-left-color: var(--boc-blue); } .woocommerce-page .wc-block-components-notice-banner.is-warning { border-left-color: var(--boc-red); } .woocommerce-page .wc-block-components-notice-banner .wc-block-components-notice-banner__content { color: var(--boc-ink); } /* ============================================================ 7. MY ACCOUNT — vertical tab navigation + content ============================================================ */ .woocommerce-account .woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; border: 1px solid var(--boc-line); border-radius: var(--boc-radius); overflow: hidden; } .woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; border-bottom: 1px solid var(--boc-line); } .woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; } .woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: var(--boc-space-3) var(--boc-space-4); color: var(--boc-ink); font-weight: 600; font-size: 0.92rem; transition: background 0.15s, color 0.15s; } .woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--boc-blue-tint); color: var(--boc-blue); } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a, .woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--is-active a { background: var(--boc-blue); color: #fff; } .woocommerce-account .woocommerce-MyAccount-content { color: var(--boc-ink); } .woocommerce-account .woocommerce-MyAccount-content h2, .woocommerce-account .woocommerce-MyAccount-content h3 { color: var(--boc-ink); } /* Account dashboard / address cards */ .woocommerce-account .woocommerce-Address, .woocommerce-account .addresses .woocommerce-Address { border: 1px solid var(--boc-line); border-radius: var(--boc-radius); padding: var(--boc-space-4); background: var(--boc-bg-alt); } .woocommerce-account .woocommerce-Address .edit { color: var(--boc-blue); font-weight: 600; } /* Login / register form card (logged-out my-account view) */ .woocommerce-account .woocommerce-form-login, .woocommerce-account .woocommerce-form-register { border: 1px solid var(--boc-line); border-radius: var(--boc-radius); padding: var(--boc-space-4); background: #fff; margin-bottom: var(--boc-space-4); } /* ============================================================ 8. MISC PRICE / LINK ACCENTS ============================================================ */ .woocommerce-page .wc-block-components-product-name, .woocommerce-page .wc-block-cart-item__product-name a { color: var(--boc-blue); font-weight: 600; } .woocommerce .woocommerce-Price-amount, .woocommerce-page .wc-block-components-formatted-money-amount { color: var(--boc-ink); } .woocommerce-page .wc-block-components-checkout-step__title { font-family: var(--boc-font-head); color: var(--boc-ink); } /* ============================================================ 9. RESPONSIVE — stack My Account nav above content on mobile (block cart/checkout already stack via Woo's own breakpoints) ============================================================ */ @media (max-width: 900px) { .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { float: none; width: 100%; } .woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: var(--boc-space-4); } }