/* ============================================================================ LS FABRICATION — COMPONENT LAYER Buttons, form controls, tables, cards, notices, badges, pagination. A note on specificity: Divi ships ~5,000 rules and scopes builder content under `.et-db #et-boc .et-l`, so a bare class selector loses. Rather than escalating !important per property, each component below states its Divi scope once at the top of its block. !important appears only where Divi itself uses it and there is no other way through — each of those is marked. ========================================================================= */ /* ============================================================================ 1. BUTTONS ---------------------------------------------------------------------------- ONE shape for every button on the site; colour is the only thing that varies. Roles: primary (red) commit actions - checkout, place order, apply, submit accent (purple) reserved; no longer the catalogue CTA (see below) success (green) community actions - write a review, load more outline (ghost) secondary or reversible - update cart, reset, back, and the add to cart / select options card CTA, which fills brand red on hover WHY THE SHAPE PROPERTIES CARRY !important ----------------------------------------- An audit of the staging site turned up seven distinct button shapes on the same site: 16px/600 and 18px/700 side by side, letter-spacing at normal, 1.92px and 2.16px, radii of 4px and 6px, and heights of 43, 48, 53 and 72px. They came from three places that all outrank a plain class selector: 1. Divi Builder per-module design settings. Divi emits a rule per module (`.et_pb_button_0_tb_footer` and friends) into the AFTER the theme stylesheets, so on equal specificity Divi wins on source order. 2. Plugin stylesheets - the vehicle finder shipped its own Inter 15px 53px-tall submit, which beat the component. 3. WooCommerce core and Divi Ecommerce leftovers. Specificity alone cannot win all three consistently, so the SHAPE is locked: font, size, weight, case, tracking, radius, padding and height. Colour is deliberately NOT locked, which is what keeps a Divi module's own background colour - and the role variants below - working. Changing a button's colour in the Builder still works; changing its font size there no longer does, and that is the point. Height comes from min-height plus centred flex, never from vertical padding, so every button is the same height regardless of font metrics or label. ========================================================================= */ .ls-btn, .et_pb_button, body #page-container .et_pb_button, .et-db #et-boc .et-l .et_pb_button, .et_pb_promo_button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit, .woocommerce .woocommerce-Button, .et-db #et-boc .et-l .woocommerce a.button, .et-db #et-boc .et-l .woocommerce button.button, .woocommerce ul.products li.product .button, .woocommerce div.product form.cart .button, .woocommerce .wc-proceed-to-checkout a.checkout-button, .woocommerce #place_order, #submit, .woo_vpf_ymm_filter_wrapper input[type="submit"], .woo_vpf_ymm_filter_wrapper input[type="reset"], .woo_vpf_ymm_filter_wrapper .woo-vpf-ymm-field-submit a, #reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-add-review, .cr-show-more-reviews-prd, div.wpforms-container-full .wpforms-form button.wpforms-submit, .lsups-btn, .lsups-btn--primary, button.gsc-copy { -webkit-appearance: none !important; appearance: none !important; box-sizing: border-box !important; /* NOT !important. Divi hides a module disabled for a breakpoint with a rule like `.et_pb_button_0_tb_body { display:none!important }` at specificity (0,1,0). This selector list reaches (1,3,0), so an !important display here outranks that and un-hides every button Divi meant to hide per breakpoint — which is what put the mobile-only "Filter Products" toggle on the desktop shop page. The list is specific enough to beat Divi's own non-important `.et_pb_button_module_wrapper > a { display:inline-block }` without it. */ display: inline-flex; align-items: center !important; justify-content: center !important; gap: var(--ls-space-2); width: auto; min-height: var(--ls-btn-h) !important; height: auto !important; padding: 0 var(--ls-btn-pad-x) !important; border: 1px solid transparent !important; border-image: none !important; border-radius: var(--ls-btn-radius) !important; font-family: var(--ls-font-display) !important; font-size: var(--ls-btn-font) !important; font-weight: 700 !important; font-style: normal !important; /* ⚠️ NOT `line-height: 1`. Divi's per-template sheet emits `.et-db #et-boc .et-l .et_pb_button_module_wrapper > a { display:inline-block }` at (0,4,1) -- one class above this block's inline-flex -- so on SOME template combinations the button is not a flex container at all and `align-items: center` silently does nothing, leaving the label jammed against the top edge. Matching line-height to the button height centres it as an inline-block and is a no-op in the flex case: a 48px line box centred in a 48px content box lands in the same place. Labels never wrap (`white-space: nowrap` below), so this cannot double the height. Do NOT "fix" the underlying issue with `display: inline-flex !important` here -- that also un-hides every button Divi hides per breakpoint, which is what once put the mobile-only Filter Products toggle on desktop. */ line-height: var(--ls-btn-h) !important; letter-spacing: var(--ls-tracking-button) !important; text-transform: uppercase !important; text-decoration: none !important; text-align: center !important; white-space: nowrap !important; background-image: none !important; background-color: var(--ls-red-btn); color: #ffffff; cursor: pointer; transition: background-color var(--ls-transition), color var(--ls-transition), border-color var(--ls-transition), transform 100ms ease; } /* `display` is left non-important in the block above so Divi's per-breakpoint `disabled_on` hiding (`.et_pb_button_0_tb_body { display:none!important }`) still wins on Builder modules — without that, every button Divi meant to hide at a breakpoint reappears, which is what put the mobile-only "Filter Products" toggle on the desktop shop page. Plugin and WooCommerce buttons are not subject to disabled_on, and several plugin sheets set their own display, so the flex centring is restated as !important for those selectors only. Do NOT add an .et_pb_* selector to this list. */ .ls-btn, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit, .woocommerce .woocommerce-Button, .woocommerce ul.products li.product .button, .woocommerce div.product form.cart .button, .woocommerce .wc-proceed-to-checkout a.checkout-button, .woocommerce #place_order, #submit, .woo_vpf_ymm_filter_wrapper input[type="submit"], .woo_vpf_ymm_filter_wrapper input[type="reset"], .woo_vpf_ymm_filter_wrapper .woo-vpf-ymm-field-submit a, #reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-add-review, .cr-show-more-reviews-prd, div.wpforms-container-full .wpforms-form button.wpforms-submit, .lsups-btn, .lsups-btn--primary, button.gsc-copy { display: inline-flex !important; } /* --- Hover / active / focus ---------------------------------------------- */ .ls-btn:hover, .et_pb_button:hover, body #page-container .et_pb_button:hover, .et-db #et-boc .et-l .et_pb_button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce #respond input#submit:hover, .woocommerce .woocommerce-Button:hover, .et-db #et-boc .et-l .woocommerce a.button:hover, .et-db #et-boc .et-l .woocommerce button.button:hover, .woocommerce .wc-proceed-to-checkout a.checkout-button:hover, .woocommerce #place_order:hover, #submit:hover, .woo_vpf_ymm_filter_wrapper input[type="submit"]:hover { background-color: var(--ls-red-btn-hover); color: #ffffff; } .ls-btn:active, .et_pb_button:active, .woocommerce a.button:active, .woocommerce button.button:active, .woocommerce #place_order:active { transform: translateY(1px); } .ls-btn:focus-visible, .et_pb_button:focus-visible, .woocommerce a.button:focus-visible, .woocommerce button.button:focus-visible, .woocommerce input.button:focus-visible, .woocommerce #place_order:focus-visible, .woo_vpf_ymm_filter_wrapper input[type="submit"]:focus-visible { outline: 2px solid #ffffff !important; outline-offset: 3px !important; } /* Divi appends an arrow glyph on hover via :after and animates padding to make room for it. It fights the centred flex and shifts the label, so it is off across the board. Divi sets this with !important; matching is required. */ .et_pb_button:after, .et_pb_button:before, .et-db #et-boc .et-l .et_pb_button:after, .et-db #et-boc .et-l .et_pb_button:before, .woocommerce a.button:after, .woocommerce button.button:after, .woocommerce ul.products li.product .button:before, .woocommerce ul.products li.product .button:after { display: none !important; content: none !important; margin: 0 !important; } /* Plugin buttons arrive as and with their own chrome. */ #submit, .woo_vpf_ymm_filter_wrapper input[type="submit"], .woo_vpf_ymm_filter_wrapper input[type="reset"] { border-width: 0 !important; } /* --- Divi Builder buttons: beating the Theme Builder ---------------------- Divi writes a rule per button module into the , e.g. body.et-db #page-container #et-boc .et-l .et_pb_section .et_pb_button_0_tb_footer { border-radius: 4px; letter-spacing: 0; font-size: 18px; font-family: 'Barlow Condensed', ... !important; font-weight: 600 !important; text-transform: uppercase !important; } That is specificity (2,4,1). The base rule above wins font-size, tracking and radius because those are !important there and plain here — an important declaration beats a non-important one whatever the specificity. But Divi marks font-family, font-weight and text-transform !important too, and on two important declarations specificity decides: (2,4,1) beats the base rule's (1,1,1), so footer and header buttons kept rendering at weight 600 while every WooCommerce button sat at 700. Doubling .et_pb_button takes this to (2,5,1), one class above Divi, without inventing a fake wrapper. Only the three contested properties are restated; colour is deliberately left alone so a module's own background still wins. */ body.et-db #page-container #et-boc .et-l .et_pb_section .et_pb_button.et_pb_button, body.et-db #page-container #et-boc .et-l .et_pb_row .et_pb_button.et_pb_button, body.et-db #page-container #et-boc .et-l .et_pb_button.et_pb_button { font-family: var(--ls-font-display) !important; font-weight: 700 !important; font-style: normal !important; text-transform: uppercase !important; letter-spacing: var(--ls-tracking-button) !important; font-size: var(--ls-btn-font) !important; border-radius: var(--ls-btn-radius) !important; min-height: var(--ls-btn-h) !important; padding: 0 var(--ls-btn-pad-x) !important; /* Same reason as the main button block above -- keep these two in step. */ line-height: var(--ls-btn-h) !important; } /* --- Sizes --------------------------------------------------------------- Large is reserved for the one commit action on a page: add to cart on the product page, proceed to checkout, place order. Small is for controls that sit inside another component - the cart actions row, order table rows. */ .woocommerce div.product form.cart .single_add_to_cart_button, .woocommerce .wc-proceed-to-checkout a.checkout-button, .woocommerce #place_order { min-height: var(--ls-btn-h-lg) !important; padding: 0 var(--ls-btn-pad-x-lg) !important; font-size: var(--ls-btn-font-lg) !important; } /* The id-weighted selectors are not decoration. Section 1 sizes every Woo button through `.et-db #et-boc .et-l .woocommerce a.button` (1,3,2); the class-only selectors here are (0,3,1) and lose to it even with !important, which is how the orders table and the notices were rendering 50px buttons at 16px against a 40px token. woocommerce.css 14n restates the cart row the same way, desktop only, because mobile.css runs those full width. */ .ls-btn--sm, .woocommerce table.shop_table.cart td.actions .button, .woocommerce table.woocommerce-orders-table .button, .woocommerce .woocommerce-message .button, .woocommerce .woocommerce-info .button, .woocommerce .woocommerce-error .button, .et-db #et-boc .et-l .woocommerce table.woocommerce-orders-table .button, .et-db #et-boc .et-l .woocommerce .woocommerce-message .button, .et-db #et-boc .et-l .woocommerce .woocommerce-info .button, .et-db #et-boc .et-l .woocommerce .woocommerce-error .button { min-height: var(--ls-btn-h-sm) !important; padding: 0 var(--ls-btn-pad-x-sm) !important; font-size: var(--ls-btn-font-sm) !important; /* Section 1 sets a 48px line box for centring; at 40px that alone would hold the button at 50px. Flex does the centring here. */ line-height: 1 !important; } /* --- Full width ---------------------------------------------------------- Only where the button owns its container: a product card, the totals box, an auth form. Everything else sizes to its label. */ .ls-btn--block, .woocommerce ul.products li.product .button, .woocommerce .wc-proceed-to-checkout a.checkout-button, .woocommerce #place_order, .woocommerce-form-login button.button, .woocommerce-form-register button.button { display: flex !important; width: 100% !important; } /* --- Catalogue CTA (solid brand red) --------------------------------------- The card button is the one action on a card and reads as brand red, the same colour every commit action uses. It briefly ran as a black outline that filled red on hover; solid was the call. absorbed.css restates this at !important for the .add_to_cart_button and .product_type_variable selectors, which carry Divi Ecommerce leftovers - keep the two in step. */ .woocommerce ul.products li.product .button, .et-db #et-boc .et-l .woocommerce ul.products li.product .button { background-color: var(--ls-red-btn); border-color: var(--ls-red-btn) !important; color: #ffffff; } .woocommerce ul.products li.product .button:hover, .et-db #et-boc .et-l .woocommerce ul.products li.product .button:hover { background-color: var(--ls-red-btn-hover); border-color: var(--ls-red-btn-hover) !important; color: #ffffff; } /* --- Success (green): community actions ----------------------------------- */ #reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-add-review, .cr-show-more-reviews-prd { background-color: var(--ls-red-btn); color: #ffffff; } #reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-add-review:hover, .cr-show-more-reviews-prd:hover { background-color: var(--ls-red-btn-hover); color: #ffffff; } /* --- Outline (ghost): secondary or reversible ----------------------------- */ .ls-btn--outline, .woocommerce a.button.wc-backward, .woocommerce button[name="update_cart"], .woocommerce input[name="update_cart"], .woo_vpf_ymm_filter_wrapper input[type="reset"], .woo_vpf_ymm_filter_wrapper .woo-vpf-ymm-field-submit a { background-color: transparent; border-color: var(--ls-hairline-strong) !important; color: var(--ls-text); } .ls-btn--outline:hover, .woocommerce a.button.wc-backward:hover, .woocommerce button[name="update_cart"]:hover:not(:disabled), .woocommerce input[name="update_cart"]:hover:not(:disabled), .woo_vpf_ymm_filter_wrapper input[type="reset"]:hover, .woo_vpf_ymm_filter_wrapper .woo-vpf-ymm-field-submit a:hover { background-color: rgba(255, 255, 255, 0.06); border-color: var(--ls-hairline-strong) !important; color: var(--ls-text); } /* --- Disabled ------------------------------------------------------------- */ .ls-btn:disabled, .ls-btn[disabled], .woocommerce button.button:disabled, .woocommerce button.button[disabled], .woocommerce input.button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } .woocommerce button.button:disabled:hover { background-color: var(--ls-red-btn); } /* Woo's "View cart" chip after an ajax add breaks the card rhythm. */ .woocommerce a.added_to_cart { display: none !important; } /* --- Narrow screens ------------------------------------------------------- */ @media (max-width: 640px) { .ls-btn, .et_pb_button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #place_order, .woocommerce .wc-proceed-to-checkout a.checkout-button { white-space: normal !important; padding: 12px var(--ls-btn-pad-x-sm) !important; /* The base rule sets `line-height: var(--ls-btn-h)` (48px) so an inline-block button centres its label without flex. The moment this block adds 12px of vertical padding, that 48px line box sits INSIDE the padding and every single-line button on a phone renders 74px tall instead of 48. Padding does the centring here, so the line box has to come back to a normal ratio — which also lets the wrapped two-line label this block exists for actually fit. */ line-height: 1.2 !important; } } /* ============================================================================ 2. FORM CONTROLS One field style everywhere. This replaces the old child theme's customizer, which printed `background-color: #fff !important` into wp_head on every request and forced white inputs sitewide. ========================================================================= */ input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], input[type="date"], select, textarea, .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce-page form .form-row input.input-text, .et-db #et-boc .et-l input[type="text"], .et-db #et-boc .et-l select, .et-db #et-boc .et-l textarea, div.wpforms-container-full .wpforms-form input[type="text"], div.wpforms-container-full .wpforms-form input[type="email"], div.wpforms-container-full .wpforms-form input[type="tel"], div.wpforms-container-full .wpforms-form input[type="url"], div.wpforms-container-full .wpforms-form input[type="number"], div.wpforms-container-full .wpforms-form select, div.wpforms-container-full .wpforms-form textarea { width: 100%; min-height: var(--ls-control-h); padding: 0 var(--ls-control-pad-x); background-color: var(--ls-surface-2); background-image: none; border: 1px solid var(--ls-hairline-input); border-radius: var(--ls-radius-md); box-shadow: none; color: var(--ls-text); font-family: var(--ls-font-body); font-size: var(--ls-body); line-height: normal; transition: border-color var(--ls-transition), box-shadow var(--ls-transition), background-color var(--ls-transition); } textarea, .woocommerce form .form-row textarea, div.wpforms-container-full .wpforms-form textarea { min-height: 120px; padding: var(--ls-space-3) var(--ls-control-pad-x); line-height: var(--ls-leading-body); resize: vertical; } /* Native select needs its own chevron once the OS arrow is suppressed. */ select, .woocommerce form .form-row select, div.wpforms-container-full .wpforms-form select { -webkit-appearance: none; appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.45) 50%), linear-gradient(135deg, rgba(255,255,255,0.45) 50%, transparent 50%); background-position: calc(100% - 19px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; cursor: pointer; } ::placeholder { color: var(--ls-text-ghost); opacity: 1; } /* WooCommerce's password reveal is a black glyph -- invisible on a dark field. It is also the one control in the form with no hit area of its own. (2026-09-08) */ .woocommerce form .show-password-input, .woocommerce-page form .show-password-input { top: 50%; right: var(--ls-space-3); transform: translateY(-50%); padding: var(--ls-space-2); color: var(--ls-text-soft); } .woocommerce form .show-password-input::after, .woocommerce-page form .show-password-input::after { color: inherit; } /* The glyph is a black SVG baked into a data URI on ::before, so colour does not reach it -- inverting is the only handle. */ .woocommerce form .show-password-input::before, .woocommerce-page form .show-password-input::before { filter: invert(1); opacity: 0.7; } .woocommerce form .show-password-input:hover::before, .woocommerce form .show-password-input.display-password::before { opacity: 1; } .woocommerce form .show-password-input:hover, .woocommerce form .show-password-input.display-password { color: var(--ls-text); } /* --- select2 ------------------------------------------------------------- WooCommerce swaps the country and state selects for select2, which hides the native