/** Shopify CDN: Minification failed
Line 1075:0 Unexpected "}"
**/
#shopify-section-header.et-header-section{border-bottom:0!important;position:relative}
#shopify-section-header.et-header-section:after{
content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
background:linear-gradient(90deg,rgba(199,0,0,0),rgba(199,0,0,1) 28%,rgba(199,0,0,1) 72%,rgba(199,0,0,0));
box-shadow:0 1px 8px rgba(199,0,0,.20);pointer-events:none
}
@media (max-width: 749px){
#shopify-section-header.et-header-section:after{
background:linear-gradient(90deg,rgba(199,0,0,0),rgba(199,0,0,1) 18%,rgba(199,0,0,1) 82%,rgba(199,0,0,0));
box-shadow:0 1px 7px rgba(199,0,0,.18);
}
}
@media (min-width: 1600px){
#shopify-section-header.et-header-section:after{
background:linear-gradient(90deg,rgba(199,0,0,0),rgba(199,0,0,1) 32%,rgba(199,0,0,1) 68%,rgba(199,0,0,0));
}
}
/* =========================================================
J-M ENTERPRISE HUBS (shared styles)
Applies to pages wrapped in .jm-enterprise-shell
========================================================= */
/* -------------------------
0) Design tokens
------------------------- */
:root{
--jm-shell-pad-x-desktop: 30px;
--jm-shell-pad-x-mobile: 20px;
--jm-shell-pad-y-desktop: 28px;
--jm-shell-pad-y-mobile: 22px;
--jm-shell-bg: #f9fafc; /* premium near-white */
--jm-card-bg: #f4f6fb; /* slightly darker than shell */
--jm-card-bg-hover: #ffffff; /* crisp hover */
--jm-card-shadow: 0 8px 22px rgba(0,0,0,0.08);
--jm-text: #111;
--jm-muted: #666;
--jm-border: rgba(0,0,0,0.12);
--jm-border-strong: rgba(0,0,0,0.18);
--jm-radius-shell: 18px;
--jm-radius-shell-mobile: 14px;
--jm-radius-card: 12px;
--jm-focus: #ffcc33;
--jm-accent: #c70000;
}
/* Basic sanity */
.jm-enterprise-shell,
.jm-enterprise-shell *{
box-sizing: border-box;
}
@media (prefers-reduced-motion: reduce){
.jm-enterprise-shell *{
scroll-behavior: auto !important;
transition: none !important;
animation: none !important;
}
}
/* -------------------------
1) Enterprise shell / frame
------------------------- */
.jm-enterprise-shell{
max-width: 1200px;
margin: 24px auto 40px;
padding: var(--jm-shell-pad-y-desktop) var(--jm-shell-pad-x-desktop);
background-color: var(--jm-shell-bg);
border-radius: var(--jm-radius-shell);
border: 1px solid rgba(0,0,0,0.12);
box-shadow: 0 20px 55px rgba(0,0,0,0.18);
color: var(--jm-text);
}
@media (max-width: 767px){
.jm-enterprise-shell{
margin: 16px 10px 28px;
padding: var(--jm-shell-pad-y-mobile) var(--jm-shell-pad-x-mobile);
border-radius: var(--jm-radius-shell-mobile);
box-shadow: 0 18px 45px rgba(0,0,0,0.18);
}
}
/* -------------------------
1.1) Page header helpers (removes inline layout styles)
------------------------- */
.jm-page-title{
margin: 0 0 8px 0;
}
.jm-page-lede{
margin: 0 0 16px 0;
color: #222;
}
.jm-page-actions{
display: flex;
gap: 10px;
flex-wrap: wrap;
margin: 0 0 14px 0;
}
.jm-page-block{
margin: 0 0 14px 0;
}
.jm-visually-hidden{
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0,0,0,0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* -------------------------
2) Soft “band” sections
------------------------- */
.jm-nav-band,
.jm-why-band,
.jm-tail-band{
background-color: #edf0f5;
border-radius: 16px;
padding: 2.5rem 1.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.03);
}
/* -------------------------
3) Reusable layout grids
------------------------- */
.jm-compat-nav-grid,
.jm-kits-grid,
.jm-why-grid,
.jm-help-grid{
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 20px;
}
@media (max-width: 767px){
.jm-compat-nav-grid,
.jm-kits-grid,
.jm-why-grid,
.jm-help-grid{
flex-direction: column;
}
}
.jm-compat-nav-step{ flex: 1 1 250px; min-width: 240px; }
.jm-compat-nav-step label{ display:block; font-weight:600; margin-bottom:6px; }
/* -------------------------
4) Reusable cards (kits/why/help)
------------------------- */
.jm-kits-card,
.jm-why-card,
.jm-help-card{
flex: 1 1 320px;
min-width: 280px;
background-color: var(--jm-card-bg);
border-radius: var(--jm-radius-card);
padding: 1.5rem 1.25rem 1.75rem;
border: 1px solid #e0e0e0;
box-shadow: 0 4px 12px rgba(0,0,0,0.03);
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.jm-kits-card:hover,
.jm-why-card:hover,
.jm-help-card:hover{
background: var(--jm-card-bg-hover);
border-color: var(--jm-border-strong);
box-shadow: 0 8px 18px rgba(0,0,0,0.06);
transform: translateY(-1px);
}
.jm-kits-card h3,
.jm-why-card h3,
.jm-help-card h3{
margin: 0 0 0.5rem 0;
font-size: 1.1rem;
font-weight: 700;
}
.jm-kits-card p,
.jm-why-card p,
.jm-help-card p,
.jm-why-card li{
font-size: 0.95rem;
line-height: 1.6;
}
.jm-why-card h3 a{ color:inherit; text-decoration:none; }
.jm-why-card h3 a:hover{ text-decoration:underline; }
/* -------------------------
5) Inputs + selects
------------------------- */
.jm-compat-select,
.jm-compat-search-input{
width: 100%;
max-width: 520px;
padding: 0.55rem 0.9rem;
border-radius: 999px;
border: 1px solid #d0d0d0;
font-size: 0.95rem;
line-height: 1.3;
background-color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.jm-compat-select:focus,
.jm-compat-search-input:focus{
border-color: var(--jm-accent);
box-shadow: 0 0 0 1px rgba(199,0,0,0.28);
outline: none;
}
/* -------------------------
6) Primary buttons (Blue skin) — tuned
------------------------- */
.jm-compat-nav-btn,
.jm-compat-search-btn,
.jm-help-btn{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.6rem 1.4rem;
border-radius: 999px;
/* Slightly lighter + cleaner */
border: 1px solid #0b4fa6;
background: linear-gradient(135deg, #1a7fe6, #0b4fa6);
color: #ffffff;
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.02em;
text-decoration: none;
cursor: pointer;
box-shadow: 0 6px 18px rgba(0,70,140,0.22);
transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease, filter 0.15s ease;
}
/* Lock text color across states (prevents theme link hover colors) */
.jm-compat-nav-btn:link,
.jm-compat-search-btn:link,
.jm-help-btn:link,
.jm-compat-nav-btn:visited,
.jm-compat-search-btn:visited,
.jm-help-btn:visited{
color: #ffffff;
}
.jm-compat-nav-btn:hover:not([disabled]),
.jm-compat-search-btn:hover:not([disabled]),
.jm-help-btn:hover{
/* Slightly brighter on hover, but still “enterprise” */
background: linear-gradient(135deg, #2a8fff, #0e5cc6);
color: #ffffff; /* <- critical */
text-decoration: none;
box-shadow: 0 8px 22px rgba(0,70,140,0.28);
transform: translateY(-1px);
}
/* Optional: subtle hover clarity without changing color dramatically */
.jm-compat-nav-btn:hover,
.jm-compat-search-btn:hover,
.jm-help-btn:hover{
filter: brightness(1.02);
}
.jm-compat-nav-btn:focus-visible,
.jm-compat-search-btn:focus-visible,
.jm-help-btn:focus-visible{
outline: 2px solid var(--jm-focus);
outline-offset: 2px;
}
.jm-compat-nav-btn[disabled],
.jm-compat-search-btn[disabled]{
background: #d7d7d7;
border-color: #c2c2c2;
color: #666666;
box-shadow: none;
cursor: not-allowed;
transform: none;
}
/* -------------------------
7) Helper text
------------------------- */
.jm-compat-hint{ margin-top:0.4rem; font-size:0.9rem; line-height:1.4; color: var(--jm-muted); }
.jm-compat-subhint,
.jm-compat-status{ margin-top:0.3rem; font-size:0.85rem; line-height:1.4; color:#777; }
/* -------------------------
8) FAQ styling (hub-style)
------------------------- */
.jm-hub-faq{
max-width: 900px;
margin: 0 auto 3rem;
padding: 2rem 1.5rem 0.10rem;
}
.jm-hub-faq > h2{
font-size: 1.6rem;
text-align: center;
margin-bottom: 1.75rem;
}
.jm-hub-faq h3{
font-size: 1.15rem;
font-weight: 700;
margin-top: 1.8rem;
margin-bottom: 0.6rem;
padding: 0.55rem 0.85rem;
background-color: #edf0f5;
border-left: 3px solid var(--jm-accent);
border-radius: 6px;
color: #222;
}
.jm-hub-faq p,
.jm-hub-faq ul,
.jm-hub-faq ol{
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 0.5rem;
}
.jm-hub-faq ul,
.jm-hub-faq ol{ padding-left: 1.25rem; }
.jm-hub-faq a{ text-decoration: underline; }
/* =========================================================
RC-BRAND (brand pages) — series + model navigation
========================================================= */
/* -------------------------
9) Model cards grid
------------------------- */
.jm-brandhub-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
}
.jm-brandhub-card{
text-decoration: none;
border: 1px solid var(--jm-border);
padding: 12px;
border-radius: var(--jm-radius-card);
display: block;
background: var(--jm-card-bg);
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.jm-brandhub-card:hover{
box-shadow: 0 6px 18px rgba(0,0,0,0.06);
transform: translateY(-1px);
border-color: var(--jm-border-strong);
background: var(--jm-card-bg-hover);
}
.jm-brandhub-card:focus-visible{
outline: 2px solid var(--jm-focus);
outline-offset: 2px;
border-radius: var(--jm-radius-card);
}
.jm-brandhub-card-title{
font-weight: 600;
color: var(--jm-text);
}
.jm-brandhub-card-sub{
opacity: .75;
font-size: 12px;
margin-top: 4px;
color: #333;
}
/* -------------------------
10) Series section spacing + header
------------------------- */
.jm-brandhub-series{ margin: 18px 0 26px 0; }
.jm-brandhub-series-head{
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin: 0 0 10px 0;
}
.jm-brandhub-backtotop{
text-decoration: none;
font-size: 13px;
opacity: .78;
white-space: nowrap;
color: #111;
}
.jm-brandhub-backtotop:hover{ text-decoration: underline; opacity: 1; }
/* =========================
RC-Brand: Enterprise Series Navigation
- Desktop: sticky series bar
- Mobile: dropdown jump
- In-series: Prev/Next
========================= */
/* Keep anchor targets from hiding behind the sticky bar */
.jm-brandhub-series{
scroll-margin-top: 96px;
}
/* Sticky bar (desktop only) */
.jm-series-sticky{
position: sticky;
top: 14px;
z-index: 20;
margin: 0 0 14px 0;
background: rgba(237,240,245,0.92);
border: 1px solid rgba(0,0,0,0.08);
border-radius: 14px;
padding: 10px 10px;
backdrop-filter: blur(6px);
}
.jm-series-sticky-row{
display: flex;
gap: 8px;
overflow: auto;
padding-bottom: 2px;
-webkit-overflow-scrolling: touch;
}
.jm-series-tab{
flex: 0 0 auto;
text-decoration: none;
border: 1px solid rgba(0,0,0,0.12);
background: rgba(255,255,255,0.72);
color: #111;
border-radius: 10px; /* not a pill */
padding: 8px 10px;
font-size: 13px;
line-height: 1.2;
white-space: nowrap;
transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.jm-series-tab:hover{
background: rgba(255,255,255,0.95);
box-shadow: 0 8px 18px rgba(0,0,0,0.08);
transform: translateY(-1px);
}
/* Mobile dropdown (mobile only) */
.jm-series-select-wrap{
margin: 0 0 14px 0;
}
.jm-series-select-label{
display: block;
font-weight: 700;
margin: 0 0 6px 0;
font-size: 0.95rem;
}
.jm-series-select{
width: 100%;
max-width: 520px;
}
/* Hide/show rules */
@media (max-width: 767px){
.jm-series-sticky{ display:none; }
}
@media (min-width: 768px){
.jm-series-select-wrap{ display:none; }
}
/* Series header actions: Back-to-top + Prev/Next */
.jm-brandhub-series-actions{
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
}
.jm-series-prevnext{
display: inline-flex;
gap: 8px;
flex-wrap: wrap;
}
.jm-series-navlink{
text-decoration: none;
font-size: 13px;
opacity: .85;
border: 1px solid rgba(0,0,0,0.10);
background: rgba(255,255,255,0.55);
border-radius: 10px; /* not a pill */
padding: 6px 10px;
color: #111;
}
.jm-series-navlink:hover{
opacity: 1;
background: rgba(255,255,255,0.90);
text-decoration: none;
}
.jm-series-navlink:focus-visible{
outline: 2px solid var(--jm-focus);
outline-offset: 2px;
}
/* -------------------------
11) Series Index grid (enterprise jumpers)
------------------------- */
.jm-series-index{ margin: 0 0 14px 0; }
.jm-series-index h2{
margin: 0 0 10px 0;
font-size: 1.1rem;
}
.jm-series-index-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
}
.jm-series-card{
text-decoration: none;
border: 1px solid rgba(0,0,0,0.12);
border-radius: 12px;
padding: 12px;
display: block;
background: var(--jm-card-bg);
transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.jm-series-card:hover{
transform: translateY(-1px);
border-color: rgba(0,0,0,0.18);
box-shadow: 0 8px 18px rgba(0,0,0,0.08);
background: var(--jm-card-bg-hover);
}
.jm-series-card-title{
font-weight: 700;
font-size: 0.98rem;
color: #111;
}
.jm-series-card-sub{
margin-top: 4px;
font-size: 0.85rem;
opacity: .78;
}
/* =========================================================
Legacy chip styles (still used on /pages/rc-brands A–Z)
========================================================= */
.jm-chip-row{ margin-top: 2px; }
.jm-chipbar{
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 14px 0;
}
.jm-chip{
text-decoration: none;
border: 1px solid rgba(0,0,0,0.12);
padding: 7px 10px;
border-radius: 999px;
font-size: 14px;
display: inline-block;
background: rgba(255,255,255,0.6);
color: #111;
}
.jm-chip:hover{ background: rgba(255,255,255,0.9); }
.jm-chip:focus-visible{
outline: 2px solid var(--jm-focus);
outline-offset: 2px;
}
/* =========================================================
MODEL COLLECTION TEMPLATE SAFE POLISH
Scope: only inside .jm-collection-enterprise
========================================================= */
/* Scope collection-only tokens to the enterprise wrapper (NOT global) */
.jm-collection-enterprise{
--jm-collection-inner-max: 1138px; /* nearly the 1200 shell max */
--jm-collection-inner-pad: 18px;
}
/* FAQ block: match enterprise card style without changing inline layout */
.jm-collection-enterprise .jm-faq details{
background: var(--jm-card-bg);
border: 1px solid rgba(0,0,0,0.12) !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}
.jm-collection-enterprise .jm-faq details:hover{
background: var(--jm-card-bg-hover);
border-color: rgba(0,0,0,0.18) !important;
}
/* “Looking for a different model?” CTA — unify into one rule */
.jm-collection-enterprise .jm-compat-hub-cta{
max-width: var(--jm-collection-inner-max) !important; /* overrides inline 720px */
width: calc(100% - 20px) !important;
margin-left: auto !important;
margin-right: auto !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.03);
}
/* ---------- Model-fit module (inner container) ---------- */
.jm-collection-enterprise .jm-model-fit,
.jm-collection-enterprise .jm-model-fit *{
box-sizing: border-box;
}
.jm-collection-enterprise .jm-model-fit{
max-width: var(--jm-collection-inner-max);
margin: 14px auto 18px;
padding: var(--jm-collection-inner-pad);
background: var(--jm-shell-bg);
border: 1px solid var(--jm-border);
border-radius: var(--jm-radius-shell);
box-shadow: 0 14px 36px rgba(0,0,0,0.12);
color: var(--jm-text);
}
/* Mobile: wide but safe gutters */
@media (max-width: 767px){
.jm-collection-enterprise .jm-model-fit{
max-width: 100%;
margin: 12px 10px 16px;
padding: 14px 14px;
border-radius: var(--jm-radius-shell-mobile);
box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}
}
/* Header */
.jm-collection-enterprise .jm-fit-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap: 12px;
}
.jm-collection-enterprise .jm-fit-title{
margin: 0;
font-weight: 900;
letter-spacing: -0.2px;
font-size: clamp(22px, 2.2vw, 30px);
line-height: 1.15;
}
.jm-collection-enterprise .jm-back a{
font-size: 14px;
font-weight: 700;
text-decoration: none;
color: var(--jm-text);
opacity: .86;
white-space: nowrap;
}
.jm-collection-enterprise .jm-back a:hover{
opacity: 1;
text-decoration: underline;
}
.jm-collection-enterprise .jm-fit-meta{
margin: 6px 0 10px 0;
font-size: 13px;
color: var(--jm-muted);
}
/* Top two-card grid */
.jm-collection-enterprise .jm-topgrid{
display:grid;
grid-template-columns: 1fr;
gap: 16px;
margin: 14px 0 12px;
}
@media (min-width: 768px){
.jm-collection-enterprise .jm-topgrid{
grid-template-columns: 1fr 1fr;
}
}
/* Cards */
.jm-collection-enterprise .jm-card,
.jm-collection-enterprise .jm-cardbox{
background: var(--jm-card-bg);
border: 1px solid var(--jm-border);
border-radius: var(--jm-radius-card);
padding: 1.25rem 1.15rem 1.35rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.03);
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.jm-collection-enterprise .jm-card:hover,
.jm-collection-enterprise .jm-cardbox:hover{
background: var(--jm-card-bg-hover);
border-color: var(--jm-border-strong);
box-shadow: 0 8px 18px rgba(0,0,0,0.06);
transform: translateY(-1px);
}
/* Subheads */
.jm-collection-enterprise .jm-card .jm-card-subhead,
.jm-collection-enterprise .jm-subhead{
margin: 0 0 0.7rem 0;
font-size: 1.1rem;
font-weight: 800;
padding: 0.55rem 0.85rem;
background: #edf0f5;
border-left: 3px solid var(--jm-accent);
border-radius: 10px;
color: #222;
}
/* Kit-type accents */
.jm-collection-enterprise .jm-subhead.screw { border-left-color:#ff8a3d; }
.jm-collection-enterprise .jm-subhead.metal { border-left-color:#6e7f8d; }
.jm-collection-enterprise .jm-subhead.rubber { border-left-color:#2d9b5a; }
/* Lists */
.jm-collection-enterprise .jm-list{
margin: 0.4rem 0 0.7rem 0;
padding: 0 0 0 1.1rem;
}
.jm-collection-enterprise .jm-list li{
margin: 0.25rem 0;
font-size: 0.95rem;
line-height: 1.6;
}
.jm-collection-enterprise .jm-available li{
font-size: 1rem;
font-weight: 800;
}
/* Scroll pill */
.jm-collection-enterprise .jm-topnote{
display:inline-flex;
align-items:center;
justify-content:center;
gap: 10px;
margin: 0.9rem 0 0;
padding: 0.55rem 0.95rem;
font-size: 0.95rem;
font-weight: 700;
background: #edf0f5;
border: 1px solid var(--jm-border);
border-radius: 999px;
color: var(--jm-text);
text-decoration: none;
}
.jm-collection-enterprise .jm-topnote:before{ content:'↓'; }
.jm-collection-enterprise .jm-topnote.center{
width: fit-content;
margin-left:auto;
margin-right:auto;
}
.jm-collection-enterprise .jm-topnote:hover{
border-color: var(--jm-border-strong);
background: #ffffff;
}
/* Headings */
.jm-collection-enterprise .jm-compat-h2{
text-align:center;
margin: 26px 0 16px;
font-size: 1.55rem;
font-weight: 900;
letter-spacing: -0.2px;
line-height: 1.15;
}
.jm-collection-enterprise .jm-compat-h2 .br-mobile-line{ display:none; }
@media (max-width: 480px){
.jm-collection-enterprise .jm-compat-h2{
font-size: 1.35rem;
margin-top: 30px;
}
.jm-collection-enterprise .jm-compat-h2 .br-mobile-line{ display:block; }
}
/* Kit cards grid */
.jm-collection-enterprise .jm-compat-grid{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
gap: 16px;
align-items: start;
}
/* Notes */
.jm-collection-enterprise .jm-note{
margin: 0.4rem 0 0;
font-size: 0.85rem;
line-height: 1.4;
color: var(--jm-muted);
}
/* Buttons */
.jm-collection-enterprise .jm-btn-row{
display:flex;
flex-wrap:wrap;
gap: 10px;
margin-top: 12px;
}
.jm-collection-enterprise .jm-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding: 0.6rem 1.1rem;
border-radius: 12px;
border: 1px solid transparent;
cursor:pointer;
font-size: 0.95rem;
font-weight: 700;
line-height: 1.2;
text-decoration:none;
white-space: normal !important;
overflow-wrap: anywhere;
max-width: 100%;
}
.jm-collection-enterprise .jm-btn-primary{
border: 1px solid #00408f;
background: linear-gradient(135deg, #0067c5, #00408f);
color: #ffffff;
box-shadow: 0 6px 18px rgba(0,70,140,0.24);
transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.jm-collection-enterprise .jm-btn-primary:hover,
.jm-collection-enterprise .jm-btn-primary:focus{
background: linear-gradient(135deg, #0078e5, #0051a8);
box-shadow: 0 8px 22px rgba(0,70,140,0.30);
transform: translateY(-1px);
color: #fff !important;
}
.jm-collection-enterprise .jm-btn-primary:focus-visible{
outline: 2px solid var(--jm-focus);
outline-offset: 2px;
}
.jm-collection-enterprise .jm-btn-ghost{
background: rgba(255,255,255,0.65);
color: var(--jm-text);
border: 1px solid var(--jm-border);
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.jm-collection-enterprise .jm-btn-ghost:hover{
background: rgba(255,255,255,0.92);
border-color: var(--jm-border-strong);
}
/* Checks list */
.jm-collection-enterprise .jm-checks{
list-style:none;
padding: 0;
margin: 14px 0 0;
display:grid;
gap: 6px;
}
.jm-collection-enterprise .jm-checks li{
position: relative;
padding-left: 22px;
font-size: 0.95rem;
line-height: 1.35;
color: var(--jm-text);
}
.jm-collection-enterprise .jm-checks li:before{
content: "✓";
position:absolute;
left: 0;
top: 0;
font-weight: 900;
color: #2d9b5a;
}
/* Brand nav row */
.jm-collection-enterprise .jm-model-fit .jm-brand-nav{
width: 100% !important;
display:flex !important;
flex-wrap:wrap !important;
justify-content:center !important;
align-items:center !important;
gap: 10px !important;
margin: 10px 0 6px 0 !important;
}
.jm-collection-enterprise .jm-model-fit .jm-brand-nav .jm-help-btn{
font-size: 0.9rem;
padding: 0.45rem 1.0rem;
}
@media (min-width: 768px){
.jm-collection-enterprise .jm-model-fit .jm-brand-nav{
margin-bottom: -10px !important;
}
}
/* Bottom anchor heading + jump safety */
.jm-collection-enterprise .jm-bottom-h2{
text-align: center;
margin: 34px auto 0;
padding-top: 10px;
line-height: 1.25;
}
.jm-collection-enterprise #jm-compat-products{
scroll-margin-top: 96px;
}
.jm-collection-enterprise .jm-bottom-h2 .mobile-break{
display: inline;
}
@media (max-width: 767px){
.jm-collection-enterprise .jm-bottom-h2 .mobile-break{
display: block;
margin-top: 4px;
}
}
/* Ensure inner grids use container width */
.jm-collection-enterprise .jm-topgrid,
.jm-collection-enterprise .jm-compat-grid{
width: 100%;
max-width: 100%;
}
.jm-collection-enterprise .jm-model-fit > *{
max-width: 100%;
}
/* === FINAL OVERRIDE (place at very end) ===
Model-fit should behave like shell content (no nested card look)
*/
.jm-enterprise-shell.jm-collection-enterprise .jm-model-fit{
width: 100% !important;
max-width: none !important;
/* align to top of shell content */
margin: 0 0 18px 0 !important;
/* remove the extra “inner container” look */
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
}
/* =========================================================
MODEL COLLECTION: tighten space above enterprise shell
(Keeps model-fit alignment intact; affects only model collections)
========================================================= */
.jm-enterprise-shell.jm-collection-enterprise{
margin-top: 14px; /* was effectively 24px via base shell */
}
@media (max-width: 767px){
.jm-enterprise-shell.jm-collection-enterprise{
margin-top: 10px; /* was effectively 16px via base shell */
}
}
/* =========================================================
MODEL COLLECTION: add space above JM FIT title
Scoped to enterprise model collection pages only
========================================================= */
.jm-enterprise-shell.jm-collection-enterprise .jm-fit-title{
margin-top: 10px; /* desktop control */
}
/* Mobile control */
@media (max-width: 767px){
.jm-enterprise-shell.jm-collection-enterprise .jm-fit-title{
margin-top: 6px;
}
}
/* =========================================================
MODEL COLLECTION: add space above "Model Base Part" line
========================================================= */
.jm-enterprise-shell.jm-collection-enterprise .jm-fit-meta{
margin-top: 10px; /* desktop control */
}
/* Mobile control */
@media (max-width: 767px){
.jm-enterprise-shell.jm-collection-enterprise .jm-fit-meta{
margin-top: 8px;
}
}
/* =========================================================
MODEL COLLECTION: tighten CTA line-length on desktop only
(Overrides inline width/max-width, so uses !important)
========================================================= */
@media (min-width: 768px){
.jm-enterprise-shell.jm-collection-enterprise .jm-compat-hub-cta{
max-width: 640px !important; /* was 720px inline */
width: 86% !important; /* was 92% inline */
}
}
/* =========================================================
MODEL COLLECTION: slightly larger CTA text on desktop
========================================================= */
@media (min-width: 768px){
.jm-enterprise-shell.jm-collection-enterprise .jm-compat-hub-cta{
font-size: 1.02rem !important; /* inline is 0.95rem */
}
}
/* =========================================================
MODEL COLLECTION: tighten bottom padding of enterprise shell
Keeps CTA closer to shell bottom without touching layout widths
========================================================= */
.jm-enterprise-shell.jm-collection-enterprise{
padding-bottom: 18px; /* was 28px via base shell padding */
}
@media (max-width: 767px){
.jm-enterprise-shell.jm-collection-enterprise{
padding-bottom: 0px;
}
}
.jm-enterprise-shell.jm-collection-enterprise .jm-compat-hub-cta{
margin-bottom: 36px !important; /* inline is 56px */
}
}
/* RC BRAND PAGES: visible breadcrumbs (no literal separator characters) */
.jm-rc-brand-page .jm-breadcrumbs{
margin: 0 0 10px;
font-size: 0.92rem;
line-height: 1.4;
opacity: 0.92;
}
.jm-rc-brand-page .jm-breadcrumbs__list{
display:flex;
flex-wrap:wrap;
align-items:center;
gap: 8px;
list-style:none; /* prevents bullets/numbers */
padding:0;
margin:0;
}
.jm-rc-brand-page .jm-breadcrumbs__item{
display:inline-flex;
align-items:center;
}
/* Separator is generated here (so no stray characters in HTML) */
.jm-rc-brand-page .jm-breadcrumbs__item + .jm-breadcrumbs__item::before{
content:"›";
opacity:0.55;
margin: 0 8px 0 0;
}
.jm-rc-brand-page .jm-breadcrumbs__link{
text-decoration:none;
border-bottom:1px solid transparent;
opacity:0.9;
}
.jm-rc-brand-page .jm-breadcrumbs__link:hover{
opacity:1;
border-bottom-color:currentColor;
}
.jm-rc-brand-page .jm-breadcrumbs__item--current{
font-weight:600;
opacity:0.95;
}
/* =========================================================
Visible Breadcrumbs (Enterprise UX)
Scope: only inside .jm-enterprise-shell
========================================================= */
.jm-enterprise-shell .jm-breadcrumbs{
margin: 0 0 .75rem;
font-size: .9rem;
line-height: 1.3;
}
.jm-enterprise-shell .jm-breadcrumbs__list{
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .15rem;
}
.jm-enterprise-shell .jm-breadcrumbs__item + .jm-breadcrumbs__item::before{
content: "›";
opacity: .6;
margin: 0 .4rem;
}
.jm-enterprise-shell .jm-breadcrumbs__link{
text-decoration: none;
}
.jm-enterprise-shell .jm-breadcrumbs__link:hover{
text-decoration: underline;
}
.jm-enterprise-shell .jm-breadcrumbs__current{
opacity: .85;
}
/* ===========================
J-M Visible Breadcrumbs
=========================== */
.jm-bc{
margin: 10px 0 16px;
}
.jm-bc__list{
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
font-size: 0.92rem;
line-height: 1.35;
color: rgba(0,0,0,.72);
}
.jm-bc__item{
display: inline-flex;
align-items: center;
}
.jm-bc__item:not(:last-child)::after{
content: "›";
margin-left: 8px;
opacity: .55;
}
.jm-bc__link{
text-decoration: none;
color: inherit;
border-bottom: 1px solid transparent;
}
.jm-bc__link:hover{
color: #111;
border-bottom-color: rgba(0,0,0,.28);
}
.jm-bc__current{
color: #111;
font-weight: 600;
}
/* Mobile: slightly tighter */
@media (max-width: 749px){
.jm-bc{ margin: 8px 0 12px; }
.jm-bc__list{ font-size: 0.9rem; gap: 6px; }
.jm-bc__item:not(:last-child)::after{ margin-left: 6px; }
}
/* =========================================================
J-M Visible Breadcrumbs — Enterprise mobile polish
Truncate ONLY the last crumb (current page) on mobile
========================================================= */
.jm-breadcrumbs{
font-size: 0.9rem;
line-height: 1.25;
margin: 0 0 10px 0;
}
.jm-breadcrumbs__list{
display: flex;
flex-wrap: wrap;
gap: 6px 8px;
padding: 0;
margin: 0;
list-style: none;
}
.jm-breadcrumbs__item{
min-width: 0; /* enables ellipsis in flex */
}
/* separator */
.jm-breadcrumbs__item:not(:last-child)::after{
content: "›";
margin-left: 8px;
opacity: 0.6;
}
.jm-breadcrumbs__link{
text-decoration: none;
}
.jm-breadcrumbs__link:hover{
text-decoration: underline;
}
.jm-breadcrumbs__item--current{
font-weight: 600;
}
/* Mobile: tighter + truncate current page label */
@media (max-width: 600px){
.jm-breadcrumbs{
font-size: 0.82rem;
margin-bottom: 8px;
}
.jm-breadcrumbs__list{
gap: 4px 6px;
}
/* Key: last crumb becomes a single clean line */
.jm-breadcrumbs__item--current{
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
/* Current page crumb: truncate on ALL screen sizes */
.jm-breadcrumbs__item--current{
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 600;
}
/* =========================================================
J-M Visible Breadcrumbs (global)
========================================================= */
.jm-breadcrumbs{
margin: 0 0 12px;
font-size: 0.9rem;
line-height: 1.25;
}
.jm-breadcrumbs__list{
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
padding: 0;
margin: 0;
}
.jm-breadcrumbs__item{
display: inline-flex;
align-items: center;
min-width: 0;
}
.jm-breadcrumbs__item:not(:last-child)::after{
content: "→";
margin-left: 10px;
opacity: 0.6;
}
.jm-breadcrumbs__link{
text-decoration: none;
}
.jm-breadcrumbs__link:hover{
text-decoration: underline;
}
/* Truncate the LAST crumb (desktop + mobile, per your preference) */
.jm-breadcrumbs__item--current{
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 600;
}
/* =========================================================
Visible Breadcrumbs — Enterprise Slim (no "card"/shadow)
Applies site-wide anywhere .jm-breadcrumbs is rendered.
========================================================= */
.jm-breadcrumbs{
/* kill any card-like styling */
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
/* spacing + alignment */
margin: 10px 0 12px;
padding: 0;
/* prevent weird full-width “bar” look */
width: 100%;
}
.jm-breadcrumbs__list{
display: flex;
align-items: center;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
/* enterprise: keep it on one line */
flex-wrap: nowrap;
overflow: hidden;
}
.jm-breadcrumbs__item{
/* allow truncation */
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.86rem; /* slightly smaller, cleaner */
line-height: 1.25;
color: #666;
}
.jm-breadcrumbs__item:not(:first-child)::before{
content: "›";
padding: 0 8px;
color: #aaa;
}
.jm-breadcrumbs__link{
color: inherit;
text-decoration: none;
}
.jm-breadcrumbs__link:hover{
text-decoration: underline;
}
/* Make the LAST crumb truncate (desktop + mobile) */
.jm-breadcrumbs__item--current{
font-weight: 600;
color: #111;
/* desktop truncate too */
max-width: 60ch;
}
/* tighten truncation on smaller screens */
@media (max-width: 768px){
.jm-breadcrumbs__item--current{
max-width: 26ch;
}
}
/* =========================================================
Breadcrumb wrapper (PageFly + Sections)
Keeps breadcrumbs clean (no card/box)
========================================================= */
.jm-breadcrumbs-shell{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 10px 0 12px !important;
}
/* Hub breadcrumbs: spacing only (no box/card) */
.jm-breadcrumbs-shell--hub{
margin: 10px 0 14px;
}
/* =========================================================
BREADCRUMBS — truncate ONLY the last crumb (current page)
========================================================= */
/* Keep breadcrumbs in one line and let the LAST item shrink */
.jm-breadcrumbs__list{
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: .35rem;
min-width: 0; /* critical: allows flex children to shrink */
}
/* All non-last crumbs should never truncate */
.jm-breadcrumbs__item{
flex: 0 0 auto;
white-space: nowrap;
}
.jm-breadcrumbs__link{
overflow: visible;
text-overflow: clip;
max-width: none;
white-space: nowrap;
}
/* Only the current crumb (last) can truncate */
.jm-breadcrumbs__item--current{
flex: 1 1 auto;
min-width: 0; /* critical */
overflow: hidden; /* enables ellipsis */
text-overflow: ellipsis;
white-space: nowrap;
}
/* Optional: if your current crumb ever becomes a link in the future */
.jm-breadcrumbs__item--current .jm-breadcrumbs__link{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* =========================================================
BREADCRUMBS — enterprise mobile behavior
- Mobile: 2-line layout (break after 3rd crumb)
- Only last crumb truncates
- Desktop: can stay single-line (optional below)
========================================================= */
/* Safety: never hide later crumbs */
.jm-breadcrumbs,
.jm-breadcrumbs__list{
overflow: visible;
}
/* Base: flex layout */
.jm-breadcrumbs__list{
display: flex;
align-items: center;
gap: .35rem;
min-width: 0;
}
/* Non-last crumbs never truncate */
.jm-breadcrumbs__item{
flex: 0 0 auto;
white-space: nowrap;
}
.jm-breadcrumbs__link{
overflow: visible;
text-overflow: clip;
max-width: none;
white-space: nowrap;
}
/* Last crumb can truncate */
.jm-breadcrumbs__item--current{
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ---------- MOBILE: break onto 2 lines after crumb #3 ---------- */
@media (max-width: 768px){
.jm-breadcrumbs__list{
flex-wrap: wrap; /* allow the second line */
row-gap: .2rem;
}
/* Start the 4th crumb (Brand) on a new line */
.jm-breadcrumbs__item:nth-child(4){
flex-basis: 100%;
}
/* Give the current crumb a reasonable max width so it truncates nicely */
.jm-breadcrumbs__item--current{
max-width: 100%;
}
}
/* =========================================================
MOBILE WRAP FIX — stop Brand/Collection crumbs from
scrolling off-screen
========================================================= */
@media (max-width: 768px){
/* Let crumb items (especially Brand/Collection) actually wrap */
.jm-breadcrumbs__item{
max-width: 100%;
}
/* Starting from crumb #4 (Brand), allow wrapping on non-current crumbs */
.jm-breadcrumbs__item:nth-child(n+4):not(.jm-breadcrumbs__item--current){
white-space: normal; /* was nowrap */
overflow-wrap: anywhere; /* break long strings safely */
word-break: break-word;
}
/* Links inside those crumbs must also allow wrapping */
.jm-breadcrumbs__item:nth-child(n+4):not(.jm-breadcrumbs__item--current) .jm-breadcrumbs__link{
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
display: inline; /* prevents weird inline-block width issues */
}
/* Keep ONLY the last crumb truncated (as requested) */
.jm-breadcrumbs__item--current{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
/* Breadcrumb spacing from the H1 on PDP */
.et-product-single__meta .jm-breadcrumbs{
margin: 0 0 16px 0; /* increases separation before title */
}
@media (max-width: 768px){
.et-product-single__meta .jm-breadcrumbs{
margin-bottom: 20px;
}
}
/* =========================================================
DESKTOP WRAP FIX — allow middle crumbs (brand/collection)
to wrap instead of overflowing
========================================================= */
/* let the breadcrumb line wrap overall */
.jm-breadcrumbs__list{
flex-wrap: wrap;
}
/* allow linked crumbs to wrap (brand/collection) */
.jm-breadcrumbs__item:not(.jm-breadcrumbs__item--current),
.jm-breadcrumbs__item:not(.jm-breadcrumbs__item--current) .jm-breadcrumbs__link{
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
/* keep current crumb tidy if it’s long (optional, but usually nice) */
.jm-breadcrumbs__item--current{
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* =========================================================
DESKTOP: prevent long crumb links (collection) from spilling
========================================================= */
/* Make sure breadcrumb flex children are allowed to shrink */
.jm-breadcrumbs__list{
flex-wrap: wrap;
}
.jm-breadcrumbs__item{
min-width: 0; /* critical: allows shrinking inside flex */
}
/* Middle crumbs (links) can wrap/break */
.jm-breadcrumbs__item:not(.jm-breadcrumbs__item--current) .jm-breadcrumbs__link{
min-width: 0;
white-space: normal !important;
overflow-wrap: anywhere; /* breaks long segments if needed */
word-break: break-word; /* fallback */
}
/* =========================================================
Breadcrumbs: DESKTOP force wrapping for long middle crumbs
(prevents collection title from spilling out)
========================================================= */
@media (min-width: 768px){
.jm-breadcrumbs{
max-width: 100%;
}
.jm-breadcrumbs__list{
display: flex;
flex-wrap: wrap; /* allow wrap onto next line */
max-width: 100%;
}
.jm-breadcrumbs__item{
min-width: 0; /* critical: allow flex child to shrink */
max-width: 100%;
}
/* Force links to wrap even if theme applies nowrap */
.jm-breadcrumbs__link{
white-space: normal !important;
overflow-wrap: anywhere;
word-break: break-word;
max-width: 100%;
}
}
/* =========================
Visible Breadcrumbs — natural wrapping (mobile-friendly)
Scope this to the breadcrumb component only
========================= */
.jm-breadcrumbs-visible{
margin: 0 0 10px 0;
}
.jm-breadcrumbs-visible ol{
display: flex;
flex-wrap: wrap;
align-items: center;
list-style: none;
padding: 0;
margin: 0;
/* This is the big one: allow flex children to shrink instead of wrapping early */
min-width: 0;
/* “Natural” spacing between crumbs and between wrapped lines */
column-gap: 0; /* we'll space with separator margins */
row-gap: 4px;
}
.jm-breadcrumbs-visible li{
display: inline-flex;
align-items: center;
/* Also critical: allow each crumb item to shrink */
min-width: 0;
/* default: don't force crumbs to grow */
flex: 0 1 auto;
}
/* Make links/spans shrink properly inside flex items */
.jm-breadcrumbs-visible a,
.jm-breadcrumbs-visible span{
display: inline-block;
min-width: 0;
}
/* Keep earlier crumbs readable (don’t break brand/page labels mid-word) */
.jm-breadcrumbs-visible li:not(.is-current) a{
white-space: nowrap;
}
/* Put the separator *inside* the following crumb (prevents awkward wrap points) */
.jm-breadcrumbs-visible li + li::before{
content: "›";
opacity: 0.55;
margin: 0 6px;
flex: 0 0 auto;
}
/* The current/last crumb should take remaining room and be the one that truncates */
.jm-breadcrumbs-visible li.is-current{
flex: 1 1 auto;
}
@media (max-width: 767px){
.jm-breadcrumbs-visible li.is-current span,
.jm-breadcrumbs-visible li.is-current a{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
/* =========================================================
Visible Breadcrumbs — natural wrap on mobile
Targets:
========================================================= */
.jm-breadcrumbs{
margin: 0 0 10px 0;
}
.jm-breadcrumbs__list{
display: flex;
flex-wrap: wrap;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
/* KEY: allow flex children to shrink instead of wrapping too early */
min-width: 0;
/* Natural spacing between items + between wrapped lines */
row-gap: 4px;
}
.jm-breadcrumbs__item{
display: inline-flex;
align-items: center;
/* KEY: each crumb must be allowed to shrink */
min-width: 0;
/* default: don't force crumbs to grow, but allow shrink */
flex: 0 1 auto;
}
/* Put separator before every item except the first.
This avoids awkward wraps caused by inline separator text. */
.jm-breadcrumbs__item + .jm-breadcrumbs__item::before{
content: "›";
opacity: 0.55;
margin: 0 6px;
flex: 0 0 auto;
}
/* Earlier crumbs should stay readable as whole labels (no mid-word breaks). */
.jm-breadcrumbs__link{
display: inline-block;
min-width: 0;
white-space: nowrap;
}
/* The current crumb (last) should be the flexible one. */
.jm-breadcrumbs__item--current{
flex: 1 1 auto;
}
@media (max-width: 767px){
/* Only truncate the current crumb on mobile */
.jm-breadcrumbs__item--current{
overflow: hidden;
}
.jm-breadcrumbs__item--current{
white-space: nowrap;
text-overflow: ellipsis;
}
}
/* =========================================================
MOBILE: make LONG crumbs wrap naturally (no “jump”)
- keep early crumbs compact (nowrap)
- allow ONLY Collection (2nd-last) + Current Product (last) to wrap
========================================================= */
@media (max-width: 767px){
/* Keep the breadcrumb row wrapping between crumbs */
nav.jm-breadcrumbs > ol.jm-breadcrumbs__list{
flex-wrap: wrap !important;
min-width: 0 !important;
}
nav.jm-breadcrumbs > ol.jm-breadcrumbs__list > li.jm-breadcrumbs__item{
min-width: 0 !important;
max-width: 100% !important;
}
/* Keep earlier crumbs as “whole labels” */
nav.jm-breadcrumbs a.jm-breadcrumbs__link{
white-space: nowrap !important;
}
/* ----------------------------
COLLECTION CRUMB (2nd-last)
---------------------------- */
nav.jm-breadcrumbs > ol.jm-breadcrumbs__list > li.jm-breadcrumbs__item:nth-last-child(2){
flex: 1 1 auto !important;
min-width: 0 !important;
max-width: 100% !important;
}
nav.jm-breadcrumbs > ol.jm-breadcrumbs__list > li.jm-breadcrumbs__item:nth-last-child(2) > a.jm-breadcrumbs__link{
white-space: normal !important; /* allow wrapping inside the link */
overflow-wrap: anywhere !important; /* breaks long chunks safely */
word-break: break-word !important; /* fallback */
display: inline !important; /* avoids inline-block width weirdness */
}
/* ----------------------------
CURRENT PRODUCT CRUMB (last)
---------------------------- */
nav.jm-breadcrumbs > ol.jm-breadcrumbs__list > li.jm-breadcrumbs__item--current{
flex: 1 1 auto !important;
min-width: 0 !important;
max-width: 100% !important;
/* IMPORTANT: turn OFF truncation so it wraps instead of ellipsis */
overflow: visible !important;
text-overflow: clip !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
word-break: break-word !important;
}
}
/* =========================================================
Breadcrumb Divider — enterprise thin rule
- PDP: desktop + mobile
- Other pages: mobile only
========================================================= */
/* Base: divider hidden by default */
.jm-breadcrumbs::after{
content: "";
display: none;
height: 1px;
margin-top: 10px;
background: linear-gradient(
to right,
rgba(0,0,0,0),
rgba(0,0,0,0.24),
rgba(0,0,0,0)
);
}
/* PDP: show on all screen sizes (your theme meta wrapper) */
.et-product-single__meta .jm-breadcrumbs::after{
display: block;
}
/* Everywhere else: show only on mobile */
@media (max-width: 768px){
.jm-breadcrumbs::after{
display: block;
}
}
/* =========================================================
Breadcrumb font size controls (desktop + mobile)
Wins against scattered rules by targeting the text elements.
========================================================= */
:root{
--jm-bc-font-desktop: 0.78rem; /* adjust desktop size here */
--jm-bc-font-mobile: 0.60rem; /* adjust mobile size here */
}
/* Desktop: set size on the list + items + links (the actual text renderers) */
nav.jm-breadcrumbs ol.jm-breadcrumbs__list,
nav.jm-breadcrumbs ol.jm-breadcrumbs__list > li.jm-breadcrumbs__item,
nav.jm-breadcrumbs ol.jm-breadcrumbs__list > li.jm-breadcrumbs__item > a.jm-breadcrumbs__link{
font-size: var(--jm-bc-font-desktop) !important;
}
/* Make sure the current crumb text also follows the same size */
nav.jm-breadcrumbs ol.jm-breadcrumbs__list > li.jm-breadcrumbs__item--current{
font-size: var(--jm-bc-font-desktop) !important;
}
@media (max-width: 768px){
nav.jm-breadcrumbs ol.jm-breadcrumbs__list,
nav.jm-breadcrumbs ol.jm-breadcrumbs__list > li.jm-breadcrumbs__item,
nav.jm-breadcrumbs ol.jm-breadcrumbs__list > li.jm-breadcrumbs__item > a.jm-breadcrumbs__link{
font-size: var(--jm-bc-font-mobile) !important;
}
nav.jm-breadcrumbs ol.jm-breadcrumbs__list > li.jm-breadcrumbs__item--current{
font-size: var(--jm-bc-font-mobile) !important;
}
}
/* =========================================================
Back to RC Search link (future-proof split)
Markup:
Controls:
--jm-back-top-desktop (space above on desktop)
--jm-back-top-mobile (space above on mobile)
--jm-back-font-desktop (font size on desktop)
--jm-back-font-mobile (font size on mobile)
========================================================= */
:root{
--jm-back-top-desktop: 18px; /* adjust desktop spacing above link */
--jm-back-top-mobile: 12px; /* adjust mobile spacing above link */
--jm-back-font-desktop: 0.92rem; /* adjust desktop font size */
--jm-back-font-mobile: 0.55rem; /* adjust mobile font size */
}
/* Spacing */
.jm-back{
margin-top: var(--jm-back-top-desktop) !important;
}
/* Font size MUST be applied to the text renderers (container, link, spans) */
.jm-back,
.jm-back > a,
.jm-back > a > .jm-back__top,
.jm-back > a > .jm-back__bottom{
font-size: var(--jm-back-font-desktop) !important;
line-height: 1.2 !important;
}
/* Link layout (desktop: one line) */
.jm-back > a{
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
text-decoration: none;
}
.jm-back > a:hover{
text-decoration: underline;
}
/* Mobile: spacing + font size + stacked lines */
@media (max-width: 768px){
.jm-back{
margin-top: var(--jm-back-top-mobile) !important;
}
.jm-back,
.jm-back > a,
.jm-back > a > .jm-back__top,
.jm-back > a > .jm-back__bottom{
font-size: var(--jm-back-font-mobile) !important;
}
.jm-back > a{
flex-direction: column !important;
align-items: flex-start !important;
gap: 2px !important;
}
.jm-back__top,
.jm-back__bottom{
display: block !important;
}
}
/* =========================================================
J-M Visible Breadcrumbs — spacing + left indent controls
========================================================= */
/* 1) Indent breadcrumbs from the left edge (desktop + mobile) */
.jm-breadcrumbs{
padding-left: 20px; /* <-- adjust desktop indent here */
padding-right: 12px;
margin-left: 0;
margin-right: 0;
}
/* Slightly different indent on mobile (optional) */
@media (max-width: 767px){
.jm-breadcrumbs{
padding-left: 30px; /* <-- adjust mobile indent here */
padding-right: 10px;
}
}
/* 2) Tighten spacing between separator (arrow / divider) and text */
.jm-breadcrumbs__list{
gap: 6px; /* <-- overall spacing between breadcrumb items */
}
/* If your separator is implemented as a dedicated li (like jm-breadcrumbs__break) */
.jm-breadcrumbs__break{
margin: 0 4px; /* <-- reduce space around the arrow/divider */
}
/* If the separator is created via ::before or ::after on items/links,
these rules help reduce spacing without needing to know exact implementation */
.jm-breadcrumbs__item::before,
.jm-breadcrumbs__item::after,
.jm-breadcrumbs__link::before,
.jm-breadcrumbs__link::after{
margin-left: 4px;
margin-right: 4px;
}
/* Extra tightening on small screens */
@media (max-width: 767px){
.jm-breadcrumbs__list{
gap: 4px;
}
.jm-breadcrumbs__break{
margin: 0 3px;
}
.jm-breadcrumbs__item::before,
.jm-breadcrumbs__item::after,
.jm-breadcrumbs__link::before,
.jm-breadcrumbs__link::after{
margin-left: 1px;
margin-right: 3px;
}
}
/* PageFly: Brands We Support — visible breadcrumbs wrapper */
.jm-pf-breadcrumbs{
margin: 8px 0 10px;
padding-left: 10px; /* indent both mobile + desktop */
padding-right: 12px;
}
/* Tighten separator spacing (arrow / divider spacing) */
.jm-pf-breadcrumbs .jm-breadcrumbs__list{
gap: 3px; /* reduces “too far apart” feel */
}
/* Mobile: slightly tighter */
@media (max-width: 767px){
.jm-pf-breadcrumbs{
margin: 6px 0 8px;
padding-left: 5px;
padding-right: 10px;
}
.jm-pf-breadcrumbs .jm-breadcrumbs__list{
gap: 5px;
}
}
/* Desktop-only: move breadcrumbs farther right */
@media (min-width: 768px){
.jm-pf-breadcrumbs{
padding-left: 200px; /* increase as needed */
}
}
/* Keep jm-help-btn text WHITE on hover/active/focus (override any theme rules) */
.jm-help-btn,
.jm-help-btn:hover,
.jm-help-btn:focus,
.jm-help-btn:focus-visible,
.jm-help-btn:active,
.jm-help-btn:visited{
color: #fff !important;
}
/* If your theme applies "opacity" or weird text-decoration on hover, lock it down */
.jm-help-btn:hover,
.jm-help-btn:focus-visible{
text-decoration: none;
}
/* jm-help-btn: never underline (any state) */
.jm-help-btn,
.jm-help-btn:hover,
.jm-help-btn:focus,
.jm-help-btn:focus-visible,
.jm-help-btn:active,
.jm-help-btn:visited{
text-decoration: none !important;
}
.jm-help-btn{
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.jm-help-btn-wrap{
margin-top: 20px; /* adjust */
}
/* Desktop-only override (optional) */
@media (min-width: 768px){
.jm-help-btn-wrap{ margin-top: 30px; }
}
/* =========================================================
Why Buy Direct — desktop width control (safe + scoped)
========================================================= */
/* Base: keep it normal on mobile/tablet */
.jm-why{
width: 100%;
}
/* Desktop only: make the whole page “less wide” */
@media (min-width: 992px){
.jm-why{
max-width: 900px; /* adjust: try 920–1040 */
margin-left: auto;
margin-right: auto;
padding-left: 24px; /* keeps content off edges */
padding-right: 30px;
}
}
/* Large desktop: optional slight bump so it doesn’t feel too narrow */
@media (min-width: 1400px){
.jm-why{
max-width: 900px; /* optional */
}
}
/* =========================================================
Why Buy Direct — card surface (slightly darker than white)
Scoped to .jm-why only
========================================================= */
.jm-why .jm-card{
background: #f4f5f7; /* slightly darker than pure white */
border: 2px solid rgba(0,0,0,.12);
box-shadow: 0 6px 18px rgba(0,0,0,.10);
}
/* Optional: a touch more separation between stacked cards */
.jm-why .jm-block{
margin-bottom: 20px; /* adjust if needed */
}
/* =========================================================
Breadcrumb Shortcuts (Resources pillar)
Scoped to the shortcuts row only
========================================================= */
.jm-breadcrumbs-shortcuts{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 10px 0 10px;
padding: 0 12px; /* safe padding without forcing overflow */
}
.jm-breadcrumbs-shortcuts__label{
font-size: 12px;
font-weight: 700;
opacity: 0.85;
}
.jm-breadcrumbs-shortcuts__links{
display: flex;
flex-wrap: wrap;
gap: 8px;
min-width: 0;
}
.jm-bc-shortcut{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(0,0,0,0.12);
background: rgba(255,255,255,0.85);
color: inherit;
text-decoration: none;
font-weight: 700;
font-size: 12px;
line-height: 1.1;
white-space: nowrap;
}
.jm-bc-shortcut:hover,
.jm-bc-shortcut:focus-visible{
text-decoration: none;
background: rgba(255,255,255,0.95);
outline: none;
}
/* Desktop: slightly more breathing room */
@media (min-width: 992px){
.jm-breadcrumbs-shortcuts{
padding: 0 18px;
margin: 8px 0 12px;
}
.jm-bc-shortcut{
font-size: 13px;
padding: 7px 12px;
}
}
/* Safety: prevent chip row from causing horizontal scroll */
.jm-breadcrumbs-shortcuts,
.jm-breadcrumbs-shortcuts__links{
max-width: 100%;
overflow-wrap: anywhere;
}
/* If a chip label ever gets too long, allow it to wrap instead of forcing scroll */
@media (max-width: 480px){
.jm-bc-shortcut{
white-space: normal; /* allow wrap on very small screens */
text-align: center;
}
}
/* RC Compatibility Guide: improve shortcuts contrast on blue background */
body.page-rc-compatibility-guide .jm-breadcrumbs-shortcuts__label{
color: rgba(255,255,255,0.9);
}
body.page-rc-compatibility-guide .jm-bc-shortcut{
border-color: rgba(255,255,255,0.25);
background: rgba(255,255,255,0.92);
}
/* Global breadcrumbs host (safe – no horizontal scroll) */
.jm-breadcrumbs-host{
margin: 8px 0 10px;
}
/* Mobile: slight indent using margin (not padding) */
@media (max-width: 767px){
.jm-breadcrumbs-host .jm-breadcrumbs{
margin-left: 10px;
margin-right: 10px;
}
}
/* Desktop: a bit more indent */
@media (min-width: 768px){
.jm-breadcrumbs-host .jm-breadcrumbs{
margin-left: 10px;
margin-right: 18px;
}
}
/* =========================================================
AfterShip proxy — Breadcrumb positioning ONLY
Scope: wrapper class added in theme.liquid
Safe: does NOT alter .jm-breadcrumbs styles globally
========================================================= */
/* Safety: prevent any width math from creating horizontal scroll */
.jm-breadcrumbs-host--aftership{
box-sizing: border-box;
max-width: 100%;
overflow-x: clip; /* prevents the “mystery white space” issue */
}
/* Mobile: small indent */
@media (max-width: 767px){
.jm-breadcrumbs-host--aftership{
padding-left: 14px;
padding-right: 10px;
}
}
/* Desktop: larger indent */
@media (min-width: 768px){
.jm-breadcrumbs-host--aftership{
padding-left: 24px;
padding-right: 18px;
}
}
/* Optional: big desktop */
@media (min-width: 1200px){
.jm-breadcrumbs-host--aftership{
padding-left: 32px;
}
}
/* =========================================================
AfterShip proxy — Center breadcrumbs to the AfterShip column
Scope: wrapper class added in theme.liquid
========================================================= */
.jm-breadcrumbs-host--aftership{
box-sizing: border-box;
max-width: 100%;
overflow-x: clip; /* prevents white horizontal scroll */
display: flex;
justify-content: center; /* centers the breadcrumb "column" */
}
/* Make the breadcrumb itself behave like a centered column */
.jm-breadcrumbs-host--aftership .jm-breadcrumbs{
width: 100%;
max-width: 720px; /* <-- DESKTOP column width (adjust) */
}
/* Mobile: slightly narrower + comfortable side padding */
@media (max-width: 767px){
.jm-breadcrumbs-host--aftership{
padding-left: 12px;
padding-right: 12px;
}
.jm-breadcrumbs-host--aftership .jm-breadcrumbs{
max-width: 520px; /* <-- MOBILE column width (adjust) */
}
}
/* Desktop: a bit more breathing room */
@media (min-width: 768px){
.jm-breadcrumbs-host--aftership{
padding-left: 18px;
padding-right: 18px;
}
}
/* Big desktop: allow a wider column if you want */
@media (min-width: 1200px){
.jm-breadcrumbs-host--aftership .jm-breadcrumbs{
max-width: 860px; /* optional */
}
}
/* =========================================================
Global Breadcrumb Host — centered column (site-wide)
Safe: only controls the wrapper layout, not breadcrumb styling
========================================================= */
.jm-breadcrumbs-host{
box-sizing: border-box;
max-width: 100%;
overflow-x: clip; /* prevents any mystery horizontal scroll */
display: flex;
justify-content: center; /* centers the column */
padding-left: 12px; /* mobile padding */
padding-right: 12px;
margin: 8px 0 -5px;
}
/* The breadcrumb component becomes a centered "column" */
.jm-breadcrumbs-host .jm-breadcrumbs{
width: 100%;
max-width: 980px; /* DESKTOP column width (adjust) */
}
/* Desktop padding */
@media (min-width: 768px){
.jm-breadcrumbs-host{
padding-left: 18px;
padding-right: 18px;
}
}
/* Big desktop: optional wider column */
@media (min-width: 1200px){
.jm-breadcrumbs-host .jm-breadcrumbs{
max-width: 1100px; /* optional */
}
}
/* =========================================================
Breadcrumb Host: FULL-WIDTH background strip (desktop only)
Page-specific via CSS variables on
========================================================= */
@media (min-width: 768px){
.jm-breadcrumbs-host{
--jm-breadcrumb-strip-bg: transparent; /* default */
position: relative;
z-index: 0;
}
.jm-breadcrumbs-host::before{
content:"";
position:absolute;
inset: 0;
left: 50%;
transform: translateX(-50%);
width: 100vw;
background: var(--jm-breadcrumb-strip-bg);
z-index: -1;
}
/* Page colors */
body.page-how-to-quickly-find-compatible-rc-parts-on-j-m-supplies .jm-breadcrumbs-host{
--jm-breadcrumb-strip-bg: #f4f4f4;
}
body.page-rc-products-faqs .jm-breadcrumbs-host{
--jm-breadcrumb-strip-bg: #f4f4f4;
}
body.page-rc-compatibility-guide .jm-breadcrumbs-host{
--jm-breadcrumb-strip-bg: #007acc;
}
}
/* =========================================================
RC Compatibility Guide: white breadcrumb text on blue strip (desktop only)
========================================================= */
@media (min-width: 768px){
body.page-rc-compatibility-guide .jm-breadcrumbs,
body.page-rc-compatibility-guide .jm-breadcrumbs a{
color: #fff !important;
}
body.page-rc-compatibility-guide .jm-breadcrumbs__item + .jm-breadcrumbs__item::before,
body.page-rc-compatibility-guide .jm-breadcrumbs__item:not(:first-child)::before,
body.page-rc-compatibility-guide .jm-breadcrumbs__item:not(:last-child)::after{
color: rgba(255,255,255,.7) !important;
opacity: 1 !important;
}
}
/* =========================================================
RC Compatibility Guide — breadcrumbs: no pill, white text, slightly larger
Page: /pages/rc-compatibility-guide (DESKTOP ONLY)
========================================================= */
@media (min-width: 768px){
/* Keep your blue strip; remove any extra top gap that showed white before */
body.page-rc-compatibility-guide .jm-breadcrumbs-host{
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
background: transparent !important;
}
/* Remove the breadcrumb “pill/background” entirely */
body.page-rc-compatibility-guide .jm-breadcrumbs{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
text-shadow: none !important;
/* Slightly bigger */
font-size: 0.92rem !important; /* adjust to taste: 0.90–1.00rem */
margin: 0 !important;
padding: 0 !important;
}
/* Force text + links to white */
body.page-rc-compatibility-guide .jm-breadcrumbs,
body.page-rc-compatibility-guide .jm-breadcrumbs a,
body.page-rc-compatibility-guide .jm-breadcrumbs__item{
color: #fff !important;
}
/* Make separators readable on blue */
body.page-rc-compatibility-guide .jm-breadcrumbs__item + .jm-breadcrumbs__item::before,
body.page-rc-compatibility-guide .jm-breadcrumbs__item:not(:last-child)::after{
color: rgba(255,255,255,.75) !important;
opacity: 1 !important;
}
/* Optional: slightly stronger hover underline for clarity */
body.page-rc-compatibility-guide .jm-breadcrumbs a:hover{
text-decoration: underline !important;
text-decoration-color: rgba(255,255,255,.85) !important;
}
}
@media (min-width: 768px){
/* RC Compatibility Guide only: center the breadcrumb line */
body.page-rc-compatibility-guide nav.jm-breadcrumbs{
background: transparent !important; /* remove any local band */
border: 0 !important;
box-shadow: none !important;
font-size: 0.95rem !important; /* slightly bigger */
}
/* The important part: center the row */
body.page-rc-compatibility-guide nav.jm-breadcrumbs > ol.jm-breadcrumbs__list{
display: flex !important;
justify-content: center !important;
width: fit-content !important; /* shrink to content so centering works */
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* CRITICAL: disable the global "current crumb flex:1" on this page */
body.page-rc-compatibility-guide .jm-breadcrumbs__item--current{
flex: 0 0 auto !important;
max-width: none !important;
overflow: visible !important;
text-overflow: clip !important;
white-space: nowrap !important;
}
/* Make all breadcrumb text white on the blue strip */
body.page-rc-compatibility-guide .jm-breadcrumbs,
body.page-rc-compatibility-guide .jm-breadcrumbs a{
color: #fff !important;
}
/* Make separators visible on blue */
body.page-rc-compatibility-guide .jm-breadcrumbs__item + .jm-breadcrumbs__item::before,
body.page-rc-compatibility-guide .jm-breadcrumbs__item:not(:last-child)::after{
color: rgba(255,255,255,.75) !important;
opacity: 1 !important;
}
}
/* =========================================================
RC Compatibility Guide — Shortcuts row contrast polish
Scope: ONLY /pages/rc-compatibility-guide
========================================================= */
body.template-page.page-rc-compatibility-guide .jm-breadcrumbs-shortcuts__label{
color: rgba(255,255,255,0.92);
}
body.template-page.page-rc-compatibility-guide .jm-bc-shortcut{
border-color: rgba(255,255,255,0.28);
background: rgba(255,255,255,0.92);
}
body.template-page.page-rc-compatibility-guide .jm-bc-shortcut:hover,
body.template-page.page-rc-compatibility-guide .jm-bc-shortcut:focus-visible{
background: rgba(255,255,255,0.97);
}
/* Optional: prevent any accidental horizontal scroll from chip row on small screens */
body.template-page.page-rc-compatibility-guide .jm-breadcrumbs-shortcuts,
body.template-page.page-rc-compatibility-guide .jm-breadcrumbs-shortcuts__links{
max-width: 100%;
}
@media (max-width: 480px){
body.template-page.page-rc-compatibility-guide .jm-bc-shortcut{
white-space: normal; /* allow wrap if needed on tiny screens */
text-align: center;
}
}
/* =========================================================
RC Compatibility Guide — Full-width BLUE strip (MOBILE + DESKTOP)
Covers BOTH breadcrumbs + shortcuts
========================================================= */
body.template-page.page-rc-compatibility-guide .jm-breadcrumbs-host{
position: relative;
z-index: 0;
}
body.template-page.page-rc-compatibility-guide .jm-breadcrumbs-host::before{
content: "";
position: absolute;
top: 0;
bottom: 0; /* covers breadcrumbs + shortcuts row */
left: 50%;
transform: translateX(-50%);
width: 100vw;
background: #007acc;
z-index: -1;
}
/* Ensure breadcrumbs + shortcuts text reads on blue */
body.template-page.page-rc-compatibility-guide .jm-breadcrumbs,
body.template-page.page-rc-compatibility-guide .jm-breadcrumbs a,
body.template-page.page-rc-compatibility-guide .jm-breadcrumbs__item{
color: #fff !important;
}
body.template-page.page-rc-compatibility-guide .jm-breadcrumbs-shortcuts__label{
color: rgba(255,255,255,0.92);
}
/* =========================================================
RC Compatibility Guide (MOBILE) — remove the white strip above breadcrumbs
Scope: ONLY /pages/rc-compatibility-guide
========================================================= */
@media (max-width: 767px){
/* Kill top spacing that can reveal the page background */
body.template-page.page-rc-compatibility-guide .jm-breadcrumbs-host{
margin-top: 0 !important;
padding-top: 10px !important; /* keep comfortable breathing room */
}
/* If the blue strip is ::before, make sure it extends to cover the full host */
body.template-page.page-rc-compatibility-guide .jm-breadcrumbs-host::before{
top: 0 !important;
}
/* Safety: if the strip is coming from the first section/content above, force it blue */
body.template-page.page-rc-compatibility-guide #MainContent{
background: #007acc;
}
}
/* =========================================================
RC Compatibility Guide (MOBILE) — smaller Shortcuts pills + text
Scope: ONLY /pages/rc-compatibility-guide
========================================================= */
@media (max-width: 767px){
body.template-page.page-rc-compatibility-guide .jm-breadcrumbs-shortcuts{
gap: 6px;
margin: 6px 0 8px;
padding: 0 10px;
}
body.template-page.page-rc-compatibility-guide .jm-breadcrumbs-shortcuts__label{
font-size: 11px;
}
body.template-page.page-rc-compatibility-guide .jm-bc-shortcut{
font-size: 11px;
padding: 5px 8px;
line-height: 1.05;
}
}
/* Contact page only: reduce space above the page title */
body.template-page.page-contact h1.et-section-header{
margin-top: -20px !important;
padding-top: 0 !important;
}
/* If the theme adds extra spacing on the section wrapper */
body.template-page.page-contact .shopify-section:first-of-type{
padding-top: 0 !important;
margin-top: 0 !important;
}
/* Contact page only: MOBILE tweak for less space above title */
@media (max-width: 767px){
body.template-page.page-contact h1.et-section-header{
margin-top: 8px !important; /* adjust: -6 to -16 is the normal sweet spot */
}
}
/* =========================================================
RC Pro Club Rewards — Blue background strip (breadcrumbs + shortcuts)
Scope: ONLY /pages/rc-pro-club-rewards-program
========================================================= */
body.template-page.page-rc-pro-club-rewards-program .jm-breadcrumbs-host{
position: relative;
z-index: 0;
}
body.template-page.page-rc-pro-club-rewards-program .jm-breadcrumbs-host::before{
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100vw;
background: #007acc;
z-index: -1;
}
/* Breadcrumbs readable on blue */
body.template-page.page-rc-pro-club-rewards-program .jm-breadcrumbs,
body.template-page.page-rc-pro-club-rewards-program .jm-breadcrumbs a,
body.template-page.page-rc-pro-club-rewards-program .jm-breadcrumbs__item{
color: #fff !important;
}
/* Shortcuts label readable on blue */
body.template-page.page-rc-pro-club-rewards-program .jm-breadcrumbs-shortcuts__label{
color: rgba(255,255,255,0.92);
}
/* =========================================================
RC Pro Club Rewards — remove white strip ABOVE breadcrumbs
Scope: ONLY /pages/rc-pro-club-rewards-program
========================================================= */
/* 1) Remove top gap that reveals white */
body.template-page.page-rc-pro-club-rewards-program .jm-breadcrumbs-host{
margin-top: 0 !important;
padding-top: 10px !important; /* keeps breathing room but stays on blue */
}
/* 2) Make the area that often shows above the host blue */
body.template-page.page-rc-pro-club-rewards-program #MainContent{
background: #007acc;
}
/* 3) Ensure the full-bleed strip starts at the very top of the host */
body.template-page.page-rc-pro-club-rewards-program .jm-breadcrumbs-host::before{
top: 0 !important;
}
/* About Us page only: reduce space above the page title */
body.template-page.page-about-us h1.et-section-header{
margin-top: -20px !important; /* desktop/tablet */
padding-top: 0 !important;
}
/* Mobile: usually needs a less aggressive pull */
@media (max-width: 767px){
body.template-page.page-about-us h1.et-section-header{
margin-top: 5px !important;
}
}
/* If the theme adds extra spacing above the first section */
body.template-page.page-about-us .shopify-section:first-of-type{
padding-top: 0 !important;
margin-top: 0 !important;
}
/* =========================================================
RC Parts page (MOBILE): shortcuts not clickable fix
Likely cause: an invisible overlay is covering the pills.
========================================================= */
@media (max-width: 767px){
body.page-rc-parts .jm-breadcrumbs-auto,
body.page-rc-parts .jm-breadcrumbs,
body.page-rc-parts .jm-breadcrumbs-shortcuts{
position: relative !important;
z-index: 50 !important;
}
body.page-rc-parts .jm-breadcrumbs-shortcuts__links a{
position: relative !important;
z-index: 51 !important;
pointer-events: auto !important;
}
}
/* =========================================================
RC Pro Club Rewards (MOBILE): shortcuts not clickable fix
Likely cause: an invisible overlay is covering the pills.
========================================================= */
@media (max-width: 767px){
body.page-rc-pro-club-rewards-program .jm-breadcrumbs-auto,
body.page-rc-pro-club-rewards-program .jm-breadcrumbs,
body.page-rc-pro-club-rewards-program .jm-breadcrumbs-shortcuts{
position: relative !important;
z-index: 50 !important;
}
body.page-rc-pro-club-rewards-program .jm-breadcrumbs-shortcuts__links a{
position: relative !important;
z-index: 51 !important;
pointer-events: auto !important;
}
}
/* =========================================================
MARKETING PAGES: Full-width light band for breadcrumbs + shortcuts
Pages:
- /pages/social-landing-page
- /pages/rc-parts
Color: #f4f4f4
========================================================= */
body.page-social-landing-page .jm-breadcrumbs-auto,
body.page-rc-parts .jm-breadcrumbs-auto{
background: #f4f4f4 !important; /* full-width band color */
margin-top: 0 !important; /* removes the “white strip” gap above */
padding: 10px 0 !important; /* vertical breathing room */
}
/* If your theme adds extra spacing above the first section (causes a strip) */
body.page-social-landing-page .shopify-section:first-of-type,
body.page-rc-parts .shopify-section:first-of-type{
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Breadcrumb text + links (dark, readable) */
body.page-social-landing-page .jm-breadcrumbs,
body.page-social-landing-page .jm-breadcrumbs a,
body.page-rc-parts .jm-breadcrumbs,
body.page-rc-parts .jm-breadcrumbs a{
color: #111 !important;
}
/* Breadcrumb separators */
body.page-social-landing-page .jm-breadcrumbs__item + .jm-breadcrumbs__item::before,
body.page-social-landing-page .jm-breadcrumbs__item:not(:last-child)::after,
body.page-rc-parts .jm-breadcrumbs__item + .jm-breadcrumbs__item::before,
body.page-rc-parts .jm-breadcrumbs__item:not(:last-child)::after{
color: rgba(0,0,0,.45) !important;
opacity: 1 !important;
}
/* "Shortcuts:" label */
body.page-social-landing-page .jm-breadcrumbs-shortcuts__label,
body.page-rc-parts .jm-breadcrumbs-shortcuts__label{
color: rgba(0,0,0,.70) !important;
}
/* Pills: clean, subtle, clickable */
body.page-social-landing-page .jm-bc-shortcut,
body.page-rc-parts .jm-bc-shortcut{
background: #ffffff !important;
border: 1px solid rgba(0,0,0,0.12) !important;
color: #111 !important;
box-shadow: 0 1px 0 rgba(0,0,0,0.04) !important;
}
/* Hover/focus states */
body.page-social-landing-page .jm-bc-shortcut:hover,
body.page-social-landing-page .jm-bc-shortcut:focus-visible,
body.page-rc-parts .jm-bc-shortcut:hover,
body.page-rc-parts .jm-bc-shortcut:focus-visible{
background: #ffffff !important;
border-color: rgba(0,0,0,0.22) !important;
text-decoration: none !important;
outline: none !important;
}
/* =========================================================
MARKETING PAGES: Full-bleed #f4f4f4 band + extra top padding
Targets: .jm-breadcrumbs-host / .jm-breadcrumbs-auto
Pages: /pages/social-landing-page, /pages/rc-parts
========================================================= */
body.page-social-landing-page .jm-breadcrumbs-host,
body.page-rc-parts .jm-breadcrumbs-host{
background: #f4f4f4 !important;
padding-top: 12px !important; /* MORE space ABOVE breadcrumbs so it meets header */
padding-bottom: 10px !important; /* keeps band consistent */
margin-top: 0 !important;
}
/* Full-bleed breakout (forces background + content to extend edge-to-edge) */
body.page-social-landing-page .jm-breadcrumbs-host,
body.page-rc-parts .jm-breadcrumbs-host{
width: 100vw !important;
position: relative !important;
left: 50% !important;
right: 50% !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
}
/* Ensure inner wrapper doesn't re-introduce a max-width background gap */
body.page-social-landing-page .jm-breadcrumbs-auto,
body.page-rc-parts .jm-breadcrumbs-auto{
background: transparent !important; /* background handled by host */
max-width: 1200px; /* optional: keep content readable */
margin-left: auto !important;
margin-right: auto !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
/* Breadcrumb text readable on #f4f4f4 */
body.page-social-landing-page .jm-breadcrumbs,
body.page-social-landing-page .jm-breadcrumbs a,
body.page-rc-parts .jm-breadcrumbs,
body.page-rc-parts .jm-breadcrumbs a{
color: #111 !important;
}
/* Shortcut label + pills */
body.page-social-landing-page .jm-breadcrumbs-shortcuts__label,
body.page-rc-parts .jm-breadcrumbs-shortcuts__label{
color: rgba(0,0,0,.70) !important;
}
body.page-social-landing-page .jm-bc-shortcut,
body.page-rc-parts .jm-bc-shortcut{
background: #fff !important;
border: 1px solid rgba(0,0,0,.12) !important;
color: #111 !important;
}
/* =========================================================
MARKETING PAGES: tighten space BELOW shortcuts band
Pages: /pages/social-landing-page, /pages/rc-parts
========================================================= */
/* MOBILE default (tightest) */
body.page-social-landing-page .jm-breadcrumbs-host,
body.page-rc-parts .jm-breadcrumbs-host{
padding-bottom: 6px !important; /* was ~10px; reduce band height */
}
/* Optional: reduce the shortcuts block’s own bottom margin if any exists */
body.page-social-landing-page .jm-breadcrumbs-shortcuts,
body.page-rc-parts .jm-breadcrumbs-shortcuts{
margin-bottom: 0 !important;
}
/* DESKTOP: slightly more breathing room than mobile (but still tighter than before) */
@media (min-width: 768px){
body.page-social-landing-page .jm-breadcrumbs-host,
body.page-rc-parts .jm-breadcrumbs-host{
padding-bottom: 8px !important;
}
}
/* Brand page: secondary fitment line under the lede */
/* Fitment line spacing */
.jm-rc-brand-page .jm-page-lede--fitment{
margin-top: .4rem;
margin-bottom: .15rem; /* keep it tight to the hint */
font-size: .9em;
opacity: .92;
}
/* Hint spacing */
.jm-rc-brand-page .jm-page-lede--fitment + .jm-compat-subhint{
margin-top: 0; /* already handled by fitment bottom margin */
margin-bottom: .8rem; /* space before buttons/search */
}
.jm-rc-brands-hub .jm-page-hint{
margin-top: .15rem;
margin-bottom: .6rem;
}
/* Premium match highlight (default / desktop) */
.jm-enterprise-shell .jm-hl{
font-weight: 800;
color: #D4A017; /* richer gold */
text-decoration: underline;
text-decoration-color: #D4A017;
text-underline-offset: 2px;
/* small safety polish */
text-decoration-skip-ink: auto;
}
/* Mobile: add subtle marker + a touch more underline separation */
@media (max-width: 768px){
.jm-enterprise-shell .jm-hl{
background: rgba(212, 160, 23, 0.18);
padding: 0 .12em;
border-radius: .2em;
text-underline-offset: 3px;
text-decoration-thickness: 2px;
/* keeps the marker from looking odd if it wraps */
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
}
.jm-rc-brand-page .jm-page-lede--fitment + .jm-compat-subhint{
margin-top: .15rem;
margin-bottom: .6rem; /* adjust to taste */
}
/* Desktop + tablet: keep FAQ compact (not competing with the model directory) */
.jm-brand-faq h2{
font-size: 15px;
line-height: 1.25;
font-weight: 700;
}
.jm-brand-faq .jm-compat-subhint{
font-size: 12px;
line-height: 1.4;
}
.jm-brand-faq div[style*="font-weight:700"]{
font-size: 13px;
line-height: 1.25;
}
/* Optional: tighten vertical spacing a bit on desktop */
.jm-brand-faq{
margin-top: 10px;
}
.jm-brand-faq > div[style*="display:grid"]{
gap: 8px !important;
}
@media (max-width: 768px){
.jm-brand-faq h2{
font-size: 12px;
line-height: 1.25;
font-weight: 700;
}
.jm-brand-faq .jm-compat-subhint{
font-size: 9px;
line-height: 1.35;
}
.jm-brand-faq div[style*="font-weight:700"]{
font-size: 10px;
line-height: 1.25;
}
}
/* Why Direct: button spacing on mobile */
.jm-why .jm-help-btn-wrap{
display: flex;
flex-wrap: wrap;
gap: 12px; /* adds space between buttons (works on mobile + desktop) */
}
@media (max-width: 480px){
.jm-why .jm-help-btn-wrap{
flex-direction: column; /* stack */
align-items: stretch;
}
.jm-why .jm-help-btn-wrap .jm-help-btn{
width: 100%; /* full width buttons */
margin: 0; /* avoid theme margins collapsing */
}
}
/* Compatibility Hub hero: proof + how-it-works spacing */
.jm-proof-strip{
margin: 12px 0 10px;
padding: 10px 12px;
border: 1px solid rgba(0,0,0,.10);
border-radius: 12px;
background: rgba(0,0,0,.03);
line-height: 1.35;
}
.jm-how-it-works{margin:0 0 10px}
.jm-how-it-works p{margin:8px 0}
.jm-proof-strip{margin:1px 0 16px}
@media (max-width:480px){.jm-proof-strip{margin-top:10px}}
.jm-hero-sidecard{
border: 1px solid rgba(0,0,0,.10);
border-radius: 14px;
padding: 14px;
background: rgba(0,0,0,.03);
margin-top: 24px; /* increase/decrease to taste */
}
.jm-hero-sidecard__title{
margin: 0 0 10px;
font-weight: 800;
}
.jm-hero-sidecard__list{
margin: 0 0 10px;
padding-left: 18px;
}
.jm-hero-sidecard__proof{
margin: 0 0 12px;
line-height: 1.35;
}
.jm-hero-sidecard__btns{
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.jm-side-btn{
display: inline-block;
padding: 10px 12px;
border-radius: 12px;
text-decoration: none;
border: 1px solid rgba(0,0,0,.14);
background: #fff;
font-weight: 700;
}
.jm-side-btn--ghost{
background: transparent;
}
/* Brand nav: trust link under the 3 buttons (top + bottom separator) */
.jm-brand-nav + .jm-why-direct-link{
margin:30px 0 14px; /* adds a little space below too */
padding:14px 0; /* top + bottom padding */
border-top:1px solid rgba(0,0,0,.08);
border-bottom:1px solid rgba(0,0,0,.08);
text-align:center;
font-size:14px;
line-height:1.35;
opacity:.92;
}
.jm-brand-nav + .jm-why-direct-link a{
font-weight:700;
text-decoration:none; /* remove underline */
color: rgba(0,0,0,.82); /* darker than body text */
border-bottom:1px solid rgba(0,0,0,.22); /* subtle “enterprise” cue */
padding-bottom:1px;
}
.jm-brand-nav + .jm-why-direct-link a:hover,
.jm-brand-nav + .jm-why-direct-link a:focus-visible{
color:#c70000; /* your brand red on hover/focus */
border-bottom-color:#c70000;
outline:none;
}
@media (max-width: 768px){
.jm-brand-nav + .jm-why-direct-link{
margin:20px 0 16px;
padding:16px 0;
}
}
/* =========================================================
Hub Sidecard: supporting links (enterprise)
========================================================= */
.jm-hero-sidecard__links{
margin-top:14px;
padding-top:12px;
border-top:1px solid rgba(0,0,0,.08);
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:10px;
text-align:center;
font-size:13.5px;
line-height:1.35;
color:#2b2f33;
opacity:.96;
}
/* Pills */
.jm-hero-sidecard__links .jm-side-link{
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 10px;
border-radius:999px;
color:#1f2937;
font-weight:600;
text-decoration:none;
border:1px solid rgba(0,0,0,.10);
background:rgba(255,255,255,.45);
transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.jm-hero-sidecard__links .jm-side-link:hover{
background:rgba(0,0,0,.03);
border-color:rgba(0,0,0,.18);
transform:translateY(-1px);
}
.jm-hero-sidecard__links .jm-side-link:focus-visible{
outline:2px solid rgba(199,0,0,.35);
outline-offset:2px;
}
/* Dot is optional; hide since we use gap */
.jm-hero-sidecard__links .jm-side-dot{ display:none; }
/* Mobile: keep both on one row */
@media (max-width: 768px){
.jm-hero-sidecard__links{ flex-wrap:nowrap; gap:8px; }
.jm-hero-sidecard__links .jm-side-link{
white-space:nowrap;
padding:7px 10px;
font-size:13px;
}
}
/* Ultra-small screens: allow wrap to avoid overflow */
@media (max-width: 360px){
.jm-hero-sidecard__links{ flex-wrap:wrap; }
}
.jm-hero-sidecard__helper{
margin:10px 0 0;
font-size:13px;
line-height:1.35;
opacity:.92;
text-align:center;
}
.jm-hero-sidecard__helper a{
font-weight:600;
text-decoration:none;
border-bottom:1px solid rgba(0,0,0,.20);
}
.jm-hero-sidecard__helper a:hover{
border-bottom-color: rgba(0,0,0,.45);
}
/* RC Brands: helper under the search input (enterprise refinements) */
.jm-brandhub-helper{
margin-top:12px;
padding:12px 14px;
border:1px solid rgba(0,0,0,.10);
border-radius:14px;
background:rgba(255,255,255,.55);
}
/* Force “Not sure your brand?” to its own line */
.jm-brandhub-helper__text strong{
display:block;
margin-bottom:4px;
}
/* MOBILE-first:
- Left-align the text
- Keep the buttons centered
*/
.jm-brandhub-helper__text{
margin:0 0 10px 0;
font-size:13.5px;
line-height:1.35;
color:#2b2f33;
opacity:.96;
text-align:left; /* <- changed (was center) */
}
.jm-brandhub-helper__actions{
display:flex;
justify-content:center; /* <- stays centered on mobile */
gap:10px;
flex-wrap:wrap;
}
/* Desktop-only: left align buttons + constrain card width so it doesn’t span full page */
@media (min-width: 769px){
.jm-brandhub-helper{
max-width:720px; /* tweak 640–820px if you want */
margin-left:0; /* align with the search block */
margin-right:auto; /* prevents full-width stretch */
}
.jm-brandhub-helper__text{
text-align:left; /* stays left */
}
.jm-brandhub-helper__actions{
justify-content:flex-start; /* left align the two buttons on desktop */
}
}
/* Button styling (unchanged from before, included for completeness) */
.jm-brandhub-pill{
display:inline-flex;
align-items:center;
padding:7px 12px;
border-radius:999px;
border:1px solid rgba(0,0,0,.12);
text-decoration:none;
font-weight:600;
font-size:13px;
color:#1f2937;
background:rgba(255,255,255,.45);
}
.jm-brandhub-pill:hover{
background:rgba(0,0,0,.03);
border-color:rgba(0,0,0,.18);
transform:translateY(-1px);
}
.jm-brandhub-pill:focus-visible{
outline:2px solid rgba(199,0,0,.35);
outline-offset:2px;
}
.jm-brandhub-pill--primary{
border-color:rgba(199,0,0,.20);
}
/* Mini FAQ blocks (enterprise) */
.jm-faq-mini{
/* less space above; keep a small bottom gap */
margin: 10px 0 6px;
/* a touch more left padding so content sits “in” the card */
padding: 14px 14px 14px 18px;
border: 1px solid rgba(0,0,0,.10);
border-radius: 14px;
/* slightly darker, still subtle */
background: rgba(0,0,0,.04);
}
/* Desktop: narrow + center the shadow box */
@media (min-width: 769px){
.jm-faq-mini{
max-width: 760px; /* adjust 680–820px as needed */
margin-left: auto;
margin-right: auto; /* centers it */
}
}
.jm-faq-mini__title{
/* add a bit of left inset so it aligns nicely with the body */
margin: 0 0 10px 4px;
/* bigger + bold */
font-size: 18px;
font-weight: 800;
line-height: 1.22;
}
/* each FAQ item divider */
.jm-faq-mini__item{
border-top: 1px solid rgba(0,0,0,.08);
padding-top: 10px;
margin-top: 10px;
}
.jm-faq-mini__item:first-of-type{
border-top: 0;
padding-top: 0;
margin-top: 0;
}
.jm-faq-mini__item > summary{
cursor: pointer;
font-weight: 750;
color: #1f2937;
list-style: none;
/* inset the question text a touch */
padding-left: 4px;
}
.jm-faq-mini__item > summary::-webkit-details-marker{ display:none; }
/* Mobile-only: make questions a touch smaller so title leads */
@media (max-width: 768px){
.jm-faq-mini__item > summary{
font-size: 13.5px;
}
}
.jm-faq-mini__body{
margin-top: 8px;
font-size: 14px;
line-height: 1.45;
color: #2b2f33;
opacity: .96;
/* match the left inset of the title/questions */
padding-left: 4px;
}
.jm-faq-mini__body a{
font-weight: 700;
text-decoration: none;
border-bottom: 1px solid rgba(0,0,0,.20);
}
.jm-faq-mini__body a:hover{
border-bottom-color: rgba(0,0,0,.45);
}
/* =========================================================
RC Compatibility Guide — Mini FAQ (black / transparent guide styling)
Scope: .jm-faq-guide only
========================================================= */
.jm-faq-mini.jm-faq-guide{
margin: -18px 0 6px;
border: 1px solid rgba(255,255,255,.16);
border-radius: 14px;
background: rgba(0,0,0,.90);
padding: 0 14px 14px 18px;
color: rgba(255,255,255,.92);
}
/* Desktop: narrow + centered */
@media (min-width: 769px){
.jm-faq-mini.jm-faq-guide{
max-width: 760px;
margin-left: auto;
margin-right: auto;
/* a touch more breathing room inside the card on desktop */
padding-right: 18px;
padding-left: 22px;
}
}
/* Title bar */
.jm-faq-guide__title{
font-family: Roboto, sans-serif;
font-size: 30px;
font-weight: 500;
text-align: left;
background-color: rgba(0, 0, 0, 0.92);
color: rgba(255,255,255,.96);
line-height: 1.5;
border-radius: 10px 10px 0 0;
padding: 26px 18px 14px 18px;
margin: 0 0 12px 0;
border-bottom: 1px solid rgba(255,255,255,.16);
}
/* Mobile title */
@media (max-width: 768px){
.jm-faq-guide__title{
font-size: 22px;
padding: 18px 14px 12px 14px;
}
}
/* =========================================================
Items + dividers (gradient divider lines)
========================================================= */
.jm-faq-mini.jm-faq-guide .jm-faq-mini__item{
/* remove the flat border-top; we’ll draw a gradient divider instead */
border-top: 0;
padding-top: 10px;
margin-top: 10px;
position: relative;
}
/* Gradient divider above each item except the first */
.jm-faq-mini.jm-faq-guide .jm-faq-mini__item::before{
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 1px;
/* subtle gradient: fades at edges, slightly stronger in center */
background: linear-gradient(
90deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,.20) 18%,
rgba(255,215,90,.32) 50%, /* was .22 */
rgba(255,255,255,.20) 82%,
rgba(255,255,255,0) 100%
);
}
.jm-faq-mini.jm-faq-guide .jm-faq-mini__item:first-of-type{
padding-top: 0;
margin-top: 0;
}
.jm-faq-mini.jm-faq-guide .jm-faq-mini__item:first-of-type::before{
display: none;
}
/* =========================================================
Questions
========================================================= */
.jm-faq-mini.jm-faq-guide .jm-faq-mini__item > summary{
cursor: pointer;
font-weight: 750;
color: rgba(255,255,255,.94);
list-style: none;
padding-left: 6px;
letter-spacing: .1px;
}
.jm-faq-mini.jm-faq-guide .jm-faq-mini__item > summary::-webkit-details-marker{
display: none;
}
.jm-faq-mini.jm-faq-guide .jm-faq-mini__item > summary:focus-visible{
outline: 2px solid rgba(255, 215, 90, .55);
outline-offset: 3px;
border-radius: 10px;
}
/* =========================================================
Answers
========================================================= */
.jm-faq-mini.jm-faq-guide .jm-faq-mini__body{
margin-top: 10px; /* separation from the question */
font-size: 14px;
line-height: 1.45;
color: rgba(255,255,255,.86);
opacity: 1;
padding-left: 6px;
}
/* Links */
.jm-faq-mini.jm-faq-guide .jm-faq-mini__body a{
font-weight: 800;
color: rgba(255, 215, 90, .95);
text-decoration: none;
border-bottom: 1px solid rgba(255, 215, 90, .35);
}
.jm-faq-mini.jm-faq-guide .jm-faq-mini__body a:hover{
color: rgba(255, 225, 130, 1);
border-bottom-color: rgba(255, 225, 130, .70);
}
.jm-faq-mini.jm-faq-guide .jm-faq-mini__body strong{
color: rgba(255,255,255,.95);
}
/* =========================================================
Desktop-only readability upgrades:
- larger Q/A text
- more left padding so content sits farther from edge
========================================================= */
@media (min-width: 769px){
.jm-faq-mini.jm-faq-guide .jm-faq-mini__item > summary{
font-size: 16px; /* larger questions on desktop */
padding-left: 14px; /* push content right */
}
.jm-faq-mini.jm-faq-guide .jm-faq-mini__body{
font-size: 15px; /* larger answers on desktop */
line-height: 1.55;
padding-left: 14px; /* match question indent */
margin-top: 12px; /* more spacing between Q and A */
}
.jm-faq-mini.jm-faq-guide .jm-faq-mini__item{
padding-top: 12px;
margin-top: 12px;
}
}
/* Mobile: keep questions slightly smaller than the title */
@media (max-width: 768px){
.jm-faq-mini.jm-faq-guide .jm-faq-mini__item > summary{
font-size: 13.5px;
}
}
/* ============================================================
HOMEPAGE – “Content Text / Trust Bar” SECTION (Ecom Turbo)
Section ID: shopify-section-1599710801530
Purpose:
- Visually stitches the homepage hero into the next section by
continuing the hero’s left-black → right-charcoal background.
- Adds an upward blend strip so the transition is seamless under
the hero (reduces the hard edge between sections).
- Forces the clickable subtext link to use brand gold colors.
Notes:
- Targeted to THIS ONE section only (ID-specific).
- Blend strip is controlled by :before (base: 60px; ultrawide: 45px).
============================================================ */
#shopify-section-1599710801530{
position:relative!important;
z-index:5!important;
overflow:visible!important;
}
/* Continue hero background gradient through this section + inner wrapper */
#shopify-section-1599710801530,
#shopify-section-1599710801530 .et-content-text-content{
background:linear-gradient(90deg,#000 0%,#000 55%,#0b0b0b 70%,#1a1a1a 100%)!important;
}
/* Upward blend strip (base) */
#shopify-section-1599710801530:before{
content:"";
position:absolute;
left:0; right:0;
top:-60px;
height:60px;
background:linear-gradient(90deg,#000 0%,#000 55%,#0b0b0b 70%,#1a1a1a 100%);
pointer-events:none;
-webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 100%);
mask-image:linear-gradient(to bottom, transparent 0%, #000 100%);
}
/* Ultrawide: slightly less blend to avoid washing over hero elements */
@media (min-width: 1600px){
#shopify-section-1599710801530:before{
top:-45px;
height:45px;
}
}
/* Brand-consistent link styling for the clickable subtext */
#shopify-section-1599710801530 .et-content-text-sub-text a,
#shopify-section-1599710801530 .et-content-text-sub-text a:visited{
color:#DDBA00!important;
text-decoration:none;
}
#shopify-section-1599710801530 .et-content-text-sub-text a:hover{
color:#E6C200!important;
text-decoration:underline;
}
/* ============================================================
HOMEPAGE – HERO SLIDESHOW (Ecom Turbo 4.1)
Section ID: #shopify-section-1601025692415
What this fixes / enhances:
1) Removes the brief “white flash” that can occur while Slick
initializes and before the hero images fully paint.
2) Enforces a stable layer stack so elements render consistently:
Image (z=1) → Blend overlay (z=5) → Text/Buttons (z=50)
3) Adds a subtle top-right dark blend so the hero’s charcoal/right
side transitions smoothly into the pure-black header + divider.
4) Prevents Ecom Turbo/Slick post-init styling from fading/hiding
the hero headings and buttons.
Important notes:
- Scoped to THIS ONE homepage hero section via ID (no global impact).
- We intentionally do NOT force display:block on text wrappers,
because that can push overlay text into normal page flow.
- The “final nudge” (left:50% + translateX) is required because the
theme’s slider/container math can shift the overlay wrapper left
after Slick init; this recenters it reliably on desktop.
============================================================ */
/* 1) Remove “white flash” during Slick init / image paint */
#shopify-section-1601025692415,
#shopify-section-1601025692415 .et-slideshow,
#shopify-section-1601025692415 .et-slideshow__slider,
#shopify-section-1601025692415 .slick-list,
#shopify-section-1601025692415 .slick-track,
#shopify-section-1601025692415 .et-slideshow__slider-image{
background:#000 !important;
}
/* 2) Predictable stacking context for overlay + text */
#shopify-section-1601025692415 .et-slideshow__image--content{
position:relative !important;
isolation:isolate; /* keeps z-index layers predictable inside hero */
}
/* 3) Keep hero images behind everything */
#shopify-section-1601025692415 img.et-desktop_slider,
#shopify-section-1601025692415 img.et-mobile_slider{
position:relative !important;
z-index:1 !important;
display:block;
}
/* 4) Top-right blend overlay (only visual effect; never blocks clicks) */
#shopify-section-1601025692415 .et-slideshow__image--content:before{
content:"";
position:absolute;
top:0; right:0;
width:55%;
height:100%;
pointer-events:none;
z-index:5;
background:
linear-gradient(to bottom,
rgba(0,0,0,.99) 0px, /* darkest at top edge (header blend) */
rgba(0,0,0,.82) 16px,
rgba(0,0,0,0) 170px /* fades out quickly */
),
linear-gradient(to left,
rgba(0,0,0,.22) 0%,
rgba(0,0,0,0) 70%
);
}
/* 5) Keep hero text over the image AND centered (desktop-safe) */
#shopify-section-1601025692415 .et-slideshow__text-content{
position:absolute !important;
inset:0 !important; /* anchors overlay to hero */
z-index:50 !important; /* above overlay + image */
width:100% !important;
/* Final nudge: prevents Slick/theme from shifting the overlay left */
left:50% !important;
transform:translateX(-50%) !important;
right:auto !important;
}
/* Ensure the “top_center” content wrapper spans full width & centers */
#shopify-section-1601025692415 .et-slideshow__text-content-positions{
width:100% !important;
text-align:center !important;
margin-left:auto !important;
margin-right:auto !important;
}
/* Make sure the internal Bootstrap container stays centered */
#shopify-section-1601025692415 .et-slideshow__text-content.container{
margin-left:auto !important;
margin-right:auto !important;
}
/* 6) Force hero text visible (avoid post-init fade/hide) */
#shopify-section-1601025692415 .et-slideshow__text-content,
#shopify-section-1601025692415 .et-slideshow__text-content-positions,
#shopify-section-1601025692415 .et-slideshow__title,
#shopify-section-1601025692415 .et-slideshow__subtitle,
#shopify-section-1601025692415 .et-slideshow-button{
opacity:1 !important;
visibility:visible !important;
}
/* 7) Keep buttons aligned horizontally (theme/Bootstrap compatibility) */
#shopify-section-1601025692415 .btn-group.et-slideshow-button{
display:inline-flex !important;
}
/* ============================================================
HOMEPAGE – HERO (MOBILE) Full-Width Title Backing Plate + Spacing
Section: #shopify-section-1601025692415
Mobile-only goals:
- Make the headline backing plate span across the mobile viewport
(with small side gutters for a premium look).
- Keep title/subtitle/button spacing controlled.
- Keep headline readable over the mobile hero image.
Note on “exact 2-line break”:
- A full-width plate removes the narrow-width constraint that was
forcing a wrap after “J-M SUPPLIES”.
- If you need a guaranteed break:
J-M SUPPLIES
RC Parts Store
(in the slideshow title field, if it supports HTML line breaks).
============================================================ */
@media (max-width: 759px){
/* HERO TITLE — full-width backing plate */
#shopify-section-1601025692415 .jm-hero-heading{
/* Full-width plate with 12px gutters on both sides */
display:block !important;
width:calc(100% - 24px) !important;
max-width:none !important;
box-sizing:border-box !important;
/* Keep text centered */
text-align:center !important;
white-space:normal;
line-height:1.05;
/* Position + spacing (keeps your current layout intent) */
margin:-15px auto 10px !important; /* top lift + gap to subtitle */
padding:16px 16px;
border-radius:14px;
/* Plate look */
background:rgba(0,0,0,.42);
box-shadow:0 10px 26px rgba(0,0,0,.38);
text-shadow:0 2px 10px rgba(0,0,0,.55);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
/* HERO SUBTITLE (Search your brand + model...) */
#shopify-section-1601025692415 .jm-hero-tagline{
margin-top:0 !important; /* tight from title */
margin-bottom:22px !important; /* space to buttons */
line-height:1.2 !important;
}
/* BUTTON ROW (Find My RC Model / Browse by Brand) */
#shopify-section-1601025692415 .btn-group.et-slideshow-button{
margin-top:0 !important; /* keep clean */
}
/* If the theme wrapper is adding spacing, this can help (safe) */
#shopify-section-1601025692415 .et-slideshow__text-content-positions{
row-gap:6px;
}
}
/* ============================================================
HOMEPAGE – HERO (TABLET) Crop control + no “snap”
Section: #shopify-section-1601025692415
Goals:
- Keep RC vehicle in-frame on tablet (portrait + landscape).
- Allow more vertical pan control by giving the hero a bit more
height on tablet (creates usable crop room).
- Reduce the “loads right then snaps” effect by stabilizing
layout and softening object-position changes.
============================================================ */
/* 0) Tablet: stabilize hero height earlier so Slick has less to “recalc” */
@media (min-width: 760px) and (max-width: 1199px){
#shopify-section-1601025692415 .home-page-slider,
#shopify-section-1601025692415 img.et-desktop_slider{
height: 623px !important; /* match your existing desktop height */
width: 100% !important;
object-fit: cover !important;
display:block !important;
}
/* 1) Smooth out any late object-position updates (reduces snap) */
#shopify-section-1601025692415 img.et-desktop_slider{
object-position: 90% 60% !important; /* base: slightly lower */
transition: object-position .18s ease-out;
}
}
/* 2) TABLET PORTRAIT: strongest right shift + more DOWN */
@media (min-width: 760px) and (max-width: 1199px) and (orientation: portrait){
#shopify-section-1601025692415 img.et-desktop_slider{
object-position: 96% 82% !important; /* your current sweet spot */
}
/* OPTIONAL: give portrait a touch more height = more vertical pan room */
#shopify-section-1601025692415 .home-page-slider,
#shopify-section-1601025692415 img.et-desktop_slider{
height: 700px !important; /* increase 40–90px to enable more “down” */
}
}
/* 3) TABLET LANDSCAPE: keep your X, allow slight down */
@media (min-width: 900px) and (max-width: 1400px) and (orientation: landscape){
#shopify-section-1601025692415 img.et-desktop_slider{
object-position: 94% 60% !important; /* try 60–70% if you want more down */
}
}
/* ============================================================
HERO – TABLET TOP-LEFT BLEND OVERLAY (PORTRAIT + LANDSCAPE)
Section: #shopify-section-1601025692415
Purpose:
- Adds a TOP-LEFT blend overlay so the hero image fades into the
pure-black header/divider region, without affecting hero text.
- Uses :after so it does NOT conflict with the existing :before
(top-right blend).
- Stack order remains:
Image (z=1) → Overlays (:before/:after z=5) → Text (z=50)
============================================================ */
/* Base: applies to ALL tablets in this range */
@media (min-width: 760px) and (max-width: 1199px){
/* Ensure the overlay anchor is stable */
#shopify-section-1601025692415 .et-slideshow__image--content{
position: relative !important;
isolation: isolate;
}
/* Default TOP-LEFT blend overlay (tablet base) */
#shopify-section-1601025692415 .et-slideshow__image--content:after{
content:"";
position:absolute;
top:0; left:0;
width:50%; /* base width (overridden below) */
height:100%;
pointer-events:none;
z-index:5;
/* Base blend: overridden below for portrait/landscape */
background:
linear-gradient(to bottom,
rgba(0,0,0,.90) 0px,
rgba(0,0,0,.60) 22px,
rgba(0,0,0,0) 220px
),
linear-gradient(to right,
rgba(0,0,0,.24) 0%,
rgba(0,0,0,0) 70%
);
}
}
/* TABLET PORTRAIT: your current stronger blend (unchanged) */
@media (min-width: 760px) and (max-width: 1199px) and (orientation: portrait){
#shopify-section-1601025692415 .et-slideshow__image--content:after{
width:55%;
background:
linear-gradient(to bottom,
rgba(0,0,0,.92) 0px,
rgba(0,0,0,.65) 22px,
rgba(0,0,0,0) 260px
),
linear-gradient(to right,
rgba(0,0,0,.28) 0%,
rgba(0,0,0,0) 70%
);
}
}
/* TABLET LANDSCAPE: slightly lighter + shorter fade (usually looks cleaner) */
@media (min-width: 900px) and (max-width: 1400px) and (orientation: landscape){
#shopify-section-1601025692415 .et-slideshow__image--content:after{
width:45%; /* landscape often needs less coverage */
background:
linear-gradient(to bottom,
rgba(0,0,0,.88) 0px,
rgba(0,0,0,.55) 18px,
rgba(0,0,0,0) 200px
),
linear-gradient(to right,
rgba(0,0,0,.22) 0%,
rgba(0,0,0,0) 68%
);
}
}
/* ============================================================
HERO – DESKTOP CROP CONTROLS (NARROW vs WIDE vs ULTRAWIDE)
Section: #shopify-section-1601025692415
Purpose:
- Fine-tune where the “camera window” sits on desktop by shifting
object-position across screen widths.
- X% controls left/right (higher = show more of the RIGHT side).
- Y% controls up/down (higher = show more LOWER portion).
============================================================ */
/* BASE (applies everywhere unless overridden) */
#shopify-section-1601025692415 .home-page-slider img.et-desktop_slider{
object-fit: cover !important;
object-position: 92% 55% !important; /* start point: right + slightly down */
}
/* NARROW DESKTOP (small laptop / tight desktop widths) */
@media (min-width: 1025px) and (max-width: 1279px){
#shopify-section-1601025692415 .home-page-slider img.et-desktop_slider{
object-position: 96% 55% !important; /* push further right so vehicle stays in frame */
}
}
/* STANDARD DESKTOP */
@media (min-width: 1280px) and (max-width: 1599px){
#shopify-section-1601025692415 .home-page-slider img.et-desktop_slider{
object-position: 95% 55% !important;
}
}
/* WIDE DESKTOP */
@media (min-width: 1600px) and (max-width: 1919px){
#shopify-section-1601025692415 .home-page-slider img.et-desktop_slider{
object-position: 94% 55% !important; /* pull slightly left (less aggressive crop) */
}
}
/* ULTRAWIDE DESKTOP */
@media (min-width: 1920px){
#shopify-section-1601025692415 .home-page-slider img.et-desktop_slider{
object-position: 88% 55% !important; /* pull a touch more left on very wide screens */
}
}
/* ============================================================
HERO – STOP “SNAP” ON LOAD (Slick init)
Section: #shopify-section-1601025692415
Why:
- Prevents the hero from displaying in the default crop for a split
second before your object-position overrides apply.
- Shows the slider only after Slick has initialized.
============================================================ */
/* Keep background black so nothing flashes */
#shopify-section-1601025692415,
#shopify-section-1601025692415 .et-slideshow,
#shopify-section-1601025692415 .et-slideshow__slider,
#shopify-section-1601025692415 .slick-list,
#shopify-section-1601025692415 .slick-track,
#shopify-section-1601025692415 .et-slideshow__slider-image{
background:#000 !important;
}
/* Hide until Slick is ready (prevents “snap”) */
#shopify-section-1601025692415 .et-slideshow__slider{
visibility:hidden !important;
}
/* Show once Slick is initialized */
#shopify-section-1601025692415 .et-slideshow__slider.slick-initialized{
visibility:visible !important;
}
#shopify-section-1601025692415 img.et-desktop_slider{
transition:none !important;
}
/* ============================================================
HERO – STOP “SNAP” ON LOAD (Slick init)
Section: #shopify-section-1601025692415
Why:
- Prevents the hero from displaying in the default crop for a split
second before your object-position overrides apply.
- Shows the slider only after Slick has initialized.
============================================================ */
/* Keep background black so nothing flashes */
#shopify-section-1601025692415,
#shopify-section-1601025692415 .et-slideshow,
#shopify-section-1601025692415 .et-slideshow__slider,
#shopify-section-1601025692415 .slick-list,
#shopify-section-1601025692415 .slick-track,
#shopify-section-1601025692415 .et-slideshow__slider-image{
background:#000 !important;
}
/* Hide until Slick is ready (prevents “snap”) */
#shopify-section-1601025692415 .et-slideshow__slider{
visibility:hidden !important;
}
/* Show once Slick is initialized */
#shopify-section-1601025692415 .et-slideshow__slider.slick-initialized{
visibility:visible !important;
}
#shopify-section-1601025692415 img.et-desktop_slider{
transition:none !important;
}
/* ============================================================
HOMEPAGE – TRUST BAR (ONE SECTION)
Section: #shopify-section-1599710801530
Goals:
- Remove
-based spacing bloat (controlled spacing only)
- Predictable padding
- Mobile: left-align heading + paragraph/link with normal inset
============================================================ */
/* Base spacing (all devices) */
#shopify-section-1599710801530 .et-content-text-content{
padding-top: 12px !important;
padding-bottom: 18px !important; /* primary control for gap BELOW trust bar */
}
/* Desktop/tablet: slightly more breathing room */
@media (min-width: 768px){
#shopify-section-1599710801530 .et-content-text-content{
padding-top: 20px !important;
padding-bottom: 26px !important; /* keep this modest; let next section handle its own top pad */
}
}
/* Heading rhythm */
#shopify-section-1599710801530 .jm-hero-trust{
margin: 0 0 14px 0 !important;
line-height: 1.15 !important;
}
/* Remove
bloat + normalize paragraph */
#shopify-section-1599710801530 .et-content-text-sub-text br{
display: none !important;
}
#shopify-section-1599710801530 .et-content-text-sub-text p{
margin: 0 !important;
line-height: 1.28 !important;
}
/* Controlled space under the link block (keep small; padding handles the real section gap) */
#shopify-section-1599710801530 .et-content-text-sub-text{
margin: 0 !important;
}
/* Mobile: left-align BOTH heading + paragraph/link without weird indent */
@media (max-width: 759px){
/* Keep normal, symmetrical container padding */
#shopify-section-1599710801530 .container{
padding-left: 12px !important; /* tune 10–16px */
padding-right: 12px !important;
}
/* This element includes .text-center in your HTML, so override it directly */
#shopify-section-1599710801530 .et-content-text__item.text-center{
text-align: left !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Belt + suspenders: ensure heading and link area follow left alignment */
#shopify-section-1599710801530 h2.jm-hero-trust,
#shopify-section-1599710801530 .et-content-text-sub-text{
text-align: left !important;
}
/* Slightly more readable line-height on mobile */
#shopify-section-1599710801530 .et-content-text-sub-text p{
line-height: 1.35 !important;
}
}
/* ============================================================
TRUST BAR (MOBILE) — Heading + paragraph share exact edges
Section: #shopify-section-1599710801530
Why this exists:
- Something is offsetting the H2 more than the paragraph.
- We apply ONE shared gutter on the wrapper and hard-reset
heading-only offsets (padding/text-indent/transform).
- No negative margins (prevents drift/overflow).
============================================================ */
@media (max-width: 767px){
/* Prevent accidental horizontal scroll during tuning */
#shopify-section-1599710801530{
overflow-x: hidden !important;
}
/* 1) Remove Bootstrap container gutters inside this section only */
#shopify-section-1599710801530 .container{
padding-left: 0 !important;
padding-right: 0 !important;
}
/* 2) Apply ONE shared gutter for BOTH heading + paragraph */
#shopify-section-1599710801530 .et-content-text__item{
padding-left: 32px !important; /* your chosen alignment */
padding-right: 52px !important; /* keep off right edge */
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
/* Override the .text-center on this wrapper */
text-align: left !important;
}
/* 3) Hard reset the ACTUAL heading element in this section */
#shopify-section-1599710801530 h2.et-section-header.jm-hero-trust{
/* kill any heading-only “mystery” offset */
margin: 0 0 14px 0 !important;
padding: 0 !important;
text-indent: 0 !important;
/* some themes animate/translate headers; neutralize */
transform: none !important;
left: auto !important;
right: auto !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
text-align: left !important;
}
/* 4) Paragraph/link inherits the same wrapper gutter */
#shopify-section-1599710801530 .et-content-text-sub-text,
#shopify-section-1599710801530 .et-content-text-sub-text p{
margin: 0 !important;
padding: 0 !important;
text-indent: 0 !important;
transform: none !important;
text-align: left !important;
line-height: 1.35 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* 5) If any global rule still targets the old selector, neutralize it here */
#shopify-section-1599710801530 h2.et-section-header.mb-3.mb-md-5.text-center{
padding-left: 0 !important;
padding-right: 0 !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
transform: none !important;
text-align: left !important;
}
}
/* ============================================================
HOMEPAGE – TEXT WITH IMAGE (RC PARTS) – Enterprise Styling
Section: #shopify-section-text_with_image_NQD3LM
Goals:
- Premium palette (black→charcoal, off-white title, gold body/link, red CTA)
- Predictable section spacing (top/bottom)
- More separation between image and text column (desktop/tablet)
- More vertical spacing inside the text column (title → body → button)
- Mobile: force wrap after comma in title + choose button alignment
============================================================ */
/* Section background + predictable padding */
#shopify-section-text_with_image_NQD3LM.et-image-with-text-section{
background: linear-gradient(90deg,#000 0%,#000 55%,#0b0b0b 70%,#1a1a1a 100%) !important;
/* This is the “section-to-section” gap control from Trust Bar → RC Parts */
padding-top: 14px !important; /* tune 10–20px */
padding-bottom: 26px !important; /* gives a cleaner break before next section */
}
@media (min-width: 768px){
#shopify-section-text_with_image_NQD3LM.et-image-with-text-section{
padding-top: 16px !important;
padding-bottom: 34px !important;
}
}
/* Keep text alignment left */
#shopify-section-text_with_image_NQD3LM .et-image-with-text-alignment{
text-align: left !important;
}
/* Title */
#shopify-section-text_with_image_NQD3LM .et-image-with-text-title{
color:#F5F2EB !important;
font-size:24px !important; /* tune 22–28 */
line-height:1.15 !important;
/* Increase separation from the image/top of text column */
margin: 6px 0 16px 0 !important;
}
/* Body block */
#shopify-section-text_with_image_NQD3LM .et-image-with-text-subtext{
margin: 0 0 22px 0 !important; /* more space before the CTA */
}
#shopify-section-text_with_image_NQD3LM .et-image-with-text-subtext p{
margin: 0 !important;
color:#DDBA00 !important;
font-size:16px !important;
line-height:1.5 !important;
}
/* Link styling */
#shopify-section-text_with_image_NQD3LM .et-image-with-text-subtext a,
#shopify-section-text_with_image_NQD3LM .et-image-with-text-subtext a:visited{
color:#DDBA00 !important;
text-decoration:none !important;
}
#shopify-section-text_with_image_NQD3LM .et-image-with-text-subtext a:hover{
color:#E6C200 !important;
text-decoration:underline !important;
}
/* Button */
#shopify-section-text_with_image_NQD3LM .et-image-with-text-button{
background-color:#C70000 !important;
color:#F5F2EB !important;
font-size:16px !important;
border-radius:10px !important;
padding:10px 16px !important;
border:1px solid rgba(255,255,255,.08) !important;
/* Ensure spacing is controlled and not theme-dependent */
margin-top: 0 !important;
}
#shopify-section-text_with_image_NQD3LM .et-image-with-text-button:hover{
filter: brightness(1.05);
}
/* Horizontal breathing room between image and text (desktop/tablet) */
@media (min-width: 768px){
#shopify-section-text_with_image_NQD3LM .et-feature-row__text--left{
padding-left: 38px !important; /* tune 28–52 */
}
#shopify-section-text_with_image_NQD3LM .et-image-with-text-row{
padding-right: 28px !important; /* tune 10–35 */
}
}
@media (min-width: 1200px){
#shopify-section-text_with_image_NQD3LM .et-feature-row__text--left{
padding-left: 48px !important;
}
}
/* Mobile: force wrap after comma (reliable) */
@media (max-width: 759px){
#shopify-section-text_with_image_NQD3LM .et-image-with-text-title{
max-width: 22ch !important; /* tune 20–26ch until it breaks after the comma */
white-space: normal !important;
}
}
/* Mobile button alignment recommendation:
Keep LEFT for “enterprise” consistency because your paragraph is left-aligned.
(Centering tends to look like a different design language.) */
@media (max-width: 759px){
#shopify-section-text_with_image_NQD3LM .et-image-with-text-button{
display: inline-block !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* ============================================================
RC BRANDS HUB: Top area grid (fix desktop/tablet "gap")
- Desktop/tablet: grid places search under LEFT column, badge on RIGHT
- Mobile portrait: stacks naturally: copy -> badge -> search (unchanged UX)
============================================================ */
/* Default: keep your current hero styling */
.jm-rcbrands-hero{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:18px;
}
.jm-rcbrands-hero__copy{
min-width:0;
flex:1 1 auto;
}
.jm-rcbrands-hero__badge{
flex:0 0 auto;
}
/* Enterprise frame */
.jm-rcbrands-badge-frame{
display:inline-block;
padding:9px;
background:#ffffff;
border:1px solid #e6e6e6;
border-radius:12px;
box-shadow:0 2px 10px rgba(0,0,0,0.08);
}
.jm-rcbrands-badge-img{
display:block;
width:175px; /* desktop */
height:auto;
border-radius:8px;
}
/* Micro-note: desktop/tablet caption UNDER badge */
.jm-rcbrands-hero__badge .jm-rcbrands-badge-note{
margin-top:8px;
font-size:11.5px;
line-height:1.12;
color:#666;
opacity:0.72;
letter-spacing:0.2px;
max-width:220px;
}
/* ------------------------------------------------------------
Desktop + tablet: Use grid to eliminate the "gap"
Place search under left column while badge stays right.
------------------------------------------------------------ */
@media (min-width: 750px){
.jm-rc-brands-hub .jm-rcbrands-topgrid{
display:grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"copy badge"
"search badge";
column-gap:18px;
row-gap:12px; /* controls space between buttons and search */
}
/* Make hero's children become grid participants */
.jm-rc-brands-hub .jm-rcbrands-hero{
display:contents;
}
.jm-rc-brands-hub .jm-rcbrands-hero__copy{
grid-area:copy;
}
.jm-rc-brands-hub .jm-rcbrands-hero__badge{
grid-area:badge;
}
.jm-rc-brands-hub .jm-page-block{
grid-area:search;
margin-top:0 !important; /* neutralize theme spacing if present */
}
}
/* Tablet sizing tweak */
@media (max-width: 989px){
.jm-rcbrands-badge-img{
width:165px;
}
}
/* ------------------------------------------------------------
Mobile portrait: Keep your existing 2-column badge row
(badge left + micro-note right), plus breathing room before search.
------------------------------------------------------------ */
@media (max-width: 749px){
/* On mobile, wrapper just flows normally */
.jm-rc-brands-hub .jm-rcbrands-topgrid{
display:block;
}
.jm-rcbrands-hero{
flex-direction:column;
}
.jm-rcbrands-hero__badge{
align-self:flex-start;
width:100%;
display:flex;
align-items:center;
gap:12px;
margin-bottom:16px; /* your preferred breathing room */
}
.jm-rcbrands-badge-frame{
margin-left:0;
margin-right:0;
}
.jm-rcbrands-badge-img{
width:145px;
}
/* Mobile: micro-note readability + fills right-side space */
.jm-rcbrands-hero__badge .jm-rcbrands-badge-note{
margin-top:0;
max-width:none;
font-size:13px;
line-height:1.25;
color:#444;
opacity:0.95;
letter-spacing:0;
}
}
/* ============================================================
RC BRAND PAGES: Enterprise Top Grid + Right Rail (2 cards)
Scope: .jm-rc-brand-page only
Key fix:
- Desktop + tablet landscape: right rail is ABSOLUTE (does not affect grid row sizing)
so it cannot push search/FAQ downward.
- Tablet portrait: keep normal 2-column grid (you said it already looks right).
- Mobile portrait: stack.
============================================================ */
.jm-rc-brand-page .jm-rcbrand-topgrid{
--jm-rail-w: 280px;
--jm-rail-gap: 18px;
position:relative;
display:grid;
grid-template-columns: 1fr 280px;
column-gap: var(--jm-rail-gap);
row-gap: 10px;
align-items:start;
margin-bottom: 8px; /* controls spacing before the FAQ block */
}
/* Left column */
.jm-rc-brand-page .jm-rcbrand-topgrid__copy{
grid-column:1;
grid-row:1;
min-width:0;
}
.jm-rc-brand-page .jm-rcbrand-topgrid__search{
grid-column:1;
grid-row:2;
}
/* Right column (default = participates in grid sizing; used for tablet portrait) */
.jm-rc-brand-page .jm-rcbrand-topgrid__rail{
grid-column:2;
grid-row:1 / span 2;
}
.jm-rc-brand-page .jm-rcbrand-rail{
display:flex;
flex-direction:column;
gap: 14px; /* your “a little more space” between the two cards */
}
/* Cards */
.jm-rc-brand-page .jm-rcbrand-guidecard{
background:#ffffff;
border:1px solid #e6e6e6;
border-radius:12px;
box-shadow:0 2px 10px rgba(0,0,0,0.08);
padding:14px 14px 12px 14px;
}
.jm-rc-brand-page .jm-rcbrand-guidecard--secondary{
padding:12px 14px;
}
.jm-rc-brand-page .jm-rcbrand-guidecard__title{
font-weight:800;
font-size:14px;
line-height:1.15;
color:#111;
margin:0 0 6px 0;
}
.jm-rc-brand-page .jm-rcbrand-guidecard__sub{
font-size:12.5px;
line-height:1.25;
color:#444;
margin:0 0 10px 0;
opacity:0.95;
}
.jm-rc-brand-page .jm-rcbrand-guidecard__steps{
margin:0;
padding:0 0 0 16px;
display:grid;
gap:6px;
font-size:12.5px;
line-height:1.25;
color:#333;
}
.jm-rc-brand-page .jm-rcbrand-guidecard__kicker{
margin-top:10px;
font-size:11.5px;
line-height:1.15;
color:#666;
opacity:0.72;
letter-spacing:0.2px;
}
/* Chips */
.jm-rc-brand-page .jm-rcbrand-chiprow{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:8px;
}
.jm-rc-brand-page .jm-rcbrand-chip{
appearance:none;
border:1px solid #e6e6e6;
background:#fff;
border-radius:999px;
padding:6px 10px;
font-size:12px;
line-height:1;
color:#333;
cursor:pointer;
}
.jm-rc-brand-page .jm-rcbrand-chip:hover{
box-shadow:0 2px 10px rgba(0,0,0,0.08);
}
/* Tighten “buttons -> search” gap (theme margins often cause this) */
.jm-rc-brand-page .jm-rcbrand-topgrid__copy .jm-page-actions{
margin-bottom: 4px;
}
/* Kill default block margins/padding that can create false “air” */
.jm-rc-brand-page .jm-rcbrand-topgrid__search .jm-page-block{
margin:0;
padding-top:0;
padding-bottom:0;
}
/* Tighten “search -> FAQ” gap on the brand page */
.jm-rc-brand-page .jm-brand-faq{
margin-top: 8px;
}
/* ============================================================
Desktop + tablet landscape: ABSOLUTE rail (the real fix)
This prevents the rail height from inflating grid rows.
============================================================ */
@media (min-width: 990px),
(min-width: 900px) and (max-width: 1200px) and (orientation: landscape){
.jm-rc-brand-page .jm-rcbrand-topgrid{
/* Reserve space on the right for the absolute rail */
padding-right: calc(var(--jm-rail-w) + var(--jm-rail-gap));
/* Collapse to a single grid column because the rail is now “out of flow” */
grid-template-columns: 1fr;
column-gap: 0;
row-gap: 8px;
margin-bottom: 6px;
}
.jm-rc-brand-page .jm-rcbrand-topgrid__rail{
position:absolute;
top:0;
right:0;
width: var(--jm-rail-w);
/* IMPORTANT: keep it from affecting layout */
}
/* Ensure search stays tight to copy on these viewports */
.jm-rc-brand-page .jm-rcbrand-topgrid__copy .jm-page-actions{
margin-bottom: 2px;
}
.jm-rc-brand-page .jm-brand-faq{
margin-top: 6px;
}
}
/* ============================================================
Tablet portrait: keep the normal 2-column grid (you like it)
============================================================ */
@media (min-width: 750px) and (max-width: 989px) and (orientation: portrait){
.jm-rc-brand-page .jm-rcbrand-topgrid{
grid-template-columns: 1fr 260px;
--jm-rail-w: 260px;
row-gap: 10px;
margin-bottom: 8px;
padding-right: 0;
}
.jm-rc-brand-page .jm-rcbrand-topgrid__rail{
position:static;
width:auto;
}
}
/* ============================================================
Mobile portrait: stack
============================================================ */
@media (max-width: 749px){
.jm-rc-brand-page .jm-rcbrand-topgrid{
grid-template-columns: 1fr;
row-gap:12px;
margin-bottom:0;
padding-right:0;
}
.jm-rc-brand-page .jm-rcbrand-topgrid__copy,
.jm-rc-brand-page .jm-rcbrand-topgrid__rail,
.jm-rc-brand-page .jm-rcbrand-topgrid__search{
grid-column:1;
grid-row:auto;
}
.jm-rc-brand-page .jm-rcbrand-topgrid__rail{
position:static;
width:auto;
}
}
/* Mobile landscape: optional slight tightening */
@media (max-height: 430px) and (orientation: landscape){
.jm-rc-brand-page .jm-rcbrand-topgrid{
row-gap:8px;
margin-bottom:4px;
}
.jm-rc-brand-page .jm-rcbrand-rail{
gap:12px;
}
.jm-rc-brand-page .jm-brand-faq{
margin-top:8px;
}
}
/* ============================================================
RC BRAND PAGE: micro-spacing tune-up (v2)
Scope: .jm-rc-brand-page only
Goals:
- Slightly LESS space: Buttons -> Search (all except keep mobile portrait comfortable)
- Slightly MORE space: Search -> Fitment & Kits FAQ (all)
- Mobile portrait: add space between Brand Snapshot (rail) -> Search,
and a touch more Search -> FAQ
============================================================ */
/* Base: applies to desktop, tablet portrait, tablet landscape, mobile landscape */
.jm-rc-brand-page .jm-rcbrand-topgrid__copy .jm-page-actions{
margin-bottom: 6px; /* slightly less than 8px */
}
.jm-rc-brand-page .jm-rcbrand-topgrid__search{
padding-top: 2px; /* subtle separation without big air */
}
.jm-rc-brand-page .jm-brand-faq{
margin-top: 14px; /* slightly more than 12px */
}
/* Desktop + tablet landscape: keep Buttons->Search a touch tighter,
and keep Search->FAQ a touch roomier */
@media (min-width: 990px),
(min-width: 900px) and (max-width: 1200px) and (orientation: landscape){
.jm-rc-brand-page .jm-rcbrand-topgrid{
row-gap: 10px;
margin-bottom: 8px;
}
.jm-rc-brand-page .jm-rcbrand-topgrid__copy .jm-page-actions{
margin-bottom: 6px;
}
.jm-rc-brand-page .jm-brand-faq{
margin-top: 14px;
}
}
/* Mobile landscape: mirror the same intent */
@media (max-height: 430px) and (orientation: landscape){
.jm-rc-brand-page .jm-rcbrand-topgrid{
row-gap: 10px;
margin-bottom: 6px;
}
.jm-rc-brand-page .jm-rcbrand-topgrid__copy .jm-page-actions{
margin-bottom: 6px;
}
.jm-rc-brand-page .jm-brand-faq{
margin-top: 14px;
}
}
/* Mobile portrait: add space between Brand Snapshot (rail) and Search,
plus a touch more Search -> FAQ */
@media (max-width: 749px) and (orientation: portrait){
/* This creates the space you asked for:
Brand Snapshot box (rail) -> Search box */
.jm-rc-brand-page .jm-rcbrand-topgrid__rail{
margin-bottom: 2px;
}
/* Keep Buttons -> Search from feeling too tight on small screens */
.jm-rc-brand-page .jm-rcbrand-topgrid__copy .jm-page-actions{
margin-bottom: 8px;
}
/* Add a bit more Search -> FAQ on mobile portrait */
.jm-rc-brand-page .jm-brand-faq{
margin-top: 16px;
}
}
/* ============================================================
RC BRAND PAGE: Brand Eyebrow (fast scanning + enterprise polish)
Scope: .jm-rc-brand-page only
============================================================ */
/* Add a touch more top breathing room for the whole header stack */
.jm-rc-brand-page .jm-brand-page{
padding-top: 10px; /* was 8px; adjust 8–14px */
}
/* Space below breadcrumbs before eyebrow/H1 */
.jm-rc-brand-page .jm-rcbrand-topgrid{
margin-top: 14px; /* was 10px; this pushes eyebrow down from breadcrumbs */
}
.jm-rc-brand-page .jm-brand-eyebrow{
display:flex;
align-items:baseline;
gap:0; /* using dot separator instead */
margin:0 0 7px 0; /* slightly more breathing room */
font-size:13.5px; /* was 12px */
line-height:1.2;
color:#666;
opacity:0.90;
letter-spacing:0.2px;
}
.jm-rc-brand-page .jm-brand-eyebrow__label{
text-transform:uppercase;
font-weight:800;
font-size:11.5px; /* was 11px */
letter-spacing:0.35px;
opacity:0.85;
position:relative;
}
/* Subtle divider dot (pure CSS) */
.jm-rc-brand-page .jm-brand-eyebrow__label::after{
content:"•";
display:inline-block;
margin:0 8px;
opacity:0.55;
}
/* Brand value: restrained accent for faster scanning */
.jm-rc-brand-page .jm-brand-eyebrow__value{
font-weight:900;
color:#c70000; /* your J-M red */
opacity:1;
}
/* Brand eyebrow: subtle scan-boost on ALL devices */
.jm-rc-brand-page .jm-brand-eyebrow__value{
letter-spacing: 0.02em; /* safe on mobile portrait */
}
/* Slightly more tracking on tablet/desktop */
@media (min-width: 750px){
.jm-rc-brand-page .jm-brand-eyebrow__value{
letter-spacing: 0.025em;
}
}
/* Keep eyebrow + H1 tidy */
.jm-rc-brand-page .jm-rcbrand-topgrid__copy .jm-page-title{
margin-top:0;
}
/* ============================================================================
FILE: jm-enterprise-hubs.css
COMPONENT: Model Collection "Entity Note" box
PURPOSE:
- Short, LLM-friendly definition/guide line for Model Collection pages
- On wide layouts (desktop + tablet landscape), constrain line length so copy wraps cleanly
- Keep full width on mobile/tablet portrait for readability
============================================================================ */
.jm-collection-entity-note{
margin-top: 8px;
margin-bottom: 6px; /* increase/decrease: 12–22px */
padding: 10px 12px;
border: 1px solid #e6e6e6;
border-radius: 10px;
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.06);
font-size: 13px;
line-height: 1.35;
color: #333;
display: block;
width: 100%;
}
.jm-collection-entity-note p{
margin: 0; /* prevent theme default p margins adding unwanted “air” */
}
.jm-collection-entity-note a{
text-decoration: underline;
text-underline-offset: 2px;
}
/* Desktop + tablet landscape: constrain measure so copy wraps nicer */
@media (min-width: 900px){
.jm-collection-entity-note{
max-width: 820px; /* tune: 720–880px depending on how tight you want wrap */
font-size: 12.75px; /* your “system UI” sizing */
}
}
/* Popular Brands (enterprise styling) */
.jm-brandhub-popular{
margin: 0 0 18px 0;
padding: 14px 14px 16px;
border-radius: 14px;
background: #edf0f5;
box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}
.jm-brandhub-popular__head{
display:flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin: 0 0 10px 0;
}
.jm-brandhub-popular__title{
margin: 0;
}
/* Brands Hub: entity-rich one-liner under H1 (LEFT aligned in the 1200px shell) */
.jm-page-sublede{
max-width: 760px; /* keeps the nice 2/3 wrap */
margin: 10px 0 18px; /* LEFT aligned (no auto-centering) */
text-align: left;
color: #555;
font-size: 0.98rem;
line-height: 1.55;
}
/* Space between text block and CTA buttons */
.jm-rcbrands-hero__copy .jm-page-actions{
margin-top: 16px;
}
/* Slightly tighter on smaller screens */
@media (max-width: 1024px){
.jm-page-sublede{
max-width: 680px;
margin: 10px auto 16px;
}
}
@media (max-width: 767px){
.jm-page-sublede{
max-width: 100%;
margin: 10px 0 14px; /* left-aligned feels better on mobile */
font-size: 0.95rem;
}
.jm-rcbrands-hero__copy .jm-page-actions{
margin-top: 14px;
}
}
.jm-topbrands{
margin: 0 0 12px;
padding: 10px 12px;
background: #edf0f5;
border-radius: 12px;
}
.jm-topbrands__label{
font-weight: 700;
margin-bottom: 6px;
}
.jm-topbrands__links{
display: flex;
flex-wrap: wrap;
gap: 10px 14px;
}
.jm-topbrands__links a{
text-decoration: none;
font-weight: 600;
}
.jm-topbrands__links a:hover{
text-decoration: underline;
}
/* Top Brands strip: limit width to match helper box below */
.jm-topbrands{
max-width: 720px; /* match the "Not sure your brand?" box */
margin: 0 0 14px; /* left aligned */
}
@media (max-width: 767px){
.jm-page-sublede{
max-width: 100%;
margin: 10px 0 14px;
font-size: 0.95rem;
}
}
/* Static A–Z jump row (crawlable) */
.jm-azjump{
max-width: 720px; /* match helper box */
margin: 0 0 14px; /* left aligned */
padding: 12px 14px;
border-radius: 14px;
background: #edf0f5;
border: 1px solid rgba(0,0,0,0.06);
box-shadow: 0 6px 18px rgba(0,0,0,0.04);
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.jm-azjump__label{
font-weight: 700;
color: #222;
white-space: nowrap;
}
.jm-azjump__links{
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.jm-azjump__links a{
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
height: 30px;
padding: 0 10px;
border-radius: 999px;
text-decoration: none;
border: 1px solid rgba(0,0,0,0.10);
background: #fff;
color: #222;
font-weight: 600;
font-size: 0.95rem;
}
.jm-azjump__links a:hover{
text-decoration: underline;
}
/* Noscript notice */
.jm-noscript{
max-width: 720px; /* match helper box */
margin: 0 0 14px;
padding: 12px 14px;
border-radius: 14px;
background: #fff6f6;
border: 1px solid rgba(199,0,0,0.18);
color: #222;
}
.jm-noscript a{ text-decoration: underline; }
/* Hide the JS-built A–Z row to avoid duplicate A–Z UI */
#jm-brandhub-az {
display: none !important;
}
.jm-howitworks{
max-width: 720px;
margin: 12px 0 20px;
padding: 12px 14px;
background: #f6f7fa;
border: 1px solid rgba(0,0,0,0.08);
border-radius: 14px;
}
.jm-howitworks__title{
margin: 0 0 8px;
font-size: 1.15rem;
}
.jm-howitworks__list{
margin: 0 0 10px;
padding-left: 1.25rem;
}
.jm-howitworks__list li{
margin: 6px 0;
line-height: 1.45;
}
.jm-howitworks__links{
margin: 0;
font-size: 0.95rem;
}
.jm-howitworks__links a{
text-decoration: underline;
font-weight: 600;
}
/* Mobile tightening */
@media (max-width: 767px){
.jm-howitworks{
margin: 10px 0 20px;
padding: 12px 12px;
}
}
.jm-howitworks__links-label{
display:block;
margin: 2px 0 6px;
}
/* Tablet portrait: wrap sooner */
@media (min-width: 768px) and (max-width: 1023px){
.jm-howitworks{
padding-right: calc(1.75rem + 145px) !important;
}
}
/* Tablet landscape + desktop: wrap sooner (bigger right padding) */
@media (min-width: 1024px){
.jm-howitworks{
padding-right: calc(1.75rem + 190px) !important;
}
}
/* RC Brands — semantic quick links under lede */
.jm-rcbrands-quicklinks{
margin: 10px 0 14px;
font-size: 0.95rem;
line-height: 1.55;
color: #444;
margin-top: 6px;
}
.jm-rcbrands-quicklinks a{
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
}
.jm-rcbrands-quicklinks a:hover{
text-decoration-thickness: 2px;
}
/* Small screens: a touch more breathing room */
@media (max-width: 767px){
.jm-rcbrands-quicklinks{
margin: 10px 0 16px;
}
}
/* ============================================================
RC Brands Directory: "About this directory" microsection
============================================================ */
.jm-dir-about{
max-width: 720px; /* match helper box width */
margin: 0 0 14px; /* left aligned */
padding: 16px 16px 14px;
background: #fafafa;
border: 1px solid rgba(0,0,0,0.10);
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}
.jm-dir-about__title{
margin: 0 0 8px;
font-size: 1.05rem;
font-weight: 700;
color: #222;
}
.jm-dir-about__text{
margin: 0 0 10px;
font-size: 0.95rem;
line-height: 1.6;
color: #333;
}
.jm-dir-about__text a{
text-decoration: underline;
}
.jm-dir-about__chips{
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 6px;
}
.jm-dir-about__chip{
display: inline-flex;
align-items: center;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(0,0,0,0.12);
background: #ffffff;
font-size: 0.9rem;
text-decoration: none;
color: #222;
}
.jm-dir-about__chip:hover{
text-decoration: underline;
}
/* Mobile spacing */
@media (max-width: 767px){
.jm-dir-about{
padding: 14px 14px 12px;
margin-bottom: 16px;
}
}
/* Query-aligned micro block inside About section */
.jm-dir-queries{
margin: 10px 0 10px;
padding: 10px 12px;
border-left: 4px solid rgba(0,0,0,0.12);
background: rgba(0,0,0,0.02);
border-radius: 10px;
}
.jm-dir-queries__label{
font-weight: 700;
margin: 0 0 6px;
}
.jm-dir-queries__list{
margin: 0;
padding-left: 18px;
}
.jm-dir-queries__list li{
margin: 0 0 6px;
}
/* RC Brands: server-rendered directory stats (make it visibly distinct) */
.jm-rc-brands-hub .jm-dir-stats{
margin: 12px 0 14px;
max-width: 720px;
font-size: 0.95rem;
line-height: 1.35;
opacity: 0.92;
/* subtle enterprise look */
padding: 10px 12px;
border: 1px solid rgba(0,0,0,0.10);
border-radius: 12px;
background: rgba(0,0,0,0.02);
}
.jm-rc-brands-hub .jm-dir-stats__dot{
padding: 0 6px;
opacity: 0.65;
}