/**
* Geo-Med button system.
*
* Three deliberate variants, used everywhere:
*
* .gm-btn-primary Brand-blue gradient. The most prominent action on a
* surface. Used for "Add to Cart", "Request a Quote",
* "View Details", "Browse Catalog", "Submit", etc.
*
* .gm-btn-secondary White card with brand-blue border + brand-blue text.
* Fills with brand blue on hover. Used as the partner to
* a primary CTA when the user has a meaningful second
* choice ("Log in to Purchase", "Learn More").
*
* .gm-btn-tertiary Brand-blue text-only with a subtle hover background.
* Used for low-emphasis actions in dense surfaces or
* side-by-side with primary/secondary in toolbars.
*
* Sizes: append .gm-btn--sm (32px) or .gm-btn--lg (48px) to override the
* default 40px height.
*
* NEW MARKUP should use these classes directly:
* Browse Catalog
*
*
* LEGACY MARKUP (already shipped) is retrofitted at the bottom of this file
* — selectors that match the old class names are mapped to the canonical
* primary look so the visual system unifies without a markup rewrite.
*/
/* ===============================================================
Canonical system
=============================================================== */
.gm-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 40px;
min-height: 40px;
padding: 0 20px;
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: -0.005em;
line-height: 1;
border-radius: 10px;
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
text-align: center;
box-sizing: border-box;
flex-shrink: 0;
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
-webkit-tap-highlight-color: transparent;
}
.gm-btn:focus-visible {
outline: 3px solid rgba(1, 146, 239, 0.45);
outline-offset: 2px;
}
/* Size variants */
.gm-btn--lg { height: 48px; min-height: 48px; padding: 0 28px; font-size: 14px; border-radius: 12px; }
.gm-btn--sm { height: 32px; min-height: 32px; padding: 0 14px; font-size: 12px; border-radius: 8px; }
/* Width helper for full-width buttons inside cards/forms */
.gm-btn--block { width: 100%; }
/* --- Primary: brand-blue gradient fill --- */
.gm-btn-primary {
background: linear-gradient(180deg, #0192ef 0%, #0e70bb 100%);
color: #ffffff;
border-color: transparent;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.18) inset,
0 4px 10px rgba(14, 112, 187, 0.20),
0 1px 2px rgba(14, 25, 53, 0.08);
}
.gm-btn-primary:hover,
.gm-btn-primary:focus-visible {
transform: translateY(-1px);
color: #ffffff;
background: linear-gradient(180deg, #0192ef 0%, #0a5a96 100%);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.25) inset,
0 8px 20px rgba(14, 112, 187, 0.35),
0 2px 4px rgba(14, 25, 53, 0.10);
}
.gm-btn-primary:active { transform: translateY(0); }
/* --- Secondary: white card with brand-blue border, fills on hover --- */
.gm-btn-secondary {
background: #ffffff;
color: #0e70bb;
border-color: rgba(14, 112, 187, 0.32);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.80) inset,
0 1px 2px rgba(14, 25, 53, 0.04);
}
.gm-btn-secondary:hover,
.gm-btn-secondary:focus-visible {
transform: translateY(-1px);
background: #0e70bb;
color: #ffffff;
border-color: #0e70bb;
box-shadow: 0 6px 14px rgba(14, 112, 187, 0.25);
}
/* --- Tertiary: text-only with subtle hover background --- */
.gm-btn-tertiary {
background: transparent;
color: #0e70bb;
border-color: transparent;
box-shadow: none;
padding: 0 10px;
}
.gm-btn-tertiary:hover,
.gm-btn-tertiary:focus-visible {
background: rgba(14, 112, 187, 0.06);
color: #0b5d99;
}
/* ===============================================================
Legacy retrofits — map existing off-brand pills to the system
without touching markup.
=============================================================== */
/* "View Details" pill on home Featured Products cards.
Was: black background, off-brand bright-blue hover.
Now: brand-blue gradient (Primary). */
.gm-view-details-btn {
background: linear-gradient(180deg, #0192ef 0%, #0e70bb 100%) !important;
background-color: #0192ef !important;
color: #ffffff !important;
border-radius: 10px !important;
font-weight: 600 !important;
letter-spacing: -0.005em !important;
text-transform: none !important;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.18) inset,
0 4px 10px rgba(14, 112, 187, 0.20),
0 1px 2px rgba(14, 25, 53, 0.08) !important;
}
.gm-view-details-btn:hover,
.gm-view-details-btn:focus,
.gm-view-details-btn:focus-visible {
background: linear-gradient(180deg, #0192ef 0%, #0a5a96 100%) !important;
background-color: #0e70bb !important;
transform: translateY(-1px) !important;
color: #ffffff !important;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.25) inset,
0 8px 20px rgba(14, 112, 187, 0.35),
0 2px 4px rgba(14, 25, 53, 0.10) !important;
}
/* "BROWSE CATALOG" hero pill on /featured-products/.
Was: black background + uppercase + heavy tracking + ~52px tall.
Now: brand-blue gradient (Primary), normal case, normal tracking. */
.q-browse-cta {
background: linear-gradient(180deg, #0192ef 0%, #0e70bb 100%) !important;
background-color: #0192ef !important;
color: #ffffff !important;
border-radius: 10px !important;
font-weight: 600 !important;
font-size: 13px !important;
text-transform: none !important;
letter-spacing: -0.005em !important;
min-height: 40px !important;
padding: 0 22px !important;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.18) inset,
0 4px 10px rgba(14, 112, 187, 0.20),
0 1px 2px rgba(14, 25, 53, 0.08) !important;
}
.q-browse-cta:hover,
.q-browse-cta:focus,
.q-browse-cta:focus-visible {
background: linear-gradient(180deg, #0192ef 0%, #0a5a96 100%) !important;
background-color: #0e70bb !important;
color: #ffffff !important;
transform: translateY(-1px) !important;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.25) inset,
0 8px 20px rgba(14, 112, 187, 0.35),
0 2px 4px rgba(14, 25, 53, 0.10) !important;
}
/* Product detail page "Add to Cart" pill — match existing source-selector
chain so source order alone wins the cascade.
Was: black + uppercase + 0.04em tracking + bright-blue #0062FF hover.
Now: brand-blue gradient (Primary lg-variant), sentence case. */
body.gm-product .q-pdp button.single_add_to_cart_button,
body.gm-product .q-pdp .single_add_to_cart_button {
background: linear-gradient(180deg, #0192ef 0%, #0e70bb 100%) !important;
background-color: #0192ef !important;
background-image: linear-gradient(180deg, #0192ef 0%, #0e70bb 100%) !important;
color: #ffffff !important;
border-radius: 10px !important;
font-weight: 600 !important;
letter-spacing: -0.005em !important;
text-transform: none !important;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.18) inset,
0 4px 10px rgba(14, 112, 187, 0.20),
0 1px 2px rgba(14, 25, 53, 0.08) !important;
}
body.gm-product .q-pdp button.single_add_to_cart_button:hover,
body.gm-product .q-pdp .single_add_to_cart_button:hover,
body.gm-product .q-pdp button.single_add_to_cart_button:focus-visible,
body.gm-product .q-pdp .single_add_to_cart_button:focus-visible {
background: linear-gradient(180deg, #0192ef 0%, #0a5a96 100%) !important;
background-color: #0e70bb !important;
background-image: linear-gradient(180deg, #0192ef 0%, #0a5a96 100%) !important;
transform: translateY(-1px) !important;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.25) inset,
0 8px 20px rgba(14, 112, 187, 0.35),
0 2px 4px rgba(14, 25, 53, 0.10) !important;
}
/* Generic WooCommerce "Add to Cart" buttons (archive cards, mini-cart,
etc.) — same Primary look at the default 40px height. */
.woocommerce a.button.add_to_cart_button,
.woocommerce button.add_to_cart_button,
.woocommerce .add_to_cart_button,
a.add_to_cart_button {
background: linear-gradient(180deg, #0192ef 0%, #0e70bb 100%) !important;
color: #ffffff !important;
border-radius: 10px !important;
font-weight: 600 !important;
letter-spacing: -0.005em !important;
text-transform: none !important;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.18) inset,
0 4px 10px rgba(14, 112, 187, 0.20) !important;
}
.woocommerce a.button.add_to_cart_button:hover,
.woocommerce button.add_to_cart_button:hover,
a.add_to_cart_button:hover {
background: linear-gradient(180deg, #0192ef 0%, #0a5a96 100%) !important;
transform: translateY(-1px) !important;
color: #ffffff !important;
}