/* ------------------------------------------------------------
BASE STYLE — SMALLER ICON (30px)
------------------------------------------------------------ */
.uc_ac_box .bbb.ue_accordion_icon {
background: #F19226 !important;
color: #fff !important;
width: 30px !important;
height: 30px !important;
border-radius: 50% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
font-size: 13px !important;
font-weight: 600 !important;
box-shadow: 0 3px 8px rgba(0,0,0,0.25) !important;
position: relative !important;
margin-left: 8px !important;
}
/* Hide the duplicate icon UE sometimes adds */
.uc_ac_box .bbb.ue_accordion_icon + .bbb.ue_accordion_icon {
display: none !important;
}
/* Hide built-in font icon */
.uc_ac_box .bbb.ue_accordion_icon i {
display: none !important;
}
/* ------------------------------------------------------------
ACTIVE TAB — CORRECT CLASS (uc-item-active)
Forces icon to turn blue when opened
------------------------------------------------------------ */
.uc_ac_box.uc-item-active .bbb.ue_accordion_icon,
.uc-item-active .bbb.ue_accordion_icon {
background: #237B94 !important;
color: #ffffff !important;
}
/* ------------------------------------------------------------
1) HARD FLOORS → NAIL-ON (4 items)
------------------------------------------------------------ */
.acc-hard-nail .uc_ac_box:nth-child(1) .bbb.ue_accordion_icon::before { content: "1"; }
.acc-hard-nail .uc_ac_box:nth-child(2) .bbb.ue_accordion_icon::before { content: "2"; }
.acc-hard-nail .uc_ac_box:nth-child(3) .bbb.ue_accordion_icon::before { content: "3"; }
.acc-hard-nail .uc_ac_box:nth-child(4) .bbb.ue_accordion_icon::before { content: "4"; }
/* ------------------------------------------------------------
2) HARD FLOORS → SELF-ADHESIVE (3 items)
------------------------------------------------------------ */
.acc-hard-adhesive .uc_ac_box:nth-child(1) .bbb.ue_accordion_icon::before { content: "1"; }
.acc-hard-adhesive .uc_ac_box:nth-child(2) .bbb.ue_accordion_icon::before { content: "2"; }
.acc-hard-adhesive .uc_ac_box:nth-child(3) .bbb.ue_accordion_icon::before { content: "3"; }
/* ------------------------------------------------------------
3) SOFT FLOORS → NAIL-ON (3 items)
------------------------------------------------------------ */
.acc-soft-nail .uc_ac_box:nth-child(1) .bbb.ue_accordion_icon::before { content: "1"; }
.acc-soft-nail .uc_ac_box:nth-child(2) .bbb.ue_accordion_icon::before { content: "2"; }
.acc-soft-nail .uc_ac_box:nth-child(3) .bbb.ue_accordion_icon::before { content: "3"; }
/* ------------------------------------------------------------
4) SOFT FLOORS → SELF-ADHESIVE (2 items)
------------------------------------------------------------ */
.acc-soft-adhesive .uc_ac_box:nth-child(1) .bbb.ue_accordion_icon::before { content: "1"; }
.acc-soft-adhesive .uc_ac_box:nth-child(2) .bbb.ue_accordion_icon::before { content: "2"; }
/* Hide default Woo Reviews heading */
#reviews .woocommerce-Reviews-title,
#reviews > h2.woocommerce-Reviews-title,
.woocommerce-Reviews #reviews > h2.woocommerce-Reviews-title {
display: none !important;
}
/* Remove outer container */
#reviews {
background: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
max-width: 100% !important;
margin: 0 !important;
}
/* Align review list */
#reviews .commentlist {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Review card */
#reviews .commentlist li {
background: #fff;
border: 1px solid #e6ecee;
border-radius: 8px;
padding: 20px 24px;
margin-bottom: 24px;
box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
/* Orange star rating */
#reviews .star-rating,
p.stars a,
p.stars a:before {
color: #e27911 !important;
}
/* Reviewer name */
#reviews .comment-author {
font-weight: 600;
color: #1f404a;
font-size: 15px;
}
#reviews time {
font-size: 13px;
color: #7a8c90;
}
/* Review text */
#reviews .description {
color: #2f4044;
font-size: 15px;
line-height: 1.6;
margin-top: 8px;
}
/* Verified owner */
#reviews .verified {
color: #7a8c90;
font-style: italic;
font-weight: 400;
}
/* Review form */
#review_form_wrapper {
border-top: 1px solid #e8efef;
padding-top: 32px;
max-width: 800px;
margin: 0;
}
/* ================================
ELEMENTOR MENU CART – BUTTON OVERRIDES
================================ */
/* Base button reset */
.elementor-menu-cart__footer-buttons .elementor-button {
width: 100%;
min-height: 46px;
border-radius: 8px !important;
font-weight: 500;
letter-spacing: 0.3px;
transition: background-color 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease;
}
/* Prevent hover shrink */
.elementor-menu-cart__footer-buttons .elementor-button:hover {
transform: none !important;
}
/* ================================
VIEW CART – SECONDARY
================================ */
.elementor-menu-cart__footer-buttons
.elementor-button--view-cart {
background: transparent !important;
color: #237B94 !important;
border: 1px solid #237B94 !important;
box-shadow: none !important;
}
.elementor-menu-cart__footer-buttons
.elementor-button--view-cart:hover {
background: #237B94 !important;
color: #ffffff !important;
}
/* ================================
CHECKOUT – PRIMARY
================================ */
.elementor-menu-cart__footer-buttons
.elementor-button--checkout {
background: #F19226 !important;
color: #ffffff !important;
border: none !important;
box-shadow: 0 6px 18px rgba(241, 146, 38, 0.35) !important;
}
.elementor-menu-cart__footer-buttons
.elementor-button--checkout:hover {
background: #e58316 !important;
box-shadow: 0 8px 22px rgba(241, 146, 38, 0.45) !important;
}
/* =========================================
ELEMENTOR MENU CART – LAYOUT FIX
========================================= */
/* Align product row cleanly */
.elementor-menu-cart__product {
align-items: flex-start;
}
/* Prevent remove icon from shrinking text */
.elementor-menu-cart__product-remove {
margin-left: 12px;
flex-shrink: 0;
}
/* Allow product title to use full width */
.elementor-menu-cart__product-name {
max-width: 100%;
}
/* Remove boxed / input-style subtotal */
.elementor-menu-cart__subtotal {
border: none !important;
padding: 0 !important;
}
/* =========================================================
ELEMENTOR MEGA MENU — STICKY ACTIVE UNDERLINE (FINAL)
========================================================= */
/* Base title container */
.e-n-menu-title-container {
position: relative;
padding-bottom: 10px;
}
/* Underline element */
.e-n-menu-title-container::after {
content: "";
position: absolute;
left: 0;
bottom: 1px;
width: 100%;
height: 3px; /* stronger than tab underline */
background-color: #237B94;
border-radius: 2px;
opacity: 0;
transition: opacity 0.25s ease;
}
/* Hover state */
.e-n-menu-item:hover .e-n-menu-title-container::after {
opacity: 1;
}
/* ACTIVE (mega menu open) */
.e-n-menu-dropdown-icon[aria-expanded="true"]
+ .e-n-menu-title-container::after,
.e-n-menu-dropdown-icon[aria-expanded="true"]
~ .e-n-menu-title-container::after {
opacity: 1;
}
/* ============================================================
WOO – VIEW CART BUTTON (SECONDARY CTA)
============================================================ */
/* Base */
.woocommerce-message .button.wc-forward {
background-color: transparent;
color: #237B94; /* Brand teal */
border: 2px solid #237B94;
border-radius: 8px;
padding: 8px 18px;
font-weight: 600;
line-height: 1;
transition: background-color 0.2s ease,
color 0.2s ease,
border-color 0.2s ease;
}
/* Hover (invert) */
.woocommerce-message .button.wc-forward:hover {
background-color: #237B94;
color: #ffffff;
border-color: #237B94;
}
/* Prevent jump / shrink */
.woocommerce-message .button.wc-forward:focus,
.woocommerce-message .button.wc-forward:active {
transform: none;
box-shadow: none;
}
/* ============================================================
CART – CHECKOUT BUTTON (PRIMARY ORANGE, LOCKED SIZE)
============================================================ */
.woocommerce .wc-proceed-to-checkout a.checkout-button {
box-sizing: border-box;
padding: 12px 24px !important;
border: 2px solid #F19226 !important;
font-weight: 600 !important;
line-height: 1.2 !important;
background-color: #F19226 !important;
color: #ffffff !important;
border-radius: 8px;
transform: none !important;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
/* Hover — darker orange, SAME SIZE */
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:focus,
.woocommerce .wc-proceed-to-checkout a.checkout-button:active {
padding: 12px 24px !important;
border-width: 2px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
background-color: #E58318 !important; /* darker orange */
border-color: #E58318 !important;
color: #ffffff !important;
transform: none !important;
outline: none;
}
/* Mobile */
@media (max-width: 767px) {
.woocommerce .wc-proceed-to-checkout a.checkout-button {
width: 100%;
text-align: center;
}
}
/* =====================================================
CART – Backorder notice (WooCommerce core text)
===================================================== */
.woocommerce-cart .backorder_notification,
.woocommerce-cart .woocommerce-backorder {
color: #9CA3AF !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.4;
margin-top: 2px;
}
/* =====================================================
MOBILE CART – LOCKED FINAL VERSION
Applies ONLY to mobile portrait & landscape
===================================================== */
@media (max-width: 767px) {
/* -----------------------------------------------
REMOVE ALL AUTO-GENERATED LABELS
----------------------------------------------- */
.elementor-widget-woocommerce-cart
table.shop_table_responsive td::before {
content: none !important;
display: none !important;
}
.elementor-widget-woocommerce-cart dl dt {
display: none !important;
}
/* -----------------------------------------------
STRUCTURE
----------------------------------------------- */
.elementor-widget-woocommerce-cart
table.shop_table_responsive tr {
display: block !important;
position: relative;
padding: 14px 0 !important;
border-bottom: 1px solid #E5E7EB;
}
.elementor-widget-woocommerce-cart
table.shop_table_responsive td {
display: block !important;
width: 100% !important;
padding: 0 !important;
text-align: left !important;
}
/* -----------------------------------------------
PRODUCT TITLE
----------------------------------------------- */
.elementor-widget-woocommerce-cart .product-name {
margin-bottom: 4px;
}
.elementor-widget-woocommerce-cart .product-name a {
font-size: 16px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
display: block;
}
/* -----------------------------------------------
METADATA (SIZE + BACKORDER)
----------------------------------------------- */
.elementor-widget-woocommerce-cart .variation,
.elementor-widget-woocommerce-cart .backorder_notification {
font-size: 13px !important;
color: #6B7280 !important;
margin-top: 2px;
margin-bottom: 6px;
line-height: 1.4;
}
/* -----------------------------------------------
PRICE
----------------------------------------------- */
.elementor-widget-woocommerce-cart .product-price {
margin-top: 6px;
font-size: 15px;
}
/* -----------------------------------------------
QUANTITY
----------------------------------------------- */
.elementor-widget-woocommerce-cart .product-quantity {
margin-top: 4px;
}
.elementor-widget-woocommerce-cart input.qty {
width: 72px !important;
text-align: center;
}
/* -----------------------------------------------
SUBTOTAL (ANCHOR)
----------------------------------------------- */
.elementor-widget-woocommerce-cart .product-subtotal {
margin-top: 6px;
font-size: 16px;
font-weight: 600;
}
/* -----------------------------------------------
REMOVE ICON
----------------------------------------------- */
.elementor-widget-woocommerce-cart a.remove {
position: absolute;
top: 8px;
right: 8px;
font-size: 18px;
line-height: 1;
}
}
/* -----------------------------------------------
B2BKING – QUOTE BUTTON VISIBILITY (CRITICAL)
----------------------------------------------- */
/* Hide quote button for guests / non-business users */
body:not(.b2bking_b2b_user) .woocommerce-cart
.b2bking_request_quote_button,
body:not(.b2bking_b2b_user) .woocommerce-cart
.b2bking_quote_button,
body:not(.b2bking_b2b_user) .woocommerce-cart
.b2bking_quote_button_container {
display: none !important;
}
/* FORCE quote button visible for business users */
body.b2bking_b2b_user .woocommerce-cart
.b2bking_request_quote_button,
body.b2bking_b2b_user .woocommerce-cart
.b2bking_quote_button,
body.b2bking_b2b_user .woocommerce-cart
.b2bking_quote_button_container {
display: block !important;
}
/* =====================================================
CART – Return to Shop (Secondary, HARD SIZE LOCK)
===================================================== */
.woocommerce-cart p.return-to-shop > a.button.wc-backward {
/* Visual style */
background-color: transparent !important;
color: #237B94 !important;
border: 2px solid #237B94 !important;
border-radius: 8px;
/* SIZE LOCK (THIS IS THE FIX) */
box-sizing: border-box !important;
padding: 11px 22px !important;
line-height: 1 !important;
font-size: 14px !important;
min-height: 44px; /* touch-safe */
/* Kill layout-changing effects */
transform: none !important;
opacity: 1 !important;
/* Allow ONLY color/shadow transitions */
transition-property: background-color, color, box-shadow !important;
transition-duration: 0.2s !important;
font-weight: 600;
text-decoration: none !important;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Hover */
.woocommerce-cart p.return-to-shop > a.button.wc-backward:hover {
background-color: #237B94 !important;
color: #ffffff !important;
padding: 11px 22px !important; /* RE-LOCK */
border-width: 2px !important; /* RE-LOCK */
line-height: 1 !important;
box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}
/* Active / focus */
.woocommerce-cart p.return-to-shop > a.button.wc-backward:active,
.woocommerce-cart p.return-to-shop > a.button.wc-backward:focus {
background-color: #237B94 !important;
color: #ffffff !important;
padding: 11px 22px !important;
border-width: 2px !important;
line-height: 1 !important;
box-shadow: 0 4px 10px rgba(0,0,0,0.12);
outline: none !important;
}
/* Mobile centering */
@media (max-width: 767px) {
.woocommerce-cart p.return-to-shop > a.button.wc-backward {
margin: 12px auto 0;
}
}
/* =====================================================
SG — AUTO BULLET LIST STYLE (from converted paragraphs)
===================================================== */
ul.sg-auto-bullets{
margin: 0;
padding-left: 1.4em; /* overall list indent */
}
ul.sg-auto-bullets > li{
list-style-position: outside;
margin: 0 0 .35em 0;
}
/* =========================================================
SG – HIDE VARIATION ATTRIBUTES IN MINI / MENU CART
========================================================= */
/* WooCommerce Mini Cart */
.woocommerce-mini-cart .variation,
.woocommerce-mini-cart .wc-item-meta {
display: none !important;
}
/* ============================================================
YITH AJAX SEARCH – BASE UI (ALL DEVICES)
============================================================ */
/* Search submit wrapper container */
div:has(> .ywcas-submit-wrapper) {
background: #F19226;
height: 2.3rem;
}
/* Submit button reset */
.ywcas-submit-wrapper {
border: none !important;
background-color: transparent !important;
margin-left: 10px;
}
.ywcas-submit-wrapper:hover {
background-color: transparent !important;
}
/* Submit icon */
.ywcas-submit-wrapper svg.ywcas-submit-icon {
color: #FFFFFF !important;
stroke: #FFFFFF !important;
height: 30px !important;
margin-top: 8px;
}
/* Ensure transparency inside input field */
.ywcas-input-field .ywcas-submit-wrapper,
.ywcas-input-field .ywcas-submit-wrapper:hover {
background-color: transparent !important;
}
/* Hide unused elements */
.ywcas-classic-related-categories-wrapper,
.ywcas-separator {
display: none !important;
}
/* Results grid spacing fix */
.ywcas-popover-results
.popover-content
.wp-block-yith-filled-block
.ywcas-search-results.grid {
margin-top: -30px !important;
}
/* ============================================================
DESKTOP (≥ 1224px)
============================================================ */
@media only screen and (min-width: 1224px) {
.ywcas-submit-wrapper .ywcas-submit-icon {
color: #F19226 !important;
}
.ywcas-popover-results {
width: 1080px !important;
left: 50% !important;
transform: translateX(-50%);
margin-left: 30px;
}
.search-result-item__content > *,
.search-result-item__content p {
font-family: "Inter", Inter;
font-size: 20px;
text-align: center;
}
.search-result-item__inline_group > * {
font-family: "Inter", Inter !important;
font-size: 16px !important;
}
}
/* ============================================================
TABLET (768px – 1223px)
============================================================ */
@media only screen and (min-width: 768px) and (max-width: 1223px) {
.ywcas-popover-results {
width: 80% !important;
left: 50% !important;
transform: translateX(-50%);
margin-left: 0;
}
.search-result-item__content > *,
.search-result-item__content p {
font-size: 18px;
text-align: center;
}
.search-result-item__inline_group > * {
font-size: 15px !important;
}
}
/* ============================================================
MOBILE (≤ 767px)
============================================================ */
@media only screen and (max-width: 767px) {
.ywcas-popover-results {
width: 100% !important;
left: 50% !important;
transform: translateX(-50%);
margin-left: 0;
max-height: 70vh;
overflow-y: auto;
border-radius: 10px;
}
.wp-block-yith-search-block.alignwide {
margin-inline: unset !important;
}
.search-result-item__content > *,
.search-result-item__content p {
font-size: 16px;
line-height: 1.3;
text-align: center;
}
.search-result-item__inline_group > * {
font-size: 14px !important;
}
}
/* Targets the main container and the visible backdrop */
.ywcas-input-field,
.lapilliUI-Input__backdrop,
.lapilliUI-Input--outlined,
.ywcas-input-field-wrapper {
border-radius: 4px !important;
}
/* Fixes the orange button wrapper to be sharp-edged */
.lapilliUI-Input__endAdornment {
border-radius: 0 4px 4px 0 !important;
overflow: hidden !important;
}
/* Targets the orange button itself */
.lapilliUI-Input__endAdornment button {
border-radius: 0 4px 4px 0 !important;
background-color: #F19226 !important;
}
/* ============================================================
SG — YITH Search Dropdown & Chips (4px Precision Fix)
============================================================ */
/* 1. Main Dropdown Container - Targets the white box */
.ywcas-popover-results,
.popover-content.lapilliUI-Box__root {
border-radius: 4px !important; /* Matches your engineering look */
overflow: hidden !important;
box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
border: 1px solid #e0e0e0 !important;
}
/* 2. Search Chips (Trending / Popular Items) */
.ywcas-popular-searches-item,
.ywcas-popular-searches-item.MuiButton-root,
.ywcas-popular-searches-item span {
color: #237B94 !important;
border: 1px solid #237B94 !important;
background-color: transparent !important;
border-radius: 4px !important; /* REPLACED 999px with 4px */
font-weight: 500 !important;
line-height: 1 !important;
text-transform: none !important; /* Keeps "Nail-On" clean */
}
/* 3. Hover / Focus States for Chips */
.ywcas-popular-searches-item:hover,
.ywcas-popular-searches-item.MuiButton-root:hover {
background-color: rgba(35, 123, 148, 0.08) !important;
border-radius: 4px !important;
}
.ywcas-popular-searches-item:active,
.ywcas-popular-searches-item:focus {
background-color: rgba(35, 123, 148, 0.16) !important;
border-radius: 4px !important;
outline: none !important;
}
/* 4. Kill MUI Overrides specifically */
.ywcas-popular-searches-item.MuiButton-outlinedPrimary {
border: 1px solid #237B94 !important;
border-radius: 4px !important;
}
/* =========================================================================
SUPERIOR GLIDE — Global Button System v2
=========================================================================
How it works:
Elementor widget wrappers get the sg-btn class in Advanced > CSS Classes.
This CSS targets the .elementor-button inside that wrapper.
Classes (on Elementor widget wrapper):
.sg-btn-primary Orange filled CTA
.sg-btn-secondary Teal outline → teal fill on hover
.sg-btn-tertiary Text-only teal link style
Size modifier:
.sg-btn-sm Compact size for cards and tight layouts
Example Elementor setup:
Widget wrapper CSS class: sg-btn-primary sg-btn-sm
========================================================================= */
/* =======================================================================
SHARED BASE — reset Elementor defaults on all three button types
======================================================================= */
.sg-btn-primary .elementor-button,
.sg-btn-secondary .elementor-button,
.sg-btn-tertiary .elementor-button {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
font-weight: 600 !important;
line-height: 1.2 !important;
letter-spacing: -.005em !important;
text-align: center !important;
text-decoration: none !important;
white-space: nowrap !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: .45em !important;
box-sizing: border-box !important;
cursor: pointer !important;
transition: background .2s ease, color .2s ease, border-color .2s ease,
box-shadow .2s ease, transform .15s ease !important;
-webkit-tap-highlight-color: transparent;
}
/* Focus ring */
.sg-btn-primary .elementor-button:focus-visible,
.sg-btn-secondary .elementor-button:focus-visible,
.sg-btn-tertiary .elementor-button:focus-visible {
outline: 2px solid #237B94 !important;
outline-offset: 2px !important;
}
/* =======================================================================
PRIMARY — Orange filled CTA
======================================================================= */
.sg-btn-primary .elementor-button,
.sg-btn-primary .elementor-button:link,
.sg-btn-primary .elementor-button:visited {
background: #F19226 !important;
border: 2px solid #F19226 !important;
color: #ffffff !important;
border-radius: 8px !important;
font-size: 16px !important;
padding: 14px 32px !important;
min-height: 48px !important;
box-shadow: 0 2px 6px rgba(241, 146, 38, .25) !important;
}
.sg-btn-primary .elementor-button:hover {
background: #d97e1a !important;
border-color: #d97e1a !important;
color: #ffffff !important;
box-shadow: 0 4px 12px rgba(241, 146, 38, .35) !important;
transform: translateY(-1px);
}
.sg-btn-primary .elementor-button:active {
background: #c06f14 !important;
border-color: #c06f14 !important;
box-shadow: 0 1px 3px rgba(241, 146, 38, .2) !important;
transform: translateY(0);
}
/* =======================================================================
SECONDARY — Teal outline → fills teal on hover
======================================================================= */
.sg-btn-secondary .elementor-button,
.sg-btn-secondary .elementor-button:link,
.sg-btn-secondary .elementor-button:visited {
background: transparent !important;
border: 2px solid #237B94 !important;
color: #237B94 !important;
border-radius: 8px !important;
font-size: 16px !important;
padding: 14px 32px !important;
min-height: 48px !important;
box-shadow: none !important;
}
.sg-btn-secondary .elementor-button:hover {
background: #237B94 !important;
border-color: #237B94 !important;
color: #ffffff !important;
box-shadow: 0 4px 12px rgba(35, 123, 148, .25) !important;
transform: translateY(-1px);
}
.sg-btn-secondary .elementor-button:active {
background: #1b6275 !important;
border-color: #1b6275 !important;
color: #ffffff !important;
box-shadow: 0 1px 3px rgba(35, 123, 148, .15) !important;
transform: translateY(0);
}
/* =======================================================================
TERTIARY — Text-only teal, no border, no background
======================================================================= */
.sg-btn-tertiary .elementor-button,
.sg-btn-tertiary .elementor-button:link,
.sg-btn-tertiary .elementor-button:visited {
background: transparent !important;
border: 2px solid transparent !important;
color: #237B94 !important;
border-radius: 6px !important;
font-size: 15px !important;
padding: 10px 20px !important;
min-height: 42px !important;
box-shadow: none !important;
}
.sg-btn-tertiary .elementor-button:hover {
background: rgba(35, 123, 148, .06) !important;
border-color: transparent !important;
color: #1b6275 !important;
text-decoration: underline !important;
text-underline-offset: 3px;
text-decoration-color: rgba(35, 123, 148, .35);
box-shadow: none !important;
transform: none;
}
.sg-btn-tertiary .elementor-button:active {
background: rgba(35, 123, 148, .1) !important;
color: #1b6275 !important;
transform: none;
}
/* =======================================================================
SMALL MODIFIER — compact for cards, product grids, tight UI
======================================================================= */
.sg-btn-sm.sg-btn-primary .elementor-button,
.sg-btn-sm.sg-btn-primary .elementor-button:link,
.sg-btn-sm.sg-btn-primary .elementor-button:visited {
font-size: 14px !important;
padding: 10px 22px !important;
min-height: 38px !important;
border-radius: 6px !important;
}
.sg-btn-sm.sg-btn-secondary .elementor-button,
.sg-btn-sm.sg-btn-secondary .elementor-button:link,
.sg-btn-sm.sg-btn-secondary .elementor-button:visited {
font-size: 14px !important;
padding: 10px 22px !important;
min-height: 38px !important;
border-radius: 6px !important;
}
.sg-btn-sm.sg-btn-tertiary .elementor-button,
.sg-btn-sm.sg-btn-tertiary .elementor-button:link,
.sg-btn-sm.sg-btn-tertiary .elementor-button:visited {
font-size: 13px !important;
padding: 7px 14px !important;
min-height: 34px !important;
border-radius: 4px !important;
}
/* =======================================================================
ELEMENTOR INNER SPAN RESET
Elementor wraps button text in .elementor-button-text — reset its styles
======================================================================= */
.sg-btn-primary .elementor-button-text,
.sg-btn-secondary .elementor-button-text,
.sg-btn-tertiary .elementor-button-text {
font-size: inherit !important;
font-weight: inherit !important;
color: inherit !important;
line-height: inherit !important;
}
/* Elementor button icon spacing */
.sg-btn-primary .elementor-button-icon,
.sg-btn-secondary .elementor-button-icon,
.sg-btn-tertiary .elementor-button-icon {
font-size: inherit !important;
color: inherit !important;
}
/* =======================================================================
RESPONSIVE
======================================================================= */
/* Laptop ≤1024 */
@media (max-width: 1024px) {
.sg-btn-primary .elementor-button,
.sg-btn-secondary .elementor-button {
font-size: 15px !important;
padding: 13px 28px !important;
min-height: 46px !important;
}
.sg-btn-tertiary .elementor-button {
font-size: 14px !important;
}
}
/* Tablet landscape ≤768 */
@media (max-width: 768px) {
.sg-btn-primary .elementor-button,
.sg-btn-secondary .elementor-button {
font-size: 15px !important;
padding: 12px 24px !important;
min-height: 44px !important;
border-radius: 7px !important;
}
.sg-btn-tertiary .elementor-button {
font-size: 14px !important;
padding: 9px 16px !important;
min-height: 38px !important;
}
.sg-btn-sm.sg-btn-primary .elementor-button,
.sg-btn-sm.sg-btn-secondary .elementor-button {
font-size: 13px !important;
padding: 9px 18px !important;
min-height: 36px !important;
}
}
/* Tablet portrait ≤600 */
@media (max-width: 600px) {
.sg-btn-primary .elementor-button,
.sg-btn-secondary .elementor-button {
font-size: 14px !important;
padding: 12px 22px !important;
min-height: 44px !important;
}
}
/* Mobile landscape ≤480: full-width touch targets */
@media (max-width: 480px) {
.sg-btn-primary .elementor-button,
.sg-btn-secondary .elementor-button {
font-size: 14px !important;
padding: 12px 20px !important;
min-height: 44px !important;
border-radius: 6px !important;
width: 100% !important;
}
.sg-btn-tertiary .elementor-button {
font-size: 14px !important;
padding: 10px 14px !important;
min-height: 40px !important;
width: 100% !important;
}
/* Small buttons stay inline on mobile */
.sg-btn-sm.sg-btn-primary .elementor-button,
.sg-btn-sm.sg-btn-secondary .elementor-button {
font-size: 13px !important;
padding: 9px 16px !important;
min-height: 38px !important;
width: auto !important;
}
.sg-btn-sm.sg-btn-tertiary .elementor-button {
font-size: 13px !important;
width: auto !important;
}
}
/* Mobile portrait ≤375 */
@media (max-width: 375px) {
.sg-btn-primary .elementor-button,
.sg-btn-secondary .elementor-button {
font-size: 13px !important;
padding: 12px 16px !important;
min-height: 44px !important;
}
.sg-btn-sm.sg-btn-primary .elementor-button,
.sg-btn-sm.sg-btn-secondary .elementor-button {
font-size: 12px !important;
padding: 8px 14px !important;
min-height: 36px !important;
}
}
/* ============================================================
SG – SIZE CHART SCROLL WINDOW (FULL FINAL)
Class: sg-sizechart-window
Optional: sg-sizechart-stickyhead
============================================================ */
.sg-sizechart-window{
/* Height control */
--sg-chart-height: 520px;
max-height: var(--sg-chart-height);
overflow-y: auto;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
background: #ffffff;
border: 1px solid rgba(0,0,0,0.10);
border-radius: 14px;
/* ✅ Balanced padding: top/sides + tight bottom */
padding: 0px 0px 0px;
margin: 0;
box-sizing: border-box;
/* prevents flex overflow weirdness */
min-height: 0;
}
/* Tablet */
@media (max-width: 1024px){
.sg-sizechart-window{
--sg-chart-height: 460px;
padding: 8px 8px 8px;
}
}
/* Mobile */
@media (max-width: 767px){
.sg-sizechart-window{
--sg-chart-height: 380px;
padding: 6px 6px 6px;
}
}
/* ------------------------------------------------------------
Table normalization
------------------------------------------------------------ */
.sg-sizechart-window table{
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin: 0 !important;
}
/* kill phantom margins from common wrappers */
.sg-sizechart-window p,
.sg-sizechart-window .elementor-widget,
.sg-sizechart-window .elementor-widget-container{
margin: 0 !important;
}
/* ------------------------------------------------------------
Cell sizing (keeps huge charts readable)
------------------------------------------------------------ */
.sg-sizechart-window th,
.sg-sizechart-window td{
padding: 10px 12px;
vertical-align: top;
white-space: nowrap;
}
/* slightly tighter on mobile */
@media (max-width: 767px){
.sg-sizechart-window th,
.sg-sizechart-window td{
padding: 8px 10px;
}
}
/* ------------------------------------------------------------
Sticky header (optional)
------------------------------------------------------------ */
.sg-sizechart-window.sg-sizechart-stickyhead thead th{
position: sticky;
top: 0;
z-index: 5;
background: #ffffff;
box-shadow: 0 1px 0 rgba(0,0,0,0.10);
}
/* ------------------------------------------------------------
Bottom whitespace prevention (safe)
------------------------------------------------------------ */
.sg-sizechart-window > *:last-child{
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* ============================================================
SG – WIDER QUANTITY INPUTS (PRODUCT + CART)
============================================================ */
/* Base quantity input */
.quantity input.qty {
min-width: 90px !important; /* shows 3–4 digits comfortably */
width: 90px !important;
padding: 10px 12px !important;
text-align: center !important;
font-size: 15px !important;
}
/* Product page specific */
.single-product .quantity input.qty {
min-width: 100px !important;
width: 100px !important;
}
/* Cart page specific */
.woocommerce-cart .quantity input.qty {
min-width: 110px !important;
width: 110px !important;
}
/* Prevent arrows from squishing numbers */
.quantity input.qty::-webkit-inner-spin-button,
.quantity input.qty::-webkit-outer-spin-button {
opacity: 1;
margin-left: 6px;
}
/* Mobile adjustment */
@media (max-width: 767px) {
.quantity input.qty {
min-width: 80px !important;
width: 80px !important;
}
}
/* ============================================================
SG – COUPON FORM FIX (CART + CHECKOUT)
============================================================ */
/* Coupon wrapper */
.woocommerce-cart .coupon,
.woocommerce-checkout .coupon {
display: flex !important;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
/* Coupon input */
.woocommerce-cart .coupon input#coupon_code,
.woocommerce-checkout .coupon input#coupon_code {
min-width: 260px !important;
height: 44px !important;
padding: 0 12px !important;
font-size: 15px !important;
border-radius: 10px !important;
}
/* Apply coupon button */
.woocommerce-cart .coupon button,
.woocommerce-checkout .coupon button {
height: 44px !important;
padding: 0 18px !important;
border-radius: 10px !important;
font-weight: 600 !important;
white-space: nowrap;
}
/* Mobile refinement */
@media (max-width: 767px) {
.woocommerce-cart .coupon,
.woocommerce-checkout .coupon {
flex-direction: column;
align-items: stretch;
}
.woocommerce-cart .coupon input#coupon_code,
.woocommerce-checkout .coupon input#coupon_code,
.woocommerce-cart .coupon button,
.woocommerce-checkout .coupon button {
width: 100% !important;
}
}
/* ============================================================
SG – SIZING CHART TABS (5-LEVEL) – BRAND SYSTEM + HARD NO-JUMP
Elementor NESTED TABS only
Required CSS Classes (add to each Nested Tabs widget):
sg-sizing-parent / sg-sizing-child / sg-sizing-grandchild
sg-sizing-greatgrandchild / sg-sizing-greatgreatgrandchild
============================================================ */
/* =========================
TOKENS
========================= */
.sg-sizing-parent,
.sg-sizing-child,
.sg-sizing-grandchild,
.sg-sizing-greatgrandchild,
.sg-sizing-greatgreatgrandchild{
--sg-teal:#237B94;
--sg-border:#cfe6ee;
--sg-bg:#f6fbfd;
--sg-radius:12px;
}
/* =========================
HARD RESET (NO JUMP)
========================= */
.sg-sizing-parent .e-n-tabs-heading,
.sg-sizing-child .e-n-tabs-heading,
.sg-sizing-grandchild .e-n-tabs-heading,
.sg-sizing-greatgrandchild .e-n-tabs-heading,
.sg-sizing-greatgreatgrandchild .e-n-tabs-heading{
position: relative !important;
top: 0 !important;
transform: none !important;
translate: none !important;
filter: none !important;
border: 0 !important;
align-items: stretch !important;
}
.sg-sizing-parent .e-n-tab-title,
.sg-sizing-child .e-n-tab-title,
.sg-sizing-grandchild .e-n-tab-title,
.sg-sizing-greatgrandchild .e-n-tab-title,
.sg-sizing-greatgreatgrandchild .e-n-tab-title{
font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
position: relative !important;
top: 0 !important;
bottom: auto !important;
transform: none !important;
translate: none !important;
filter: none !important;
margin: 0 !important;
box-shadow: none !important;
outline: none !important;
background-image: none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
height:100% !important;
line-height:1 !important;
white-space:nowrap !important;
box-sizing:border-box !important;
}
/* Kill Elementor indicators */
.sg-sizing-parent .e-n-tab-title::before,
.sg-sizing-parent .e-n-tab-title::after,
.sg-sizing-child .e-n-tab-title::before,
.sg-sizing-child .e-n-tab-title::after,
.sg-sizing-grandchild .e-n-tab-title::before,
.sg-sizing-grandchild .e-n-tab-title::after,
.sg-sizing-greatgrandchild .e-n-tab-title::before,
.sg-sizing-greatgrandchild .e-n-tab-title::after,
.sg-sizing-greatgreatgrandchild .e-n-tab-title::before,
.sg-sizing-greatgreatgrandchild .e-n-tab-title::after{
content:none !important;
display:none !important;
}
/* =========================
BRAND COLORS
========================= */
.sg-sizing-parent .e-n-tab-title,
.sg-sizing-child .e-n-tab-title,
.sg-sizing-grandchild .e-n-tab-title,
.sg-sizing-greatgrandchild .e-n-tab-title,
.sg-sizing-greatgreatgrandchild .e-n-tab-title{
background:#fff !important;
color:var(--sg-teal) !important;
border:1px solid var(--sg-border) !important;
border-radius:var(--sg-radius) !important;
transition: background .2s ease, border-color .2s ease, color .2s ease !important;
}
.sg-sizing-parent .e-n-tab-title:hover,
.sg-sizing-child .e-n-tab-title:hover,
.sg-sizing-grandchild .e-n-tab-title:hover,
.sg-sizing-greatgrandchild .e-n-tab-title:hover,
.sg-sizing-greatgreatgrandchild .e-n-tab-title:hover{
background:var(--sg-bg) !important;
border-color:var(--sg-teal) !important;
color:var(--sg-teal) !important;
}
.sg-sizing-parent .e-n-tab-title[aria-selected="true"],
.sg-sizing-child .e-n-tab-title[aria-selected="true"],
.sg-sizing-grandchild .e-n-tab-title[aria-selected="true"],
.sg-sizing-greatgrandchild .e-n-tab-title[aria-selected="true"],
.sg-sizing-greatgreatgrandchild .e-n-tab-title[aria-selected="true"]{
background:var(--sg-teal) !important;
border-color:var(--sg-teal) !important;
color:#fff !important;
}
/* =========================
DESKTOP (wrap + center)
========================= */
.sg-sizing-parent .e-n-tabs-heading,
.sg-sizing-child .e-n-tabs-heading,
.sg-sizing-grandchild .e-n-tabs-heading,
.sg-sizing-greatgrandchild .e-n-tabs-heading,
.sg-sizing-greatgreatgrandchild .e-n-tabs-heading{
display:flex !important;
flex-wrap:wrap !important;
justify-content:center !important;
gap:10px !important;
}
/* =========================
LEVEL SIZES
========================= */
.sg-sizing-parent{ padding-top:8px !important; }
.sg-sizing-parent .e-n-tabs-heading{ min-height:48px !important; margin:0 0 14px 0 !important; }
.sg-sizing-parent .e-n-tabs-heading > .e-n-tab-title{ min-height:48px !important; padding:0 18px !important; font-weight:650 !important; }
.sg-sizing-parent .sg-sizing-child{ margin-top:10px !important; padding-top:4px !important; }
.sg-sizing-child .e-n-tabs-heading{ min-height:42px !important; margin:0 0 14px 0 !important; }
.sg-sizing-child .e-n-tabs-heading > .e-n-tab-title{ min-height:42px !important; padding:0 16px !important; font-weight:600 !important; }
.sg-sizing-child .sg-sizing-grandchild{ margin-top:8px !important; padding-top:2px !important; }
.sg-sizing-grandchild .e-n-tabs-heading{ min-height:36px !important; margin:0 0 18px 0 !important; }
.sg-sizing-grandchild .e-n-tabs-heading > .e-n-tab-title{ min-height:36px !important; padding:0 14px !important; font-weight:600 !important; font-size:13px !important; }
.sg-sizing-grandchild .sg-sizing-greatgrandchild{ margin-top:8px !important; padding-top:2px !important; }
.sg-sizing-greatgrandchild .e-n-tabs-heading{ min-height:34px !important; margin:0 0 18px 0 !important; }
.sg-sizing-greatgrandchild .e-n-tabs-heading > .e-n-tab-title{ min-height:34px !important; padding:0 13px !important; font-weight:600 !important; font-size:12.5px !important; }
.sg-sizing-greatgrandchild .sg-sizing-greatgreatgrandchild{ margin-top:8px !important; padding-top:2px !important; }
.sg-sizing-greatgreatgrandchild .e-n-tabs-heading{ min-height:32px !important; margin:0 0 18px 0 !important; }
.sg-sizing-greatgreatgrandchild .e-n-tabs-heading > .e-n-tab-title{ min-height:32px !important; padding:0 12px !important; font-weight:600 !important; font-size:12px !important; }
/* =========================
MOBILE: SWIPE BUT CENTERED
Technique:
- Heading scrolls
- Inner content stays centered using max-content
========================= */
@media (max-width:767px){
.sg-sizing-parent .e-n-tabs-heading,
.sg-sizing-child .e-n-tabs-heading,
.sg-sizing-grandchild .e-n-tabs-heading,
.sg-sizing-greatgrandchild .e-n-tabs-heading,
.sg-sizing-greatgreatgrandchild .e-n-tabs-heading{
/* override Elementor paging */
transform:none !important;
translate:none !important;
/* enable swipe */
overflow-x:auto !important;
overflow-y:hidden !important;
flex-wrap:nowrap !important;
-webkit-overflow-scrolling:touch !important;
/* CENTER by default */
justify-content:center !important;
/* spacing */
gap:8px !important;
padding:0 10px 10px !important;
/* hide scrollbar */
scrollbar-width:none !important;
}
.sg-sizing-parent .e-n-tabs-heading::-webkit-scrollbar,
.sg-sizing-child .e-n-tabs-heading::-webkit-scrollbar,
.sg-sizing-grandchild .e-n-tabs-heading::-webkit-scrollbar,
.sg-sizing-greatgrandchild .e-n-tabs-heading::-webkit-scrollbar,
.sg-sizing-greatgreatgrandchild .e-n-tabs-heading::-webkit-scrollbar{
display:none !important;
}
/* keep each tab from shrinking */
.sg-sizing-parent .e-n-tab-title,
.sg-sizing-child .e-n-tab-title,
.sg-sizing-grandchild .e-n-tab-title,
.sg-sizing-greatgrandchild .e-n-tab-title,
.sg-sizing-greatgreatgrandchild .e-n-tab-title{
flex:0 0 auto !important;
}
/* slightly tighter padding on small screens */
.sg-sizing-parent .e-n-tabs-heading > .e-n-tab-title{ padding:0 14px !important; }
.sg-sizing-child .e-n-tabs-heading > .e-n-tab-title{ padding:0 14px !important; }
.sg-sizing-grandchild .e-n-tabs-heading > .e-n-tab-title{ padding:0 12px !important; }
.sg-sizing-greatgrandchild .e-n-tabs-heading > .e-n-tab-title{ padding:0 12px !important; }
.sg-sizing-greatgreatgrandchild .e-n-tabs-heading > .e-n-tab-title{ padding:0 11px !important; }
}
/* SG — Price positioning (exclude quick view) */
/* Hide variation price in default location on single product page */
.single-product .woocommerce-variation-price {
display: none !important;
}
/* Restore normal variation price inside quick view */
.iconic-wqv-modal .woocommerce-variation-price,
#iconic-wqv .woocommerce-variation-price,
.iconic-wqv .woocommerce-variation-price {
display: block !important;
}
.iconic-wqv-modal .woocommerce-variation-price .price,
.iconic-wqv-modal .woocommerce-variation-price .woocommerce-Price-amount {
font-size: 20px !important;
font-weight: 700 !important;
color: #111827 !important;
}
/* Initial price range styling */
.single-product .sg-initial-price-range {
margin-bottom: 12px;
}
.single-product .sg-initial-price-range .sg-price-fix,
.single-product .sg-initial-price-range .woocommerce-Price-amount {
font-size: 28px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
color: #111827 !important;
font-family: 'Inter', -apple-system, sans-serif !important;
}
/* Cloned selected price (injected by JS into same position as range) */
.single-product .sg-selected-price {
margin-bottom: 12px;
display: none;
}
.single-product .sg-selected-price .woocommerce-Price-amount,
.single-product .sg-selected-price bdi {
font-size: 28px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
color: #111827 !important;
font-family: 'Inter', -apple-system, sans-serif !important;
}
@media (max-width: 1024px) {
.single-product .sg-initial-price-range .sg-price-fix,
.single-product .sg-initial-price-range .woocommerce-Price-amount,
.single-product .sg-selected-price .woocommerce-Price-amount,
.single-product .sg-selected-price bdi {
font-size: 26px !important;
}
}
@media (max-width: 768px) {
.single-product .sg-initial-price-range .sg-price-fix,
.single-product .sg-initial-price-range .woocommerce-Price-amount,
.single-product .sg-selected-price .woocommerce-Price-amount,
.single-product .sg-selected-price bdi {
font-size: 24px !important;
}
}
@media (max-width: 480px) {
.single-product .sg-initial-price-range .sg-price-fix,
.single-product .sg-initial-price-range .woocommerce-Price-amount,
.single-product .sg-selected-price .woocommerce-Price-amount,
.single-product .sg-selected-price bdi {
font-size: 20px !important;
}
}
/* Center price on mobile */
@media (max-width: 767px) {
.single-product .sg-initial-price-range,
.single-product .sg-selected-price {
text-align: center;
}
}
/* ============================================================
SG — Business Hero CTA visibility (Guest vs Approved B2B)
Uses B2BKing body classes only
============================================================ */
/* Default state: show Guest CTA, hide B2B CTA */
.sg-biz-cta--guest {
display: flex;
}
.sg-biz-cta--b2b {
display: none;
}
/* Approved B2B users: show B2B CTA only */
.b2bking_b2b_user .sg-biz-cta--guest {
display: none !important;
}
.b2bking_b2b_user .sg-biz-cta--b2b {
display: flex !important;
}
/* Safety: logged-out users never see B2B CTA */
.b2bking_logged_out .sg-biz-cta--b2b {
display: none !important;
}
/* Safety: B2C users see Guest CTA */
.b2bking_b2c_user .sg-biz-cta--guest {
display: flex !important;
}
.b2bking_b2c_user .sg-biz-cta--b2b {
display: none !important;
}
/* SG — Proof chips (hero pills) */
.sg-chip {
display: inline-flex;
align-items: center;
justify-content: center;
height: 28px; /* locks pill height */
padding: 0 12px; /* horizontal only */
border-radius: 999px;
background: #EAF4F7;
color: #237B94;
font-weight: 600;
font-size: 12px;
line-height: 1;
letter-spacing: 0.01em;
}
/* ============================================
SG — REMOVE ALL BORDERS / BACKGROUND / PADDING
FROM ELEMENTOR MENU CART WIDGET
============================================ */
/* Core cart toggle reset */
.elementor-menu-cart__toggle,
.elementor-menu-cart__toggle button,
.elementor-menu-cart__toggle .elementor-button,
.elementor-menu-cart__toggle .elementor-button-link {
border: none !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
outline: none !important;
}
/* Remove borders/background from icon container */
.elementor-menu-cart__toggle svg,
.elementor-menu-cart__toggle i {
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
/* Force-reset Elementor default button styling */
.elementor-menu-cart__toggle.elementor-button {
border: 0 !important;
background: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
outline: none !important;
}
/* Extra hard reset for any remaining styles */
.elementor-menu-cart__toggle .elementor-button {
border: none !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
outline: none !important;
}
/* =========================================================
SG — ICONIC SWATCHES (TEXT-ONLY)
- Styles only TEXT swatches (e.g., Size)
- Leaves COLOR / IMAGE swatches completely default
- Tablet Portrait: 3 per row
- Mobile: 2 per row
========================================================= */
/* 1) Clean variation table */
table.variations,
table.variations th,
table.variations td,
table.variations tr,
.woocommerce div.product form.cart table.variations {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* 2) Labels */
strong.iconic-was-attr-label-text,
.variations th.label,
.variations label strong {
font-family: inherit !important;
font-weight: 500 !important;
color: #111827 !important;
font-size: 16px !important;
text-transform: none !important;
}
/* 3) Chosen value text */
span.iconic-was-chosen-attribute {
font-weight: 400 !important;
color: #9CA3AF !important;
font-size: 15px !important;
}
/* 4) Clear link */
.reset_variations,
a.reset_variations {
color: #237B94 !important;
font-size: 12px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
text-decoration: none !important;
}
.reset_variations:hover,
a.reset_variations:hover {
color: #F19226 !important;
}
/* =========================================================
TEXT SWATCHES ONLY (Iconic)
========================================================= */
/* Text swatch wrapper: kill horizontal scroll behavior */
.variations_form .iconic-was-swatches--text-swatch {
overflow-x: visible !important;
white-space: normal !important;
margin-top: 8px !important;
}
/* Text swatch base */
.variations_form .iconic-was-swatches--text-swatch .iconic-was-swatch {
border: 1px solid #E5EEF3 !important;
border-radius: 6px !important;
background: transparent !important;
box-shadow: none !important;
box-sizing: border-box !important;
min-height: 44px !important;
padding: 10px 12px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
line-height: 1.2 !important;
}
/* Hover */
.variations_form .iconic-was-swatches--text-swatch .iconic-was-swatch:hover {
border-color: #237B94 !important;
}
/* Selected */
.variations_form .iconic-was-swatches--text-swatch .iconic-was-swatch--selected {
background-color: #237B94 !important;
border-color: #237B94 !important;
color: #FFFFFF !important;
}
/* Tablet Portrait — 3 per row (text swatches only) */
@media (min-width: 768px) and (max-width: 900px) {
.variations_form .iconic-was-swatches--text-swatch {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 12px !important;
}
}
/* Mobile — 2 per row (text swatches only) */
@media (max-width: 767px) {
.variations_form .iconic-was-swatches--text-swatch {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
}
/* B2BKING: UNIFIED PRICE & AVAILABILITY STYLING */
/* 1. Price: Primary charcoal at a calm 500 weight */
.b2bking_price_container,
.price .amount,
.price ins .amount {
color: #111827 !important; /* Primary Text */
font-weight: 500 !important;
font-size: 24px !important;
display: inline-block;
margin-bottom: 5px;
}
/* 2. Stock Status: Muted grey for all availability text */
.stock.in-stock,
.stock.available-on-backorder,
.b2bking_stock_status_container,
.available-on-backorder {
color: #4B5563 !important; /* Muted Text */
font-size: 14px !important;
font-weight: 400 !important;
font-style: normal !important; /* Removed italic for a cleaner look */
margin-top: 4px;
display: block;
}
/* 3. Status Accent: Subtle teal bullet for "In Stock" */
.stock.in-stock::before {
content: "• ";
color: #237B94; /* Secondary Teal */
font-weight: 900;
padding-right: 4px;
}
/* Stock status typography */
.stock.in-stock,
.stock.available-on-backorder {
font-family: 'Inter', -apple-system, sans-serif !important;
margin-top: 8px;
margin-bottom: 0;
}
/* Backorder — amber instead of teal */
.stock.available-on-backorder::before {
content: "• ";
color: #D97706 !important;
font-weight: 900;
padding-right: 4px;
}
.stock.available-on-backorder {
color: #92400E !important;
}
/* Space between stock status and Add to Cart */
.single-product .stock {
margin-top: 12px;
margin-bottom: 4px;
}
/* PRODUCT META: CLEAN SPEC ALIGNMENT (NO DIVIDER) */
/* 1. Container: Remove the top line and increase breathing room */
.product_meta {
border-top: none !important; /* Removes the line above Item Number */
padding-top: 10px;
margin-top: 25px;
font-size: 13px !important;
line-height: 1.6;
}
/* 2. Labels: Muted and light (e.g., ITEM NUMBER, PRODUCT TYPES) */
.product_meta .sku_wrapper,
.product_meta .posted_in {
display: block;
color: #9CA3AF !important; /* Muted Grey */
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 2px;
}
/* 3. Data Values (The actual SKU and Category links) */
.product_meta span.sku,
.product_meta a {
color: #374151 !important; /* Secondary Text */
font-weight: 400;
text-transform: none;
letter-spacing: normal;
}
/* 4. Link Styling: Technical Teal for product types */
.product_meta a {
color: #237B94 !important; /* Secondary Teal */
text-decoration: none;
transition: color 0.2s ease;
}
.product_meta a:hover {
color: #F19226 !important; /* Primary Orange hover */
}
/* PRODUCT PAGE: QUANTITY SELECTOR WITH NAVIGATION ARROWS */
/* 1. Target the main quantity input field */
.woocommerce .quantity .qty,
.woocommerce-page .quantity .qty,
.quantity input.qty {
width: 70px !important; /* Slightly wider to accommodate arrows */
height: 44px !important; /* Matches 'Add to Cart' height */
border: 1px solid #E5EEF3 !important; /* Your Border Light color */
border-radius: 4px !important;
background-color: #F9FAFB !important; /* Subtle grey wash */
color: #374151 !important; /* Secondary Text */
font-weight: 500 !important;
font-size: 16px !important;
text-align: left !important; /* Shift text left to make room for arrows */
padding-left: 10px !important;
outline: none !important;
/* Re-enable standard browser spinners */
appearance: auto !important;
-webkit-appearance: number-input !important;
-moz-appearance: number-input !important;
}
/* 2. Ensure arrows are visible on all browsers */
.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button {
-webkit-appearance: inner-spin-button !important;
opacity: 1 !important;
}
/* 3. Hover and Focus states */
.quantity input.qty:hover,
.quantity input.qty:focus {
border-color: #237B94 !important; /* Secondary Teal on interaction */
background-color: #ffffff !important;
}
/* Fix for Product Card Price Typography */
.sg-price-fix,
.sg-price-fix .woocommerce-Price-amount,
.sg-price-fix .woocommerce-Price-currencySymbol {
font-family: 'Inter', sans-serif !important;
font-weight: 600 !important;
line-height: 1.2 !important;
}
/* Responsive Pricing Scale */
@media (min-width: 1440px) {
.sg-price-fix { font-size: 20px !important; }
}
@media (max-width: 1024px) {
.sg-price-fix { font-size: 18px !important; }
}
@media (max-width: 767px) {
.sg-price-fix { font-size: 16px !important; }
}
/* =========================================================
SG — SIZE CHART TAB PANEL IS AN (RESET LINK STYLES)
Elementor Tabs sometimes render panel as when href exists
Your wrapper class: .sg-sizechart-window
========================================================= */
/* Stop theme/global link styling from hijacking the whole chart panel */
a.sg-sizechart-window,
a.sg-sizechart-window:visited,
a.sg-sizechart-window:hover,
a.sg-sizechart-window:active {
color: inherit !important;
font-weight: inherit !important;
text-decoration: none !important;
}
/* Most important: prevent rules like "a * { ... }" from changing everything inside */
a.sg-sizechart-window * {
color: inherit !important;
font-weight: inherit !important;
text-decoration: none !important;
}
/* Make sure table text follows your global body color */
a.sg-sizechart-window .yith-wcpsc-product-table-wrapper,
a.sg-sizechart-window .yith-wcpsc-product-table-wrapper * {
color: #374151 !important; /* body */
font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
font-weight: 400 !important;
}
/* Keep the actual table headers looking like headers */
a.sg-sizechart-window .yith-wcpsc-product-table thead th {
color: #111827 !important; /* heading */
font-weight: 600 !important;
text-decoration: none !important;
}
/* If your theme underlines links on hover, kill it */
a.sg-sizechart-window:hover,
a.sg-sizechart-window:hover * {
text-decoration: none !important;
}
/* -----------------------------------------------------------
DYNAMIC FLOOR TYPE BADGES (Enlarged Version)
Styling for "Hard Floor Safe" and "Carpet Friendly Slide".
----------------------------------------------------------- */
.sg-badge {
display: inline-block;
/* Increased padding for a more substantial look */
padding: 8px 16px;
font-family: 'Inter', sans-serif;
font-weight: 800; /* Extra bold for authority */
/* Increased from 10px to 13px for better readability */
font-size: 13px;
/* Tightened slightly for better balance at larger size */
letter-spacing: 1px;
border-radius: 6px;
text-transform: uppercase;
margin-bottom: 16px;
/* Ensures badges look sharp on all screens */
line-height: 1;
transition: all 0.3s ease;
}
/* Hard Floor Safe - Neutral Engineered Look for Glides */
.badge-hard {
background-color: #F4F4F4;
color: #1A1A1A;
/* Thicker border for the larger badge */
border: 2px solid #D1D5DB;
}
/* Carpet & Rug Friendly - Brand Teal Accents for Slides */
.badge-soft {
background-color: #EAF2F4;
color: #237B94;
/* Thicker border to match brand weight */
border: 2px solid #237B94;
}
/* Optional: Subtle hover effect to keep the "Interactive" feel */
.sg-badge:hover {
transform: scale(1.03);
}
/* ==========================================
SG — Pain Cards (Styling Only: no height equalizing)
========================================== */
/* 1. Base Card Styling */
.pain-card {
background-color: #ffffff !important;
border: 1px solid #eeeeee !important; /* Subtle resting border */
border-radius: 4px !important;
padding: 40px 30px !important;
transition: all 0.3s ease-in-out !important;
}
/* 2. Icon Spacing & Neutral State */
.pain-card .elementor-widget-image,
.pain-card .elementor-widget-icon,
.pain-card svg {
display: block !important;
margin: 0 auto 10px auto !important; /* Gap to Title */
width: 40px !important;
fill: #888888 !important; /* Initial professional grey */
transition: fill 0.3s ease;
}
/* 3. Heading Spacing */
.pain-card .elementor-heading-title {
text-align: center !important;
margin: 0 0 12px 0 !important; /* Gap to Bullets */
color: #111827 !important; /* SG heading color */
font-weight: 600 !important;
line-height: 1.2 !important;
}
/* 4. Text Editor */
.pain-card .elementor-text-editor {
width: 100% !important;
text-align: left !important;
color: #374151 !important; /* SG body text */
font-size: 15px !important;
}
/* 5. Bullet Point Styling */
.pain-card ul {
list-style-type: none !important;
padding-left: 0 !important;
margin: 0 !important;
}
.pain-card li {
position: relative;
padding-left: 20px;
margin-bottom: 8px;
line-height: 1.5;
color: #374151 !important;
}
.pain-card li::before {
content: "•";
position: absolute;
left: 0;
font-weight: 700;
color: #888888; /* Initial grey bullets */
transition: color 0.3s ease;
}
/* 6. Desktop Hover Logic (Grey -> Red) */
@media (min-width: 1025px) {
.pain-card:hover {
border-color: #D9534F !important; /* Border turns Red */
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(0,0,0,0.06) !important;
}
/* Transition Icon and Bullet Dots to Red on Hover */
.pain-card:hover svg,
.pain-card:hover li::before {
fill: #D9534F !important;
color: #D9534F !important;
}
}
/* 7. Mobile/Tablet Logic (Icons & Bullets stay Red) */
@media (max-width: 1024px) {
.pain-card {
border-color: #e0e0e0 !important;
}
.pain-card svg,
.pain-card li::before {
fill: #D9534F !important;
color: #D9534F !important;
}
}
/* Truncate Cart Product Names to 3 Lines */
.elementor-menu-cart__product-name,
.elementor-menu-cart__product-name a {
display: -webkit-box !important;
-webkit-line-clamp: 3 !important; /* Increased to 3 lines */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.4;
max-height: 4.2em !important; /* Calculation: 1.4 line-height * 3 lines */
}
/* ============================================================
1) DESKTOP STICKY SIDEBAR
============================================================ */
@media (min-width: 1025px) {
.sg-sticky-sidebar {
position: -webkit-sticky !important;
position: sticky !important;
top: 100px !important;
z-index: 100;
height: fit-content;
}
}
/* ============================================================
2) ACCORDION HEADERS (DESKTOP + MOBILE)
============================================================ */
.facetwp-facet-label, .facet-accordion h3, .facet-wrap > h3, .facetwp-flyout-content h3 {
position: relative !important;
display: block !important;
border-bottom: 1px solid #ececec !important;
padding: 12px 35px 12px 0 !important;
margin: 0 0 10px 0 !important;
color: #00334e !important;
font-size: 16px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
cursor: pointer !important;
transition: background-color 0.2s ease, color 0.2s ease !important;
}
.facet-wrap > h3.has-selections,
.facetwp-flyout .flyout-row > h3.has-selections {
background-color: #f0f8fa !important;
color: #237B94 !important;
}
.facetwp-facet-label::after, .facet-accordion h3::after, .facet-wrap > h3::after, .facetwp-flyout-content h3::after {
content: '\2b' !important;
position: absolute !important;
right: 10px !important;
top: 50% !important;
transform: translateY(-50%) !important;
transition: transform 0.2s ease !important;
}
/* FIXED: Only target accordion h3s, not .facetwp-flyout.active */
.facet-wrap > h3.active::after,
.facetwp-flyout .flyout-row > h3.active::after {
content: '\2212' !important;
transform: translateY(-50%) rotate(0deg) !important;
}
.facet-wrap > h3 .selection-count,
.facetwp-flyout .flyout-row > h3 .selection-count {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 22px !important;
height: 22px !important;
padding: 0 6px !important;
margin-left: 8px !important;
background: #237B94 !important;
color: #ffffff !important;
font-size: 12px !important;
font-weight: 700 !important;
border-radius: 999px !important;
line-height: 1 !important;
}
/* ============================================================
3) DESKTOP ACCORDION
============================================================ */
@media (min-width: 1025px) {
.facet-wrap > h3.active ~ .facetwp-facet {
display: block !important;
}
}
/* ============================================================
4) MOBILE FLYOUT ACCORDION
============================================================ */
@media (max-width: 1024px) {
.facetwp-flyout .flyout-item {
display: none;
}
.facetwp-flyout .flyout-row > h3.active ~ .flyout-item {
display: block !important;
}
}
/* ============================================================
5) ALWAYS VISIBLE: Pager, Reset, Selections
============================================================ */
.facetwp-facet.facetwp-type-pager,
.facetwp-facet.facetwp-type-reset,
.facetwp-selections,
.name-sg_reset_all .flyout-item,
[data-name="reset_all"] .facetwp-facet {
display: block !important;
}
[class*="reset_all"] h3,
[class*="reset_all"] .facetwp-facet-label,
.facetwp-type-reset h3 {
display: none !important;
border: none !important;
}
/* ============================================================
6) SCROLLABLE FACETS
============================================================ */
[data-name="sg_floor_type"],
[data-name="sg_furniture_type"],
[data-name="sg_size"] {
max-height: 260px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding-right: 8px !important;
}
[data-name="sg_floor_type"]::-webkit-scrollbar,
[data-name="sg_furniture_type"]::-webkit-scrollbar,
[data-name="sg_size"]::-webkit-scrollbar {
width: 6px;
}
[data-name="sg_floor_type"]::-webkit-scrollbar-track,
[data-name="sg_furniture_type"]::-webkit-scrollbar-track,
[data-name="sg_size"]::-webkit-scrollbar-track {
background: #f4f4f4;
border-radius: 3px;
}
[data-name="sg_floor_type"]::-webkit-scrollbar-thumb,
[data-name="sg_furniture_type"]::-webkit-scrollbar-thumb,
[data-name="sg_size"]::-webkit-scrollbar-thumb {
background: #c4c4c4;
border-radius: 3px;
}
[data-name="sg_floor_type"]::-webkit-scrollbar-thumb:hover,
[data-name="sg_furniture_type"]::-webkit-scrollbar-thumb:hover,
[data-name="sg_size"]::-webkit-scrollbar-thumb:hover {
background: #999;
}
.sg-custom-search {
width: 100% !important;
border: 1px solid #ececec !important;
border-radius: 6px !important;
padding: 10px 12px !important;
margin-bottom: 12px !important;
background: #ffffff !important;
font-size: 14px !important;
color: #00334e !important;
outline: none !important;
transition: border-color 0.2s ease !important;
}
.sg-custom-search:focus {
border-color: #237B94 !important;
}
@media (max-width: 1024px) {
.facetwp-flyout .sg-custom-search {
margin: 0 0 12px 0 !important;
}
.facetwp-flyout [data-name="sg_floor_type"],
.facetwp-flyout [data-name="sg_furniture_type"],
.facetwp-flyout [data-name="sg_size"] {
max-height: 200px !important;
}
}
/* ============================================================
7) USER SELECTION PILLS (desktop + flyout)
============================================================ */
.facetwp-selections .facetwp-selection-label { display: none !important; }
.facetwp-selections {
display: flex !important;
flex-wrap: wrap !important;
gap: 20px 12px !important;
margin: 20px 0 30px 0 !important;
width: 100% !important;
}
.facetwp-selection-value {
background: #f4f4f4 !important;
color: #00334e !important;
padding: 10px 18px !important;
border-radius: 999px !important;
font-size: 14px !important;
font-weight: 600 !important;
border: 1px solid #237B94 !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
white-space: nowrap !important;
margin-bottom: 5px !important;
transition: all 0.2s ease !important;
}
.facetwp-selection-value:hover {
background: #237B94 !important;
color: #ffffff !important;
}
.facetwp-selection-value:after {
content: "\00d7" !important;
margin-left: 12px !important;
font-size: 20px !important;
color: #237B94 !important;
line-height: 1 !important;
display: inline-block !important;
transition: color 0.2s ease !important;
}
.facetwp-selection-value:hover:after {
color: #ffffff !important;
}
@media (max-width: 1024px) {
.facetwp-flyout .sg-flyout-selections {
padding: 10px 0 14px 0 !important;
border-bottom: 1px solid #ececec !important;
margin-bottom: 12px !important;
display: none;
}
.facetwp-flyout .sg-flyout-pending {
display: flex !important;
flex-wrap: wrap !important;
gap: 12px !important;
}
}
/* ============================================================
8) MOBILE FLYOUT BUTTON + CLOSE ICON
============================================================ */
@media (max-width: 1024px) {
.facetwp-flyout-open {
position: fixed !important;
bottom: 25px !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 9999 !important;
background: #237B94 !important;
padding: 10px 25px !important;
border-radius: 50px !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}
.facetwp-flyout-open button, .facetwp-flyout-open .elementor-button {
background: transparent !important;
color: #ffffff !important;
border: none !important;
padding: 0 !important;
}
/* Close X — top right, no stray ::after */
.facetwp-flyout-close {
position: absolute !important;
font-size: 40px !important;
width: 44px !important;
height: 44px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
top: 10px !important;
right: 15px !important;
color: #00334e !important;
cursor: pointer !important;
z-index: 100 !important;
}
.facetwp-flyout-close::after,
.facetwp-flyout-close::before {
content: none !important;
display: none !important;
}
/* Push content below the X button */
.facetwp-flyout .facetwp-flyout-content {
padding-top: 60px !important;
}
/* Kill stray ::after on flyout wrapper */
.facetwp-flyout::after,
.facetwp-flyout::before,
.facetwp-flyout.active::after,
.facetwp-flyout.active::before {
content: none !important;
display: none !important;
}
}
/* ============================================================
9) FLYOUT APPLY + RESET BAR (MOBILE)
============================================================ */
@media (max-width: 1024px) {
.facetwp-flyout .facetwp-flyout-content { padding-bottom: 110px !important; }
.facetwp-flyout .sg-fwp-controls {
position: sticky !important;
bottom: 0 !important;
left: 0;
right: 0;
z-index: 99999 !important;
display: flex !important;
gap: 10px !important;
padding: 12px 16px !important;
background: #ffffff !important;
border-top: 1px solid #ececec !important;
}
.facetwp-flyout .sg-fwp-controls .sg-fwp-reset {
flex: 1 1 auto !important;
min-height: 48px !important;
border-radius: 999px !important;
border: 2px solid #237B94 !important;
background: transparent !important;
color: #237B94 !important;
font-family: Inter, system-ui, sans-serif !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
}
.facetwp-flyout .sg-fwp-controls .sg-fwp-reset:hover {
background: #f0f8fa !important;
}
.facetwp-flyout .sg-fwp-controls .sg-fwp-apply {
flex: 1 1 auto !important;
min-height: 48px !important;
border-radius: 999px !important;
border: 0 !important;
background: #237B94 !important;
color: #ffffff !important;
font-family: Inter, system-ui, sans-serif !important;
font-weight: 600 !important;
cursor: pointer !important;
box-shadow: 0 6px 18px rgba(0,0,0,0.12) !important;
transition: all 0.2s ease !important;
}
.facetwp-flyout .sg-fwp-controls .sg-fwp-apply:hover {
background: #1d6478 !important;
}
}
/* ============================================================
10) DESKTOP: RESET + LOAD MORE BUTTONS
============================================================ */
@media (min-width: 1025px) {
.facetwp-reset {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 48px !important;
padding: 0 20px !important;
border-radius: 999px !important;
border: 2px solid #237B94 !important;
background: transparent !important;
color: #237B94 !important;
font-family: Inter, system-ui, sans-serif !important;
font-weight: 600 !important;
font-size: 15px !important;
line-height: 1 !important;
text-decoration: none !important;
box-shadow: none !important;
cursor: pointer !important;
margin: 0 !important;
transition: all 0.2s ease !important;
}
.facetwp-reset:hover {
background: #f0f8fa !important;
}
.facetwp-reset::after { display: none !important; content: none !important; }
.facetwp-load-more {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 48px !important;
padding: 0 22px !important;
border-radius: 999px !important;
border: 0 !important;
background: #237B94 !important;
color: #ffffff !important;
font-family: Inter, system-ui, sans-serif !important;
font-weight: 600 !important;
font-size: 15px !important;
line-height: 1 !important;
cursor: pointer !important;
box-shadow: 0 6px 18px rgba(0,0,0,.12) !important;
transition: all 0.2s ease !important;
}
.facetwp-load-more:hover {
background: #1d6478 !important;
}
}
/* ============================================================
Superior Glides — Category Page CSS
sg-category.css | Furniture Glides category page
============================================================ */
/* ---- Design Tokens --------------------------------------- */
.sg-category-page {
--sg-teal: #237B94;
--sg-teal-dark: #1a5e70;
--sg-teal-light: #e8f4f7;
--sg-teal-xlight: #f2f9fb;
--sg-orange: #F19226;
--sg-orange-dark: #d97d18;
--sg-orange-light: #fdf3e7;
--sg-black: #0f1923;
--sg-ink: #1e2a35;
--sg-grey-dark: #374151;
--sg-grey: #6b7280;
--sg-grey-light: #9ca3af;
--sg-border: #e5e7eb;
--sg-border-light: #f3f4f6;
--sg-bg: #f8fafc;
--sg-white: #ffffff;
--sg-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--sg-space-xs: 0.5rem;
--sg-space-sm: 1rem;
--sg-space-md: 2rem;
--sg-space-lg: 3rem;
--sg-space-xl: 5rem;
--sg-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
--sg-shadow: 0 4px 12px rgba(0,0,0,0.07), 0 2px 6px rgba(0,0,0,0.04);
--sg-shadow-md: 0 10px 30px rgba(0,0,0,0.09), 0 4px 12px rgba(0,0,0,0.05);
--sg-shadow-lg: 0 20px 50px rgba(0,0,0,0.12), 0 8px 20px rgba(0,0,0,0.06);
--sg-radius-sm: 6px;
--sg-radius: 12px;
--sg-radius-lg: 20px;
font-family: var(--sg-font);
font-size: 1rem;
line-height: 1.7;
color: var(--sg-ink);
background: var(--sg-white);
}
.sg-category-page *,
.sg-category-page *::before,
.sg-category-page *::after {
box-sizing: border-box;
}
/* ============================================================
HERO — centered, smaller, cleaner
============================================================ */
.sg-cat-hero {
background: linear-gradient(135deg, var(--sg-black) 0%, #1a2d3d 50%, #1e3a47 100%);
padding: 72px 40px 64px;
position: relative;
overflow: hidden;
text-align: center;
}
.sg-cat-hero::before {
content: '';
position: absolute;
top: -40%;
right: -10%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(35,123,148,0.2) 0%, transparent 65%);
pointer-events: none;
}
.sg-cat-hero::after {
content: '';
position: absolute;
bottom: -20%;
left: 5%;
width: 350px;
height: 350px;
background: radial-gradient(circle, rgba(241,146,38,0.08) 0%, transparent 65%);
pointer-events: none;
}
/* Inner wrapper constrains width and centers */
.sg-cat-hero-inner {
max-width: 680px;
margin: 0 auto;
position: relative;
}
.sg-cat-h1 {
font-size: clamp(2rem, 4.5vw, 3rem);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.1;
color: #ffffff !important;
margin: 0 0 1rem 0;
}
/* Teal–orange underline bar */
.sg-cat-h1::after {
content: '';
display: block;
width: 56px;
height: 4px;
background: linear-gradient(90deg, var(--sg-teal), var(--sg-orange));
border-radius: 2px;
margin: 1rem auto 0;
}
.sg-cat-lead {
font-size: 1.05rem;
line-height: 1.75;
color: rgba(255,255,255,0.78);
margin: 0 0 2rem 0;
}
.sg-cat-lead strong {
color: rgba(255,255,255,0.95);
font-weight: 600;
}
.sg-cat-cta {
display: flex;
justify-content: center;
}
.sg-cat-cta a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--sg-teal);
color: var(--sg-white) !important;
text-decoration: none;
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.01em;
padding: 13px 26px;
border-radius: var(--sg-radius-sm);
transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 4px 14px rgba(35,123,148,0.4);
}
.sg-cat-cta a:hover {
background: var(--sg-teal-dark);
color: var(--sg-white) !important;
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(35,123,148,0.5);
text-decoration: none;
}
/* ============================================================
SECTION WRAPPER
============================================================ */
.sg-cat-section {
padding: var(--sg-space-xl) 60px;
}
.sg-cat-section:nth-child(even) {
background: var(--sg-bg);
}
.sg-cat-section-header {
text-align: center;
margin-bottom: var(--sg-space-md);
}
/* ============================================================
TYPOGRAPHY
============================================================ */
.sg-cat-h2 {
font-size: clamp(1.75rem, 3vw, 2.25rem);
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.2;
color: var(--sg-black);
margin: 0 0 0.75rem 0;
}
/* Teal–orange underline on h2 */
.sg-cat-section-header .sg-cat-h2::after {
content: '';
display: block;
width: 48px;
height: 3px;
background: linear-gradient(90deg, var(--sg-teal), var(--sg-orange));
border-radius: 2px;
margin: 0.6rem auto 0;
}
.sg-cat-h3 {
font-size: 1.15rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--sg-ink);
margin: 0 0 0.75rem 0;
}
.sg-cat-h4 {
font-size: 0.85rem;
font-weight: 700;
color: var(--sg-teal-dark);
margin: 0 0 0.75rem 0;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.sg-cat-h4 a {
color: inherit;
text-decoration: none;
transition: color 0.2s;
}
.sg-cat-h4 a:hover {
color: var(--sg-teal);
text-decoration: underline;
}
.sg-cat-intro {
font-size: 1rem;
color: var(--sg-grey-dark);
line-height: 1.75;
max-width: 680px;
margin: 0 auto;
}
.sg-cat-text-center { text-align: center; }
/* ============================================================
MOUNTING METHOD CARDS (3-up grid)
============================================================ */
.sg-cat-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
align-items: stretch;
}
.sg-cat-card {
background: var(--sg-white);
border: 1px solid var(--sg-border);
border-radius: var(--sg-radius);
padding: 1.75rem;
box-shadow: var(--sg-shadow-sm);
transition: box-shadow 0.2s ease, transform 0.2s ease;
display: flex;
flex-direction: column;
}
.sg-cat-card:hover {
box-shadow: var(--sg-shadow-md);
transform: translateY(-3px);
}
/* Featured (middle) card */
.sg-cat-card--featured {
border-color: var(--sg-teal);
position: relative;
padding-top: 2.5rem;
}
.sg-cat-card--featured::before {
content: 'MOST POPULAR';
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background: var(--sg-teal);
color: var(--sg-white);
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.12em;
padding: 4px 14px;
border-radius: 20px;
white-space: nowrap;
}
/* Badge pill */
.sg-cat-badge {
display: inline-block;
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
background: var(--sg-teal-xlight);
color: var(--sg-teal-dark);
border: 1px solid rgba(35,123,148,0.2);
border-radius: 4px;
padding: 3px 10px;
margin-bottom: 0.875rem;
}
.sg-cat-card p {
font-size: 0.92rem;
color: var(--sg-grey-dark);
line-height: 1.65;
margin: 0 0 1rem 0;
}
.sg-cat-card ul {
margin: 0 0 0 0;
padding: 0;
list-style: none;
flex: 1;
}
.sg-cat-card ul li {
font-size: 0.88rem;
color: var(--sg-grey-dark);
padding: 0.3rem 0 0.3rem 1.2rem;
position: relative;
border-bottom: 1px solid var(--sg-border-light);
}
.sg-cat-card ul li:last-child {
border-bottom: none;
}
.sg-cat-card ul li::before {
content: '→';
position: absolute;
left: 0;
color: var(--sg-teal);
font-size: 0.75rem;
top: 0.38rem;
}
/* Card footer — pushes button to bottom, aligns across all 3 cards */
.sg-cat-card-footer {
margin-top: 1.25rem;
padding-top: 1rem;
border-top: 1px solid var(--sg-border-light);
}
.sg-cat-card-btn {
display: inline-block;
color: var(--sg-teal);
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
transition: color 0.2s ease;
padding: 0.35rem 0.75rem;
border: 1px solid var(--sg-teal);
border-radius: var(--sg-radius-sm);
background: transparent;
transition: background 0.18s ease, color 0.18s ease;
}
.sg-cat-card-btn:hover {
background: var(--sg-teal);
color: var(--sg-white) !important;
text-decoration: none;
}
/* ============================================================
SUBSECTION (within nail-on / self-adhesive sections)
============================================================ */
.sg-cat-subsection {
border: 1px solid var(--sg-border);
border-radius: var(--sg-radius);
overflow: hidden;
background: var(--sg-white);
box-shadow: var(--sg-shadow-sm);
}
.sg-cat-subsection-header {
background: var(--sg-bg);
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--sg-border);
}
.sg-cat-subsection-body {
padding: 1.5rem;
}
.sg-cat-subsection-body > p {
font-size: 0.92rem;
color: var(--sg-grey-dark);
line-height: 1.65;
margin: 0 0 0.5rem 0;
}
/* ============================================================
SIZE TILES (showcase)
============================================================ */
.sg-cat-showcase {
display: flex;
flex-wrap: wrap;
gap: 0.625rem;
margin-top: 0.75rem;
}
.sg-cat-size-tile {
background: var(--sg-bg);
border: 1px solid var(--sg-border);
border-radius: var(--sg-radius-sm);
padding: 0.75rem 1rem;
min-width: 160px;
flex: 1 1 160px;
box-shadow: var(--sg-shadow-sm);
}
.sg-cat-size-title {
display: block;
font-size: 0.9rem;
font-weight: 700;
color: var(--sg-ink);
font-family: 'SF Mono', 'Consolas', monospace;
letter-spacing: -0.01em;
margin: 0;
}
.sg-cat-size-desc {
display: block;
font-size: 0.78rem;
color: var(--sg-grey);
line-height: 1.45;
margin-top: 0.25rem;
}
/* Spacing helpers */
.sg-cat-mt-md { margin-top: 1.5rem; }
.sg-cat-mt-lg { margin-top: 2rem; }
/* ============================================================
SIZE REFERENCE TABLE
============================================================ */
.sg-cat-table-wrap {
overflow-x: auto;
border-radius: var(--sg-radius);
border: 1px solid var(--sg-border);
box-shadow: var(--sg-shadow-sm);
}
.sg-cat-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.sg-cat-table thead tr {
background: var(--sg-teal);
color: var(--sg-white);
}
.sg-cat-table th {
padding: 13px 18px;
text-align: left;
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.sg-cat-table tbody tr {
border-bottom: 1px dashed var(--sg-border);
transition: background 0.15s ease;
}
.sg-cat-table tbody tr:last-child {
border-bottom: none;
}
.sg-cat-table tbody tr:hover {
background: var(--sg-teal-xlight);
}
.sg-cat-table tbody tr:nth-child(even) {
background: var(--sg-bg);
}
.sg-cat-table tbody tr:nth-child(even):hover {
background: var(--sg-teal-xlight);
}
.sg-cat-table td {
padding: 12px 18px;
color: var(--sg-grey-dark);
vertical-align: middle;
}
.sg-cat-table td:first-child {
font-weight: 600;
color: var(--sg-ink);
font-family: 'SF Mono', 'Consolas', monospace;
font-size: 0.85rem;
}
/* Links inside table */
.sg-cat-table td a {
color: var(--sg-teal);
font-weight: 600;
text-decoration: none;
font-size: 0.85rem;
}
.sg-cat-table td a:hover {
color: var(--sg-teal-dark);
text-decoration: underline;
}
/* ============================================================
WHERE THESE GLIDES WORK — icon + title centered
============================================================ */
.sg-cat-apps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-top: var(--sg-space-md);
}
.sg-cat-app-card {
background: var(--sg-white);
border: 1px solid var(--sg-border);
border-radius: var(--sg-radius);
padding: 1.5rem 1.25rem;
text-align: center;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
box-shadow: var(--sg-shadow-sm);
display: flex;
flex-direction: column;
align-items: center;
}
.sg-cat-app-card:hover {
border-color: var(--sg-teal);
box-shadow: var(--sg-shadow);
transform: translateY(-3px);
}
.sg-cat-app-icon {
font-size: 1.75rem;
margin-bottom: 0.625rem;
display: block;
text-align: center;
}
.sg-cat-app-title {
font-size: 0.9rem;
font-weight: 700;
color: var(--sg-ink);
margin: 0 0 0.35rem 0;
text-align: center;
}
.sg-cat-app-desc {
font-size: 0.83rem;
color: var(--sg-grey);
line-height: 1.55;
text-align: center;
}
/* ============================================================
FLOOR COMPATIBILITY GRID
============================================================ */
.sg-cat-floors-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-top: var(--sg-space-md);
}
.sg-cat-floor-item {
display: flex;
align-items: center;
gap: 0.875rem;
background: var(--sg-white);
border: 1px solid var(--sg-border);
border-radius: var(--sg-radius-sm);
padding: 0.875rem 1.125rem;
transition: border-color 0.2s, background 0.2s;
}
.sg-cat-floor-item:hover {
border-color: var(--sg-teal);
background: var(--sg-teal-xlight);
}
.sg-cat-floor-check {
flex-shrink: 0;
width: 22px;
height: 22px;
background: var(--sg-teal);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--sg-white);
font-size: 0.7rem;
font-weight: 800;
}
.sg-cat-floor-name {
font-size: 0.88rem;
font-weight: 600;
color: var(--sg-ink);
}
/* ============================================================
COMPARISON SECTION
============================================================ */
.sg-cat-compare-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
margin-top: var(--sg-space-md);
}
.sg-cat-compare-card {
background: var(--sg-white);
border: 1px solid var(--sg-border);
border-radius: var(--sg-radius);
padding: 1.75rem;
box-shadow: var(--sg-shadow-sm);
position: relative;
overflow: hidden;
}
.sg-cat-compare-card::after {
content: 'vs. Ours';
position: absolute;
top: 1.25rem;
right: 1.25rem;
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--sg-orange);
background: var(--sg-orange-light);
border: 1px solid rgba(241,146,38,0.25);
padding: 2px 8px;
border-radius: 4px;
}
.sg-cat-compare-title {
font-size: 1rem;
font-weight: 700;
color: var(--sg-ink);
margin: 0 0 0.75rem 0;
}
.sg-cat-compare-desc {
font-size: 0.88rem;
color: var(--sg-grey-dark);
line-height: 1.65;
}
/* ============================================================
GUIDES AND RESOURCES — fixed 3-column equal-height grid
============================================================ */
.sg-cat-resources-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
margin-top: var(--sg-space-md);
align-items: stretch;
}
.sg-cat-resource-card {
background: var(--sg-white);
border: 1px solid var(--sg-border);
border-radius: var(--sg-radius);
padding: 1.75rem;
display: flex;
flex-direction: column;
position: relative;
transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
box-shadow: var(--sg-shadow-sm);
}
.sg-cat-resource-card:hover {
border-color: var(--sg-teal);
box-shadow: var(--sg-shadow-md);
transform: translateY(-3px);
}
/* Button at bottom of each resource card */
.sg-cat-resource-btn {
display: inline-block;
margin-top: 1.25rem;
padding: 0.4rem 1rem;
font-size: 0.83rem;
font-weight: 600;
color: var(--sg-teal);
background: transparent;
border: 1px solid var(--sg-teal);
border-radius: var(--sg-radius-sm);
text-decoration: none;
transition: background 0.18s ease, color 0.18s ease;
align-self: flex-start;
position: relative;
z-index: 2;
}
.sg-cat-resource-btn:hover {
background: var(--sg-teal);
color: var(--sg-white) !important;
text-decoration: none;
}
.sg-cat-resource-type {
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--sg-teal);
background: var(--sg-teal-xlight);
border: 1px solid rgba(35,123,148,0.2);
border-radius: 4px;
padding: 3px 10px;
display: inline-block;
margin-bottom: 0.875rem;
align-self: flex-start;
}
.sg-cat-resource-title {
font-size: 1rem;
font-weight: 700;
color: var(--sg-ink);
margin: 0 0 0.5rem 0;
line-height: 1.35;
}
.sg-cat-resource-desc {
font-size: 0.85rem;
color: var(--sg-grey);
line-height: 1.6;
flex: 1;
}
/* ============================================================
MISC UTILITIES
============================================================ */
.sg-cat-divider {
border: none;
border-top: 1px solid var(--sg-border);
margin: 0;
}
.sg-cat-pill {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
background: var(--sg-teal-xlight);
color: var(--sg-teal-dark);
border: 1px solid rgba(35,123,148,0.2);
border-radius: 20px;
padding: 5px 14px;
margin-bottom: 0.875rem;
}
/* ============================================================
RESPONSIVE — Tablet (≤ 1024px)
============================================================ */
@media (max-width: 1024px) {
.sg-cat-hero,
.sg-cat-section {
padding-left: 40px;
padding-right: 40px;
}
.sg-cat-grid,
.sg-cat-compare-grid,
.sg-cat-resources-grid {
grid-template-columns: repeat(2, 1fr);
}
.sg-cat-apps-grid,
.sg-cat-floors-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ============================================================
RESPONSIVE — Mobile (≤ 768px)
============================================================ */
@media (max-width: 768px) {
.sg-cat-hero {
padding: 48px 20px 44px;
text-align: center;
}
.sg-cat-hero-inner {
max-width: 100%;
}
.sg-cat-h1 {
font-size: 2rem;
}
.sg-cat-h1::after {
margin: 0.75rem auto 0;
}
.sg-cat-lead {
font-size: 0.97rem;
text-align: center;
}
.sg-cat-cta {
justify-content: center;
}
.sg-cat-section {
padding: 3rem 20px;
}
/* All grids → single column */
.sg-cat-grid,
.sg-cat-compare-grid,
.sg-cat-resources-grid,
.sg-cat-apps-grid,
.sg-cat-floors-grid {
grid-template-columns: 1fr;
}
/* Resources cards — full width, stacked cleanly on mobile */
.sg-cat-resource-card {
width: 100%;
display: flex;
flex-direction: column;
}
.sg-cat-resource-type {
align-self: flex-start;
}
/* Badge and heading centered on mounting method cards */
.sg-cat-card {
align-items: center;
text-align: center;
}
.sg-cat-card ul {
text-align: left;
width: 100%;
}
.sg-cat-card-footer {
width: 100%;
text-align: center;
}
.sg-cat-card-btn {
display: inline-block;
}
/* Featured card "Most Popular" badge still shows */
.sg-cat-card--featured::before {
font-size: 0.6rem;
}
/* Size tiles — wrap tighter on tablet */
.sg-cat-size-tile {
min-width: calc(50% - 0.3rem);
flex: 1 1 calc(50% - 0.3rem);
}
}
/* ============================================================
RESPONSIVE — Small mobile (≤ 480px)
============================================================ */
@media (max-width: 480px) {
.sg-cat-h1 {
font-size: 1.8rem;
}
/* Size tiles — full width on small mobile */
.sg-cat-size-tile {
min-width: 100%;
flex: 1 1 100%;
}
.sg-cat-subsection-body {
padding: 1rem;
}
.sg-cat-table th,
.sg-cat-table td {
padding: 10px 12px;
font-size: 0.82rem;
}
}
/* ---- Product Category Cards ---- */
.sg-product-card {
border: 2px solid #ececec !important;
border-radius: 8px !important;
background: #ffffff !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
transition: all 0.2s ease-in-out !important;
}
.sg-product-card:hover {
border-color: #237B94 !important;
box-shadow: 0 4px 16px rgba(35,123,148,0.12) !important;
transform: translateY(-2px) !important;
}
/* ---- Router show/hide ---- */
#hard-floor-options {
display: none;
}
#hard-floor-question {
display: none;
}
#hard-floor-options.active {
display: flex !important;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
/* ---- Mobile: stack all cards ---- */
@media (max-width: 767px) {
#floor-type-cards {
flex-direction: column !important;
gap: 12px !important;
}
#floor-type-cards > * {
width: 100% !important;
max-width: 100% !important;
}
#hard-floor-options.active {
flex-direction: column !important;
gap: 12px !important;
}
#hard-floor-options.active > * {
width: 100% !important;
max-width: 100% !important;
}
}
/* ---- Tablet: 3 cards fit ---- */
@media (min-width: 768px) and (max-width: 1024px) {
#hard-floor-options.active > * {
width: 30% !important;
min-width: 200px;
}
}
/* =========================================================================
SUPERIOR GLIDE — Product Page Content Styles v3
=========================================================================
Scope: .sg-product-content (WooCommerce long description)
Fonts: Inter (headings + body) · Poppins (specs/badges)
Palette matched to superiorglide.com homepage
Zero inline styles required — all styling via classes
All selectors scoped under .sg-product-content for specificity
========================================================================= */
/* --- Tokens --- */
.sg-product-content {
--sg-teal: #237B94;
--sg-teal-light: #f2f9fb;
--sg-teal-hover: #1b6275;
--sg-teal-border: rgba(35,123,148,.2);
--sg-teal-10: rgba(35,123,148,.08);
--sg-orange: #F19226;
--sg-dark: #111827;
--sg-body: #374151;
--sg-grey: #6B7280;
--sg-grey-light: #9CA3AF;
--sg-border: #ECECEC;
--sg-border-strong: #D1D5DB;
--sg-bg: #fff;
--sg-bg-neutral: #F9FAFB;
--sg-bg-good: #F0FDF4;
--sg-bg-good-border: #BBF7D0;
--sg-warn: #b45309;
--sg-shadow-sm: 0 1px 3px rgba(0,0,0,.04);
--sg-shadow: 0 2px 8px rgba(0,0,0,.06);
--sg-shadow-hover: 0 6px 20px rgba(0,0,0,.10);
--sg-radius: 8px;
--sg-radius-sm: 6px;
--sg-font: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--sg-font-spec: 'Poppins','Inter',sans-serif;
}
/* =======================================================================
CONTAINER
======================================================================= */
.sg-product-content {
font-family: var(--sg-font);
font-size: 15px;
line-height: 1.7;
color: var(--sg-body);
max-width: 960px;
margin: 0 auto;
padding: 0 1rem;
}
/* =======================================================================
SECTIONS
======================================================================= */
.sg-product-content .sg-pc-section {
margin-bottom: 2.5rem;
padding-bottom: 2.5rem;
border-bottom: 2px solid var(--sg-border);
}
.sg-product-content .sg-pc-section:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
/* =======================================================================
HERO
======================================================================= */
.sg-product-content .sg-pc-hero {
background: var(--sg-bg-neutral);
border: 1px solid var(--sg-border);
border-radius: var(--sg-radius);
padding: 2rem 2rem 1.75rem;
margin-bottom: 2.5rem;
}
/* =======================================================================
TYPOGRAPHY
======================================================================= */
.sg-product-content .sg-pc-h2 {
font-family: var(--sg-font);
font-size: 30px;
font-weight: 800;
line-height: 1.2;
color: var(--sg-dark);
margin: 0 0 1rem;
letter-spacing: -.01em;
}
.sg-product-content .sg-pc-h3 {
font-family: var(--sg-font);
font-size: 22px;
font-weight: 700;
line-height: 1.3;
color: var(--sg-dark);
margin: 0 0 .65rem;
padding-bottom: .5rem;
border-bottom: 2px solid var(--sg-teal);
display: inline-block;
}
.sg-product-content .sg-pc-h4 {
font-family: var(--sg-font);
font-size: 16px;
font-weight: 600;
line-height: 1.4;
color: var(--sg-dark);
margin: 0 0 .25rem;
}
.sg-product-content .sg-pc-h4--teal { color: var(--sg-teal); }
.sg-product-content .sg-pc-h4--warn { color: var(--sg-warn); }
.sg-product-content .sg-pc-p {
font-size: 15px;
line-height: 1.7;
color: var(--sg-body);
margin: 0 0 .75rem;
}
.sg-product-content .sg-pc-lead {
font-size: 16px;
line-height: 1.75;
color: var(--sg-body);
margin: 0 0 1rem;
}
.sg-product-content .sg-pc-lead:last-child { margin-bottom: 0; }
.sg-product-content .sg-pc-small {
font-size: 13px;
line-height: 1.6;
color: var(--sg-grey);
margin: 1.5rem 0 0;
}
/* Imperial size labels inside h4 */
.sg-product-content .sg-pc-imperial {
font-weight: 400;
color: var(--sg-grey-light);
}
/* Card body text (tight top margin + flex grow) */
.sg-product-content .sg-pc-card-body {
margin: .25rem 0 0;
flex: 1;
}
/* Card internal content push — paragraph grows, button stays at bottom */
.sg-product-content .sg-pc-card > .sg-pc-p,
.sg-product-content .sg-pc-card > .sg-pc-lead {
flex: 1;
margin: 0;
}
.sg-product-content .sg-pc-card > .sg-pc-h4 { margin: 0; }
.sg-product-content .sg-pc-card > .sg-pc-btn { margin: 0; }
/* =======================================================================
LINKS
======================================================================= */
.sg-product-content a {
color: var(--sg-teal);
text-decoration: underline;
text-decoration-color: var(--sg-teal-border);
text-underline-offset: 2px;
transition: color .15s, text-decoration-color .15s;
}
.sg-product-content a:hover {
color: var(--sg-teal-hover);
text-decoration-color: var(--sg-teal-hover);
}
.sg-product-content .sg-pc-link--inherit,
.sg-product-content .sg-pc-link--inherit:link,
.sg-product-content .sg-pc-link--inherit:visited {
color: inherit !important;
text-decoration: none !important;
}
.sg-product-content .sg-pc-link--inherit:hover {
color: var(--sg-teal) !important;
}
/* =======================================================================
GRIDS
======================================================================= */
.sg-product-content .sg-pc-grid { display: grid; gap: 1rem; }
.sg-product-content .sg-pc-grid--cols-2 { grid-template-columns: 1fr 1fr; }
.sg-product-content .sg-pc-grid--cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.sg-product-content .sg-pc-grid--split { grid-template-columns: 1fr 1fr; gap: 2rem; }
.sg-product-content .sg-pc-grid--tight { gap: .5rem; }
/* =======================================================================
CARDS — flex column, space-between for even heading/text/button spacing
======================================================================= */
.sg-product-content .sg-pc-card {
background: var(--sg-bg);
border: 2px solid var(--sg-border);
border-radius: var(--sg-radius);
padding: 1.5rem 1.5rem;
box-shadow: var(--sg-shadow-sm);
transition: transform .2s, box-shadow .2s, border-color .2s;
display: flex;
flex-direction: column;
gap: .75rem;
}
.sg-product-content .sg-pc-card:hover {
transform: translateY(-2px);
box-shadow: var(--sg-shadow-hover);
border-color: var(--sg-border-strong);
}
.sg-product-content .sg-pc-card--accent {
border-color: var(--sg-teal);
background: var(--sg-teal-light);
box-shadow: 0 2px 12px rgba(35,123,148,.1);
}
.sg-product-content .sg-pc-card--accent:hover {
border-color: var(--sg-teal);
transform: none;
}
/* =======================================================================
PANELS — flex column, space-between for even heading/text/link spacing
======================================================================= */
.sg-product-content .sg-pc-panel {
border: 2px solid var(--sg-border);
border-radius: var(--sg-radius);
padding: 1.5rem 1.5rem;
background: var(--sg-bg);
display: flex;
flex-direction: column;
gap: .75rem;
}
.sg-product-content .sg-pc-panel > .sg-pc-h4 { margin: 0; }
.sg-product-content .sg-pc-panel > .sg-pc-p { margin: 0; flex: 1; }
.sg-product-content .sg-pc-panel > .sg-pc-panel-link { margin: 0; }
.sg-product-content .sg-pc-panel--neutral {
background: var(--sg-bg-neutral);
border-color: var(--sg-border);
}
.sg-product-content .sg-pc-panel--good {
background: var(--sg-bg-good);
border-color: var(--sg-bg-good-border);
}
.sg-product-content .sg-pc-panel--current {
border-color: var(--sg-teal);
background: var(--sg-teal-light);
}
/* Action link at bottom of panel — distinct from sg-pc-small (grey info text) */
.sg-product-content .sg-pc-panel-link {
margin: 0;
padding-top: .5rem;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
}
.sg-product-content .sg-pc-panel-link a {
text-decoration: none;
}
.sg-product-content .sg-pc-panel-link a:hover {
text-decoration: underline;
}
/* =======================================================================
CHIPS — floor compatibility tags
======================================================================= */
.sg-product-content .sg-pc-chip {
border-radius: var(--sg-radius-sm);
padding: .6rem .9rem;
font-size: 14px;
line-height: 1.4;
}
.sg-product-content .sg-pc-chip--good {
background: var(--sg-bg-good);
border: 1px solid var(--sg-bg-good-border);
color: var(--sg-body);
}
/* =======================================================================
CALLOUTS
======================================================================= */
.sg-product-content .sg-pc-callout {
background: var(--sg-bg-neutral);
border-left: 4px solid var(--sg-teal);
border-radius: 0 var(--sg-radius-sm) var(--sg-radius-sm) 0;
padding: 1rem 1.25rem;
margin-top: 1.25rem;
font-size: 14px;
line-height: 1.65;
color: var(--sg-body);
}
.sg-product-content .sg-pc-callout strong { color: var(--sg-dark); }
/* =======================================================================
LISTS
======================================================================= */
.sg-product-content .sg-pc-list {
list-style: none;
padding: 0;
margin: .5rem 0 0;
}
.sg-product-content .sg-pc-list li {
position: relative;
padding-left: 1.25rem;
margin-bottom: .5rem;
font-size: 15px;
line-height: 1.6;
color: var(--sg-body);
}
.sg-product-content .sg-pc-list li::before {
content: '';
position: absolute;
left: 0; top: .55em;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--sg-teal);
}
/* =======================================================================
NUMBERED STEPS
======================================================================= */
.sg-product-content .sg-pc-steps {
list-style: none;
padding: 0;
margin: .5rem 0 0;
counter-reset: sg-step;
}
.sg-product-content .sg-pc-steps li {
position: relative;
padding-left: 2.25rem;
margin-bottom: .85rem;
font-size: 15px;
line-height: 1.6;
color: var(--sg-body);
counter-increment: sg-step;
}
.sg-product-content .sg-pc-steps li::before {
content: counter(sg-step);
position: absolute;
left: 0; top: .05em;
width: 1.6rem; height: 1.6rem;
border-radius: 50%;
background: var(--sg-teal);
color: #fff;
font-size: 12px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
/* =======================================================================
BADGES
======================================================================= */
.sg-product-content .sg-pc-badge {
display: inline-block;
font-family: var(--sg-font-spec);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--sg-teal);
background: var(--sg-teal-light);
border: 1px solid var(--sg-teal-border);
border-radius: 4px;
padding: 3px 10px;
margin-left: .5rem;
vertical-align: middle;
}
/* =======================================================================
BUTTONS
sg-btn-secondary style: 4px radius, teal outline
Uses a.sg-pc-btn for max specificity over theme a:hover overrides
======================================================================= */
.sg-product-content a.sg-pc-btn,
.sg-product-content a.sg-pc-btn:link,
.sg-product-content a.sg-pc-btn:visited {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-family: 'Inter', system-ui, sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1 !important;
white-space: nowrap !important;
color: #237B94 !important;
background: transparent !important;
border: 2px solid #237B94 !important;
border-radius: 4px !important;
padding: 10px 24px !important;
min-height: 38px !important;
text-decoration: none !important;
cursor: pointer !important;
box-sizing: border-box !important;
transition: all .18s ease-in-out !important;
margin-top: auto;
align-self: flex-start;
}
.sg-product-content a.sg-pc-btn:hover,
.sg-product-content a.sg-pc-btn:focus {
background: rgba(35,123,148,.05) !important;
border-color: #1b6275 !important;
color: #1b6275 !important;
text-decoration: none !important;
}
/* Accent card: filled teal with WHITE text — max specificity */
.sg-product-content .sg-pc-card--accent a.sg-pc-btn,
.sg-product-content .sg-pc-card--accent a.sg-pc-btn:link,
.sg-product-content .sg-pc-card--accent a.sg-pc-btn:visited,
.sg-product-content .sg-pc-card--accent a.sg-pc-btn:hover,
.sg-product-content .sg-pc-card--accent a.sg-pc-btn:focus {
background: #237B94 !important;
color: #ffffff !important;
border-color: #237B94 !important;
cursor: default !important;
pointer-events: none;
opacity: .85;
}
/* =======================================================================
COMPARISON ROWS
======================================================================= */
.sg-product-content .sg-pc-compare { display: flex; flex-direction: column; }
.sg-product-content .sg-pc-compare-row {
padding: 1.5rem 0 1.5rem 1.25rem;
border-bottom: 1px solid var(--sg-border);
border-left: 3px solid var(--sg-border);
background: transparent;
transition: border-left-color .2s, background .2s;
}
.sg-product-content .sg-pc-compare-row:hover {
border-left-color: var(--sg-teal);
background: linear-gradient(90deg, var(--sg-teal-10) 0%, transparent 40%);
}
.sg-product-content .sg-pc-compare-row:last-child { border-bottom: none; padding-bottom: 0; }
.sg-product-content .sg-pc-compare-row .sg-pc-h4 {
color: var(--sg-teal);
font-size: 17px;
font-weight: 700;
margin-bottom: .5rem;
}
/* =======================================================================
STACKS & BLOCKS (materials section + related products)
======================================================================= */
.sg-product-content .sg-pc-stack { display: flex; flex-direction: column; gap: 2.25rem; }
.sg-product-content .sg-pc-block {
padding-left: 1.25rem;
border-left: 3px solid var(--sg-border);
transition: border-color .2s;
}
.sg-product-content .sg-pc-block:hover { border-left-color: var(--sg-teal); }
.sg-product-content .sg-pc-block .sg-pc-h4 { margin-bottom: .5rem; }
.sg-product-content .sg-pc-block--flex {
display: flex;
flex-direction: column;
}
.sg-product-content .sg-pc-block--flex .sg-pc-related { margin-top: auto; }
/* Measurement step cards */
.sg-product-content .sg-pc-feature {
background: var(--sg-bg-neutral);
border-radius: var(--sg-radius-sm);
padding: 1rem 1.25rem;
border: 1px solid var(--sg-border);
}
/* =======================================================================
RELATED PRODUCTS
======================================================================= */
.sg-product-content .sg-pc-related { margin-top: .75rem; }
.sg-product-content .sg-pc-related a {
font-weight: 600;
font-size: 15px;
text-decoration: none;
}
.sg-product-content .sg-pc-related a:hover { text-decoration: underline; }
.sg-product-content .sg-pc-related--centered {
display: flex;
flex-wrap: wrap;
gap: .65rem .75rem;
}
.sg-product-content .sg-pc-related--centered a {
font-weight: 500;
font-size: 13.5px;
background: var(--sg-bg-neutral);
border: 1px solid var(--sg-border);
border-radius: var(--sg-radius-sm);
padding: .5rem .9rem;
transition: background .15s, border-color .15s;
}
.sg-product-content .sg-pc-related--centered a:hover {
background: var(--sg-teal-light);
border-color: var(--sg-teal-border);
text-decoration: none;
}
/* Sub-group wrapper inside Related Products section */
.sg-product-content .sg-pc-related-group {
margin-top: 2.25rem;
padding-top: 1.5rem;
border-top: 1px solid var(--sg-border);
}
.sg-product-content .sg-pc-related-group:first-of-type {
margin-top: 1.75rem;
}
.sg-product-content .sg-pc-related-group > .sg-pc-h4 {
margin-bottom: .75rem;
}
/* =======================================================================
SPACING UTILITIES
======================================================================= */
.sg-product-content .sg-pc-mt-sm { margin-top: .5rem; }
.sg-product-content .sg-pc-mt { margin-top: 1.25rem; }
/* =======================================================================
RESPONSIVE
======================================================================= */
@media (max-width: 1024px) {
.sg-product-content .sg-pc-grid--cols-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
.sg-product-content { padding: 0 .75rem; }
.sg-product-content .sg-pc-hero { padding: 1.5rem 1.25rem; }
.sg-product-content .sg-pc-h2 { font-size: 24px; }
.sg-product-content .sg-pc-h3 { font-size: 19px; }
.sg-product-content .sg-pc-section { margin-bottom: 2rem; padding-bottom: 2rem; }
.sg-product-content .sg-pc-card,
.sg-product-content .sg-pc-panel { padding: 1rem 1.15rem; }
.sg-product-content .sg-pc-grid--cols-2,
.sg-product-content .sg-pc-grid--cols-3,
.sg-product-content .sg-pc-grid--split { grid-template-columns: 1fr; }
.sg-product-content .sg-pc-compare-row { padding-left: .85rem; }
.sg-product-content .sg-pc-block { padding-left: .85rem; }
}
/* Force left-align on all product content text */
.sg-pc-section,
.sg-pc-section p,
.sg-pc-section li,
.sg-pc-section ul,
.sg-pc-section ol,
.sg-pc-card,
.sg-pc-panel,
.sg-pc-compare-row {
text-align: left !important;
}
/* =======================================================================
SUPERIOR GLIDE — FAQ Accordion
======================================================================= */
.sg-faqs {
max-width: 960px;
display: flex;
flex-direction: column;
gap: 0;
}
.sg-faq {
border-bottom: 1px solid #ECECEC;
}
.sg-faq:last-child {
border-bottom: none;
}
.sg-faq__q {
font-family: 'Inter', -apple-system, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 1.4;
color: #111827;
padding: 20px 40px 20px 0;
cursor: pointer;
position: relative;
list-style: none;
}
.sg-faq__q::-webkit-details-marker { display: none; }
.sg-faq__q::marker { display: none; content: ''; }
.sg-faq__q::after {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%) rotate(0deg);
width: 20px;
height: 20px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23237B94' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/contain no-repeat;
transition: transform .2s ease;
}
.sg-faq[open] .sg-faq__q::after {
transform: translateY(-50%) rotate(180deg);
}
.sg-faq__a {
font-family: 'Inter', -apple-system, sans-serif;
font-size: 15px;
line-height: 1.7;
color: #374151;
padding: 0 0 20px;
}
.sg-faq__a p {
margin: 0 0 .5rem;
}
.sg-faq__a p:last-child {
margin-bottom: 0;
}
.sg-faq__a a {
color: #237B94;
text-decoration: underline;
text-decoration-color: rgba(35,123,148,.2);
text-underline-offset: 2px;
}
.sg-faq__a a:hover {
color: #1b6275;
text-decoration-color: #1b6275;
}
.sg-faq__q:hover {
color: #237B94;
}
@media (max-width: 768px) {
.sg-faq__q {
font-size: 15px;
padding: 16px 36px 16px 0;
}
.sg-faq__a {
font-size: 14px;
padding: 0 0 16px;
}
.sg-faq__q::after {
width: 18px;
height: 18px;
}
}
@media (max-width: 480px) {
.sg-faq__q {
font-size: 14px;
padding: 14px 32px 14px 0;
}
.sg-faq__a {
font-size: 14px;
padding: 0 0 14px;
}
}
/* =======================================================================
SUPERIOR GLIDE — Trust Bar + Helper Text
======================================================================= */
/* Size help link */
.sg-size-help {
margin: 8px 0 16px;
font-family: 'Inter', -apple-system, sans-serif;
font-size: 14px;
color: #6B7280;
}
.sg-size-help a {
color: #237B94;
text-decoration: underline;
text-decoration-color: rgba(35,123,148,.3);
text-underline-offset: 2px;
}
.sg-size-help a:hover {
color: #1b6275;
text-decoration-color: #1b6275;
}
/* Pack note */
.sg-pack-note {
margin: 0 0 12px;
font-family: 'Inter', -apple-system, sans-serif;
font-size: 14px;
color: #6B7280;
line-height: 1.4;
}
/* Trust bar */
.sg-trust-bar {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 24px;
background: #F9FAFB;
border: 1px solid #ECECEC;
border-radius: 8px;
padding: 14px 16px;
margin-top: 16px;
width: fit-content;
}
.sg-trust-item {
display: flex;
align-items: center;
gap: 8px;
}
.sg-trust-item svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.sg-trust-item span {
font-family: 'Inter', -apple-system, sans-serif;
font-size: 14px;
font-weight: 500;
color: #374151;
}
.sg-trust-item a {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
}
.sg-trust-item a span {
color: #374151;
transition: color .15s;
}
.sg-trust-item a:hover span {
color: #237B94;
}
.sg-trust-item a svg path {
transition: fill .15s;
}
.sg-trust-item a:hover svg path {
fill: #1b6275;
}
@media (max-width: 480px) {
.sg-trust-bar {
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 12px 16px;
width: 100%;
}
}
/* Force add to cart row to wrap */
.single-product .woocommerce-variation-add-to-cart {
flex-wrap: wrap !important;
}
/* Quantity helper */
.sg-qty-helper {
font-family: 'Inter', -apple-system, sans-serif;
font-size: 12px;
color: #9CA3AF;
margin: 10px 0 0;
line-height: 1.4;
width: 100%;
flex-basis: 100%;
order: 99;
}
/* Newsletter form — inline on desktop, stacked on mobile */
.footer-outer .elementor-form {
width: 100% !important;
max-width: 600px;
margin: 0 auto;
}
.footer-outer .elementor-form-fields-wrapper {
display: flex !important;
width: 100% !important;
gap: 10px;
justify-content: space-between;
align-items: stretch;
flex-wrap: nowrap !important;
}
.footer-outer .elementor-field-group {
flex: 1 1 0 !important;
min-width: 0;
}
.footer-outer .elementor-field-group:not(.elementor-field-type-submit) {
min-width: 160px;
}
.footer-outer .elementor-field-group.elementor-field-type-submit {
flex: 0 0 auto !important;
}
.footer-outer .elementor-field,
.footer-outer .elementor-button {
width: 100%;
}
@media (max-width: 767px) {
.footer-outer .elementor-form-fields-wrapper {
flex-wrap: wrap !important;
}
.footer-outer .elementor-field-group {
flex: 0 0 100% !important;
min-width: 0 !important;
}
.footer-outer .elementor-field-group.elementor-field-type-submit {
width: 100% !important;
flex: 0 0 100% !important;
}
.footer-outer .elementor-field-group.elementor-field-type-submit .elementor-button {
width: 100% !important;
}
}
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-st-more {
display: none !important;
}