sign-in line to
render with display:flex instead of display:block. That made
the
line break inside the paragraph stop working visually.
The fix: every active-state rule now explicitly handles the
paragraph element separately so containers get display:flex and
paragraphs get display:block, no matter which B2BKing state is
active.
How B2BKing classifies users:
.b2bking_logged_out → not signed in
.b2bking_b2c_user → signed in as regular customer
.b2bking_b2b_user → signed in as approved business account
============================================================ */
/* Step 1: Hide both variants by default until B2BKing applies its body class.
This prevents the brief flash of wrong buttons on initial page load. */
.sg-biz-cta--guest,
.sg-biz-cta--b2b {
display: none;
}
/* ────────────────────────────────────────────────────────────
LOGGED OUT — show Guest CTA, hide B2B CTA
──────────────────────────────────────────────────────────── */
.b2bking_logged_out .sg-biz-cta--guest {
display: flex !important;
}
.b2bking_logged_out p.sg-biz-cta--guest {
display: block !important;
}
.b2bking_logged_out .sg-biz-cta--b2b {
display: none !important;
}
/* ────────────────────────────────────────────────────────────
B2C USER (regular customer logged in) — show Guest CTA
──────────────────────────────────────────────────────────── */
.b2bking_b2c_user .sg-biz-cta--guest {
display: flex !important;
}
.b2bking_b2c_user p.sg-biz-cta--guest {
display: block !important;
}
.b2bking_b2c_user .sg-biz-cta--b2b {
display: none !important;
}
/* ────────────────────────────────────────────────────────────
B2B USER (approved business account) — show B2B CTA only
Hide all guest variants including the inline
sign-in line
──────────────────────────────────────────────────────────── */
.b2bking_b2b_user .sg-biz-cta--guest {
display: none !important;
}
.b2bking_b2b_user .sg-biz-cta--b2b {
display: flex !important;
}
/* Industry Pillars – lock descriptions to 2 lines */
.sg-industry-card .elementor-icon-box-description {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.8em; /* forces equal height even if text is shorter */
}
/* 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 — 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: #237B94 !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: 'DM Sans', -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 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: 'DM Sans', 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: 'DM Sans', 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;
}
/* ============================================================
SG — DYNAMIC FLOOR-TYPE BADGES (on-brand, teal-only)
Styles the [sg_floor_badge] output from the snippet "Loop Utility: Dynamic Floor Type Badge".
Modifiers produced by that snippet:
.badge-all → WORKS ON ALL FLOORS (most versatile)
.badge-soft → CARPET & RUG FRIENDLY (slides)
.badge-hard → SMOOTH HARD FLOORS (glides / pads)
.badge-rough → ROUGH & TEXTURED FLOORS
Colour logic (all from the SG palette):
- all = filled teal (the standout: works everywhere)
- soft = teal outline on teal tint
- rough = teal-DEEP outline on tint (reads "tougher")
- hard = neutral light blue + muted steel
============================================================ */
.sg-badge {
display: inline-block;
padding: 7px 14px;
font-family: 'DM Sans', sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.8px;
line-height: 1.3;
text-transform: uppercase;
border-radius: 4px;
border: 1px solid transparent;
margin-bottom: 14px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* WORKS ON ALL FLOORS — filled teal, most prominent */
.sg-badge.badge-all {
background-color: #237B94;
color: #FFFFFF;
border-color: #237B94;
}
/* CARPET & RUG FRIENDLY — teal outline on tint */
.sg-badge.badge-soft {
background-color: #EAF2F4;
color: #237B94;
border-color: #237B94;
}
/* SMOOTH HARD FLOORS — neutral light blue + muted steel (on-brand neutral) */
.sg-badge.badge-hard {
background-color: #F0F7FA;
color: #4E6B73;
border-color: #DDEBF2;
}
/* ROUGH & TEXTURED FLOORS — teal-deep outline (darker, "tougher") */
.sg-badge.badge-rough {
background-color: #EAF2F4;
color: #0f3a48;
border-color: #0f3a48;
}
/* Subtle hover lift (keeps the interactive feel) */
.sg-badge:hover {
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(15, 58, 72, 0.10);
}
/* ============================================================
SEARCH-RESULT CONTEXT — smaller so badges don't dominate cards
============================================================ */
.ywcas-search-results .sg-badge,
.ywcas-popover-results .sg-badge,
#sg-search-overlay .sg-badge,
.ywcas-search-mobile .sg-badge {
padding: 5px 10px;
font-size: 10px;
letter-spacing: 0.6px;
margin-bottom: 8px;
}
/* ============================================================
SHIPS FAST — availability status pill
Output by the [sg_ships_fast_badge] shortcode (snippet
"SG: Grid Ships-Fast Badge"). Light status pill so it reads
as availability, distinct from the category floor badges.
============================================================ */
.sg-badge.badge-ships {
background-color: #EAF5F8;
color: #0F3A48;
border-color: #BFE0E8;
display: inline-flex;
align-items: center;
gap: 7px;
}
.sg-badge.badge-ships .sg-badge__dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #237B94;
flex: none;
}
/* ==========================================
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 */
}
/* ---- 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: DM Serif Display (large headings) · DM Sans (body/UI)
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: #237B94;
--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: 'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--sg-font-spec: 'DM Sans',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: 'DM Sans', 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: 'DM Sans', -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: 'DM Sans', -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;
}
}
/* 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;
}
}
/* ============================================================
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;
}
.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_size"],
[data-name="sg_feature"],
[data-name="sg_color"] {
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_size"]::-webkit-scrollbar,
[data-name="sg_feature"]::-webkit-scrollbar,
[data-name="sg_color"]::-webkit-scrollbar {
width: 6px;
}
[data-name="sg_floor_type"]::-webkit-scrollbar-track,
[data-name="sg_size"]::-webkit-scrollbar-track,
[data-name="sg_feature"]::-webkit-scrollbar-track,
[data-name="sg_color"]::-webkit-scrollbar-track {
background: #f4f4f4;
border-radius: 3px;
}
[data-name="sg_floor_type"]::-webkit-scrollbar-thumb,
[data-name="sg_size"]::-webkit-scrollbar-thumb,
[data-name="sg_feature"]::-webkit-scrollbar-thumb,
[data-name="sg_color"]::-webkit-scrollbar-thumb {
background: #c4c4c4;
border-radius: 3px;
}
[data-name="sg_floor_type"]::-webkit-scrollbar-thumb:hover:hover,
[data-name="sg_size"]::-webkit-scrollbar-thumb:hover,
[data-name="sg_feature"]::-webkit-scrollbar-thumb:hover,
[data-name="sg_color"]::-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 .facetwp-flyout [data-name="sg_size"],
.facetwp-flyout [data-name="sg_feature"],
.facetwp-flyout [data-name="sg_color"] {
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;
}
.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;
}
.facetwp-flyout .facetwp-flyout-content {
padding-top: 60px !important;
}
.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: 'DM Sans', 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: 'DM Sans', 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: 'DM Sans', 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: 'DM Sans', 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;
}
}
.facetwp-counter {
display: none !important;
}
/* ============================================================
11) COLLAPSE HIDDEN FACET-WRAP GAPS
============================================================ */
.facet-wrap[style*="display: none"],
.facet-wrap[style*="display:none"] {
margin: 0 !important;
padding: 0 !important;
border: none !important;
height: 0 !important;
overflow: hidden !important;
}
@media print {
/* Hide all site chrome */
header,
footer,
.site-header,
.site-footer,
.main-navigation,
.woocommerce-breadcrumb,
.sg-sticky-nav,
.elementor-location-header,
.elementor-location-footer,
form.cart,
.cart-collaterals,
.product_meta,
.woocommerce-tabs ul.tabs,
.related.products,
.upsells,
#sg-reviews,
.woocommerce-Reviews,
.newsletter-section,
#wpadminbar,
.sg-trust-bar,
.b2bking-wrapper,
.fibosearch-bar,
.sg-pc-btn,
.sg-pc-related,
.sg-pc-related-group,
.sg-pc-panel-link {
display: none !important;
}
/* Clean up body */
body {
font-size: 11pt;
line-height: 1.5;
color: #000 !important;
background: #fff !important;
margin: 0;
padding: 0;
}
/* Make links black, no underlines */
a {
color: #000 !important;
text-decoration: none !important;
}
/* Force all containers full width */
.elementor-widget-wrap,
.elementor-element,
.elementor-container,
.elementor-column,
.elementor-column-wrap,
.elementor-widget,
.sg-product-content,
.sg-pc-section,
.sg-pc-hero {
width: 100% !important;
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Force single column on all grids */
.sg-pc-grid,
.sg-pc-grid--cols-2,
.sg-pc-grid--cols-3,
.sg-pc-grid--split {
display: block !important;
width: 100% !important;
}
.sg-pc-grid > div,
.sg-pc-grid > * {
display: block !important;
width: 100% !important;
max-width: 100% !important;
float: none !important;
margin-bottom: 0.5rem;
}
/* Fix lists */
ul, ol,
.sg-pc-list,
.sg-pc-steps {
width: 100% !important;
max-width: 100% !important;
padding-left: 1.5em !important;
}
.sg-pc-list li,
.sg-pc-steps li {
width: 100% !important;
max-width: 100% !important;
display: list-item !important;
}
/* Remove decorative styling from cards/panels */
.sg-pc-card,
.sg-pc-panel,
.sg-pc-callout,
.sg-pc-chip,
.sg-pc-block,
.sg-pc-compare-row {
border: 1px solid #ccc !important;
box-shadow: none !important;
background: #fff !important;
width: 100% !important;
max-width: 100% !important;
}
/* Accent cards lose color */
.sg-pc-card--accent,
.sg-pc-panel--current {
border-color: #999 !important;
background: #f9f9f9 !important;
}
/* Floor chips inline */
.sg-pc-grid--tight {
display: block !important;
}
.sg-pc-chip {
display: block !important;
width: 100% !important;
margin-bottom: 0.25rem;
}
/* Keep images but limit width */
img {
max-width: 100% !important;
}
/* Page break control — both syntaxes for Firefox + Chrome */
h2, h3 {
page-break-after: avoid;
break-after: avoid;
}
.sg-pc-section {
page-break-inside: avoid;
break-inside: avoid;
}
}
/* =========================================================================
SUPERIOR GLIDE — Homepage Final CSS
Single consolidated stylesheet for all homepage sections.
Replaces all previous SG hero / homepage v2 / shop snippets.
========================================================================= */
/* =========================================================================
1. HERO SECTION (sg-hero-2026)
Full-bleed environmental dining-room photo with white text overlay.
========================================================================= */
.sg-hero-2026 {
position: relative;
overflow: hidden;
width: 100%;
}
/* Soft vignette darkening the left side of the photo where the headline sits.
Layered ON TOP of Elementor's gradient overlay. */
.sg-hero-2026::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
ellipse at 28% 50%,
rgba(0, 0, 0, 0.30) 0%,
rgba(0, 0, 0, 0) 65%
);
pointer-events: none;
z-index: 1;
}
.sg-hero-2026 > .e-con-inner,
.sg-hero-2026 .sg-hero-2026__content {
position: relative;
z-index: 2;
}
.sg-hero-2026__content {
max-width: 640px;
}
.sg-hero-2026__h1 {
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}
.sg-hero-2026__sub p {
margin: 0 !important;
max-width: 580px;
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
.sg-hero-2026__trust {
margin: 22px 0 0 0 !important;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.sg-hero-2026__dot {
opacity: 0.5;
font-size: 0.9em;
line-height: 1;
}
/* =========================================================================
2. SHOP BY TYPE SECTION (sg-shop-2026)
Six product router cards with cream image panel + white body.
========================================================================= */
.sg-shop-2026 {
overflow: hidden;
}
.sg-shop-card {
overflow: hidden;
transition: transform 0.25s cubic-bezier(0.16, 0.84, 0.32, 1),
box-shadow 0.25s ease,
border-color 0.25s ease;
will-change: transform;
cursor: pointer;
text-decoration: none !important;
}
.sg-shop-card:hover {
transform: translateY(-4px);
border-color: #DDEBF2 !important;
}
.sg-shop-card:hover .e-con-inner {
box-shadow: 0 12px 28px rgba(35, 123, 148, 0.10) !important;
}
.sg-shop-card__img-wrap {
transition: background-color 0.25s ease;
}
.sg-shop-card:hover .sg-shop-card__img-wrap {
background-color: #F0F7FA !important;
}
.sg-shop-card__img img {
display: block !important;
max-width: 100% !important;
height: auto !important;
max-height: 180px !important;
width: auto !important;
object-fit: contain;
transition: transform 0.4s cubic-bezier(0.16, 0.84, 0.32, 1);
}
.sg-shop-card:hover .sg-shop-card__img img {
transform: scale(1.04);
}
.sg-shop-card__body p {
margin: 0 !important;
}
.sg-shop-card__eyebrow {
font-family: 'DM Sans', sans-serif;
font-size: 11px !important;
font-weight: 600;
letter-spacing: 1.4px;
text-transform: uppercase;
color: #237B94;
margin: 0 !important;
}
.sg-shop-card__title {
margin: 0 !important;
}
.sg-shop-card__link {
font-family: 'DM Sans', sans-serif;
font-size: 14px !important;
font-weight: 600;
color: #237B94;
margin-top: 8px !important;
transition: color 0.2s ease;
}
.sg-shop-card__arrow {
display: inline-block;
margin-left: 4px;
transition: transform 0.25s cubic-bezier(0.16, 0.84, 0.32, 1);
}
.sg-shop-card:hover .sg-shop-card__link {
color: #1B6275;
}
.sg-shop-card:hover .sg-shop-card__arrow {
transform: translateX(4px);
}
/* =========================================================================
3. PROOF SECTION (sg-proof-2026)
Three testimonial cards with environmental photos + stats row.
========================================================================= */
.sg-proof-2026 {
overflow: hidden;
}
.sg-proof-card {
overflow: hidden;
transition: transform 0.25s ease, box-shadow 0.25s ease;
will-change: transform;
}
.sg-proof-card:hover {
transform: translateY(-3px);
}
.sg-proof-card:hover .e-con-inner > div {
box-shadow: 0 12px 32px rgba(35, 123, 148, 0.10) !important;
}
.sg-proof-card__img {
display: block;
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.sg-proof-card__img img {
display: block !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 4 / 3;
object-fit: cover;
border-top-left-radius: 11px;
border-top-right-radius: 11px;
}
.sg-proof-card__body {
padding: 28px !important;
}
.sg-proof-card__quote::before {
content: "\201C";
display: block;
font-family: 'Georgia', serif;
font-size: 56px;
line-height: 0.5;
margin-top: 12px;
margin-bottom: 12px;
color: #237B94;
opacity: 0.5;
}
.sg-proof-card__quote p {
margin: 0 !important;
}
.sg-proof-card__attribution {
margin-top: 4px !important;
padding-top: 16px !important;
border-top: 1px solid #E5EEF3;
}
.sg-proof-card__attribution p {
margin: 0 !important;
line-height: 1.4;
}
.sg-proof-card__name {
font-family: 'DM Sans', sans-serif;
font-weight: 600;
font-size: 15px;
color: #1F2937;
}
.sg-proof-card__org {
font-family: 'DM Sans', sans-serif;
font-weight: 400;
font-size: 13px;
color: #6B7280;
margin-top: 2px !important;
}
.sg-proof-stat__num {
margin: 0 !important;
}
/* =========================================================================
4. FINAL CTA SECTION (sg-finalcta-2026)
Dark environmental hero, smaller than main hero, evening dining room.
========================================================================= */
.sg-finalcta-2026 {
position: relative;
overflow: hidden;
}
.sg-finalcta-2026::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
ellipse at 50% 50%,
rgba(0, 0, 0, 0.20) 0%,
rgba(0, 0, 0, 0) 70%
);
pointer-events: none;
z-index: 1;
}
.sg-finalcta-2026 > .e-con-inner,
.sg-finalcta-2026 .sg-finalcta-2026__content {
position: relative;
z-index: 2;
}
.sg-finalcta-2026__h2 {
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
.sg-finalcta-2026__sub p {
margin: 0 !important;
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}
/* =========================================================================
5. BUTTON OVERRIDES FOR DARK SECTIONS
Your global sg-btn-secondary uses teal-on-light. On dark photo backgrounds,
that combination has poor contrast. These rules override the secondary's
color ONLY when inside the hero or final CTA. Global system stays clean.
========================================================================= */
/* Hero — primary button gets stronger shadow to lift off the photo */
.sg-hero-2026 .sg-btn-primary .elementor-button {
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.30) !important;
}
.sg-hero-2026 .sg-btn-primary .elementor-button:hover {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.40) !important;
}
/* Hero — secondary becomes white outline */
.sg-hero-2026 .sg-btn-secondary .elementor-button,
.sg-hero-2026 .sg-btn-secondary .elementor-button:link,
.sg-hero-2026 .sg-btn-secondary .elementor-button:visited {
background: transparent !important;
border-color: rgba(255, 255, 255, 0.65) !important;
color: #ffffff !important;
}
.sg-hero-2026 .sg-btn-secondary .elementor-button:hover {
background: #ffffff !important;
border-color: #ffffff !important;
color: #1A1A1A !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}
.sg-hero-2026 .sg-btn-secondary .elementor-button:active {
background: rgba(255, 255, 255, 0.92) !important;
border-color: rgba(255, 255, 255, 0.92) !important;
color: #1A1A1A !important;
}
/* Final CTA — same overrides as hero */
.sg-finalcta-2026 .sg-btn-primary .elementor-button {
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.30) !important;
}
.sg-finalcta-2026 .sg-btn-primary .elementor-button:hover {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.40) !important;
}
.sg-finalcta-2026 .sg-btn-secondary .elementor-button,
.sg-finalcta-2026 .sg-btn-secondary .elementor-button:link,
.sg-finalcta-2026 .sg-btn-secondary .elementor-button:visited {
background: transparent !important;
border-color: rgba(255, 255, 255, 0.65) !important;
color: #ffffff !important;
}
.sg-finalcta-2026 .sg-btn-secondary .elementor-button:hover {
background: #ffffff !important;
border-color: #ffffff !important;
color: #1A1A1A !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}
.sg-finalcta-2026 .sg-btn-secondary .elementor-button:active {
background: rgba(255, 255, 255, 0.92) !important;
border-color: rgba(255, 255, 255, 0.92) !important;
color: #1A1A1A !important;
}
/* =========================================================================
6. CREAM-ON-CREAM SEPARATOR
When two cream sections sit back-to-back (e.g. Comparison + Materials,
or Proof + FAQ), a hairline divider keeps them from blurring together.
The .sg-cream class is added to all editorial cream-background sections.
========================================================================= */
.sg-cream + .sg-cream {
position: relative;
}
.sg-cream + .sg-cream::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 1px;
background: linear-gradient(
90deg,
rgba(213, 199, 174, 0) 0%,
rgba(213, 199, 174, 0.6) 50%,
rgba(213, 199, 174, 0) 100%
);
pointer-events: none;
z-index: 1;
}
/* =========================================================================
7. RESPONSIVE BREAKPOINTS
========================================================================= */
/* Laptop (1025–1365px) */
@media (max-width: 1024px) {
.sg-hero-2026 {
background-position: 65% center !important;
}
.sg-hero-2026__content {
max-width: 560px;
}
.sg-shop-card__img img {
max-height: 160px !important;
}
.sg-proof-card__body {
padding: 24px !important;
}
}
/* Tablet portrait (768–880px) */
@media (max-width: 880px) {
.sg-hero-2026::after {
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.18) 0%,
rgba(0, 0, 0, 0.50) 100%
);
}
.sg-finalcta-2026 {
background-position: 50% center !important;
}
.sg-finalcta-2026::after {
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.20) 0%,
rgba(0, 0, 0, 0.50) 100%
);
}
}
/* Mobile (under 600px) */
@media (max-width: 600px) {
/* Hero */
.sg-hero-2026__content {
max-width: 100%;
}
.sg-hero-2026__h1 {
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6) !important;
}
.sg-hero-2026__sub p {
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}
.sg-hero-2026__buttons .elementor-button {
width: 100%;
justify-content: center;
}
/* Shop cards */
.sg-shop-card__img img {
max-height: 140px !important;
}
.sg-shop-card__title {
font-size: 18px !important;
}
/* Disable hover on touch — looks weird when tap stays active */
.sg-shop-card:hover {
transform: none;
}
.sg-shop-card:hover .sg-shop-card__img img {
transform: none;
}
/* Proof cards */
.sg-proof-card__body {
padding: 20px !important;
}
.sg-proof-card__quote::before {
font-size: 44px;
margin-bottom: 8px;
}
/* Final CTA */
.sg-finalcta-2026__h2 {
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55) !important;
}
.sg-finalcta-2026__sub p {
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.sg-finalcta-2026__buttons .elementor-button {
width: 100%;
justify-content: center;
}
/* Cream-on-cream separator gets thinner on mobile */
.sg-cream + .sg-cream::before {
width: 60px;
}
}
/* =========================================================================
8. ENTRANCE ANIMATIONS
Soft fade-up on hero load and on first scroll-into-view for cards.
Disabled when user prefers reduced motion.
========================================================================= */
/* Hero animation — runs on page load */
.sg-hero-2026__h1,
.sg-hero-2026__sub p,
.sg-hero-2026__buttons,
.sg-hero-2026__trust {
opacity: 0;
transform: translateY(12px);
animation: sgHeroFade 0.9s cubic-bezier(0.16, 0.84, 0.32, 1) forwards;
will-change: opacity, transform;
}
.sg-hero-2026__h1 { animation-delay: 0.10s; }
.sg-hero-2026__sub p { animation-delay: 0.28s; }
.sg-hero-2026__buttons { animation-delay: 0.46s; }
.sg-hero-2026__trust { animation-delay: 0.62s; }
@keyframes sgHeroFade {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Card stagger animations — run on first paint */
@media (prefers-reduced-motion: no-preference) {
.sg-shop-card,
.sg-proof-card {
opacity: 0;
transform: translateY(16px);
animation: sgCardFade 0.7s cubic-bezier(0.16, 0.84, 0.32, 1) forwards;
}
.sg-shop-grid > .sg-shop-card:nth-child(1) { animation-delay: 0.05s; }
.sg-shop-grid > .sg-shop-card:nth-child(2) { animation-delay: 0.12s; }
.sg-shop-grid > .sg-shop-card:nth-child(3) { animation-delay: 0.19s; }
.sg-shop-grid > .sg-shop-card:nth-child(4) { animation-delay: 0.26s; }
.sg-shop-grid > .sg-shop-card:nth-child(5) { animation-delay: 0.33s; }
.sg-shop-grid > .sg-shop-card:nth-child(6) { animation-delay: 0.40s; }
.sg-proof-cards > .sg-proof-card:nth-child(1) { animation-delay: 0.05s; }
.sg-proof-cards > .sg-proof-card:nth-child(2) { animation-delay: 0.15s; }
.sg-proof-cards > .sg-proof-card:nth-child(3) { animation-delay: 0.25s; }
}
@keyframes sgCardFade {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Reduced motion — turn animations off */
@media (prefers-reduced-motion: reduce) {
.sg-hero-2026__h1,
.sg-hero-2026__sub p,
.sg-hero-2026__buttons,
.sg-hero-2026__trust {
opacity: 1;
transform: none;
animation: none;
}
}
/* =========================================================================
9. COMPARISON SECTION IMAGE PANELS
Cream-panel framing around the Superior Glide vs cheap-product images
in the Comparison section.
========================================================================= */
.sg-comparison-panel {
transition: background-color 0.25s ease;
}
.sg-comparison-img img {
display: block !important;
max-width: 100% !important;
height: auto !important;
max-height: 160px !important;
width: auto !important;
object-fit: contain;
}
/* Placeholder treatment — when the felt-pad image hasn't been uploaded yet,
the broken image fallback shows a dashed outline with helper text.
Remove this rule once the real image is wired in. */
.sg-comparison-panel--bad .sg-comparison-img img[src*="SG_competitor_worn-felt-pad"] {
opacity: 0.4;
}
.sg-comparison-panel--bad::after {
content: "Cheap-felt-pad image pending";
display: block;
margin-top: 12px;
font-family: 'DM Sans', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
color: #6B7280;
opacity: 0.6;
}
/* Once you wire the real image (replace placeholder URL with real upload),
delete the two rules above. The image will render normally. */
/* Mobile — smaller panels */
@media (max-width: 600px) {
.sg-comparison-img img {
max-height: 120px !important;
}
}
/* =========================================================================
10. HOMEPAGE PAINT + FINAL CTA BUTTON
Everything above targets the -2026 class structure used by the category
archive pages and .sg-cream used by the guide pages. The homepage itself
uses .sg-hero / .sg-finalcta, so these two rules are the only ones in this
file that touch the homepage. (Replaces the old LCP rule, which targeted a
stale hero element ID that no longer exists.)
========================================================================= */
/* Instant dark hero background on load (paint stability) */
.sg-hero {
background-color: #0f3a48;
}
/* Final CTA — invert the primary button so it's visible on the flat teal section */
.sg-finalcta .sg-on-dark.sg-btn-primary .elementor-button,
.sg-finalcta .sg-on-dark.sg-btn-primary .elementor-button:link,
.sg-finalcta .sg-on-dark.sg-btn-primary .elementor-button:visited {
background: #FFFFFF !important;
color: #237B94 !important;
border-color: #FFFFFF !important;
}
.sg-finalcta .sg-on-dark.sg-btn-primary .elementor-button:hover {
background: #FFFFFF !important;
color: #237B94 !important;
border-color: #FFFFFF !important;
}
/* How to Measure: equal-height step cards */
.sg-measure-cards > .e-con { align-self: stretch; }
.sg-measure-cards > .e-con > .e-con { height: 100%; }
/* ============================================================
SG — Buttons On Dark (v2 — teal-only)
============================================================
Purpose: When a section has the .sg-on-dark class, flip the
.sg-btn-secondary visual treatment so it stays visible
against a dark/colored background.
Default global secondary = teal outline + teal text + teal fill on hover.
On-dark secondary = white outline + white text + white fill on hover (teal text).
Sections using sg-on-dark:
- Any hero/section with a dark image overlay
- Any teal (#237B94 / #0f3a48) background section + final CTAs
To use: add `sg-on-dark` to any dark/colored section's CSS classes.
IMPORTANT: Load this AFTER the global SG button CSS
(set higher priority, or place below the global button snippet).
============================================================ */
/* SECONDARY button on dark: white outline, white text, transparent fill */
.sg-on-dark .sg-btn-secondary .elementor-button,
.sg-on-dark.sg-btn-secondary .elementor-button {
background-color: transparent !important;
color: #FFFFFF !important;
border-color: #FFFFFF !important;
border-width: 2px !important;
border-style: solid !important;
}
/* SECONDARY hover on dark: white fill, teal text */
.sg-on-dark .sg-btn-secondary .elementor-button:hover,
.sg-on-dark .sg-btn-secondary .elementor-button:focus,
.sg-on-dark.sg-btn-secondary .elementor-button:hover,
.sg-on-dark.sg-btn-secondary .elementor-button:focus {
background-color: #FFFFFF !important;
color: #237B94 !important;
border-color: #FFFFFF !important;
}
/* PRIMARY on dark: teal stays, soft white halo on hover for separation */
.sg-on-dark .sg-btn-primary .elementor-button:hover,
.sg-on-dark.sg-btn-primary .elementor-button:hover {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4) !important;
}
/* TERTIARY (text-link) on dark: white text */
.sg-on-dark .sg-btn-tertiary .elementor-button,
.sg-on-dark.sg-btn-tertiary .elementor-button {
color: #FFFFFF !important;
}
.sg-on-dark .sg-btn-tertiary .elementor-button:hover,
.sg-on-dark.sg-btn-tertiary .elementor-button:hover {
color: rgba(255, 255, 255, 0.85) !important;
}
/* Focus ring on dark: white instead of teal */
.sg-on-dark .sg-btn-primary .elementor-button:focus-visible,
.sg-on-dark .sg-btn-secondary .elementor-button:focus-visible,
.sg-on-dark .sg-btn-tertiary .elementor-button:focus-visible {
outline: 2px solid #FFFFFF !important;
outline-offset: 2px !important;
}
/* ============================================================
INVERSE — White filled CTA for flat teal sections
Append to: SG — Buttons On Dark Background
Use: class sg-btn-inverse (with sg-on-dark) on the button
widget. For primary actions on flat #237B94 / #0f3a48
sections where a teal-filled primary would vanish.
============================================================ */
.sg-btn-inverse .elementor-button,
.sg-btn-inverse .elementor-button:link,
.sg-btn-inverse .elementor-button:visited {
background: #FFFFFF !important;
border: 2px solid #FFFFFF !important;
color: #0f3a48 !important;
border-radius: 8px !important;
font-size: 16px !important;
font-family: 'DM Sans', sans-serif !important;
font-weight: 600 !important;
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}
.sg-btn-inverse .elementor-button:hover,
.sg-btn-inverse .elementor-button:focus {
background: rgba(255, 255, 255, 0.92) !important;
border-color: rgba(255, 255, 255, 0.92) !important;
color: #0f3a48 !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
transform: translateY(-1px);
}
.sg-btn-inverse .elementor-button:active {
background: rgba(255, 255, 255, 0.85) !important;
border-color: rgba(255, 255, 255, 0.85) !important;
transform: translateY(0);
}
.sg-btn-inverse .elementor-button-text,
.sg-btn-inverse .elementor-button-icon {
font-size: inherit !important;
font-weight: inherit !important;
color: inherit !important;
}
.sg-btn-inverse .elementor-button:focus-visible {
outline: 2px solid #FFFFFF !important;
outline-offset: 2px !important;
}
/* ============================================================
SG: Rank Math Breadcrumb Styling
Editorial breadcrumb treatment with horizontal line separators.
Works on both light and dark (sg-on-dark) container backgrounds.
============================================================ */
/* Base wrapper */
.rank-math-breadcrumb {
font-family: 'DM Sans', sans-serif;
font-size: 14px;
line-height: 1.5;
color: #6B7280;
letter-spacing: 0.01em;
padding: 0;
margin: 0;
}
.rank-math-breadcrumb p {
margin: 0;
padding: 0;
}
/* Links */
.rank-math-breadcrumb a {
color: #6B7280;
text-decoration: none;
transition: color 0.2s ease;
}
.rank-math-breadcrumb a:hover {
color: #237B94; /* SG teal */
text-decoration: none;
}
/* Current page (last crumb) */
.rank-math-breadcrumb .last {
color: #1A1A1A;
font-weight: 500;
}
/* ============================================================
Separator — CSS-rendered horizontal line (no glyph)
The original character is hidden via font-size: 0;
A thin horizontal line is drawn via ::before pseudo-element.
============================================================ */
.rank-math-breadcrumb .separator {
font-size: 0;
margin: 0 6px;
display: inline-block;
position: relative;
width: 14px;
height: 1em;
vertical-align: middle;
}
.rank-math-breadcrumb .separator::before {
content: '';
display: block;
width: 12px;
height: 1px;
background: #DDEBF2; /* cool divider, matches site palette */
position: absolute;
top: 50%;
left: 1px;
transform: translateY(-50%);
}
/* ============================================================
Dark background variant — apply sg-on-dark class to the
container holding the breadcrumb shortcode widget.
============================================================ */
.sg-on-dark .rank-math-breadcrumb,
.sg-on-dark .rank-math-breadcrumb a {
color: #E5EEF3; /* pale cool tint for dark backgrounds */
}
.sg-on-dark .rank-math-breadcrumb a:hover {
color: #FFFFFF;
}
.sg-on-dark .rank-math-breadcrumb .last {
color: #FFFFFF;
}
/* Separator on dark backgrounds — line is brighter, semi-transparent */
.sg-on-dark .rank-math-breadcrumb .separator::before {
background: rgba(240, 233, 220, 0.55);
}
/* ============================================================
Spacing refinements when breadcrumbs sit inside dark heroes
============================================================ */
.sg-on-dark .rank-math-breadcrumb {
margin-bottom: 24px;
font-size: 13px;
letter-spacing: 0.04em;
text-transform: none;
opacity: 0.95;
}
/* ============================================================
Mobile tuning — slightly tighter spacing on small screens
============================================================ */
@media (max-width: 640px) {
.rank-math-breadcrumb {
font-size: 12px;
}
.rank-math-breadcrumb .separator {
width: 10px;
margin: 0 4px;
}
.rank-math-breadcrumb .separator::before {
width: 8px;
}
.sg-on-dark .rank-math-breadcrumb {
font-size: 11px;
letter-spacing: 0.05em;
margin-bottom: 16px;
}
}
/* Extra specificity for hero breadcrumbs — covers all hero patterns */
.sg-hero-2026 .rank-math-breadcrumb,
.sg-hero-2026 .rank-math-breadcrumb a {
color: rgba(240, 233, 220, 0.9) !important;
}
.sg-hero-2026 .rank-math-breadcrumb .last {
color: #FFFFFF !important;
}
.sg-hero-2026 .rank-math-breadcrumb .separator::before {
background: rgba(240, 233, 220, 0.45) !important;
}
/* ── Hero breadcrumbs — maximum specificity white override ── */
/* Targets the shortcode widget with class sg-hero-breadcrumbs
on any dark hero (sg-hero-2026 or sg-on-dark parent) */
.sg-hero-breadcrumbs .rank-math-breadcrumb,
.sg-hero-breadcrumbs .rank-math-breadcrumb p,
.sg-hero-breadcrumbs .rank-math-breadcrumb a,
.sg-hero-breadcrumbs .rank-math-breadcrumb span,
.elementor-widget.sg-hero-breadcrumbs .rank-math-breadcrumb,
.elementor-widget.sg-hero-breadcrumbs .rank-math-breadcrumb a,
.elementor-widget.sg-hero-breadcrumbs .rank-math-breadcrumb span,
.sg-hero-2026 .sg-hero-breadcrumbs .rank-math-breadcrumb,
.sg-hero-2026 .sg-hero-breadcrumbs .rank-math-breadcrumb a,
.sg-on-dark .sg-hero-breadcrumbs .rank-math-breadcrumb,
.sg-on-dark .sg-hero-breadcrumbs .rank-math-breadcrumb a {
color: rgba(255, 255, 255, 0.82) !important;
text-decoration: none !important;
}
.sg-hero-breadcrumbs .rank-math-breadcrumb .last,
.elementor-widget.sg-hero-breadcrumbs .rank-math-breadcrumb .last,
.sg-hero-2026 .sg-hero-breadcrumbs .rank-math-breadcrumb .last {
color: #FFFFFF !important;
font-weight: 500 !important;
}
.sg-hero-breadcrumbs .rank-math-breadcrumb .separator::before,
.elementor-widget.sg-hero-breadcrumbs .rank-math-breadcrumb .separator::before {
background: rgba(255, 255, 255, 0.35) !important;
}
/* Fallback: any breadcrumb directly inside a dark hero */
.sg-hero-2026 .rank-math-breadcrumb a,
.sg-on-dark .rank-math-breadcrumb a {
color: rgba(255, 255, 255, 0.82) !important;
}
.sg-hero-2026 .rank-math-breadcrumb .last,
.sg-on-dark .rank-math-breadcrumb .last {
color: #FFFFFF !important;
}
/* ============================================================
SG – FacetWP: Collapse Empty Space from Hidden Facets
============================================================
When the Shop Page Conditional Logic snippet hides .facet-wrap
elements, the parent flex container still reserves "gap" space
for those hidden children. This is a known CSS flex/gap behavior
— gap is applied between flex children regardless of whether the
child has display:none.
Fix: replace the flex `gap` with margin-bottom on visible facets.
Hidden facets contribute zero margin, so spacing collapses cleanly.
============================================================ */
/* Neutralize the flex gap on the Facets sidebar container only.
The .facet-accordion class is the wrapper around all facet-wrap
elements (set in the Elementor JSON). */
.facet-accordion {
row-gap: 0 !important;
gap: 0 !important;
}
/* Now use margin-bottom on visible facet wraps instead. This way
hidden ones contribute no space at all. */
.facet-accordion > .elementor-element,
.facet-accordion > .facet-wrap {
margin-bottom: 0 !important;
}
/* Apply spacing only to visible facet wraps */
.facet-accordion > .elementor-element:not([style*="display: none"]):not([style*="display:none"]),
.facet-accordion > .facet-wrap:not([style*="display: none"]):not([style*="display:none"]) {
margin-bottom: 16px !important;
}
/* Belt-and-suspenders: harden the existing collapse rule from the snippet
"FacetWP: All styles merged" in case any inline style variants slip through. Match all common
inline display:none variations, including the !important variant the
snippet now uses. */
.facet-wrap[style*="display: none"],
.facet-wrap[style*="display:none"],
.facet-wrap[style*="display : none"],
.elementor-element[style*="display: none"],
.elementor-element[style*="display:none"],
.elementor-element[style*="display : none"],
.elementor-widget-facetwp-facet[style*="display: none"],
.elementor-widget-facetwp-facet[style*="display:none"] {
margin: 0 !important;
padding: 0 !important;
border: none !important;
height: 0 !important;
min-height: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
}
/* Mobile flyout — same problem can occur there */
@media (max-width: 1024px) {
.facetwp-flyout-content {
row-gap: 0 !important;
gap: 0 !important;
}
.facetwp-flyout .flyout-row[style*="display: none"],
.facetwp-flyout .flyout-row[style*="display:none"] {
margin: 0 !important;
padding: 0 !important;
height: 0 !important;
min-height: 0 !important;
overflow: hidden !important;
}
.facetwp-flyout .flyout-row:not([style*="display: none"]):not([style*="display:none"]) {
margin-bottom: 12px !important;
}
}
/* =========================================================================
SG: FOOTER LAYOUT LOCK
Snippet type: CSS · Location: site-css · Priority: 10
Slimmed version (May 2026). All layout (column flex, gap, max-width,
responsive direction, padding) now lives in the Elementor JSON itself.
This file only contains rules the Elementor editor UI cannot express:
- icon-list bullet/icon stripping
- ::placeholder color on form inputs
- :focus-visible outline overrides
- widget-internal hover transitions on links
- newsletter form button styling not exposed by Form widget UI
- trust strip border-top/bottom + label semantics
Design tokens:
Teal: #237B94 Teal hover: #1b6275
Footer bg: #062F36
Text: #CBD5E1 Text hover: #FFFFFF Muted label: #94A3B8
Font: 'DM Sans'
========================================================================= */
/* ----- COLUMN HEADINGS -------------------------------------------------- */
/* Full typography lock so headings stay consistent across all 4 columns
without setting these values in each heading widget × 7 breakpoints. */
.sg-footer-heading .elementor-heading-title,
.sg-footer-heading h1,
.sg-footer-heading h2,
.sg-footer-heading h3,
.sg-footer-heading h4 {
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: #FFFFFF !important;
margin: 0 0 16px 0 !important;
}
/* ----- COLUMN LINK LISTS ------------------------------------------------ */
/* Icon-list widget always renders a bullet/icon slot even when empty.
Stripping it must be done in CSS — Elementor has no UI toggle for this. */
.sg-footer-links .elementor-icon-list-items {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
.sg-footer-links .elementor-icon-list-item {
margin: 0 !important;
padding: 0 !important;
}
.sg-footer-links .elementor-icon-list-item:before,
.sg-footer-links .elementor-icon-list-item:after,
.sg-footer-links .elementor-icon-list-icon {
content: none !important;
display: none !important;
}
/* Link typography + color + hover. Setting font-family/size/weight/line-height
here keeps all 4 column link lists identical without per-widget settings. */
.sg-footer-links a,
.sg-footer-links .elementor-icon-list-text {
color: #CBD5E1 !important;
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.5 !important;
text-decoration: none !important;
transition: color 160ms ease !important;
}
.sg-footer-links a:hover,
.sg-footer-links a:focus-visible,
.sg-footer-links .elementor-icon-list-text:hover {
color: #FFFFFF !important;
text-decoration: none !important;
outline: none;
}
/* ----- NEWSLETTER FORM -------------------------------------------------- */
/* Elementor Form widget exposes basic input/button styling but NOT:
- ::placeholder color
- :focus border-color
- dark-on-dark input background with translucent border
So input/button styling lives here in full to keep all states coherent. */
.sg-footer-newsletter-form .elementor-form-fields-wrapper {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
width: 100% !important;
}
.sg-footer-newsletter-form .elementor-field-group {
width: 100% !important;
}
.sg-footer-newsletter-form input[type="text"],
.sg-footer-newsletter-form input[type="email"] {
width: 100% !important;
padding: 11px 14px !important;
background: rgba(255,255,255,0.06) !important;
border: 1px solid rgba(255,255,255,0.18) !important;
border-radius: 8px !important;
color: #FFFFFF !important;
font-family: 'DM Sans', sans-serif !important;
font-size: 14px !important;
line-height: 1.4 !important;
transition: border-color 160ms ease, background 160ms ease !important;
}
.sg-footer-newsletter-form input::placeholder {
color: #94A3B8 !important;
opacity: 1 !important;
}
.sg-footer-newsletter-form input:focus {
outline: none !important;
border-color: #237B94 !important;
background: rgba(255,255,255,0.10) !important;
}
.sg-footer-newsletter-form button[type="submit"],
.sg-footer-newsletter-form .elementor-button {
width: 100% !important;
padding: 12px 18px !important;
background-color: #237B94 !important;
border: none !important;
border-radius: 8px !important;
color: #FFFFFF !important;
font-family: 'DM Sans', sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
text-transform: none !important;
cursor: pointer !important;
transition: background 160ms ease !important;
box-shadow: none !important;
line-height: 1.3 !important;
}
.sg-footer-newsletter-form button[type="submit"]:hover,
.sg-footer-newsletter-form .elementor-button:hover {
background-color: #1b6275 !important;
}
.sg-footer-newsletter-form .elementor-message-success {
color: #4ADE80 !important;
font-family: 'DM Sans', sans-serif !important;
font-size: 13px !important;
margin-top: 8px !important;
}
.sg-footer-newsletter-form .elementor-message-danger {
color: #F87171 !important;
font-family: 'DM Sans', sans-serif !important;
font-size: 13px !important;
margin-top: 8px !important;
}
/* ----- SOCIAL ICONS ----------------------------------------------------- */
/* The Icon widget's Style tab can set bg color but not the circle background
that morphs into the teal fill on hover with consistent timing across all
5 icons. Locking it here ensures all 5 stay identical. */
.sg-footer-socials .elementor-widget-icon .elementor-icon {
width: 36px !important;
height: 36px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
background: rgba(255,255,255,0.06) !important;
border: 1px solid rgba(255,255,255,0.14) !important;
color: #CBD5E1 !important;
transition: background 160ms ease, color 160ms ease, border-color 160ms ease !important;
}
.sg-footer-socials .elementor-widget-icon .elementor-icon:hover {
background: #237B94 !important;
border-color: #237B94 !important;
color: #FFFFFF !important;
}
.sg-footer-socials .elementor-widget-icon svg,
.sg-footer-socials .elementor-widget-icon i {
font-size: 16px !important;
width: 16px !important;
height: 16px !important;
color: inherit !important;
fill: currentColor !important;
}
/* ----- TRUST STRIP (Phone / Email / Hours / Ships from) ----------------- */
/* JSON handles flex layout + responsive direction. Borders + the small
uppercase label semantics ("PHONE", "EMAIL") live here because they
apply to inline-element spans inside text-editor widgets — Elementor
has no per-span styling UI. */
.sg-footer-trust {
border-top: 1px solid rgba(255,255,255,0.08) !important;
border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.sg-footer-trust .elementor-widget-text-editor p {
color: #CBD5E1 !important;
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
font-size: 13px !important;
line-height: 1.6 !important;
margin: 0 !important;
}
.sg-footer-trust .sg-footer-contact-label {
display: inline-block !important;
margin-right: 6px !important;
color: #94A3B8 !important;
font-weight: 600 !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
}
.sg-footer-trust a {
color: #CBD5E1 !important;
text-decoration: none !important;
transition: color 160ms ease !important;
}
.sg-footer-trust a:hover {
color: #FFFFFF !important;
}
/* ----- BOTTOM BAR (legal links) ----------------------------------------- */
/* Copyright / address text inside text-editor widgets. */
.sg-footer-bottom .elementor-widget-text-editor p {
color: #94A3B8 !important;
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
font-size: 13px !important;
line-height: 1.6 !important;
margin: 0 !important;
}
/* Same icon-list bullet-strip pattern as the column links. */
.sg-footer-legal-links .elementor-icon-list-items {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 8px 20px !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.sg-footer-legal-links .elementor-icon-list-item {
margin: 0 !important;
padding: 0 !important;
}
.sg-footer-legal-links .elementor-icon-list-icon,
.sg-footer-legal-links .elementor-icon-list-item:before,
.sg-footer-legal-links .elementor-icon-list-item:after {
display: none !important;
content: none !important;
}
.sg-footer-legal-links a,
.sg-footer-legal-links .elementor-icon-list-text {
color: #94A3B8 !important;
font-family: 'DM Sans', sans-serif !important;
font-size: 13px !important;
text-decoration: none !important;
transition: color 160ms ease !important;
}
.sg-footer-legal-links a:hover,
.sg-footer-legal-links a:focus-visible {
color: #FFFFFF !important;
}
.sg-footer-bottom .sg-footer-address {
color: #6E7C8A !important;
font-size: 12px !important;
display: inline-block !important;
margin-top: 2px !important;
}
/**
* SG: Category & Guide UX Polish
* Scope: site-css
*
* Unified site-wide CSS for:
* 1. Global smooth-scroll for anchor jumps
* 2. Clickable size tile hover states (category pages)
* 3. Table of Contents chip hover states (guide + category)
* 3b. Quick Decision tile hover states (guide page)
* 3c. Furniture Pads compare card (category page)
* 4. Glide Guide size-by-shape table styling
* 5. Glide Guide "by furniture type" lookup card styling
* 6. Glide Guide Product Advisor CTA styling
* 7. Hero trust strip styling (guide + category)
*
* Pairs with: Furniture Glides Category, Furniture Glides Guide,
* and (future) Slide Guide / Pad Guide / etc. category + guide pages.
*
* All clickable cards (size tiles, TOC chips, Quick Decision tiles)
* are real tags wrapping their entire content. No JavaScript needed.
*/
/* =========================================================
1. SMOOTH SCROLL FOR ANCHOR JUMPS (global)
========================================================= */
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/* Offset anchored sections so they clear the sticky header (~90px)
AND the sticky TOC bar (~56px). Was 24px, which only cleared a
fraction of the sticky elements and left section headings hidden
underneath. 150px desktop / 130px mobile lands the heading just
below the sticky bar. Tune if the gap looks off. */
[id]:not(body) {
scroll-margin-top: 150px;
}
@media (max-width: 767px) {
[id]:not(body) {
scroll-margin-top: 130px;
}
}
/* =========================================================
2. SIZE TILE HOVER + EQUAL-HEIGHT (category page deep-links)
========================================================= */
/* Equal-height row: force every size tile in a row to match the
tallest sibling. The has height:100%,
but its Elementor widget wrappers need to pass that height through. */
.sg-size-tile-link {
display: flex !important;
flex-direction: column;
height: 100%;
min-height: 100%;
box-sizing: border-box;
}
/* When an Elementor widget container holds a size tile, stretch it */
.elementor-widget-html:has(.sg-size-tile-link),
.elementor-widget-html:has(.sg-size-tile-link) > .elementor-widget-container {
height: 100%;
display: flex;
flex-direction: column;
}
/* Fallback for browsers without :has() — uses a class hook we set in JSON */
.sg-size-tile-cell {
display: flex;
align-self: stretch;
}
.sg-size-tile-cell .elementor-widget-html,
.sg-size-tile-cell .elementor-widget-html > .elementor-widget-container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
.sg-size-tile-link:hover {
border-color: #237b94 !important;
box-shadow: 0 4px 12px rgba(35, 123, 148, 0.15);
transform: translateY(-2px);
}
.sg-size-tile-link:hover h4 {
color: #237b94 !important;
}
.sg-size-tile-link:focus-visible {
outline: 2px solid #237b94;
outline-offset: 2px;
}
@media (max-width: 767px) {
.sg-size-tile-link:hover { transform: none; }
.sg-size-tile-link:active {
transform: scale(0.98);
transition: transform 0.1s ease;
}
}
/* =========================================================
3. TOC CHIP HOVER (guide + category)
========================================================= */
.sg-toc-chip .elementor-button:hover,
.sg-toc-chip .elementor-button:focus,
.sg-toc-chip:hover .elementor-button {
background-color: #237b94 !important;
border-color: #237b94 !important;
border-radius: 999px !important;
color: #FFFFFF !important;
transform: translateY(-1px);
outline: none !important;
}
.sg-toc-chip .elementor-button::before,
.sg-toc-chip .elementor-button::after,
.sg-toc-chip .elementor-button-wrapper::before,
.sg-toc-chip .elementor-button-wrapper::after {
display: none !important;
}
.sg-toc-chip .elementor-button-wrapper {
border-radius: 999px !important;
overflow: hidden !important;
}
.sg-toc-chip:focus-visible {
outline: 2px solid #237b94;
outline-offset: 2px;
}
@media (max-width: 767px) {
.sg-toc-chip:hover { transform: none; }
.sg-toc-chip:active {
background-color: #237b94 !important;
color: #FFFFFF !important;
transform: scale(0.97);
transition: all 0.1s ease;
}
}
/* When the TOC strip can't fit all chips on one line, scroll horizontally
instead of wrapping to a second row. Kicks in at the laptop breakpoint
so the strip stays a clean single line on every viewport.
Drag-to-scroll on touch devices, swipe / mousewheel on desktop. */
@media (max-width: 1024px) {
.sg-toc { align-items: stretch !important; }
.sg-toc-pills {
overflow-x: auto;
flex-wrap: nowrap !important;
-webkit-overflow-scrolling: touch;
/* Subtle right-edge fade hint that more chips exist */
mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
-webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
padding-right: 24px;
margin-right: -16px;
/* Hide scrollbar visually but keep functionality */
scrollbar-width: thin;
scrollbar-color: rgba(35,123,148,0.3) transparent;
}
.sg-toc-pills::-webkit-scrollbar { height: 4px; }
.sg-toc-pills::-webkit-scrollbar-track { background: transparent; }
.sg-toc-pills::-webkit-scrollbar-thumb {
background: rgba(35,123,148,0.3);
border-radius: 2px;
}
.sg-toc-chip { flex-shrink: 0; }
}
/* =========================================================
3c. FURNITURE PADS COMPARE CARD (category page)
========================================================= */
/* The "Furniture Pads" card in the Glides vs Pads section is a real
wrapping the entire card content. Sibling "Furniture Glides" card
stays non-clickable since you're already on that page. */
.sg-pads-compare-card {
cursor: pointer;
}
.sg-pads-compare-card:hover {
border-color: #237b94 !important;
box-shadow: 0 6px 18px rgba(35, 123, 148, 0.15) !important;
transform: translateY(-2px);
}
.sg-pads-compare-card:hover h3 {
color: #1a5f73 !important;
}
.sg-pads-compare-card:focus-visible {
outline: 2px solid #237b94;
outline-offset: 2px;
}
/* Equal-height: stretch widget wrappers so both Glides + Pads cards match heights */
.sg-pads-compare-cell {
display: flex;
align-self: stretch;
}
.sg-pads-compare-cell .elementor-widget-html,
.sg-pads-compare-cell .elementor-widget-html > .elementor-widget-container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
@media (max-width: 767px) {
.sg-pads-compare-card { padding: 24px !important; }
.sg-pads-compare-card h3 { font-size: 20px !important; }
.sg-pads-compare-card:hover { transform: none; }
.sg-pads-compare-card:active {
transform: scale(0.99);
transition: transform 0.1s ease;
}
}
/* =========================================================
3b. QUICK DECISION TILE HOVER (guide page)
========================================================= */
/* The 4 cards inside the Quick Decision section are real tags
wrapping the entire tile content (built as HTML widgets). This
guarantees the whole card is clickable on every device without
relying on JS or Elementor's container link behavior. */
.sg-qd-tile-link {
cursor: pointer;
}
.sg-qd-tile-link:hover {
border-color: #237b94 !important;
box-shadow: 0 6px 18px rgba(35, 123, 148, 0.15) !important;
transform: translateY(-2px);
}
.sg-qd-tile-link:hover h4 {
color: #237b94 !important;
}
.sg-qd-tile-link:focus-visible {
outline: 2px solid #237b94;
outline-offset: 2px;
}
@media (max-width: 767px) {
.sg-qd-tile-link { padding: 24px !important; }
.sg-qd-tile-link h4 { font-size: 20px !important; }
.sg-qd-tile-link:hover { transform: none; }
.sg-qd-tile-link:active {
transform: scale(0.99);
transition: transform 0.1s ease;
}
}
/* ── Furniture-type lookup table (native Elementor, flex) ─────
Column widths set on cell widgets in page JSON. CSS = look + mobile.
No display:grid — it fought Elementor flex and collapsed columns. */
.sg-gd-lookup {
background:#FFFFFF; border:1px solid #E5E7EB; border-radius:10px;
font-family:'DM Sans',sans-serif; overflow:hidden;
}
.sg-gd-lookup .sg-gd-lookup__row { padding:16px 22px; border-bottom:1px solid #F3F4F6; align-items:flex-start; }
.sg-gd-lookup .sg-gd-lookup__row:last-child { border-bottom:none; }
/* Zebra striping + readability (added) */
.sg-gd-lookup > .sg-gd-lookup__row:nth-of-type(odd):not(.sg-gd-lookup__row--header) { background:#FBFCFD; }
.sg-gd-lookup .sg-gd-lookup__furniture .elementor-widget-container p { font-size:15px !important; }
.sg-gd-lookup .sg-gd-lookup__pick .elementor-widget-container p { font-size:14px !important; line-height:1.5 !important; }
.sg-gd-lookup .sg-gd-lookup__why .elementor-widget-container p { font-size:13px !important; line-height:1.5 !important; color:#6B7280 !important; }
.sg-gd-lookup .sg-gd-lookup__row--header { background:#F9FAFB; }
.sg-gd-lookup .sg-gd-lookup__row--header .elementor-widget-container p {
font-weight:700 !important; color:#1F2937 !important; font-size:13px !important;
text-transform:uppercase; letter-spacing:0.05em; margin:0 !important;
}
.sg-gd-lookup .sg-gd-lookup__row > .elementor-widget { margin-bottom:0 !important; }
.sg-gd-lookup .sg-gd-lookup__furniture .elementor-widget-container p { font-weight:700 !important; color:#1F2937 !important; margin:0 !important; }
.sg-gd-lookup .sg-gd-lookup__pick .elementor-widget-container p { color:#374151 !important; margin:0 !important; }
.sg-gd-lookup .sg-gd-lookup__pick strong { color:#1F2937 !important; }
.sg-gd-lookup .sg-gd-lookup__why .elementor-widget-container p { color:#6B7280 !important; font-style:italic; margin:0 !important; }
@media (max-width:1023px){
.sg-gd-lookup .sg-gd-lookup__row { padding:16px 18px; gap:4px; }
.sg-gd-lookup .sg-gd-lookup__row--header { display:none !important; }
.sg-gd-lookup .sg-gd-lookup__pick .elementor-widget-container p::before { content:"Recommended: "; font-weight:700; color:#1F2937; font-style:normal; }
.sg-gd-lookup .sg-gd-lookup__why .elementor-widget-container p { font-style:normal; }
.sg-gd-lookup .sg-gd-lookup__why .elementor-widget-container p::before { content:"Why: "; font-weight:700; color:#1F2937; }
}
/* ── Glide size table (native Elementor, flex) — 2-col ──────
Columns: Glide size | Fits leg base. Shape column dropped
(card title already states the shape). */
.sg-size-table { background:#FFFFFF; border:1px solid #E5E7EB; border-radius:10px; font-family:'DM Sans',sans-serif; overflow:hidden; margin-top:8px; }
.sg-size-table .sg-size-row { padding:13px 22px; border-bottom:1px solid #F3F4F6; align-items:flex-start; }
.sg-size-table .sg-size-row:last-child { border-bottom:none; }
/* Shaded header bar */
.sg-size-table .sg-size-row--header { background:#0f3a48; border-bottom:none; padding-top:12px; padding-bottom:12px; }
.sg-size-table .sg-size-row--header .elementor-widget-container p {
font-weight:700 !important; color:#FFFFFF !important; font-size:12px !important;
text-transform:uppercase; letter-spacing:0.06em; margin:0 !important;
}
/* Zebra striping on data rows */
.sg-size-table .sg-size-row:nth-of-type(odd):not(.sg-size-row--header) { background:#FBFCFD; }
.sg-size-table .sg-size-row:nth-of-type(even):not(.sg-size-row--header) { background:#FFFFFF; }
.sg-size-table .sg-size-row > .elementor-widget { margin-bottom:0 !important; }
.sg-size-table .sg-size-gsize .elementor-widget-container p { font-weight:700 !important; color:#1F2937 !important; margin:0 !important; font-variant-numeric:tabular-nums; }
.sg-size-table .sg-size-fits .elementor-widget-container p { color:#4B5563 !important; margin:0 !important; font-variant-numeric:tabular-nums; }
@media (max-width:1023px){
.sg-size-table .sg-size-row { padding:12px 16px; gap:2px; }
.sg-size-table .sg-size-row--header { display:none !important; }
.sg-size-table .sg-size-gsize .elementor-widget-container p::before { content:"Size: "; font-weight:700; color:#1F2937; }
.sg-size-table .sg-size-fits .elementor-widget-container p::before { content:"Fits: "; font-weight:700; color:#1F2937; }
}
/* =========================================================
6. GLIDE GUIDE — PRODUCT ADVISOR CTA (.sg-glide-advisor-cta)
========================================================= */
.sg-glide-advisor-cta {
background: #FFFFFF;
border: 1px solid #E5E7EB;
border-radius: 14px;
padding: 28px 32px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
max-width: 760px;
margin: 0 auto;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
font-family: 'DM Sans', sans-serif;
}
.sg-glide-advisor-cta__icon {
width: 56px; height: 56px; border-radius: 50%;
background: linear-gradient(135deg, #237B94 0%, #1A5F73 100%);
color: #FFFFFF;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(35, 123, 148, 0.25);
}
.sg-glide-advisor-cta__text { flex: 1; min-width: 0; }
.sg-glide-advisor-cta__title {
font-size: 18px;
font-weight: 600;
color: #1F2937;
margin: 0 0 4px 0;
line-height: 1.3;
}
.sg-glide-advisor-cta__subtitle {
font-size: 14px;
color: #6B7280;
margin: 0;
line-height: 1.5;
}
.sg-glide-advisor-cta__btn,
button.sg-glide-advisor-cta__btn {
background: #237B94 !important;
background-color: #237B94 !important;
background-image: none !important;
color: #FFFFFF !important;
border: none !important;
border-radius: 10px !important;
padding: 14px 24px !important;
font-family: 'DM Sans', sans-serif !important;
font-size: 15px !important;
font-weight: 600 !important;
text-transform: none !important;
letter-spacing: normal !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
flex-shrink: 0 !important;
box-shadow: 0 2px 8px rgba(35, 123, 148, 0.2) !important;
text-shadow: none !important;
outline: none !important;
line-height: 1.2 !important;
}
.sg-glide-advisor-cta__btn:hover,
button.sg-glide-advisor-cta__btn:hover {
background: #1A5F73 !important;
background-color: #1A5F73 !important;
transform: translateY(-1px) !important;
box-shadow: 0 6px 16px rgba(35, 123, 148, 0.32) !important;
color: #FFFFFF !important;
}
.sg-glide-advisor-cta__btn:focus,
.sg-glide-advisor-cta__btn:active {
outline: 2px solid #237B94 !important;
outline-offset: 2px !important;
}
.sg-glide-advisor-cta__btn svg { flex-shrink: 0; }
@media (max-width: 640px) {
.sg-glide-advisor-cta {
flex-direction: column;
text-align: center;
padding: 24px 20px;
gap: 16px;
}
.sg-glide-advisor-cta__icon { width: 48px; height: 48px; }
.sg-glide-advisor-cta__title { font-size: 17px; }
.sg-glide-advisor-cta__subtitle { font-size: 13px; }
.sg-glide-advisor-cta__btn,
button.sg-glide-advisor-cta__btn {
width: 100% !important;
justify-content: center !important;
padding: 13px 20px !important;
font-size: 14px !important;
}
}
/* =========================================================
7. HERO TRUST STRIP (guide + category, on dark hero bg)
========================================================= */
/* The horizontal "Specified by hotels... · NWFA-recommended..." line
that sits below the hero CTAs on a dark background. */
.sg-hero-2026__trust {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 10px;
margin: 24px 0 0 0;
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.75);
line-height: 1.5;
letter-spacing: 0.01em;
}
.sg-hero-2026__trust a {
color: rgba(255, 255, 255, 0.92) !important;
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
transition: color 0.2s ease;
}
.sg-hero-2026__trust a:hover {
color: #FFFFFF !important;
}
/* The bullet/dot separator between strip items */
.sg-hero-2026__dot {
color: rgba(255, 255, 255, 0.35);
font-weight: 700;
user-select: none;
}
/* Mobile: stack each item on its own line for legibility */
@media (max-width: 600px) {
.sg-hero-2026__trust {
flex-direction: column;
align-items: flex-start;
gap: 6px;
font-size: 12px;
}
.sg-hero-2026__dot { display: none; }
}
/* ── Full-width CTA buttons on mobile ───────────────────────
Primary/secondary buttons span their container on phones for
an easier tap target. Excludes TOC chips (sg-toc-chip) and
any small inline buttons, which stay compact. */
@media (max-width:480px){
.sg-btn-primary .elementor-button,
.sg-btn-secondary .elementor-button,
a.sg-btn-primary, a.sg-btn-secondary {
width:100% !important;
justify-content:center !important;
text-align:center !important;
}
.sg-btn-primary, .sg-btn-secondary { width:100% !important; }
}
/* ── Button label overflow safeguard ────────────────────────
Long button labels wrap inside the button instead of spilling
past its edges on narrow screens. Applies to CTA buttons. */
.sg-btn-primary .elementor-button,
.sg-btn-secondary .elementor-button,
a.sg-btn-primary, a.sg-btn-secondary {
white-space:normal !important;
word-break:normal;
overflow-wrap:anywhere;
line-height:1.3;
}
@media (max-width:480px){
.sg-btn-primary .elementor-button,
.sg-btn-secondary .elementor-button,
a.sg-btn-primary, a.sg-btn-secondary { font-size:14px !important; padding-left:16px !important; padding-right:16px !important; }
}
/* =========================================================
SG: Card accent lines — three behaviors
.sg-infocard : STATIC teal left line, always. Pure information /
"you are here" cards. No hover, not clickable.
.sg-hovercard : teal left line on HOVER (card has a button inside;
the button navigates). Line stays visible on touch
devices, where hover does not exist.
.sg-clickcard : the WHOLE card is a link. Teal outline RING + lift on
hover; ring stays visible on touch devices.
========================================================= */
/* shared left-line bar */
.sg-infocard, .sg-hovercard { position: relative; }
.sg-infocard::before, .sg-hovercard::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: #237B94;
border-top-left-radius: inherit;
border-bottom-left-radius: inherit;
pointer-events: none;
}
/* informational: line always on */
.sg-infocard::before { opacity: 1; }
/* button-inside card: line on hover (desktop), always on touch */
.sg-hovercard { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.sg-hovercard::before { opacity: 0; transition: opacity 0.2s ease; }
@media (hover: hover) {
.sg-hovercard:hover::before { opacity: 1; }
.sg-hovercard:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(35, 123, 148, 0.15); }
}
@media (hover: none) {
.sg-hovercard::before { opacity: 1; }
}
/* whole-card link: outline ring on hover (desktop), always on touch */
.sg-clickcard {
cursor: pointer;
text-decoration: none;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
@media (hover: hover) {
.sg-clickcard:hover { box-shadow: 0 0 0 2px #237B94, 0 6px 18px rgba(35, 123, 148, 0.15); transform: translateY(-2px); }
}
@media (hover: none) {
.sg-clickcard { box-shadow: 0 0 0 2px #237B94, 0 2px 12px rgba(0, 0, 0, 0.06); }
}
/* ==========================================================================
SG: Cart Flyout Styling
Replaces:
#210 Elementor: Menu Cart Styling
#348 Elementor: Remove all styling from menu cart widget
Keep active alongside this:
#370 Menu Cart - Truncate Cart Titles to 2 Lines (content rule)
#247 Woocommerce - Hide Variation Attributes in Mini Cart (content rule)
#216 Woo - View Cart Button Only (different element, no conflict)
Brand tokens: 'DM Sans', teal #237B94, hover #1B6378
========================================================================== */
/* ==========================================================================
1. CART ICON TOGGLE IN HEADER
Strip Elementor's default button styling so the icon shows cleanly
========================================================================== */
.elementor-menu-cart__toggle,
.elementor-menu-cart__toggle button,
.elementor-menu-cart__toggle .elementor-button,
.elementor-menu-cart__toggle .elementor-button-link,
.elementor-menu-cart__toggle.elementor-button {
border: none !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
outline: none !important;
border-radius: 0 !important;
}
.elementor-menu-cart__toggle svg,
.elementor-menu-cart__toggle i {
border: none !important;
background: transparent !important;
box-shadow: none !important;
color: #111827 !important;
transition: color 0.15s ease;
}
.elementor-menu-cart__toggle:hover svg,
.elementor-menu-cart__toggle:hover i {
color: #237B94 !important;
}
/* The cart count bubble (the "ShoppingCart bubble count" snippet outputs this) */
.elementor-menu-cart__toggle .elementor-button-text,
.elementor-menu-cart__toggle .elementor-menu-cart__toggle-counter {
font-family: 'DM Sans', sans-serif !important;
}
/* ==========================================================================
2. FLYOUT WRAPPER + HEADER
========================================================================== */
/* The flyout drawer container */
.elementor-menu-cart__container {
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
color: #1A1A1A !important;
}
/* Inner main wrapper */
.elementor-menu-cart__main {
background: #FFFFFF !important;
padding: 24px !important;
box-sizing: border-box !important;
}
/* Header bar with title + close button */
.elementor-menu-cart__close-button-wrapper,
.elementor-menu-cart__close-button {
color: #6B7280 !important;
transition: color 0.15s ease;
}
.elementor-menu-cart__close-button:hover {
color: #111827 !important;
}
/* ==========================================================================
3. PRODUCT ROWS
========================================================================== */
/* The list wrapper */
.elementor-menu-cart__products,
.woocommerce-mini-cart {
margin: 0 0 20px 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* Each product row */
.elementor-menu-cart__product,
.woocommerce-mini-cart__item {
display: flex !important;
align-items: flex-start !important;
gap: 14px !important;
padding: 14px 0 !important;
border-bottom: 1px solid #F3F4F6 !important;
background: transparent !important;
position: relative;
}
.elementor-menu-cart__product:last-child,
.woocommerce-mini-cart__item:last-child {
border-bottom: none !important;
}
/* Product thumbnail — border on the img only, not on Elementor's wrapper */
.elementor-menu-cart__product-image {
border: none !important;
background: transparent !important;
padding: 0 !important;
box-shadow: none !important;
width: auto !important;
height: auto !important;
flex-shrink: 0 !important;
}
.elementor-menu-cart__product img,
.elementor-menu-cart__product-image img,
.woocommerce-mini-cart__item img {
width: 56px !important;
height: 56px !important;
object-fit: contain !important;
border: 1px solid #E5E7EB !important;
border-radius: 8px !important;
background: #F9FAFB !important;
padding: 4px !important;
flex-shrink: 0 !important;
box-sizing: border-box !important;
margin: 0 !important;
display: block !important;
}
/* Product name */
.elementor-menu-cart__product-name {
font-family: 'DM Sans', sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
color: #111827 !important;
line-height: 1.4 !important;
margin: 0 0 6px 0 !important;
max-width: 100% !important;
padding-right: 24px !important; /* reserve space for the × button */
}
.elementor-menu-cart__product-name a {
color: #111827 !important;
text-decoration: none !important;
font-weight: 600 !important;
transition: color 0.15s ease;
}
.elementor-menu-cart__product-name a:hover {
color: #237B94 !important;
}
/* Quantity + price line below name */
.elementor-menu-cart__product-price,
.woocommerce-mini-cart__item .quantity {
font-family: 'DM Sans', sans-serif !important;
font-size: 13px !important;
color: #6B7280 !important;
margin: 0 !important;
line-height: 1.4 !important;
}
/* The "×" times character separator and the price itself */
.elementor-menu-cart__product-price .amount,
.elementor-menu-cart__product-price .woocommerce-Price-amount {
color: #1F2937 !important;
font-weight: 500 !important;
}
/* Remove (×) button */
.elementor-menu-cart__product-remove,
.elementor-menu-cart__product .remove,
.elementor-menu-cart__product a.remove {
position: absolute !important;
top: 14px !important;
right: 0 !important;
width: 24px !important;
height: 24px !important;
color: #9CA3AF !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
font-size: 18px !important;
line-height: 22px !important;
font-weight: 400 !important;
text-align: center !important;
border-radius: 50% !important;
text-decoration: none !important;
flex-shrink: 0 !important;
margin: 0 !important;
transition: all 0.15s ease;
}
.elementor-menu-cart__product-remove:hover,
.elementor-menu-cart__product .remove:hover,
.elementor-menu-cart__product a.remove:hover {
color: #DC2626 !important;
background: #FEF2F2 !important;
}
/* Product details column (everything to the right of the thumbnail) */
.elementor-menu-cart__product-text {
flex: 1 1 auto !important;
min-width: 0 !important;
padding: 0 !important;
}
/* ==========================================================================
4. SUBTOTAL ROW
========================================================================== */
.elementor-menu-cart__subtotal,
.woocommerce-mini-cart__total {
border: none !important;
background: transparent !important;
padding: 16px 0 !important;
margin: 0 0 16px 0 !important;
border-top: 1px solid #E5E7EB !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
font-family: 'DM Sans', sans-serif !important;
font-size: 15px !important;
font-weight: 600 !important;
color: #111827 !important;
}
.elementor-menu-cart__subtotal strong,
.woocommerce-mini-cart__total strong {
font-weight: 600 !important;
color: #111827 !important;
}
.elementor-menu-cart__subtotal .amount,
.elementor-menu-cart__subtotal .woocommerce-Price-amount,
.woocommerce-mini-cart__total .amount,
.woocommerce-mini-cart__total .woocommerce-Price-amount {
color: #237B94 !important;
font-size: 18px !important;
font-weight: 700 !important;
}
/* ==========================================================================
5. FOOTER BUTTONS
========================================================================== */
.elementor-menu-cart__footer-buttons {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
margin: 0 !important;
padding: 0 !important;
}
/* All footer buttons — shared base */
.elementor-menu-cart__footer-buttons .elementor-button,
.elementor-menu-cart__footer-buttons a.button {
font-family: 'DM Sans', sans-serif !important;
font-size: 15px !important;
font-weight: 600 !important;
width: 100% !important;
min-height: 48px !important;
padding: 14px 20px !important;
border-radius: 10px !important;
text-align: center !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
text-transform: none !important;
letter-spacing: 0.01em !important;
box-sizing: border-box !important;
cursor: pointer !important;
text-decoration: none !important;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}
/* View Cart — secondary outline teal */
.elementor-menu-cart__footer-buttons .elementor-button--view-cart,
.elementor-menu-cart__footer-buttons a.button.wc-forward:not(.checkout) {
background: #FFFFFF !important;
color: #237B94 !important;
border: 1px solid #237B94 !important;
box-shadow: none !important;
transform: none !important;
}
.elementor-menu-cart__footer-buttons .elementor-button--view-cart:hover,
.elementor-menu-cart__footer-buttons a.button.wc-forward:not(.checkout):hover {
background: #F0F7F9 !important;
color: #237B94 !important;
border-color: #237B94 !important;
}
/* Checkout — primary teal */
.elementor-menu-cart__footer-buttons .elementor-button--checkout,
.elementor-menu-cart__footer-buttons a.button.checkout {
background: #237B94 !important;
color: #FFFFFF !important;
border: 1px solid #237B94 !important;
box-shadow: 0 1px 2px rgba(35, 123, 148, 0.15) !important;
transform: none !important;
}
.elementor-menu-cart__footer-buttons .elementor-button--checkout:hover,
.elementor-menu-cart__footer-buttons a.button.checkout:hover {
background: #1B6378 !important;
border-color: #1B6378 !important;
color: #FFFFFF !important;
}
/* ==========================================================================
6. B2B REQUEST QUOTE BUTTON (injected by JS for B2B users)
========================================================================== */
.elementor-menu-cart__footer-buttons .sg-flyout-request-quote {
font-family: 'DM Sans', sans-serif !important;
font-size: 15px !important;
font-weight: 600 !important;
width: 100% !important;
min-height: 48px !important;
padding: 14px 20px !important;
border-radius: 10px !important;
background: #237B94 !important;
color: #FFFFFF !important;
border: 1px solid #237B94 !important;
text-align: center !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
letter-spacing: 0.01em !important;
box-sizing: border-box !important;
cursor: pointer !important;
text-decoration: none !important;
transition: background 0.15s ease, border-color 0.15s ease !important;
box-shadow: 0 1px 2px rgba(35, 123, 148, 0.15) !important;
}
.elementor-menu-cart__footer-buttons .sg-flyout-request-quote:hover {
background: #1B6378 !important;
border-color: #1B6378 !important;
color: #FFFFFF !important;
}
/* For B2B users: hide the default Checkout button (replaced by Request Quote) */
body.b2bking_b2b_user .elementor-menu-cart__footer-buttons .elementor-button--checkout,
body.b2bking_b2b_user .elementor-menu-cart__footer-buttons a.button.checkout {
display: none !important;
}
/* ==========================================================================
7. EMPTY CART STATE
========================================================================== */
.elementor-menu-cart__main .woocommerce-mini-cart__empty-message {
font-family: 'DM Sans', sans-serif !important;
font-size: 15px !important;
color: #6B7280 !important;
text-align: center !important;
padding: 40px 20px !important;
margin: 0 !important;
}
/* ==========================================================================
8. RESPONSIVE
========================================================================== */
@media (max-width: 767px) {
.elementor-menu-cart__main {
padding: 20px !important;
}
.elementor-menu-cart__product img,
.elementor-menu-cart__product-image img,
.woocommerce-mini-cart__item img {
width: 52px !important;
height: 52px !important;
}
.elementor-menu-cart__product-name {
font-size: 14px !important;
}
.elementor-menu-cart__subtotal,
.woocommerce-mini-cart__total {
font-size: 14px !important;
}
.elementor-menu-cart__subtotal .amount,
.woocommerce-mini-cart__total .amount {
font-size: 17px !important;
}
.elementor-menu-cart__footer-buttons .elementor-button,
.elementor-menu-cart__footer-buttons .sg-flyout-request-quote,
.elementor-menu-cart__footer-buttons a.button {
font-size: 14px !important;
min-height: 44px !important;
padding: 12px 18px !important;
}
}
@media (max-width: 480px) {
.elementor-menu-cart__main {
padding: 16px !important;
}
.elementor-menu-cart__product img,
.elementor-menu-cart__product-image img,
.woocommerce-mini-cart__item img {
width: 48px !important;
height: 48px !important;
}
}
/* ==========================================================================
SG: Recently Viewed Products — Strip Styling
Companion to sg-recently-viewed-products.php
Renders below the related products section on every product page.
========================================================================== */
.sg-recently-viewed {
margin: 48px 0 32px 0 !important;
padding: 32px 0 0 0 !important;
border-top: 1px solid #F3F4F6 !important;
font-family: 'DM Sans', sans-serif !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.sg-rv-heading {
font-family: 'DM Sans', sans-serif !important;
font-size: 22px !important;
font-weight: 600 !important;
color: #111827 !important;
margin: 0 0 20px 0 !important;
padding: 0 !important;
border: none !important;
line-height: 1.3 !important;
}
.sg-rv-grid {
display: grid !important;
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
gap: 16px !important;
width: 100% !important;
}
/* Each card is a thumbnail + name + meta inside an anchor */
.sg-rv-card {
display: flex !important;
flex-direction: column !important;
background: #FFFFFF !important;
border: 1px solid #E5E7EB !important;
border-radius: 10px !important;
padding: 12px !important;
text-decoration: none !important;
color: inherit !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
.sg-rv-card:hover {
border-color: #237B94 !important;
box-shadow: 0 4px 12px rgba(35, 123, 148, 0.08) !important;
text-decoration: none !important;
transform: translateY(-2px) !important;
}
/* Thumbnail container — square aspect-ratio */
.sg-rv-card-img {
width: 100% !important;
aspect-ratio: 1 / 1 !important;
background: #F9FAFB !important;
border-radius: 6px !important;
overflow: hidden !important;
margin: 0 0 10px 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.sg-rv-card-img img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
/* Product name — 2-line max, ellipsis */
.sg-rv-card-name {
font-family: 'DM Sans', sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #111827 !important;
line-height: 1.35 !important;
margin: 0 0 4px 0 !important;
/* Clamp to 2 lines */
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.sg-rv-card-meta {
font-family: 'DM Sans', sans-serif !important;
font-size: 12px !important;
font-weight: 500 !important;
color: #6B7280 !important;
line-height: 1.3 !important;
margin: 0 !important;
}
/* ----- Responsive: all 7 Elementor breakpoints ----- */
/* Widescreen 2400+ — 6 cols (default) */
@media (min-width: 2401px) {
.sg-rv-grid {
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}
}
/* Laptop (≤1366px) — 6 cols still fits */
@media (max-width: 1366px) {
.sg-rv-grid {
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}
}
/* Tablet Extra (≤1024px) — 4 cols */
@media (max-width: 1024px) {
.sg-rv-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 14px !important;
}
.sg-recently-viewed {
margin: 40px 0 28px 0 !important;
padding: 28px 0 0 0 !important;
}
.sg-rv-heading {
font-size: 20px !important;
margin: 0 0 18px 0 !important;
}
}
/* Tablet (≤880px) — 3 cols */
@media (max-width: 880px) {
.sg-rv-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 12px !important;
}
.sg-rv-card {
padding: 10px !important;
}
}
/* Mobile Extra (≤600px) — horizontal scroll instead of grid */
@media (max-width: 600px) {
.sg-recently-viewed {
margin: 32px 0 24px 0 !important;
padding: 24px 0 0 0 !important;
}
.sg-rv-heading {
font-size: 19px !important;
margin: 0 0 16px 0 !important;
}
.sg-rv-grid {
display: flex !important;
grid-template-columns: none !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
scroll-snap-type: x mandatory !important;
padding: 0 4px 8px 4px !important;
margin: 0 -4px !important;
gap: 12px !important;
/* Hide scrollbar but keep functionality */
scrollbar-width: thin !important;
scrollbar-color: #D1D5DB transparent !important;
}
.sg-rv-grid::-webkit-scrollbar {
height: 4px !important;
}
.sg-rv-grid::-webkit-scrollbar-track {
background: transparent !important;
}
.sg-rv-grid::-webkit-scrollbar-thumb {
background: #D1D5DB !important;
border-radius: 2px !important;
}
.sg-rv-card {
flex: 0 0 160px !important;
scroll-snap-align: start !important;
}
.sg-rv-card-name {
font-size: 13px !important;
}
}
/* Mobile (≤480px) — narrower cards in horizontal scroll */
@media (max-width: 480px) {
.sg-rv-card {
flex: 0 0 140px !important;
padding: 10px !important;
}
.sg-rv-card-name {
font-size: 12.5px !important;
}
.sg-rv-card-meta {
font-size: 11.5px !important;
}
}
/* =========================================================================
SG — Size Dropdown Override (v7 — final)
=========================================================================
The Iconic for each attribute carries data-attribute="attribute_pa_
via that attribute. Show the native