/* ============================================================================ 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) add to cart / select options on product cards success (green) community actions - write a review, load more outline (ghost) secondary or reversible - update cart, reset, back 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, .cwginstock-subscribe-form .cwg_popup_submit, .cwgstock_button, #reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-add-review, .cr-show-more-reviews-prd, .pdf_invoice_download_button { -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); 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, .cwginstock-subscribe-form .cwg_popup_submit, .cwgstock_button, #reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-add-review, .cr-show-more-reviews-prd, .pdf_invoice_download_button { 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, .cwginstock-subscribe-form .cwg_popup_submit:hover, .cwgstock_button:hover, .pdf_invoice_download_button:hover { background-color: var(--ls-red-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"], .cwginstock-subscribe-form .cwg_popup_submit, .cwgstock_button { 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. */ .ls-btn--lg, .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; } .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 { 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; } /* --- 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, .cwginstock-subscribe-form .cwg_popup_submit, .cwgstock_button { display: flex !important; width: 100% !important; } /* --- Accent (purple): catalogue add to cart ------------------------------- */ .ls-btn--accent, .woocommerce ul.products li.product .button, .et-db #et-boc .et-l .woocommerce ul.products li.product .button { background-color: var(--ls-purple); color: #ffffff; } .ls-btn--accent:hover, .woocommerce ul.products li.product .button:hover, .et-db #et-boc .et-l .woocommerce ul.products li.product .button:hover { background-color: var(--ls-purple-hover); color: #ffffff; } /* --- Success (green): community actions ----------------------------------- */ .ls-btn--success, #reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-add-review, .cr-show-more-reviews-prd { background-color: var(--ls-green); color: #ffffff; } .ls-btn--success:hover, #reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-add-review:hover, .cr-show-more-reviews-prd:hover { background-color: var(--ls-green-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); } .woocommerce ul.products li.product.outofstock .button { opacity: 0.7; } /* 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; } } /* ============================================================================ 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. ========================================================================= */ .ls-field, 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 { 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 { 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 { -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; } /* --- select2 ------------------------------------------------------------- WooCommerce swaps the country and state selects for select2, which hides the native