/*
* ONE button system for the whole site - loaded last, overrides Wavo, WooCommerce, prometals-shop and the header popups.
*
* Primary teal #007665, white text hover: dark fill grows from the top
* Secondary transparent, dark outline hover: dark fill grows from the top, text turns white
* Light transparent, white outline hover: white fill grows from the top (only on dark blocks)
*
* Same font, height, letter spacing and timing everywhere. The fill is a background layer, so it also works
* on and never conflicts with WooCommerce's ::after spinner.
*/
/* ---------------------------------------------------------------- base */
html body.pm-site .pm-btn,
html body.pm-site .pmg-btn,
html body.pm-site .wc-proceed-to-checkout a.checkout-button,
html body.pm-site #place_order,
html body.pm-site div.product form.cart .single_add_to_cart_button,
html body.pm-site ul.products li.product .product-content-wrap > a.button,
html body.pm-site .header-cart-panel .woocommerce-mini-cart__buttons a.button,
html body.pm-site .header-login-submit,
html body.pm-site .header-login-register,
html body.pm-site .wpcf7-submit,
html body.pm-site a.button.wc-backward,
html body.pm-site .woocommerce-message a.button,
html body.pm-site button.button[name="apply_coupon"],
html body.pm-site button.button[name="update_cart"],
html body.pm-site form.checkout_coupon button.button,
html body.pm-site form.woocommerce-form-login button.button,
html body.pm-site .order-again a.button,
html body.pm-site .price_slider_amount .button,
html body.pm-site .sidebar_search_button,
html body.pm-site .pmg-shop-cta .pmg-btn,
html body.pm-site #respond input#submit {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 12px;
min-height: 52px !important;
height: auto;
padding: 0 28px !important;
border: 1px solid transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
transform: none !important;
font: 700 .8125rem/1.1 var(--pm-font-display) !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
text-decoration: none !important;
text-align: center;
white-space: nowrap;
cursor: pointer;
overflow: hidden !important;
isolation: isolate;
background-repeat: no-repeat !important;
transition: background-size var(--pm-fill), color var(--pm-fill), border-color var(--pm-fill) !important;
animation: none !important;
}
/* all older fill/spinner layers off - the background layer does the work */
html body.pm-site .pm-btn::before, html body.pm-site .pm-btn::after,
html body.pm-site .pmg-btn::before, html body.pm-site .pmg-btn::after,
html body.pm-site .wc-proceed-to-checkout a.checkout-button::before, html body.pm-site .wc-proceed-to-checkout a.checkout-button::after,
html body.pm-site #place_order::before, html body.pm-site #place_order::after,
html body.pm-site div.product form.cart .single_add_to_cart_button::before, html body.pm-site div.product form.cart .single_add_to_cart_button::after,
html body.pm-site ul.products li.product .product-content-wrap > a.button::before, html body.pm-site ul.products li.product .product-content-wrap > a.button::after,
html body.pm-site .header-cart-panel .woocommerce-mini-cart__buttons a.button::before, html body.pm-site .header-cart-panel .woocommerce-mini-cart__buttons a.button::after,
html body.pm-site .header-login-submit::before, html body.pm-site .header-login-submit::after,
html body.pm-site .header-login-register::before, html body.pm-site .header-login-register::after,
html body.pm-site a.button.wc-backward::before, html body.pm-site a.button.wc-backward::after,
html body.pm-site .woocommerce-message a.button::before, html body.pm-site .woocommerce-message a.button::after,
html body.pm-site button.button[name="apply_coupon"]::before, html body.pm-site button.button[name="apply_coupon"]::after,
html body.pm-site button.button[name="update_cart"]::before, html body.pm-site button.button[name="update_cart"]::after,
html body.pm-site form.checkout_coupon button.button::after, html body.pm-site form.woocommerce-form-login button.button::after,
html body.pm-site .order-again a.button::after,
html body.pm-site .price_slider_amount .button::before, html body.pm-site .price_slider_amount .button::after,
html body.pm-site .sidebar_search_button::before, html body.pm-site .sidebar_search_button::after {
content: none !important;
display: none !important;
}
/* ---------------------------------------------------------------- primary */
html body.pm-site .pm-btn--solid,
html body.pm-site .pmg-btn--primary,
html body.pm-site .wc-proceed-to-checkout a.checkout-button,
html body.pm-site #place_order,
html body.pm-site div.product form.cart .single_add_to_cart_button,
html body.pm-site ul.products li.product .product-content-wrap > a.button,
html body.pm-site .header-cart-panel .woocommerce-mini-cart__buttons a.button.checkout,
html body.pm-site .header-login-submit,
html body.pm-site .wpcf7-submit,
html body.pm-site .sidebar_search_button {
background: linear-gradient(var(--pm-ink), var(--pm-ink)) top / 100% 0% no-repeat, var(--pm-brand) !important;
border-color: var(--pm-brand) !important;
color: #fff !important;
}
/* ---------------------------------------------------------------- secondary */
html body.pm-site .pm-btn--ghost,
html body.pm-site .pmg-btn:not(.pmg-btn--primary):not(.pmg-btn--light),
html body.pm-site .header-cart-panel .woocommerce-mini-cart__buttons a.button:not(.checkout),
html body.pm-site .header-login-register,
html body.pm-site a.button.wc-backward,
html body.pm-site .woocommerce-message a.button,
html body.pm-site button.button[name="apply_coupon"],
html body.pm-site button.button[name="update_cart"],
html body.pm-site form.checkout_coupon button.button,
html body.pm-site form.woocommerce-form-login button.button,
html body.pm-site .order-again a.button,
html body.pm-site #respond input#submit,
html body.pm-site .price_slider_amount .button {
background: linear-gradient(var(--pm-ink), var(--pm-ink)) top / 100% 0% no-repeat, transparent !important;
border-color: var(--pm-ink) !important;
color: var(--pm-ink) !important;
}
/* ---------------------------------------------------------------- light (dark blocks) */
html body.pm-site .pm-btn--light,
html body.pm-site .pmg-btn--light,
html body.pm-site .pmg-shop-cta .pmg-btn {
background: linear-gradient(#fff, #fff) top / 100% 0% no-repeat, transparent !important;
border-color: rgb(255 255 255 / .7) !important;
color: #fff !important;
}
/* ---------------------------------------------------------------- hover / focus: the fill grows from the top */
html body.pm-site .pm-btn:hover, html body.pm-site .pm-btn:focus-visible,
html body.pm-site .pmg-btn:hover, html body.pm-site .pmg-btn:focus-visible,
html body.pm-site .wc-proceed-to-checkout a.checkout-button:hover,
html body.pm-site #place_order:hover,
html body.pm-site div.product form.cart .single_add_to_cart_button:hover,
html body.pm-site ul.products li.product .product-content-wrap > a.button:hover,
html body.pm-site .header-cart-panel .woocommerce-mini-cart__buttons a.button:hover,
html body.pm-site .header-login-submit:hover,
html body.pm-site .header-login-register:hover,
html body.pm-site .wpcf7-submit:hover,
html body.pm-site a.button.wc-backward:hover,
html body.pm-site .woocommerce-message a.button:hover,
html body.pm-site button.button[name="apply_coupon"]:hover,
html body.pm-site button.button[name="update_cart"]:hover:not(:disabled),
html body.pm-site form.checkout_coupon button.button:hover,
html body.pm-site form.woocommerce-form-login button.button:hover,
html body.pm-site .order-again a.button:hover,
html body.pm-site #respond input#submit:hover,
html body.pm-site .price_slider_amount .button:hover,
html body.pm-site .sidebar_search_button:hover {
background-size: 100% 100%, auto !important;
background-color: transparent;
border-color: var(--pm-ink) !important;
color: #fff !important;
}
html body.pm-site .pm-btn--light:hover, html body.pm-site .pm-btn--light:focus-visible,
html body.pm-site .pmg-btn--light:hover, html body.pm-site .pmg-shop-cta .pmg-btn:hover {
border-color: #fff !important;
color: var(--pm-ink) !important;
}
/* primary on a dark block: keep the teal outline so the button stays visible when filled */
html body.pm-site .pm-dark .pm-btn--solid:hover, html body.pm-site .pm-dark .pm-btn--solid:focus-visible { border-color: var(--pm-brand) !important; }
html body.pm-site button.button:disabled, html body.pm-site button.button[disabled] { opacity: .4 !important; cursor: not-allowed; }
/* ---------------------------------------------------------------- sizes */
html body.pm-site .pm-btn--sm,
html body.pm-site .header-cart-panel .woocommerce-mini-cart__buttons a.button,
html body.pm-site .price_slider_amount .button { min-height: 44px !important; padding: 0 18px !important; font-size: .75rem !important; }
html body.pm-site .header-cart-panel .woocommerce-mini-cart__buttons a.button,
html body.pm-site .header-login-submit, html body.pm-site .header-login-register { width: 100% !important; }
html body.pm-site .sidebar_search_button { min-height: 0 !important; padding: 0 18px !important; }
html body.pm-site .wc-proceed-to-checkout a.checkout-button, html body.pm-site #place_order { width: 100% !important; min-height: 56px !important; }
/* ---------------------------------------------------------------- product grid button
* WooCommerce's .loading state stretched the button to the bottom of the card (420px green block).
* Fixed height in every state; "added" looks exactly like the normal button. */
html body.pm-site ul.products li.product .product-content-wrap > a.button,
html body.pm-site ul.products li.product .product-content-wrap > a.button.loading,
html body.pm-site ul.products li.product .product-content-wrap > a.button.added {
bottom: auto !important;
height: 46px !important;
min-height: 46px !important;
max-height: 46px !important;
white-space: nowrap !important;
}
html body.pm-site ul.products li.product .product-content-wrap > a.button.loading {
background-size: 100% 100%, auto !important;
border-color: var(--pm-ink) !important;
pointer-events: none;
cursor: progress;
}
html body.pm-site ul.products li.product .product-content-wrap > a.button.added { display: inline-flex !important; }
html body.pm-site a.added_to_cart { display: none !important; }
/* ---------------------------------------------------------------- icons inside buttons */
html body.pm-site .pm-btn .pm-ico { transition: transform var(--pm-fill); }
html body.pm-site .pm-btn:hover .pm-ico { transform: translateX(4px); }
/* grid button placement: overlay on the photo edge with a mouse, under the price on touch screens */
html body.pm-site ul.products li.product .product-content-wrap > a.button { position: relative !important; top: auto !important; left: auto !important; right: auto !important; width: 100% !important; margin: 16px 0 0 !important; }
@media (hover: hover) and (min-width: 992px) {
html body.pm-site ul.products li.product .product-content-wrap { container-type: inline-size; }
html body.pm-site ul.products li.product .product-content-wrap > a.button {
position: absolute !important;
top: calc(100cqw - 46px) !important; left: 0 !important; right: 0 !important;
margin: 0 !important; z-index: 3;
opacity: 0; transform: translateY(8px) !important;
transition: opacity .25s var(--pm-ease), transform .25s var(--pm-ease), background-size var(--pm-fill), color var(--pm-fill), border-color var(--pm-fill) !important;
}
html body.pm-site ul.products li.product:hover .product-content-wrap > a.button,
html body.pm-site ul.products li.product:focus-within .product-content-wrap > a.button,
html body.pm-site ul.products li.product .product-content-wrap > a.button.loading,
html body.pm-site ul.products li.product .product-content-wrap > a.button.pm-just-added { opacity: 1; transform: none !important; }
}
/* list view keeps its own inline button */
html.pmg-view-list body.pm-site ul.products li.product .product-content-wrap > a.button { position: relative !important; top: auto !important; opacity: 1 !important; transform: none !important; width: auto !important; }
/* header button hides on small phones (the drawer has it) - the display rule above must not bring it back */
@media (max-width: 560px) { html body.pm-site .pm-header .pm-header__cta { display: none !important; } }