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;
}
/* 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: #F19226 !important;
}
/* =========================================================
TEXT SWATCHES ONLY (Iconic)
========================================================= */
/* Text swatch wrapper: kill horizontal scroll behavior */
.variations_form .iconic-was-swatches--text-swatch {
overflow-x: visible !important;
white-space: normal !important;
margin-top: 8px !important;
}
/* Text swatch base */
.variations_form .iconic-was-swatches--text-swatch .iconic-was-swatch {
border: 1px solid #E5EEF3 !important;
border-radius: 6px !important;
background: transparent !important;
box-shadow: none !important;
box-sizing: border-box !important;
min-height: 44px !important;
padding: 10px 12px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
line-height: 1.2 !important;
}
/* Hover */
.variations_form .iconic-was-swatches--text-swatch .iconic-was-swatch:hover {
border-color: #237B94 !important;
}
/* Selected */
.variations_form .iconic-was-swatches--text-swatch .iconic-was-swatch--selected {
background-color: #237B94 !important;
border-color: #237B94 !important;
color: #FFFFFF !important;
}
/* Tablet Portrait — 3 per row (text swatches only) */
@media (min-width: 768px) and (max-width: 900px) {
.variations_form .iconic-was-swatches--text-swatch {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 12px !important;
}
}
/* Mobile — 2 per row (text swatches only) */
@media (max-width: 767px) {
.variations_form .iconic-was-swatches--text-swatch {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
}
/* B2BKING: UNIFIED PRICE & AVAILABILITY STYLING */
/* 1. Price: Primary charcoal at a calm 500 weight */
.b2bking_price_container,
.price .amount,
.price ins .amount {
color: #111827 !important; /* Primary Text */
font-weight: 500 !important;
font-size: 24px !important;
display: inline-block;
margin-bottom: 5px;
}
/* 2. Stock Status: Muted grey for all availability text */
.stock.in-stock,
.stock.available-on-backorder,
.b2bking_stock_status_container,
.available-on-backorder {
color: #4B5563 !important; /* Muted Text */
font-size: 14px !important;
font-weight: 400 !important;
font-style: normal !important; /* Removed italic for a cleaner look */
margin-top: 4px;
display: block;
}
/* 3. Status Accent: Subtle teal bullet for "In Stock" */
.stock.in-stock::before {
content: "• ";
color: #237B94; /* Secondary Teal */
font-weight: 900;
padding-right: 4px;
}
/* Stock status typography */
.stock.in-stock,
.stock.available-on-backorder {
font-family: 'Inter', -apple-system, sans-serif !important;
margin-top: 8px;
margin-bottom: 0;
}
/* Backorder — amber instead of teal */
.stock.available-on-backorder::before {
content: "• ";
color: #D97706 !important;
font-weight: 900;
padding-right: 4px;
}
.stock.available-on-backorder {
color: #92400E !important;
}
/* Space between stock status and Add to Cart */
.single-product .stock {
margin-top: 12px;
margin-bottom: 4px;
}
/* PRODUCT META: CLEAN SPEC ALIGNMENT (NO DIVIDER) */
/* 1. Container: Remove the top line and increase breathing room */
.product_meta {
border-top: none !important; /* Removes the line above Item Number */
padding-top: 10px;
margin-top: 25px;
font-size: 13px !important;
line-height: 1.6;
}
/* 2. Labels: Muted and light (e.g., ITEM NUMBER, PRODUCT TYPES) */
.product_meta .sku_wrapper,
.product_meta .posted_in {
display: block;
color: #9CA3AF !important; /* Muted Grey */
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 2px;
}
/* 3. Data Values (The actual SKU and Category links) */
.product_meta span.sku,
.product_meta a {
color: #374151 !important; /* Secondary Text */
font-weight: 400;
text-transform: none;
letter-spacing: normal;
}
/* 4. Link Styling: Technical Teal for product types */
.product_meta a {
color: #237B94 !important; /* Secondary Teal */
text-decoration: none;
transition: color 0.2s ease;
}
.product_meta a:hover {
color: #F19226 !important; /* Primary Orange hover */
}
/* PRODUCT PAGE: QUANTITY SELECTOR WITH NAVIGATION ARROWS */
/* 1. Target the main quantity input field */
.woocommerce .quantity .qty,
.woocommerce-page .quantity .qty,
.quantity input.qty {
width: 70px !important; /* Slightly wider to accommodate arrows */
height: 44px !important; /* Matches 'Add to Cart' height */
border: 1px solid #E5EEF3 !important; /* Your Border Light color */
border-radius: 4px !important;
background-color: #F9FAFB !important; /* Subtle grey wash */
color: #374151 !important; /* Secondary Text */
font-weight: 500 !important;
font-size: 16px !important;
text-align: left !important; /* Shift text left to make room for arrows */
padding-left: 10px !important;
outline: none !important;
/* Re-enable standard browser spinners */
appearance: auto !important;
-webkit-appearance: number-input !important;
-moz-appearance: number-input !important;
}
/* 2. Ensure arrows are visible on all browsers */
.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button {
-webkit-appearance: inner-spin-button !important;
opacity: 1 !important;
}
/* 3. Hover and Focus states */
.quantity input.qty:hover,
.quantity input.qty:focus {
border-color: #237B94 !important; /* Secondary Teal on interaction */
background-color: #ffffff !important;
}
/* Fix for Product Card Price Typography */
.sg-price-fix,
.sg-price-fix .woocommerce-Price-amount,
.sg-price-fix .woocommerce-Price-currencySymbol {
font-family: 'Inter', sans-serif !important;
font-weight: 600 !important;
line-height: 1.2 !important;
}
/* Responsive Pricing Scale */
@media (min-width: 1440px) {
.sg-price-fix { font-size: 20px !important; }
}
@media (max-width: 1024px) {
.sg-price-fix { font-size: 18px !important; }
}
@media (max-width: 767px) {
.sg-price-fix { font-size: 16px !important; }
}
/* =========================================================
SG — SIZE CHART TAB PANEL IS AN (RESET LINK STYLES)
Elementor Tabs sometimes render panel as when href exists
Your wrapper class: .sg-sizechart-window
========================================================= */
/* Stop theme/global link styling from hijacking the whole chart panel */
a.sg-sizechart-window,
a.sg-sizechart-window:visited,
a.sg-sizechart-window:hover,
a.sg-sizechart-window:active {
color: inherit !important;
font-weight: inherit !important;
text-decoration: none !important;
}
/* Most important: prevent rules like "a * { ... }" from changing everything inside */
a.sg-sizechart-window * {
color: inherit !important;
font-weight: inherit !important;
text-decoration: none !important;
}
/* Make sure table text follows your global body color */
a.sg-sizechart-window .yith-wcpsc-product-table-wrapper,
a.sg-sizechart-window .yith-wcpsc-product-table-wrapper * {
color: #374151 !important; /* body */
font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
font-weight: 400 !important;
}
/* Keep the actual table headers looking like headers */
a.sg-sizechart-window .yith-wcpsc-product-table thead th {
color: #111827 !important; /* heading */
font-weight: 600 !important;
text-decoration: none !important;
}
/* If your theme underlines links on hover, kill it */
a.sg-sizechart-window:hover,
a.sg-sizechart-window:hover * {
text-decoration: none !important;
}
/* -----------------------------------------------------------
DYNAMIC FLOOR TYPE BADGES (Enlarged Version)
Styling for "Hard Floor Safe" and "Carpet Friendly Slide".
----------------------------------------------------------- */
.sg-badge {
display: inline-block;
/* Increased padding for a more substantial look */
padding: 8px 16px;
font-family: 'Inter', sans-serif;
font-weight: 800; /* Extra bold for authority */
/* Increased from 10px to 13px for better readability */
font-size: 13px;
/* Tightened slightly for better balance at larger size */
letter-spacing: 1px;
border-radius: 6px;
text-transform: uppercase;
margin-bottom: 16px;
/* Ensures badges look sharp on all screens */
line-height: 1;
transition: all 0.3s ease;
}
/* Hard Floor Safe - Neutral Engineered Look for Glides */
.badge-hard {
background-color: #F4F4F4;
color: #1A1A1A;
/* Thicker border for the larger badge */
border: 2px solid #D1D5DB;
}
/* Carpet & Rug Friendly - Brand Teal Accents for Slides */
.badge-soft {
background-color: #EAF2F4;
color: #237B94;
/* Thicker border to match brand weight */
border: 2px solid #237B94;
}
/* Optional: Subtle hover effect to keep the "Interactive" feel */
.sg-badge:hover {
transform: scale(1.03);
}
/* ==========================================
SG — Pain Cards (Styling Only: no height equalizing)
========================================== */
/* 1. Base Card Styling */
.pain-card {
background-color: #ffffff !important;
border: 1px solid #eeeeee !important; /* Subtle resting border */
border-radius: 4px !important;
padding: 40px 30px !important;
transition: all 0.3s ease-in-out !important;
}
/* 2. Icon Spacing & Neutral State */
.pain-card .elementor-widget-image,
.pain-card .elementor-widget-icon,
.pain-card svg {
display: block !important;
margin: 0 auto 10px auto !important; /* Gap to Title */
width: 40px !important;
fill: #888888 !important; /* Initial professional grey */
transition: fill 0.3s ease;
}
/* 3. Heading Spacing */
.pain-card .elementor-heading-title {
text-align: center !important;
margin: 0 0 12px 0 !important; /* Gap to Bullets */
color: #111827 !important; /* SG heading color */
font-weight: 600 !important;
line-height: 1.2 !important;
}
/* 4. Text Editor */
.pain-card .elementor-text-editor {
width: 100% !important;
text-align: left !important;
color: #374151 !important; /* SG body text */
font-size: 15px !important;
}
/* 5. Bullet Point Styling */
.pain-card ul {
list-style-type: none !important;
padding-left: 0 !important;
margin: 0 !important;
}
.pain-card li {
position: relative;
padding-left: 20px;
margin-bottom: 8px;
line-height: 1.5;
color: #374151 !important;
}
.pain-card li::before {
content: "•";
position: absolute;
left: 0;
font-weight: 700;
color: #888888; /* Initial grey bullets */
transition: color 0.3s ease;
}
/* 6. Desktop Hover Logic (Grey -> Red) */
@media (min-width: 1025px) {
.pain-card:hover {
border-color: #D9534F !important; /* Border turns Red */
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(0,0,0,0.06) !important;
}
/* Transition Icon and Bullet Dots to Red on Hover */
.pain-card:hover svg,
.pain-card:hover li::before {
fill: #D9534F !important;
color: #D9534F !important;
}
}
/* 7. Mobile/Tablet Logic (Icons & Bullets stay Red) */
@media (max-width: 1024px) {
.pain-card {
border-color: #e0e0e0 !important;
}
.pain-card svg,
.pain-card li::before {
fill: #D9534F !important;
color: #D9534F !important;
}
}
/* Truncate Cart Product Names to 3 Lines */
.elementor-menu-cart__product-name,
.elementor-menu-cart__product-name a {
display: -webkit-box !important;
-webkit-line-clamp: 3 !important; /* Increased to 3 lines */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.4;
max-height: 4.2em !important; /* Calculation: 1.4 line-height * 3 lines */
}
/* ============================================================
Superior Glides — Category Page CSS
sg-category.css | Furniture Glides category page
v3 — added sister-product related grid; fixed compare-grid
============================================================ */
/* ---- Design Tokens --------------------------------------- */
.sg-category-page {
--sg-teal: #237B94;
--sg-teal-dark: #1a5e70;
--sg-teal-light: #e8f4f7;
--sg-teal-xlight: #f2f9fb;
--sg-orange: #F19226;
--sg-orange-dark: #d97d18;
--sg-orange-light: #fdf3e7;
--sg-black: #0f1923;
--sg-ink: #1e2a35;
--sg-grey-dark: #374151;
--sg-grey: #6b7280;
--sg-grey-light: #9ca3af;
--sg-border: #e5e7eb;
--sg-border-light: #f3f4f6;
--sg-bg: #f8fafc;
--sg-white: #ffffff;
--sg-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--sg-space-xs: 0.5rem;
--sg-space-sm: 1rem;
--sg-space-md: 2rem;
--sg-space-lg: 3rem;
--sg-space-xl: 5rem;
--sg-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
--sg-shadow: 0 4px 12px rgba(0,0,0,0.07), 0 2px 6px rgba(0,0,0,0.04);
--sg-shadow-md: 0 10px 30px rgba(0,0,0,0.09), 0 4px 12px rgba(0,0,0,0.05);
--sg-radius-sm: 6px;
--sg-radius: 12px;
--sg-radius-lg: 20px;
--sg-max-width: 1140px;
font-family: var(--sg-font);
font-size: 1rem;
line-height: 1.7;
color: var(--sg-ink);
background: var(--sg-white);
}
.sg-category-page *,
.sg-category-page *::before,
.sg-category-page *::after {
box-sizing: border-box;
}
/* ============================================================
HERO
============================================================ */
.sg-cat-hero {
background: linear-gradient(135deg, var(--sg-black) 0%, #1a2d3d 50%, #1e3a47 100%);
padding: 72px 40px 64px;
position: relative;
overflow: hidden;
text-align: center;
}
.sg-cat-hero::before {
content: '';
position: absolute;
top: -40%;
right: -10%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(35,123,148,0.2) 0%, transparent 65%);
pointer-events: none;
}
.sg-cat-hero::after {
content: '';
position: absolute;
bottom: -20%;
left: 5%;
width: 350px;
height: 350px;
background: radial-gradient(circle, rgba(241,146,38,0.08) 0%, transparent 65%);
pointer-events: none;
}
.sg-cat-hero-inner {
max-width: 680px;
margin: 0 auto;
position: relative;
}
.sg-cat-h1 {
font-size: clamp(2rem, 4.5vw, 3rem);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.1;
color: #ffffff !important;
margin: 0 0 1rem 0;
}
.sg-cat-h1::after {
content: '';
display: block;
width: 56px;
height: 4px;
background: linear-gradient(90deg, var(--sg-teal), var(--sg-orange));
border-radius: 2px;
margin: 1rem auto 0;
}
.sg-cat-lead {
font-size: 1.05rem;
line-height: 1.75;
color: rgba(255,255,255,0.78);
margin: 0 0 2rem 0;
}
.sg-cat-lead strong {
color: rgba(255,255,255,0.95);
font-weight: 600;
}
.sg-cat-cta {
display: flex;
justify-content: center;
}
.sg-cat-cta a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--sg-teal);
color: var(--sg-white) !important;
text-decoration: none;
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.01em;
padding: 13px 26px;
border-radius: var(--sg-radius-sm);
transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 4px 14px rgba(35,123,148,0.4);
}
.sg-cat-cta a:hover {
background: var(--sg-teal-dark);
color: var(--sg-white) !important;
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(35,123,148,0.5);
text-decoration: none;
}
/* ============================================================
SECTION WRAPPER — max-width for ultrawide screens
============================================================ */
.sg-cat-section {
padding: var(--sg-space-xl) 60px;
}
.sg-cat-section > * {
max-width: var(--sg-max-width);
margin-left: auto;
margin-right: auto;
}
.sg-cat-section:nth-child(even) {
background: var(--sg-bg);
}
.sg-cat-section-header {
text-align: center;
margin-bottom: var(--sg-space-md);
}
/* ============================================================
TYPOGRAPHY
============================================================ */
.sg-cat-h2 {
font-size: clamp(1.75rem, 3vw, 2.25rem);
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.2;
color: var(--sg-black);
margin: 0 0 0.75rem 0;
}
.sg-cat-section-header .sg-cat-h2::after {
content: '';
display: block;
width: 48px;
height: 3px;
background: linear-gradient(90deg, var(--sg-teal), var(--sg-orange));
border-radius: 2px;
margin: 0.6rem auto 0;
}
.sg-cat-h3 {
font-size: 1.15rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--sg-ink);
margin: 0 0 0.75rem 0;
}
/* Subtitle span inside h3 — e.g. "(PA6 Sliding Surface)" */
.sg-cat-h3-sub {
font-weight: 500;
color: var(--sg-grey);
}
.sg-cat-h4 {
font-size: 0.85rem;
font-weight: 700;
color: var(--sg-teal-dark);
margin: 0 0 0.75rem 0;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.sg-cat-h4 a {
color: inherit;
text-decoration: none;
transition: color 0.2s;
}
.sg-cat-h4 a:hover {
color: var(--sg-teal);
text-decoration: underline;
}
.sg-cat-intro {
font-size: 1rem;
color: var(--sg-grey-dark);
line-height: 1.75;
max-width: 680px;
margin: 0 auto;
}
/* Inline links — teal, bold (replaces inline styles on ) */
.sg-cat-intro a,
.sg-cat-footnote a {
color: var(--sg-teal);
font-weight: 600;
text-decoration: none;
transition: color 0.2s;
}
.sg-cat-intro a:hover,
.sg-cat-footnote a:hover {
color: var(--sg-teal-dark);
text-decoration: underline;
}
.sg-cat-text-center { text-align: center; }
/* Footnote / helper text below sections */
.sg-cat-footnote {
font-size: 0.9rem;
color: var(--sg-grey);
text-align: center;
margin-top: 1.5rem;
}
/* ============================================================
MOUNTING METHOD CARDS (3-up grid)
============================================================ */
.sg-cat-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
align-items: stretch;
}
.sg-cat-card {
background: var(--sg-white);
border: 1px solid var(--sg-border);
border-radius: var(--sg-radius);
padding: 1.75rem;
box-shadow: var(--sg-shadow-sm);
transition: box-shadow 0.2s ease, transform 0.2s ease;
display: flex;
flex-direction: column;
}
.sg-cat-card:hover {
box-shadow: var(--sg-shadow-md);
transform: translateY(-3px);
}
/* Featured (middle) card */
.sg-cat-card--featured {
border-color: var(--sg-teal);
position: relative;
padding-top: 2.5rem;
}
.sg-cat-card--featured::before {
content: 'MOST POPULAR';
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background: var(--sg-teal);
color: var(--sg-white);
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.12em;
padding: 4px 14px;
border-radius: 20px;
white-space: nowrap;
}
/* Badge pill */
.sg-cat-badge {
display: inline-block;
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
background: var(--sg-teal-xlight);
color: var(--sg-teal-dark);
border: 1px solid rgba(35,123,148,0.2);
border-radius: 4px;
padding: 3px 10px;
margin-bottom: 0.875rem;
}
.sg-cat-card p {
font-size: 0.92rem;
color: var(--sg-grey-dark);
line-height: 1.65;
margin: 0 0 1rem 0;
}
.sg-cat-card ul {
margin: 0;
padding: 0;
list-style: none;
flex: 1;
}
.sg-cat-card ul li {
font-size: 0.88rem;
color: var(--sg-grey-dark);
padding: 0.3rem 0 0.3rem 1.2rem;
position: relative;
border-bottom: 1px solid var(--sg-border-light);
}
.sg-cat-card ul li:last-child {
border-bottom: none;
}
.sg-cat-card ul li::before {
content: '→';
position: absolute;
left: 0;
color: var(--sg-teal);
font-size: 0.75rem;
top: 0.38rem;
}
/* Card body text (for pad cards — replaces inline flex:1) */
.sg-cat-card-body {
flex: 1;
font-size: 0.92rem;
color: var(--sg-grey-dark);
line-height: 1.65;
}
/* Card footer */
.sg-cat-card-footer {
margin-top: 1.25rem;
padding-top: 1rem;
border-top: 1px solid var(--sg-border-light);
}
.sg-cat-card-btn {
display: inline-block;
color: var(--sg-teal);
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
padding: 0.35rem 0.75rem;
border: 1px solid var(--sg-teal);
border-radius: var(--sg-radius-sm);
background: transparent;
transition: background 0.18s ease, color 0.18s ease;
}
.sg-cat-card-btn:hover {
background: var(--sg-teal);
color: var(--sg-white) !important;
text-decoration: none;
}
/* ============================================================
SUBSECTION (within nail-on / self-adhesive sections)
============================================================ */
.sg-cat-subsection {
border: 1px solid var(--sg-border);
border-radius: var(--sg-radius);
overflow: hidden;
background: var(--sg-white);
box-shadow: var(--sg-shadow-sm);
}
.sg-cat-subsection-header {
background: var(--sg-bg);
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--sg-border);
}
.sg-cat-subsection-body {
padding: 1.5rem;
}
.sg-cat-subsection-body > p {
font-size: 0.92rem;
color: var(--sg-grey-dark);
line-height: 1.65;
margin: 0 0 0.5rem 0;
}
/* ============================================================
SIZE TILES (showcase)
============================================================ */
.sg-cat-showcase {
display: flex;
flex-wrap: wrap;
gap: 0.625rem;
margin-top: 0.75rem;
}
.sg-cat-size-tile {
background: var(--sg-bg);
border: 1px solid var(--sg-border);
border-radius: var(--sg-radius-sm);
padding: 0.75rem 1rem;
min-width: 160px;
flex: 1 1 160px;
box-shadow: var(--sg-shadow-sm);
}
.sg-cat-size-title {
display: block;
font-size: 0.9rem;
font-weight: 700;
color: var(--sg-ink);
font-family: 'SF Mono', 'Consolas', monospace;
letter-spacing: -0.01em;
margin: 0;
}
.sg-cat-size-desc {
display: block;
font-size: 0.78rem;
color: var(--sg-grey);
line-height: 1.45;
margin-top: 0.25rem;
}
/* Spacing helpers */
.sg-cat-mt-md { margin-top: 1.5rem; }
.sg-cat-mt-lg { margin-top: 2rem; }
/* ============================================================
SIZE REFERENCE TABLE
============================================================ */
.sg-cat-table-wrap {
overflow-x: auto;
border-radius: var(--sg-radius);
border: 1px solid var(--sg-border);
box-shadow: var(--sg-shadow-sm);
}
.sg-cat-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.sg-cat-table thead tr {
background: var(--sg-teal);
color: var(--sg-white);
}
.sg-cat-table th {
padding: 13px 18px;
text-align: left;
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.sg-cat-table tbody tr {
border-bottom: 1px dashed var(--sg-border);
transition: background 0.15s ease;
}
.sg-cat-table tbody tr:last-child {
border-bottom: none;
}
.sg-cat-table tbody tr:hover {
background: var(--sg-teal-xlight);
}
.sg-cat-table tbody tr:nth-child(even) {
background: var(--sg-bg);
}
.sg-cat-table tbody tr:nth-child(even):hover {
background: var(--sg-teal-xlight);
}
.sg-cat-table td {
padding: 12px 18px;
color: var(--sg-grey-dark);
vertical-align: middle;
}
.sg-cat-table td:first-child {
font-weight: 600;
color: var(--sg-ink);
font-family: 'SF Mono', 'Consolas', monospace;
font-size: 0.85rem;
}
.sg-cat-table td a {
color: var(--sg-teal);
font-weight: 600;
text-decoration: none;
font-size: 0.85rem;
}
.sg-cat-table td a:hover {
color: var(--sg-teal-dark);
text-decoration: underline;
}
/* ============================================================
WHERE THESE GLIDES WORK
============================================================ */
.sg-cat-apps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-top: var(--sg-space-md);
}
.sg-cat-app-card {
background: var(--sg-white);
border: 1px solid var(--sg-border);
border-radius: var(--sg-radius);
padding: 1.5rem 1.25rem;
text-align: center;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
box-shadow: var(--sg-shadow-sm);
display: flex;
flex-direction: column;
align-items: center;
}
.sg-cat-app-card:hover {
border-color: var(--sg-teal);
box-shadow: var(--sg-shadow);
transform: translateY(-3px);
}
.sg-cat-app-icon {
font-size: 1.75rem;
margin-bottom: 0.625rem;
display: block;
text-align: center;
}
.sg-cat-app-title {
font-size: 0.9rem;
font-weight: 700;
color: var(--sg-ink);
margin: 0 0 0.35rem 0;
text-align: center;
}
.sg-cat-app-desc {
font-size: 0.83rem;
color: var(--sg-grey);
line-height: 1.55;
text-align: center;
}
/* ============================================================
FLOOR COMPATIBILITY GRID
============================================================ */
.sg-cat-floors-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-top: var(--sg-space-md);
}
.sg-cat-floor-item {
display: flex;
align-items: center;
gap: 0.875rem;
background: var(--sg-white);
border: 1px solid var(--sg-border);
border-radius: var(--sg-radius-sm);
padding: 0.875rem 1.125rem;
transition: border-color 0.2s, background 0.2s;
}
.sg-cat-floor-item:hover {
border-color: var(--sg-teal);
background: var(--sg-teal-xlight);
}
.sg-cat-floor-check {
flex-shrink: 0;
width: 22px;
height: 22px;
background: var(--sg-teal);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--sg-white);
font-size: 0.7rem;
font-weight: 800;
}
.sg-cat-floor-name {
font-size: 0.88rem;
font-weight: 600;
color: var(--sg-ink);
}
/* ============================================================
COMPARISON SECTION (vs. competitor — used in guide pages)
"vs. Ours" badge appears top-right on each card.
Use sg-cat-related-* below for sister-product comparisons
that should NOT have the badge.
============================================================ */
.sg-cat-compare-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.25rem;
margin-top: var(--sg-space-md);
}
.sg-cat-compare-card {
background: var(--sg-white);
border: 1px solid var(--sg-border);
border-radius: var(--sg-radius);
padding: 1.75rem;
box-shadow: var(--sg-shadow-sm);
position: relative;
overflow: hidden;
}
.sg-cat-compare-card::after {
content: 'vs. Ours';
position: absolute;
top: 1.25rem;
right: 1.25rem;
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--sg-orange);
background: var(--sg-orange-light);
border: 1px solid rgba(241,146,38,0.25);
padding: 2px 8px;
border-radius: 4px;
}
.sg-cat-compare-title {
font-size: 1rem;
font-weight: 700;
color: var(--sg-ink);
margin: 0 0 0.75rem 0;
}
.sg-cat-compare-desc {
font-size: 0.88rem;
color: var(--sg-grey-dark);
line-height: 1.65;
}
/* ============================================================
RELATED PRODUCT GRID (sister-product comparisons)
Used for "Glides vs Pads" style cross-references between
Superior Glide product lines. Same visual treatment as
compare-card but WITHOUT the "vs. Ours" badge.
============================================================ */
.sg-cat-related-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.25rem;
margin-top: var(--sg-space-md);
}
.sg-cat-related-card {
background: var(--sg-white);
border: 1px solid var(--sg-border);
border-radius: var(--sg-radius);
padding: 1.75rem;
box-shadow: var(--sg-shadow-sm);
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.sg-cat-related-card:hover {
border-color: var(--sg-teal);
box-shadow: var(--sg-shadow);
transform: translateY(-3px);
}
.sg-cat-related-title {
font-size: 1rem;
font-weight: 700;
color: var(--sg-ink);
margin: 0 0 0.75rem 0;
}
.sg-cat-related-title a {
color: var(--sg-teal);
text-decoration: none;
transition: color 0.2s;
}
.sg-cat-related-title a:hover {
color: var(--sg-teal-dark);
text-decoration: underline;
}
.sg-cat-related-desc {
font-size: 0.88rem;
color: var(--sg-grey-dark);
line-height: 1.65;
}
/* ============================================================
GUIDES AND RESOURCES
============================================================ */
.sg-cat-resources-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
margin-top: var(--sg-space-md);
align-items: stretch;
}
.sg-cat-resource-card {
background: var(--sg-white);
border: 1px solid var(--sg-border);
border-radius: var(--sg-radius);
padding: 1.75rem;
display: flex;
flex-direction: column;
position: relative;
transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
box-shadow: var(--sg-shadow-sm);
}
.sg-cat-resource-card:hover {
border-color: var(--sg-teal);
box-shadow: var(--sg-shadow-md);
transform: translateY(-3px);
}
.sg-cat-resource-btn {
display: inline-block;
margin-top: 1.25rem;
padding: 0.4rem 1rem;
font-size: 0.83rem;
font-weight: 600;
color: var(--sg-teal);
background: transparent;
border: 1px solid var(--sg-teal);
border-radius: var(--sg-radius-sm);
text-decoration: none;
transition: background 0.18s ease, color 0.18s ease;
align-self: flex-start;
position: relative;
z-index: 2;
}
.sg-cat-resource-btn:hover {
background: var(--sg-teal);
color: var(--sg-white) !important;
text-decoration: none;
}
.sg-cat-resource-type {
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--sg-teal);
background: var(--sg-teal-xlight);
border: 1px solid rgba(35,123,148,0.2);
border-radius: 4px;
padding: 3px 10px;
display: inline-block;
margin-bottom: 0.875rem;
align-self: flex-start;
}
.sg-cat-resource-title {
font-size: 1rem;
font-weight: 700;
color: var(--sg-ink);
margin: 0 0 0.5rem 0;
line-height: 1.35;
}
.sg-cat-resource-desc {
font-size: 0.85rem;
color: var(--sg-grey);
line-height: 1.6;
flex: 1;
}
/* ============================================================
CALLOUT BOXES
============================================================ */
.sg-cat-callout {
border-radius: var(--sg-radius-sm);
padding: 1.25rem 1.5rem;
margin-top: 1.5rem;
}
.sg-cat-callout--warn {
background: #fef3cd;
border: 1px solid #f0d78c;
}
.sg-cat-callout-title {
font-size: 0.9rem;
font-weight: 700;
color: var(--sg-ink);
margin: 0 0 0.4rem 0;
}
.sg-cat-callout-text {
font-size: 0.88rem;
color: var(--sg-grey-dark);
line-height: 1.65;
margin: 0;
}
.sg-cat-callout-text a {
color: var(--sg-teal);
font-weight: 600;
text-decoration: none;
}
.sg-cat-callout-text a:hover {
color: var(--sg-teal-dark);
text-decoration: underline;
}
/* ============================================================
RESPONSIVE — Tablet (≤ 1024px)
============================================================ */
@media (max-width: 1024px) {
.sg-cat-hero,
.sg-cat-section {
padding-left: 40px;
padding-right: 40px;
}
.sg-cat-grid,
.sg-cat-compare-grid,
.sg-cat-related-grid,
.sg-cat-resources-grid {
grid-template-columns: repeat(2, 1fr);
}
.sg-cat-apps-grid,
.sg-cat-floors-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ============================================================
RESPONSIVE — Mobile (≤ 768px)
============================================================ */
@media (max-width: 768px) {
.sg-cat-hero {
padding: 48px 20px 44px;
text-align: center;
}
.sg-cat-hero-inner {
max-width: 100%;
}
.sg-cat-h1 {
font-size: 2rem;
}
.sg-cat-h1::after {
margin: 0.75rem auto 0;
}
.sg-cat-lead {
font-size: 0.97rem;
text-align: center;
}
.sg-cat-cta {
justify-content: center;
}
.sg-cat-section {
padding: 3rem 20px;
}
/* All grids → single column */
.sg-cat-grid,
.sg-cat-compare-grid,
.sg-cat-related-grid,
.sg-cat-resources-grid,
.sg-cat-apps-grid,
.sg-cat-floors-grid {
grid-template-columns: 1fr;
}
.sg-cat-resource-card {
width: 100%;
}
.sg-cat-resource-type {
align-self: flex-start;
}
.sg-cat-card {
align-items: center;
text-align: center;
}
.sg-cat-card ul {
text-align: left;
width: 100%;
}
.sg-cat-card-footer {
width: 100%;
text-align: center;
}
.sg-cat-card--featured::before {
font-size: 0.6rem;
}
.sg-cat-size-tile {
min-width: calc(50% - 0.3125rem);
flex: 1 1 calc(50% - 0.3125rem);
}
}
/* ============================================================
RESPONSIVE — Small mobile (≤ 480px)
============================================================ */
@media (max-width: 480px) {
.sg-cat-h1 {
font-size: 1.8rem;
}
.sg-cat-size-tile {
min-width: 100%;
flex: 1 1 100%;
}
.sg-cat-subsection-body {
padding: 1rem;
}
.sg-cat-table th,
.sg-cat-table td {
padding: 10px 12px;
font-size: 0.82rem;
}
}
/* ---- Product Category Cards ---- */
.sg-product-card {
border: 2px solid #ececec !important;
border-radius: 8px !important;
background: #ffffff !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
transition: all 0.2s ease-in-out !important;
}
.sg-product-card:hover {
border-color: #237B94 !important;
box-shadow: 0 4px 16px rgba(35,123,148,0.12) !important;
transform: translateY(-2px) !important;
}
/* ---- Router show/hide ---- */
#hard-floor-options {
display: none;
}
#hard-floor-question {
display: none;
}
#hard-floor-options.active {
display: flex !important;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
/* ---- Mobile: stack all cards ---- */
@media (max-width: 767px) {
#floor-type-cards {
flex-direction: column !important;
gap: 12px !important;
}
#floor-type-cards > * {
width: 100% !important;
max-width: 100% !important;
}
#hard-floor-options.active {
flex-direction: column !important;
gap: 12px !important;
}
#hard-floor-options.active > * {
width: 100% !important;
max-width: 100% !important;
}
}
/* ---- Tablet: 3 cards fit ---- */
@media (min-width: 768px) and (max-width: 1024px) {
#hard-floor-options.active > * {
width: 30% !important;
min-width: 200px;
}
}
/* =========================================================================
SUPERIOR GLIDE — Product Page Content Styles v3
=========================================================================
Scope: .sg-product-content (WooCommerce long description)
Fonts: Inter (headings + body) · Poppins (specs/badges)
Palette matched to superiorglide.com homepage
Zero inline styles required — all styling via classes
All selectors scoped under .sg-product-content for specificity
========================================================================= */
/* --- Tokens --- */
.sg-product-content {
--sg-teal: #237B94;
--sg-teal-light: #f2f9fb;
--sg-teal-hover: #1b6275;
--sg-teal-border: rgba(35,123,148,.2);
--sg-teal-10: rgba(35,123,148,.08);
--sg-orange: #F19226;
--sg-dark: #111827;
--sg-body: #374151;
--sg-grey: #6B7280;
--sg-grey-light: #9CA3AF;
--sg-border: #ECECEC;
--sg-border-strong: #D1D5DB;
--sg-bg: #fff;
--sg-bg-neutral: #F9FAFB;
--sg-bg-good: #F0FDF4;
--sg-bg-good-border: #BBF7D0;
--sg-warn: #b45309;
--sg-shadow-sm: 0 1px 3px rgba(0,0,0,.04);
--sg-shadow: 0 2px 8px rgba(0,0,0,.06);
--sg-shadow-hover: 0 6px 20px rgba(0,0,0,.10);
--sg-radius: 8px;
--sg-radius-sm: 6px;
--sg-font: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--sg-font-spec: 'Poppins','Inter',sans-serif;
}
/* =======================================================================
CONTAINER
======================================================================= */
.sg-product-content {
font-family: var(--sg-font);
font-size: 15px;
line-height: 1.7;
color: var(--sg-body);
max-width: 960px;
margin: 0 auto;
padding: 0 1rem;
}
/* =======================================================================
SECTIONS
======================================================================= */
.sg-product-content .sg-pc-section {
margin-bottom: 2.5rem;
padding-bottom: 2.5rem;
border-bottom: 2px solid var(--sg-border);
}
.sg-product-content .sg-pc-section:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
/* =======================================================================
HERO
======================================================================= */
.sg-product-content .sg-pc-hero {
background: var(--sg-bg-neutral);
border: 1px solid var(--sg-border);
border-radius: var(--sg-radius);
padding: 2rem 2rem 1.75rem;
margin-bottom: 2.5rem;
}
/* =======================================================================
TYPOGRAPHY
======================================================================= */
.sg-product-content .sg-pc-h2 {
font-family: var(--sg-font);
font-size: 30px;
font-weight: 800;
line-height: 1.2;
color: var(--sg-dark);
margin: 0 0 1rem;
letter-spacing: -.01em;
}
.sg-product-content .sg-pc-h3 {
font-family: var(--sg-font);
font-size: 22px;
font-weight: 700;
line-height: 1.3;
color: var(--sg-dark);
margin: 0 0 .65rem;
padding-bottom: .5rem;
border-bottom: 2px solid var(--sg-teal);
display: inline-block;
}
.sg-product-content .sg-pc-h4 {
font-family: var(--sg-font);
font-size: 16px;
font-weight: 600;
line-height: 1.4;
color: var(--sg-dark);
margin: 0 0 .25rem;
}
.sg-product-content .sg-pc-h4--teal { color: var(--sg-teal); }
.sg-product-content .sg-pc-h4--warn { color: var(--sg-warn); }
.sg-product-content .sg-pc-p {
font-size: 15px;
line-height: 1.7;
color: var(--sg-body);
margin: 0 0 .75rem;
}
.sg-product-content .sg-pc-lead {
font-size: 16px;
line-height: 1.75;
color: var(--sg-body);
margin: 0 0 1rem;
}
.sg-product-content .sg-pc-lead:last-child { margin-bottom: 0; }
.sg-product-content .sg-pc-small {
font-size: 13px;
line-height: 1.6;
color: var(--sg-grey);
margin: 1.5rem 0 0;
}
/* Imperial size labels inside h4 */
.sg-product-content .sg-pc-imperial {
font-weight: 400;
color: var(--sg-grey-light);
}
/* Card body text (tight top margin + flex grow) */
.sg-product-content .sg-pc-card-body {
margin: .25rem 0 0;
flex: 1;
}
/* Card internal content push — paragraph grows, button stays at bottom */
.sg-product-content .sg-pc-card > .sg-pc-p,
.sg-product-content .sg-pc-card > .sg-pc-lead {
flex: 1;
margin: 0;
}
.sg-product-content .sg-pc-card > .sg-pc-h4 { margin: 0; }
.sg-product-content .sg-pc-card > .sg-pc-btn { margin: 0; }
/* =======================================================================
LINKS
======================================================================= */
.sg-product-content a {
color: var(--sg-teal);
text-decoration: underline;
text-decoration-color: var(--sg-teal-border);
text-underline-offset: 2px;
transition: color .15s, text-decoration-color .15s;
}
.sg-product-content a:hover {
color: var(--sg-teal-hover);
text-decoration-color: var(--sg-teal-hover);
}
.sg-product-content .sg-pc-link--inherit,
.sg-product-content .sg-pc-link--inherit:link,
.sg-product-content .sg-pc-link--inherit:visited {
color: inherit !important;
text-decoration: none !important;
}
.sg-product-content .sg-pc-link--inherit:hover {
color: var(--sg-teal) !important;
}
/* =======================================================================
GRIDS
======================================================================= */
.sg-product-content .sg-pc-grid { display: grid; gap: 1rem; }
.sg-product-content .sg-pc-grid--cols-2 { grid-template-columns: 1fr 1fr; }
.sg-product-content .sg-pc-grid--cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.sg-product-content .sg-pc-grid--split { grid-template-columns: 1fr 1fr; gap: 2rem; }
.sg-product-content .sg-pc-grid--tight { gap: .5rem; }
/* =======================================================================
CARDS — flex column, space-between for even heading/text/button spacing
======================================================================= */
.sg-product-content .sg-pc-card {
background: var(--sg-bg);
border: 2px solid var(--sg-border);
border-radius: var(--sg-radius);
padding: 1.5rem 1.5rem;
box-shadow: var(--sg-shadow-sm);
transition: transform .2s, box-shadow .2s, border-color .2s;
display: flex;
flex-direction: column;
gap: .75rem;
}
.sg-product-content .sg-pc-card:hover {
transform: translateY(-2px);
box-shadow: var(--sg-shadow-hover);
border-color: var(--sg-border-strong);
}
.sg-product-content .sg-pc-card--accent {
border-color: var(--sg-teal);
background: var(--sg-teal-light);
box-shadow: 0 2px 12px rgba(35,123,148,.1);
}
.sg-product-content .sg-pc-card--accent:hover {
border-color: var(--sg-teal);
transform: none;
}
/* =======================================================================
PANELS — flex column, space-between for even heading/text/link spacing
======================================================================= */
.sg-product-content .sg-pc-panel {
border: 2px solid var(--sg-border);
border-radius: var(--sg-radius);
padding: 1.5rem 1.5rem;
background: var(--sg-bg);
display: flex;
flex-direction: column;
gap: .75rem;
}
.sg-product-content .sg-pc-panel > .sg-pc-h4 { margin: 0; }
.sg-product-content .sg-pc-panel > .sg-pc-p { margin: 0; flex: 1; }
.sg-product-content .sg-pc-panel > .sg-pc-panel-link { margin: 0; }
.sg-product-content .sg-pc-panel--neutral {
background: var(--sg-bg-neutral);
border-color: var(--sg-border);
}
.sg-product-content .sg-pc-panel--good {
background: var(--sg-bg-good);
border-color: var(--sg-bg-good-border);
}
.sg-product-content .sg-pc-panel--current {
border-color: var(--sg-teal);
background: var(--sg-teal-light);
}
/* Action link at bottom of panel — distinct from sg-pc-small (grey info text) */
.sg-product-content .sg-pc-panel-link {
margin: 0;
padding-top: .5rem;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
}
.sg-product-content .sg-pc-panel-link a {
text-decoration: none;
}
.sg-product-content .sg-pc-panel-link a:hover {
text-decoration: underline;
}
/* =======================================================================
CHIPS — floor compatibility tags
======================================================================= */
.sg-product-content .sg-pc-chip {
border-radius: var(--sg-radius-sm);
padding: .6rem .9rem;
font-size: 14px;
line-height: 1.4;
}
.sg-product-content .sg-pc-chip--good {
background: var(--sg-bg-good);
border: 1px solid var(--sg-bg-good-border);
color: var(--sg-body);
}
/* =======================================================================
CALLOUTS
======================================================================= */
.sg-product-content .sg-pc-callout {
background: var(--sg-bg-neutral);
border-left: 4px solid var(--sg-teal);
border-radius: 0 var(--sg-radius-sm) var(--sg-radius-sm) 0;
padding: 1rem 1.25rem;
margin-top: 1.25rem;
font-size: 14px;
line-height: 1.65;
color: var(--sg-body);
}
.sg-product-content .sg-pc-callout strong { color: var(--sg-dark); }
/* =======================================================================
LISTS
======================================================================= */
.sg-product-content .sg-pc-list {
list-style: none;
padding: 0;
margin: .5rem 0 0;
}
.sg-product-content .sg-pc-list li {
position: relative;
padding-left: 1.25rem;
margin-bottom: .5rem;
font-size: 15px;
line-height: 1.6;
color: var(--sg-body);
}
.sg-product-content .sg-pc-list li::before {
content: '';
position: absolute;
left: 0; top: .55em;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--sg-teal);
}
/* =======================================================================
NUMBERED STEPS
======================================================================= */
.sg-product-content .sg-pc-steps {
list-style: none;
padding: 0;
margin: .5rem 0 0;
counter-reset: sg-step;
}
.sg-product-content .sg-pc-steps li {
position: relative;
padding-left: 2.25rem;
margin-bottom: .85rem;
font-size: 15px;
line-height: 1.6;
color: var(--sg-body);
counter-increment: sg-step;
}
.sg-product-content .sg-pc-steps li::before {
content: counter(sg-step);
position: absolute;
left: 0; top: .05em;
width: 1.6rem; height: 1.6rem;
border-radius: 50%;
background: var(--sg-teal);
color: #fff;
font-size: 12px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
/* =======================================================================
BADGES
======================================================================= */
.sg-product-content .sg-pc-badge {
display: inline-block;
font-family: var(--sg-font-spec);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--sg-teal);
background: var(--sg-teal-light);
border: 1px solid var(--sg-teal-border);
border-radius: 4px;
padding: 3px 10px;
margin-left: .5rem;
vertical-align: middle;
}
/* =======================================================================
BUTTONS
sg-btn-secondary style: 4px radius, teal outline
Uses a.sg-pc-btn for max specificity over theme a:hover overrides
======================================================================= */
.sg-product-content a.sg-pc-btn,
.sg-product-content a.sg-pc-btn:link,
.sg-product-content a.sg-pc-btn:visited {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-family: 'Inter', system-ui, sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1 !important;
white-space: nowrap !important;
color: #237B94 !important;
background: transparent !important;
border: 2px solid #237B94 !important;
border-radius: 4px !important;
padding: 10px 24px !important;
min-height: 38px !important;
text-decoration: none !important;
cursor: pointer !important;
box-sizing: border-box !important;
transition: all .18s ease-in-out !important;
margin-top: auto;
align-self: flex-start;
}
.sg-product-content a.sg-pc-btn:hover,
.sg-product-content a.sg-pc-btn:focus {
background: rgba(35,123,148,.05) !important;
border-color: #1b6275 !important;
color: #1b6275 !important;
text-decoration: none !important;
}
/* Accent card: filled teal with WHITE text — max specificity */
.sg-product-content .sg-pc-card--accent a.sg-pc-btn,
.sg-product-content .sg-pc-card--accent a.sg-pc-btn:link,
.sg-product-content .sg-pc-card--accent a.sg-pc-btn:visited,
.sg-product-content .sg-pc-card--accent a.sg-pc-btn:hover,
.sg-product-content .sg-pc-card--accent a.sg-pc-btn:focus {
background: #237B94 !important;
color: #ffffff !important;
border-color: #237B94 !important;
cursor: default !important;
pointer-events: none;
opacity: .85;
}
/* =======================================================================
COMPARISON ROWS
======================================================================= */
.sg-product-content .sg-pc-compare { display: flex; flex-direction: column; }
.sg-product-content .sg-pc-compare-row {
padding: 1.5rem 0 1.5rem 1.25rem;
border-bottom: 1px solid var(--sg-border);
border-left: 3px solid var(--sg-border);
background: transparent;
transition: border-left-color .2s, background .2s;
}
.sg-product-content .sg-pc-compare-row:hover {
border-left-color: var(--sg-teal);
background: linear-gradient(90deg, var(--sg-teal-10) 0%, transparent 40%);
}
.sg-product-content .sg-pc-compare-row:last-child { border-bottom: none; padding-bottom: 0; }
.sg-product-content .sg-pc-compare-row .sg-pc-h4 {
color: var(--sg-teal);
font-size: 17px;
font-weight: 700;
margin-bottom: .5rem;
}
/* =======================================================================
STACKS & BLOCKS (materials section + related products)
======================================================================= */
.sg-product-content .sg-pc-stack { display: flex; flex-direction: column; gap: 2.25rem; }
.sg-product-content .sg-pc-block {
padding-left: 1.25rem;
border-left: 3px solid var(--sg-border);
transition: border-color .2s;
}
.sg-product-content .sg-pc-block:hover { border-left-color: var(--sg-teal); }
.sg-product-content .sg-pc-block .sg-pc-h4 { margin-bottom: .5rem; }
.sg-product-content .sg-pc-block--flex {
display: flex;
flex-direction: column;
}
.sg-product-content .sg-pc-block--flex .sg-pc-related { margin-top: auto; }
/* Measurement step cards */
.sg-product-content .sg-pc-feature {
background: var(--sg-bg-neutral);
border-radius: var(--sg-radius-sm);
padding: 1rem 1.25rem;
border: 1px solid var(--sg-border);
}
/* =======================================================================
RELATED PRODUCTS
======================================================================= */
.sg-product-content .sg-pc-related { margin-top: .75rem; }
.sg-product-content .sg-pc-related a {
font-weight: 600;
font-size: 15px;
text-decoration: none;
}
.sg-product-content .sg-pc-related a:hover { text-decoration: underline; }
.sg-product-content .sg-pc-related--centered {
display: flex;
flex-wrap: wrap;
gap: .65rem .75rem;
}
.sg-product-content .sg-pc-related--centered a {
font-weight: 500;
font-size: 13.5px;
background: var(--sg-bg-neutral);
border: 1px solid var(--sg-border);
border-radius: var(--sg-radius-sm);
padding: .5rem .9rem;
transition: background .15s, border-color .15s;
}
.sg-product-content .sg-pc-related--centered a:hover {
background: var(--sg-teal-light);
border-color: var(--sg-teal-border);
text-decoration: none;
}
/* Sub-group wrapper inside Related Products section */
.sg-product-content .sg-pc-related-group {
margin-top: 2.25rem;
padding-top: 1.5rem;
border-top: 1px solid var(--sg-border);
}
.sg-product-content .sg-pc-related-group:first-of-type {
margin-top: 1.75rem;
}
.sg-product-content .sg-pc-related-group > .sg-pc-h4 {
margin-bottom: .75rem;
}
/* =======================================================================
SPACING UTILITIES
======================================================================= */
.sg-product-content .sg-pc-mt-sm { margin-top: .5rem; }
.sg-product-content .sg-pc-mt { margin-top: 1.25rem; }
/* =======================================================================
RESPONSIVE
======================================================================= */
@media (max-width: 1024px) {
.sg-product-content .sg-pc-grid--cols-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
.sg-product-content { padding: 0 .75rem; }
.sg-product-content .sg-pc-hero { padding: 1.5rem 1.25rem; }
.sg-product-content .sg-pc-h2 { font-size: 24px; }
.sg-product-content .sg-pc-h3 { font-size: 19px; }
.sg-product-content .sg-pc-section { margin-bottom: 2rem; padding-bottom: 2rem; }
.sg-product-content .sg-pc-card,
.sg-product-content .sg-pc-panel { padding: 1rem 1.15rem; }
.sg-product-content .sg-pc-grid--cols-2,
.sg-product-content .sg-pc-grid--cols-3,
.sg-product-content .sg-pc-grid--split { grid-template-columns: 1fr; }
.sg-product-content .sg-pc-compare-row { padding-left: .85rem; }
.sg-product-content .sg-pc-block { padding-left: .85rem; }
}
/* Force left-align on all product content text */
.sg-pc-section,
.sg-pc-section p,
.sg-pc-section li,
.sg-pc-section ul,
.sg-pc-section ol,
.sg-pc-card,
.sg-pc-panel,
.sg-pc-compare-row {
text-align: left !important;
}
/* =======================================================================
SUPERIOR GLIDE — FAQ Accordion
======================================================================= */
.sg-faqs {
max-width: 960px;
display: flex;
flex-direction: column;
gap: 0;
}
.sg-faq {
border-bottom: 1px solid #ECECEC;
}
.sg-faq:last-child {
border-bottom: none;
}
.sg-faq__q {
font-family: 'Inter', -apple-system, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 1.4;
color: #111827;
padding: 20px 40px 20px 0;
cursor: pointer;
position: relative;
list-style: none;
}
.sg-faq__q::-webkit-details-marker { display: none; }
.sg-faq__q::marker { display: none; content: ''; }
.sg-faq__q::after {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%) rotate(0deg);
width: 20px;
height: 20px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23237B94' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/contain no-repeat;
transition: transform .2s ease;
}
.sg-faq[open] .sg-faq__q::after {
transform: translateY(-50%) rotate(180deg);
}
.sg-faq__a {
font-family: 'Inter', -apple-system, sans-serif;
font-size: 15px;
line-height: 1.7;
color: #374151;
padding: 0 0 20px;
}
.sg-faq__a p {
margin: 0 0 .5rem;
}
.sg-faq__a p:last-child {
margin-bottom: 0;
}
.sg-faq__a a {
color: #237B94;
text-decoration: underline;
text-decoration-color: rgba(35,123,148,.2);
text-underline-offset: 2px;
}
.sg-faq__a a:hover {
color: #1b6275;
text-decoration-color: #1b6275;
}
.sg-faq__q:hover {
color: #237B94;
}
@media (max-width: 768px) {
.sg-faq__q {
font-size: 15px;
padding: 16px 36px 16px 0;
}
.sg-faq__a {
font-size: 14px;
padding: 0 0 16px;
}
.sg-faq__q::after {
width: 18px;
height: 18px;
}
}
@media (max-width: 480px) {
.sg-faq__q {
font-size: 14px;
padding: 14px 32px 14px 0;
}
.sg-faq__a {
font-size: 14px;
padding: 0 0 14px;
}
}
/* =======================================================================
SUPERIOR GLIDE — Trust Bar + Helper Text
======================================================================= */
/* Size help link */
.sg-size-help {
margin: 8px 0 16px;
font-family: 'Inter', -apple-system, sans-serif;
font-size: 14px;
color: #6B7280;
}
.sg-size-help a {
color: #237B94;
text-decoration: underline;
text-decoration-color: rgba(35,123,148,.3);
text-underline-offset: 2px;
}
.sg-size-help a:hover {
color: #1b6275;
text-decoration-color: #1b6275;
}
/* Pack note */
.sg-pack-note {
margin: 0 0 12px;
font-family: 'Inter', -apple-system, sans-serif;
font-size: 14px;
color: #6B7280;
line-height: 1.4;
}
/* B2B inline link — quiet path for early-page volume buyers */
.sg-b2b-inline {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0 0 12px;
padding: 8px 12px;
background: #FAF7F1;
border: 1px solid #ECECEC;
border-radius: 6px;
font-family: 'Inter', -apple-system, sans-serif;
font-size: 13.5px;
color: #4B5563;
line-height: 1.4;
}
.sg-b2b-inline svg {
color: #237B94;
flex-shrink: 0;
}
.sg-b2b-inline a {
color: #237B94;
font-weight: 500;
text-decoration: underline;
text-decoration-color: rgba(35,123,148,.3);
text-underline-offset: 2px;
margin-left: 2px;
}
.sg-b2b-inline a:hover {
color: #1b6275;
text-decoration-color: #1b6275;
}
@media (max-width: 480px) {
.sg-b2b-inline {
width: 100%;
box-sizing: border-box;
}
}
/* Trust bar */
.sg-trust-bar {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 24px;
background: #F9FAFB;
border: 1px solid #ECECEC;
border-radius: 8px;
padding: 14px 16px;
margin-top: 16px;
width: fit-content;
}
.sg-trust-item {
display: flex;
align-items: center;
gap: 8px;
}
.sg-trust-item svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.sg-trust-item span {
font-family: 'Inter', -apple-system, sans-serif;
font-size: 14px;
font-weight: 500;
color: #374151;
}
.sg-trust-item a {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
}
.sg-trust-item a span {
color: #374151;
transition: color .15s;
}
.sg-trust-item a:hover span {
color: #237B94;
}
.sg-trust-item a svg path {
transition: fill .15s;
}
.sg-trust-item a:hover svg path {
fill: #1b6275;
}
@media (max-width: 480px) {
.sg-trust-bar {
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 12px 16px;
width: 100%;
}
}
/* Force add to cart row to wrap */
.single-product .woocommerce-variation-add-to-cart {
flex-wrap: wrap !important;
}
/* Quantity helper */
.sg-qty-helper {
font-family: 'Inter', -apple-system, sans-serif;
font-size: 12px;
color: #9CA3AF;
margin: 10px 0 0;
line-height: 1.4;
width: 100%;
flex-basis: 100%;
order: 99;
}
/* Newsletter form — inline on desktop, stacked on mobile */
.footer-outer .elementor-form {
width: 100% !important;
max-width: 600px;
margin: 0 auto;
}
.footer-outer .elementor-form-fields-wrapper {
display: flex !important;
width: 100% !important;
gap: 10px;
justify-content: space-between;
align-items: stretch;
flex-wrap: nowrap !important;
}
.footer-outer .elementor-field-group {
flex: 1 1 0 !important;
min-width: 0;
}
.footer-outer .elementor-field-group:not(.elementor-field-type-submit) {
min-width: 160px;
}
.footer-outer .elementor-field-group.elementor-field-type-submit {
flex: 0 0 auto !important;
}
.footer-outer .elementor-field,
.footer-outer .elementor-button {
width: 100%;
}
@media (max-width: 767px) {
.footer-outer .elementor-form-fields-wrapper {
flex-wrap: wrap !important;
}
.footer-outer .elementor-field-group {
flex: 0 0 100% !important;
min-width: 0 !important;
}
.footer-outer .elementor-field-group.elementor-field-type-submit {
width: 100% !important;
flex: 0 0 100% !important;
}
.footer-outer .elementor-field-group.elementor-field-type-submit .elementor-button {
width: 100% !important;
}
}
/* ============================================================
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: Inter, system-ui, sans-serif !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
}
.facetwp-flyout .sg-fwp-controls .sg-fwp-reset:hover {
background: #f0f8fa !important;
}
.facetwp-flyout .sg-fwp-controls .sg-fwp-apply {
flex: 1 1 auto !important;
min-height: 48px !important;
border-radius: 999px !important;
border: 0 !important;
background: #237B94 !important;
color: #ffffff !important;
font-family: Inter, system-ui, sans-serif !important;
font-weight: 600 !important;
cursor: pointer !important;
box-shadow: 0 6px 18px rgba(0,0,0,0.12) !important;
transition: all 0.2s ease !important;
}
.facetwp-flyout .sg-fwp-controls .sg-fwp-apply:hover {
background: #1d6478 !important;
}
}
/* ============================================================
10) DESKTOP: RESET + LOAD MORE BUTTONS
============================================================ */
@media (min-width: 1025px) {
.facetwp-reset {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 48px !important;
padding: 0 20px !important;
border-radius: 999px !important;
border: 2px solid #237B94 !important;
background: transparent !important;
color: #237B94 !important;
font-family: Inter, system-ui, sans-serif !important;
font-weight: 600 !important;
font-size: 15px !important;
line-height: 1 !important;
text-decoration: none !important;
box-shadow: none !important;
cursor: pointer !important;
margin: 0 !important;
transition: all 0.2s ease !important;
}
.facetwp-reset:hover {
background: #f0f8fa !important;
}
.facetwp-reset::after { display: none !important; content: none !important; }
.facetwp-load-more {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 48px !important;
padding: 0 22px !important;
border-radius: 999px !important;
border: 0 !important;
background: #237B94 !important;
color: #ffffff !important;
font-family: Inter, system-ui, sans-serif !important;
font-weight: 600 !important;
font-size: 15px !important;
line-height: 1 !important;
cursor: pointer !important;
box-shadow: 0 6px 18px rgba(0,0,0,.12) !important;
transition: all 0.2s ease !important;
}
.facetwp-load-more:hover {
background: #1d6478 !important;
}
}
.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;
}
.product_meta .sku_wrapper {
display: none;
}
@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: #D5C7AE !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: #F5F0E5 !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: 'Inter', 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: 'Inter', 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: #F19226;
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 #E8DFD2;
}
.sg-proof-card__attribution p {
margin: 0 !important;
line-height: 1.4;
}
.sg-proof-card__name {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 15px;
color: #1F2937;
}
.sg-proof-card__org {
font-family: 'Inter', 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: 'Inter', 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;
}
}
/* ============================================================
SG — Buttons On Dark
============================================================
Purpose: When a section has the .sg-on-dark class, flip the
.sg-btn-secondary visual treatment so it remains visible
against a dark/colored background.
Default global secondary = teal outline + teal text + white fill on hover.
On-dark secondary = white outline + white text + white fill on hover (dark text).
Sections currently using sg-on-dark:
- Business Solutions hero (dark image overlay)
- Business Solutions final CTA (teal #237B94 background)
To use: add `sg-on-dark` to any section's CSS classes that has
a dark or colored background. The override applies automatically.
IMPORTANT: This MUST be loaded AFTER your global SG button CSS.
In Code Snippets Pro, set this snippet's priority HIGHER than
the global button snippet (or add it as a separate CSS snippet
below the global one in load order).
============================================================ */
/* 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, dark 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;
}
/* Optional: PRIMARY on dark stays orange but gain a soft white halo on hover.
Comment out if you don't want this. */
.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 button) 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;
}
/* ============================================================
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: 'Inter', 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: #C9BFAE; /* warm cream-gray, 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: #F0E9DC; /* slightly brighter cream 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;
}
}
/* ============================================================
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 snippet
429 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: Inter
========================================================================= */
/* ----- 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: 'Inter', -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: 'Inter', -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: 'Inter', 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: 'Inter', 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: 'Inter', sans-serif !important;
font-size: 13px !important;
margin-top: 8px !important;
}
.sg-footer-newsletter-form .elementor-message-danger {
color: #F87171 !important;
font-family: 'Inter', 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: 'Inter', -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: 'Inter', -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: 'Inter', 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:hover {
background-color: #237b94 !important;
border-color: #237b94 !important;
color: #FFFFFF !important;
transform: translateY(-1px);
}
.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;
}
}
/* =========================================================
4. GLIDE GUIDE — SIZE BY SHAPE TABLE (.sg-gd-sizes)
========================================================= */
.sg-gd-sizes {
background: #FFFFFF;
border: 1px solid #E5E7EB;
border-radius: 12px;
padding: 0;
font-family: 'Inter', sans-serif;
margin: 16px 0 0;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.03);
overflow: hidden;
}
/* Second-half table (Square + Rectangular) sits flush under the first half */
.sg-gd-sizes--continuation {
margin-top: 0;
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
}
/* Title eyebrow — tighter, integrated into the card */
.sg-gd-sizes__title {
font-size: 12px;
font-weight: 700;
color: #237B94;
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0;
padding: 18px 24px 14px 24px;
border-bottom: 1px solid #E5E7EB;
background: #FFFFFF;
}
/* Table itself */
.sg-gd-sizes table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
font-size: 14px;
color: #374151;
}
/* Column headers (Shape / Glide size / Fits leg base) */
.sg-gd-sizes thead th {
text-align: left;
font-weight: 600;
color: #6B7280;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.07em;
padding: 12px 20px;
border: none;
background: #F9FAFB;
border-bottom: 1px solid #E5E7EB;
white-space: nowrap;
}
/* Set explicit column widths for visual rhythm */
.sg-gd-sizes thead th:nth-child(1) { width: 18%; }
.sg-gd-sizes thead th:nth-child(2) { width: 22%; }
.sg-gd-sizes thead th:nth-child(3) { width: 60%; }
/* Body cells */
.sg-gd-sizes tbody td {
padding: 13px 20px;
border: none;
border-bottom: 1px solid #F3F4F6;
line-height: 1.45;
vertical-align: middle;
}
/* Glide-size column (2nd col) is the main identifier — always bold */
.sg-gd-sizes tbody td:nth-child(2) {
font-weight: 600;
color: #1F2937;
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
}
/* On rows where shape-cell takes col 1, the glide-size moves to col 2 visually
but the bold treatment applies regardless because of nth-child(2) above.
On continuation rows (no rowspan), col 1 is the glide-size itself. */
.sg-gd-sizes tbody tr:not(.sg-gd-shape-divider) td:first-child {
font-weight: 600;
color: #1F2937;
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
}
/* Fits-leg-base column — secondary info */
.sg-gd-sizes tbody td:last-child {
color: #4B5563;
font-variant-numeric: tabular-nums;
}
/* Last row of each table — no bottom border */
.sg-gd-sizes tbody tr:last-child td { border-bottom: none; }
/* Shape divider — visual separator between Round / Square / Rectangular groups */
.sg-gd-sizes tr.sg-gd-shape-divider td {
border-top: 1px solid #E5E7EB;
padding-top: 18px;
}
.sg-gd-sizes tr.sg-gd-shape-divider:first-of-type td {
border-top: none;
padding-top: 13px;
}
/* When continuation table starts with a divider, no border-top on its first row either */
.sg-gd-sizes--continuation tr.sg-gd-shape-divider:first-of-type td {
border-top: none;
}
/* Shape label cell (col 1, rowspanned) — left-rail treatment */
.sg-gd-sizes .sg-gd-shape-cell {
font-weight: 700;
color: #237B94;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
vertical-align: top;
padding-top: 18px;
background: #F9FAFB;
border-right: 1px solid #E5E7EB;
width: 18%;
}
.sg-gd-sizes tr.sg-gd-shape-divider:first-of-type .sg-gd-shape-cell {
padding-top: 16px;
}
/* Row hover — subtle highlight for scannability */
.sg-gd-sizes tbody tr:not(.sg-gd-shape-divider):hover td:not(.sg-gd-shape-cell),
.sg-gd-sizes tbody tr.sg-gd-shape-divider:hover td:not(.sg-gd-shape-cell) {
background: #F9FAFB;
}
/* Mobile — tighten everything */
@media (max-width: 680px) {
.sg-gd-sizes { border-radius: 10px; }
.sg-gd-sizes__title {
padding: 16px 18px 12px 18px;
font-size: 11px;
}
.sg-gd-sizes table { font-size: 13px; }
.sg-gd-sizes thead th {
padding: 10px 14px;
font-size: 10px;
}
.sg-gd-sizes tbody td {
padding: 12px 14px;
}
.sg-gd-sizes .sg-gd-shape-cell {
padding-top: 14px;
font-size: 11px;
}
.sg-gd-sizes tr.sg-gd-shape-divider td { padding-top: 14px; }
/* Adjust column widths on mobile for better readability */
.sg-gd-sizes thead th:nth-child(1) { width: 22%; }
.sg-gd-sizes thead th:nth-child(2) { width: 28%; }
.sg-gd-sizes thead th:nth-child(3) { width: 50%; }
.sg-gd-sizes .sg-gd-shape-cell { width: 22%; }
}
/* =========================================================
5. GLIDE GUIDE — FURNITURE LOOKUP CARDS (.sg-gd-lookup)
========================================================= */
.sg-gd-lookup {
background: #FFFFFF;
border: 1px solid #E5E7EB;
border-radius: 10px;
font-family: 'Inter', sans-serif;
overflow: hidden;
}
.sg-gd-lookup--continuation {
margin-top: 0;
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.sg-gd-lookup__row {
display: grid;
grid-template-columns: 1fr 1.3fr 1.4fr;
gap: 0;
padding: 18px 22px;
border-bottom: 1px solid #F3F4F6;
align-items: start;
}
.sg-gd-lookup__row:last-child { border-bottom: none; }
.sg-gd-lookup__row--header {
background: #F9FAFB;
font-weight: 600;
color: #1F2937;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 14px 22px;
}
.sg-gd-lookup__furniture {
font-weight: 700;
color: #1F2937;
font-size: 15px;
padding-right: 16px;
}
.sg-gd-lookup__pick {
color: #374151;
font-size: 14px;
line-height: 1.6;
padding-right: 16px;
}
.sg-gd-lookup__pick strong { color: #1F2937; }
.sg-gd-lookup__why {
color: #6B7280;
font-size: 13px;
line-height: 1.55;
font-style: italic;
}
@media (max-width: 780px) {
.sg-gd-lookup__row { grid-template-columns: 1fr; gap: 8px; padding: 16px 18px; }
.sg-gd-lookup__row--header { display: none; }
.sg-gd-lookup__furniture { font-size: 16px; margin-bottom: 4px; }
.sg-gd-lookup__pick { font-size: 14px; }
.sg-gd-lookup__pick::before { content: "Recommended: "; font-weight: 700; color: #1F2937; font-style: normal; }
.sg-gd-lookup__why { font-size: 13px; font-style: normal; }
.sg-gd-lookup__why::before { content: "Why: "; 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: 'Inter', 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: 'Inter', 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; }
}
/* ==========================================================================
SG: Cart Page Styling
Scope: WooCommerce cart shortcode + B2BKing quote form on /cart/
Font: Inter | Brand teal: #237B94
========================================================================== */
/* ---------- Page wrapper: subtle white card for the whole cart area ------ */
.woocommerce-cart .woocommerce {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
color: #1A1A1A;
}
/* ==========================================================================
1. CART TABLE
========================================================================== */
.woocommerce-cart table.shop_table {
border: 1px solid #E5E7EB !important;
border-radius: 12px !important;
border-collapse: separate !important;
border-spacing: 0 !important;
overflow: hidden;
background: #FFFFFF;
margin-bottom: 32px !important;
}
/* Header row */
.woocommerce-cart table.shop_table thead th {
background: #F9FAFB !important;
color: #6B7280 !important;
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
padding: 14px 16px !important;
border-bottom: 1px solid #E5E7EB !important;
}
/* Body cells */
.woocommerce-cart table.shop_table tbody td {
font-family: 'Inter', sans-serif !important;
font-size: 15px !important;
color: #1F2937 !important;
padding: 18px 16px !important;
border-top: 1px solid #F3F4F6 !important;
vertical-align: middle !important;
}
.woocommerce-cart table.shop_table tbody tr:first-child td {
border-top: none !important;
}
/* Product thumbnail */
.woocommerce-cart table.shop_table td.product-thumbnail img {
width: 72px !important;
height: 72px !important;
object-fit: contain;
border: 1px solid #E5E7EB;
border-radius: 8px;
background: #F9FAFB;
padding: 4px;
}
/* Product name link */
.woocommerce-cart table.shop_table td.product-name a {
color: #111827 !important;
font-weight: 600 !important;
text-decoration: none !important;
line-height: 1.4 !important;
}
.woocommerce-cart table.shop_table td.product-name a:hover {
color: #237B94 !important;
}
/* ----------------------------------------------------------
Variation list under product name
Each attribute renders on its own line. The :empty rules hide
orphan "Color:" rows where the attribute exists on the product
but isn't a variation axis (single-color products).
Backorder notification is force-broken below all attributes
and styled to match the product-page amber convention.
---------------------------------------------------------- */
.woocommerce-cart table.shop_table td.product-name dl.variation {
margin-top: 6px !important;
font-size: 13px !important;
color: #6B7280 !important;
line-height: 1.5 !important;
display: block !important;
}
/* Each attribute pair: dt and dd flow inline within a single line */
.woocommerce-cart table.shop_table td.product-name dl.variation dt,
.woocommerce-cart table.shop_table td.product-name dl.variation dd {
display: inline !important;
margin: 0 !important;
}
.woocommerce-cart table.shop_table td.product-name dl.variation dt {
font-weight: 500 !important;
color: #6B7280 !important;
}
.woocommerce-cart table.shop_table td.product-name dl.variation dt::after {
content: "\00a0" !important;
}
.woocommerce-cart table.shop_table td.product-name dl.variation dd {
font-weight: 400 !important;
color: #1F2937 !important;
}
.woocommerce-cart table.shop_table td.product-name dl.variation dd p {
display: inline !important;
margin: 0 !important;
}
/* Force line break AFTER each dd so attributes stack vertically.
Using a generated newline character with white-space:pre is more
reliable than display:block on ::after when WooCommerce/B2BKing
injects extra inline elements (like .backorder_notification) into
the dl flow. */
.woocommerce-cart table.shop_table td.product-name dl.variation dd::after {
content: "\A" !important;
white-space: pre !important;
}
/* Hide variation rows where the 80
Make the strikethrough visible and the new value bold. */
.woocommerce-account .product-quantity del,
.woocommerce-account td.product-name del {
color: #9CA3AF !important;
text-decoration: line-through !important;
font-weight: 400 !important;
margin-right: 4px !important;
}
.woocommerce-account .product-quantity ins,
.woocommerce-account td.product-name ins {
color: #DC2626 !important;
text-decoration: none !important;
font-weight: 700 !important;
background: transparent !important;
}
/* wc-item-meta (Size / Color sublines under product name) */
.woocommerce-account .wc-item-meta {
list-style: none !important;
margin: 6px 0 0 0 !important;
padding: 0 !important;
}
.woocommerce-account .wc-item-meta li {
display: flex !important;
gap: 4px !important;
margin: 0 !important;
padding: 0 !important;
font-size: 13px !important;
color: #4B5563 !important;
}
.woocommerce-account .wc-item-meta li::before {
content: none !important;
}
.woocommerce-account .wc-item-meta-label {
color: #374151 !important;
font-weight: 600 !important;
}
.woocommerce-account .wc-item-meta p {
margin: 0 !important;
}
/* Refund line item (negative amount) */
.woocommerce-account .woocommerce-table--order-details td .woocommerce-Price-amount,
.woocommerce-account table.shop_table.order_details td .woocommerce-Price-amount {
font-weight: 500 !important;
}
/* Total row: emphasis */
.woocommerce-account .woocommerce-table--order-details tfoot tr:has(td .woocommerce-Price-amount) th,
.woocommerce-account .woocommerce-table--order-details tfoot tr:has(td strong) th {
font-weight: 600 !important;
color: #111827 !important;
}
/* Actions column "Track" button inside order detail tfoot */
.woocommerce-account .woocommerce-table--order-details .button,
.woocommerce-account table.shop_table.order_details .button {
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #237B94 !important;
background: #FFFFFF !important;
border: 1px solid #237B94 !important;
border-radius: 6px !important;
padding: 6px 14px !important;
text-decoration: none !important;
text-transform: none !important;
display: inline-flex !important;
align-items: center !important;
transition: background 0.15s ease !important;
box-shadow: none !important;
}
.woocommerce-account .woocommerce-table--order-details .button:hover,
.woocommerce-account table.shop_table.order_details .button:hover {
background: #F0F7F9 !important;
color: #1B6378 !important;
}
/* ---- Tracking strip (Advanced Shipment Tracking plugin) ---- */
/* The carrier+tracking-number block above the order details */
.woocommerce-account .ast-shipment-tracking-table,
.woocommerce-account .ast_shipment_block,
.woocommerce-account .shipment-tracking-information {
background: #F9FAFB !important;
border: 1px solid #E5E7EB !important;
border-radius: 10px !important;
padding: 14px 16px !important;
margin: 0 0 24px 0 !important;
display: flex !important;
align-items: center !important;
gap: 14px !important;
flex-wrap: wrap !important;
}
/* Tracking number link */
.woocommerce-account .ast-tracking-link,
.woocommerce-account .shipment-tracking-information a {
color: #237B94 !important;
font-weight: 500 !important;
text-decoration: underline !important;
text-underline-offset: 2px !important;
}
/* The "Track Your Order" button on the tracking strip */
.woocommerce-account .ast-shipment-tracking-button,
.woocommerce-account a.shipment-tracking-link,
.woocommerce-account .shipment-tracking-information .button {
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #FFFFFF !important;
background: #237B94 !important;
border: 1px solid #237B94 !important;
border-radius: 6px !important;
padding: 8px 14px !important;
text-decoration: none !important;
text-transform: none !important;
display: inline-flex !important;
align-items: center !important;
margin-left: auto !important;
transition: background 0.15s ease !important;
box-shadow: none !important;
}
.woocommerce-account .ast-shipment-tracking-button:hover,
.woocommerce-account a.shipment-tracking-link:hover,
.woocommerce-account .shipment-tracking-information .button:hover {
background: #1B6378 !important;
border-color: #1B6378 !important;
color: #FFFFFF !important;
text-decoration: none !important;
}
/* "Tracking Information" + "Order details" + "Customer details" H2s in order view */
.woocommerce-account .woocommerce-MyAccount-content > h2 {
font-family: 'Inter', sans-serif !important;
font-size: 20px !important;
font-weight: 600 !important;
color: #111827 !important;
margin: 24px 0 14px 0 !important;
padding: 0 0 10px 0 !important;
border-bottom: 1px solid #F3F4F6 !important;
}
.woocommerce-account .woocommerce-MyAccount-content > h2:first-of-type {
margin-top: 0 !important;
}
/* The phone/email icon in address blocks (svg/dashicon next to phone number) */
.woocommerce-account .woocommerce-customer-details .woocommerce-customer-details--phone::before,
.woocommerce-account .woocommerce-customer-details .woocommerce-customer-details--email::before {
color: #6B7280 !important;
}
/* ==========================================================================
15. AST PLUGIN "TRACK YOUR ORDER" BUTTON
Specific selector .button.track-button — beats both the AST plugin's
blue background and my generic .woocommerce-MyAccount-content a teal text.
========================================================================== */
.woocommerce-account a.button.track-button,
.woocommerce-account .button.track-button {
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #FFFFFF !important;
background: #237B94 !important;
border: 1px solid #237B94 !important;
border-radius: 6px !important;
padding: 8px 14px !important;
text-decoration: none !important;
text-transform: none !important;
display: inline-flex !important;
align-items: center !important;
margin-left: auto !important;
transition: background 0.15s ease !important;
box-shadow: none !important;
}
.woocommerce-account a.button.track-button:hover,
.woocommerce-account .button.track-button:hover {
background: #1B6378 !important;
border-color: #1B6378 !important;
color: #FFFFFF !important;
text-decoration: none !important;
}
/* ==========================================================================
16. ORDER DETAIL — ADDRESS BLOCK ALIGNMENT + INS UNDERLINE FIX
========================================================================== */
/* The .col-set wrapper that holds Billing + Shipping address columns gets
left padding from WooCommerce defaults — neutralize it so addresses sit
flush left with the rest of the content. */
.woocommerce-account .woocommerce-MyAccount-content .col2-set,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses,
.woocommerce-account .woocommerce-MyAccount-content .addresses {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-content .col-1,
.woocommerce-account .woocommerce-MyAccount-content .col-2,
.woocommerce-account .woocommerce-MyAccount-content .u-column1,
.woocommerce-account .woocommerce-MyAccount-content .u-column2 {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* In the order detail "Customer details" section, the address h2's are children
of the .woocommerce-MyAccount-content directly — make sure they align flush. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details {
padding-left: 0 !important;
margin-left: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-content > h2.woocommerce-column__title,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-column__title {
margin-left: 0 !important;
padding-left: 0 !important;
}
/* Total row: $2.79 $0.00
Same del/ins pattern as refund quantity — kill the default underline on
so the new total reads plain (not falsely struck-through). */
.woocommerce-account .woocommerce-table--order-details ins,
.woocommerce-account .woocommerce-table--order-details ins .woocommerce-Price-amount,
.woocommerce-account table.shop_table.order_details ins,
.woocommerce-account table.shop_table.order_details ins .woocommerce-Price-amount {
text-decoration: none !important;
background: transparent !important;
font-weight: 600 !important;
color: #111827 !important;
}
.woocommerce-account .woocommerce-table--order-details del,
.woocommerce-account .woocommerce-table--order-details del .woocommerce-Price-amount,
.woocommerce-account table.shop_table.order_details del,
.woocommerce-account table.shop_table.order_details del .woocommerce-Price-amount {
color: #9CA3AF !important;
text-decoration: line-through !important;
font-weight: 400 !important;
}
/* ==========================================================================
17. ADDRESSES TAB FIX
/my-account/edit-address/ — the .u-columns.woocommerce-Addresses wrapper
IS a 2-col grid, but the .woocommerce-Address children render too narrow.
Force them to fill their grid cells.
========================================================================== */
.woocommerce-account.woocommerce-edit-address .woocommerce-Addresses,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 20px !important;
width: 100% !important;
margin: 16px 0 0 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
box-sizing: border-box !important;
background: #F9FAFB !important;
border: 1px solid #E5E7EB !important;
border-radius: 10px !important;
padding: 20px !important;
margin: 0 !important;
}
/* Title row — heading on left, Edit link on right, single line each */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
margin: 0 0 12px 0 !important;
padding: 0 0 10px 0 !important;
border-bottom: 1px solid #F3F4F6 !important;
flex-wrap: nowrap !important;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h3 {
margin: 0 !important;
padding: 0 !important;
border: none !important;
font-size: 16px !important;
font-weight: 600 !important;
color: #111827 !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
/* Catches both (when address exists) and the "Add" anchor
(when address is empty) which may not have the .edit class. Any anchor
inside the title row gets uniform styling. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title a,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit {
font-size: 13px !important;
font-weight: 600 !important;
color: #237B94 !important;
text-decoration: none !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title a:hover,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit:hover {
color: #1B6378 !important;
text-decoration: underline !important;
}
/* The address text block under the title */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address address {
margin: 0 !important;
padding: 0 !important;
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
color: #4B5563 !important;
line-height: 1.6 !important;
font-style: normal !important;
white-space: normal !important;
word-break: normal !important;
}
/* On narrower screens, stack vertically */
@media (max-width: 767px) {
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses {
grid-template-columns: 1fr !important;
}
}
/* ==========================================================================
18. ADDRESSES TAB — KILL FLOATS + EXPLICIT GRID PLACEMENT
The .woocommerce-Address cards have float:left and float:right from
WooCommerce defaults, which interferes with grid placement. Kill the floats
and force each card into its explicit grid cell (col 1 row 1, col 2 row 1).
========================================================================== */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address {
float: none !important;
clear: none !important;
}
/* Billing address card — first child of .woocommerce-Addresses */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .woocommerce-Address:nth-child(1),
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .col-1,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .u-column1 {
grid-column: 1 !important;
grid-row: 1 !important;
}
/* Shipping address card — second child of .woocommerce-Addresses */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .woocommerce-Address:nth-child(2),
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .col-2,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .u-column2 {
grid-column: 2 !important;
grid-row: 1 !important;
}
/* Hide any clearfix pseudo-elements on the addresses wrapper that might be
taking grid cells (same pattern as the login page col2-set fix). */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses::after {
content: none !important;
display: none !important;
}
/* Mobile stack — explicit reset of grid-row so they don't both try to be row 1 */
@media (max-width: 767px) {
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .woocommerce-Address:nth-child(1),
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .col-1,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .u-column1,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .woocommerce-Address:nth-child(2),
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .col-2,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .u-column2 {
grid-column: 1 !important;
grid-row: auto !important;
}
}
/* ==========================================================================
19. B2B DASHBOARD POLISH
- Stat tiles in a row (not stacked vertically)
- Stat tiles must not show link underlines (they're anchors)
- Onboarding card cleanup
========================================================================== */
/* DEAD: Section 19's .sg-dashboard-stats grid + responsive overrides moved into Section 32's block.
Section 32 now owns all stat grid layout across all viewports. */
/* Stat tile anchors — kill the inherited link underline from Section 3 */
.woocommerce-account .woocommerce-MyAccount-content a.sg-dashboard-stat,
.sg-dashboard-stat,
.sg-dashboard-stat:hover {
text-decoration: none !important;
}
/* DEAD selectors trimmed: .sg-stat-value no longer rendered. Label rule kept. */
.woocommerce-account .woocommerce-MyAccount-content a.sg-dashboard-stat .sg-stat-label,
.sg-dashboard-stat .sg-stat-label {
text-decoration: none !important;
}
/* Onboarding checklist anchor — kill underline too */
.woocommerce-account .woocommerce-MyAccount-content .sg-dashboard-onboarding a {
text-decoration: none !important;
}
.woocommerce-account .woocommerce-MyAccount-content .sg-dashboard-onboarding a:hover {
text-decoration: underline !important;
}
/* ==========================================================================
20. B2BKING CONVERSATIONS TAB — full restyle
B2BKing uses a custom div-based card-grid for the conversations list.
Each "row" is a .b2bking_myaccount_individual_conversation_container with
children that include a header bar (titles) and cells holding the data.
This section also handles the orange "New Conversation" / "View Conversation"
buttons that B2BKing renders with its own brand color.
========================================================================== */
/* The dark header bar that says Title / Type / User / Last Reply */
.woocommerce-account .b2bking_myaccount_individual_conversation_header,
.woocommerce-account .b2bking_myaccount_conversations_header,
.woocommerce-account [class*="conversation"][class*="header"] {
background: #F9FAFB !important;
color: #6B7280 !important;
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
border: 1px solid #E5E7EB !important;
border-bottom: none !important;
border-radius: 10px 10px 0 0 !important;
padding: 12px 14px !important;
}
.woocommerce-account .b2bking_myaccount_individual_conversation_header > *,
.woocommerce-account .b2bking_myaccount_conversations_header > * {
color: #6B7280 !important;
font-weight: 600 !important;
text-transform: uppercase !important;
}
/* Each conversation row container */
.woocommerce-account .b2bking_myaccount_individual_conversation_container {
background: #FFFFFF !important;
border: 1px solid #E5E7EB !important;
border-radius: 10px !important;
margin: 0 0 12px 0 !important;
padding: 0 !important;
overflow: hidden !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}
/* The 4-cell content row inside each conversation container */
.woocommerce-account .b2bking_myaccount_individual_conversation_content {
display: grid !important;
grid-template-columns: 2fr 1fr 1fr 1fr auto !important;
gap: 14px !important;
align-items: center !important;
padding: 14px !important;
background: #FFFFFF !important;
}
/* Each cell */
.woocommerce-account .b2bking_myaccount_individual_conversation_content_item {
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
color: #1F2937 !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
}
/* First cell = title — slightly bolder */
.woocommerce-account .b2bking_myaccount_individual_conversation_content_item:first-child {
font-weight: 600 !important;
color: #111827 !important;
}
/* "Last reply" timestamp — slightly muted */
.woocommerce-account .b2bking_myaccount_individual_conversation_content_item:nth-child(4) {
color: #6B7280 !important;
font-size: 13px !important;
}
/* ==========================================================================
21. B2BKING BUTTON OVERRIDES
B2BKing renders