/* ═══════════════════════════════════════════════════════════════════════
MEGA MENU + MOBILE MENU — RedGround darkred rebuild
Works alongside existing nav.css without conflicting
═══════════════════════════════════════════════════════════════════════ */
/* ── VARIABLES (already in site.css, here for reference only) ──────────
--dark: #0f0f0f --dark2: #1a1a1a --red: #c0272d
--bg: #f7f5f2 --white: #fff --ink: #141414
--ink-3: #7a7a7a --rule: #e8e4df --rule-lt: #f0ece8
─────────────────────────────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════
1. NAV ROW 2 — department bar trigger updates
══════════════════════════════════════════════════════════════════════ */
/* "All Departments" button (replaces the old tag) */
.nc.all {
background: none;
border: none;
cursor: pointer;
font-family: "Geist", sans-serif;
padding: 0 14px;
gap: 7px;
}
.nc.all:hover,
.nc.all[aria-expanded="true"] {
color: #fff;
background: rgba(255,255,255,.07);
}
.nc.all svg {
flex-shrink: 0;
opacity: .6;
}
/* Body lock when mega open */
body.mega-open { overflow: hidden; }
/* ══════════════════════════════════════════════════════════════════════
2. MEGA MENU OVERLAY
══════════════════════════════════════════════════════════════════════ */
.mega-overlay {
display: none;
position: fixed;
inset: 0;
top: 100px; /* below the full navbar height */
background: rgba(0,0,0,.5);
z-index: 149;
backdrop-filter: blur(1px);
}
.mega-overlay.active { display: block; }
/* ══════════════════════════════════════════════════════════════════════
3. MEGA MENU PANEL
══════════════════════════════════════════════════════════════════════ */
.mega-menu {
position: fixed;
top: 100px; /* matches navbar height */
left: 0;
right: 0;
z-index: 150;
background: var(--dark, #0f0f0f);
border-top: 1px solid rgba(255,255,255,.06);
border-bottom: 3px solid var(--red, #c0272d);
display: none;
grid-template-columns: 240px 1fr 1fr;
min-height: 480px;
max-height: calc(100vh - 100px);
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,.5);
padding: 14px;
}
.mega-menu.open {
display: grid;
animation: megaSlideIn .18s ease;
}
body.mega-open {
overflow: hidden;
position: fixed; /* ← this is what actually locks it cross-browser */
width: 100%;
}
@keyframes megaSlideIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Columns ─────────────────────────────────────────────────────────── */
.mega-col {
display: flex;
flex-direction: column;
border-right: 1px solid rgba(255,255,255,.06);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.1) transparent;
}
.mega-col:last-child { border-right: none; }
.mega-col-head {
padding: 14px 20px 10px;
font-size: .62rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255,255,255,.3);
border-bottom: 1px solid rgba(255,255,255,.06);
flex-shrink: 0;
}
.mega-col-body {
flex: 1;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.1) transparent;
padding: 6px 0;
}
.mega-col-foot {
padding: 12px 20px;
border-top: 1px solid rgba(255,255,255,.06);
flex-shrink: 0;
}
.mega-all-link {
display: block;
font-size: .72rem;
color: var(--red, #c0272d);
text-decoration: none;
font-weight: 600;
letter-spacing: .04em;
transition: opacity .2s;
}
.mega-all-link:hover { opacity: .75; }
/* ── Col 1: Department buttons ─────────────────────────────────────── */
.mega-dept-btn {
display: flex;
align-items: center;
gap: 11px;
width: 100%;
padding: 11px 20px;
background: none;
border: none;
color: rgba(255,255,255,.65);
font-family: "Geist", sans-serif;
font-size: .82rem;
font-weight: 500;
cursor: pointer;
text-align: left;
transition: background .15s, color .15s;
border-left: 3px solid transparent;
}
.mega-dept-btn span {
white-space: nowrap;
}
.mega-dept-btn:hover {
background: rgba(255,255,255,.05);
color: #fff;
border-left-color: rgba(192,39,45,.4);
}
.mega-dept-btn.active {
background: rgba(255,255,255,.07);
color: #fff;
border-left-color: var(--red, #c0272d);
}
.mega-dept-icon {
font-size: 1rem;
flex-shrink: 0;
line-height: 1;
}
.mega-dept-arrow {
margin-left: auto;
flex-shrink: 0;
opacity: .3;
transition: opacity .2s;
}
.mega-dept-btn:hover .mega-dept-arrow,
.mega-dept-btn.active .mega-dept-arrow { opacity: .7; }
/* ── Col 2 & 3: Category / Sub links ─────────────────────────────── */
.mega-cat-see-all,
.mega-sub-see-all {
display: block;
padding: 10px 20px 8px;
font-size: .68rem;
font-weight: 600;
color: var(--red, #c0272d);
text-decoration: none;
letter-spacing: .05em;
border-bottom: 1px solid rgba(255,255,255,.05);
margin-bottom: 4px;
transition: opacity .2s;
}
.mega-cat-see-all:hover { opacity: .75; }
.mega-cat-btn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
padding: 9px 20px;
background: none;
border: none;
color: rgba(255,255,255,.6);
font-family: "Geist", sans-serif;
font-size: .8rem;
font-weight: 400;
cursor: pointer;
text-align: left;
transition: background .15s, color .15s, padding-left .15s;
border-left: 2px solid transparent;
}
.mega-cat-btn:hover {
background: rgba(255,255,255,.05);
color: #fff;
padding-left: 24px;
}
.mega-cat-btn.active {
background: rgba(255,255,255,.07);
color: #fff;
border-left-color: rgba(192,39,45,.6);
}
.mega-cat-btn svg { flex-shrink: 0; opacity: .35; }
.mega-cat-btn:hover svg { opacity: .7; }
.mega-sub-link {
display: flex;
align-items: center;
padding: 8px 20px;
color: rgba(255,255,255,.55);
text-decoration: none;
font-size: .79rem;
font-weight: 400;
transition: background .15s, color .15s, padding-left .15s;
border-left: 2px solid transparent;
}
.mega-sub-link:hover {
background: rgba(255,255,255,.05);
color: #fff;
padding-left: 26px;
border-left-color: rgba(192,39,45,.5);
}
/* ── Loading / hint states ─────────────────────────────────────────── */
.mega-hint {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
height: 200px;
color: rgba(255,255,255,.15);
font-size: .78rem;
text-align: center;
padding: 20px;
}
.mega-hint svg { opacity: .3; }
.mega-hint p { margin: 0; }
.mega-loading {
display: flex;
align-items: center;
justify-content: center;
height: 120px;
}
.mega-spinner {
width: 20px;
height: 20px;
border: 2px solid rgba(255,255,255,.12);
border-top-color: var(--red, #c0272d);
border-radius: 50%;
animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.mega-error {
padding: 16px 20px;
font-size: .75rem;
color: rgba(255,255,255,.35);
}
/* ══════════════════════════════════════════════════════════════════════
4. MOBILE MENU
══════════════════════════════════════════════════════════════════════ */
/* Overlay */
.mob-menu-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.55);
z-index: 299;
backdrop-filter: blur(2px);
}
.mob-menu-overlay.active { display: block; }
/* Drawer */
.mob-menu {
position: fixed;
top: 0;
left: -100%;
width: min(340px, 100vw);
height: 100%;
background: var(--dark, #0f0f0f);
z-index: 300;
display: flex;
flex-direction: column;
transition: left .3s cubic-bezier(.4,0,.2,1);
border-right: 1px solid rgba(255,255,255,.07);
}
.mob-menu.open { left: 0; }
/* Head */
.mob-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid rgba(255,255,255,.07);
flex-shrink: 0;
}
.mob-close {
background: rgba(255,255,255,.07);
border: none;
color: rgba(255,255,255,.6);
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background .2s, color .2s;
}
.mob-close:hover { background: rgba(255,255,255,.14); color: #fff; }
/* Search */
.mob-search {
padding: 12px 16px;
border-bottom: 1px solid rgba(255,255,255,.07);
flex-shrink: 0;
}
/* Body */
.mob-body {
flex: 1;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.1) transparent;
}
/* Department buttons */
.mob-dept-wrap {}
.mob-dept-btn {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 13px 20px;
background: none;
border: none;
border-bottom: 1px solid rgba(255,255,255,.05);
color: rgba(255,255,255,.7);
font-family: "Geist", sans-serif;
font-size: .84rem;
font-weight: 500;
cursor: pointer;
text-align: left;
transition: background .15s, color .15s;
}
.mob-dept-btn:hover { background: rgba(255,255,255,.05); color: #fff; }
.mob-dept-wrap.open .mob-dept-btn {
background: rgba(192,39,45,.12);
color: #fff;
border-left: 3px solid var(--red, #c0272d);
}
.mob-dept-chevron {
flex-shrink: 0;
transition: transform .2s;
opacity: .5;
}
.mob-dept-wrap.open .mob-dept-chevron { transform: rotate(180deg); }
/* Category links inside accordion */
.mob-dept-cats {
display: none;
flex-direction: column;
background: rgba(0,0,0,.2);
}
.mob-dept-wrap.open .mob-dept-cats { display: flex; }
.mob-cat-wrap {}
.mob-cat-btn {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 10px 20px 10px 28px;
background: none;
border: none;
border-bottom: 1px solid rgba(255,255,255,.04);
color: rgba(255,255,255,.55);
font-family: "Geist", sans-serif;
font-size: .79rem;
font-weight: 400;
cursor: pointer;
text-align: left;
transition: background .15s, color .15s;
}
.mob-cat-btn:hover,
.mob-cat-btn.open { background: rgba(255,255,255,.04); color: #fff; }
.mob-cat-btn .mob-dept-chevron { width: 12px; height: 12px; }
.mob-cat-btn.open .mob-dept-chevron { transform: rotate(180deg); }
.mob-subs-wrap {
display: none;
flex-direction: column;
background: rgba(0,0,0,.15);
}
.mob-subs-wrap.open { display: flex; }
.mob-sub-link {
display: block;
padding: 9px 20px 9px 40px;
color: rgba(255,255,255,.4);
text-decoration: none;
font-size: .75rem;
border-bottom: 1px solid rgba(255,255,255,.03);
transition: color .15s, background .15s;
}
.mob-sub-link:hover { color: rgba(255,255,255,.8); background: rgba(255,255,255,.04); }
.mob-sub-link.see-all {
color: var(--red, #c0272d);
font-weight: 600;
font-size: .71rem;
letter-spacing: .04em;
padding-left: 28px;
}
.mob-cat-link {
display: block;
padding: 10px 20px 10px 28px;
color: rgba(255,255,255,.55);
text-decoration: none;
font-size: .79rem;
border-bottom: 1px solid rgba(255,255,255,.04);
transition: color .15s, background .15s;
}
.mob-cat-link:hover { color: #fff; background: rgba(255,255,255,.04); }
.mob-cat-link.see-all {
color: var(--red, #c0272d);
font-weight: 600;
font-size: .71rem;
letter-spacing: .04em;
}
/* Divider */
.mob-divider {
height: 1px;
background: rgba(255,255,255,.07);
margin: 6px 0;
}
/* Static links */
.mob-link {
display: block;
padding: 12px 20px;
color: rgba(255,255,255,.5);
text-decoration: none;
font-size: .8rem;
border-bottom: 1px solid rgba(255,255,255,.04);
transition: color .15s;
}
.mob-link:hover { color: #fff; }
/* Loading state in mobile */
.mob-loading {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
color: rgba(255,255,255,.35);
font-size: .75rem;
}
.mob-error {
padding: 12px 28px;
font-size: .74rem;
color: rgba(255,255,255,.3);
}
/* Footer */
.mob-foot {
border-top: 1px solid rgba(255,255,255,.08);
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 8px;
flex-shrink: 0;
}
.mob-rfq-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
background: var(--red, #c0272d);
color: #fff;
border: none;
padding: 13px 20px;
font-family: "Geist", sans-serif;
font-size: .78rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
cursor: pointer;
transition: background .2s;
}
.mob-rfq-btn:hover { background: #a82228; }
.mob-submit-link {
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,.35);
font-size: .71rem;
text-decoration: none;
padding: 4px;
transition: color .2s;
letter-spacing: .03em;
}
.mob-submit-link:hover { color: rgba(255,255,255,.6); }
/* ══════════════════════════════════════════════════════════════════════
5. RESPONSIVE ADJUSTMENTS
══════════════════════════════════════════════════════════════════════ */
/* Show hamburger only on mobile */
.nav-hamburger { display: none; }
@media (max-width: 1024px) {
.mega-menu { grid-template-columns: 220px 1fr 1fr; }
}
@media (max-width: 768px) {
/* Hide department nav row on mobile — mega menu is the entry point */
.nav-r2 { display: none; }
/* Show hamburger */
.nav-hamburger {
display: flex;
align-items: center;
justify-content: center;
background: none;
border: 1px solid rgba(255,255,255,.15);
color: rgba(255,255,255,.75);
width: 38px;
height: 38px;
cursor: pointer;
flex-shrink: 0;
transition: border-color .2s, color .2s;
}
.nav-hamburger:hover { border-color: rgba(255,255,255,.4); color: #fff; }
/* Desktop mega menu never shown on mobile */
.mega-menu,
.mega-overlay { display: none !important; }
}
@media (max-width: 480px) {
.mob-menu { width: 100vw; }
}
/* ═══════════════════════════════════════════════════════════════════════
MEGA MENU + MOBILE MENU — RedGround darkred rebuild
Works alongside existing nav.css without conflicting
═══════════════════════════════════════════════════════════════════════ */
/* ── VARIABLES (already in site.css, here for reference only) ──────────
--dark: #0f0f0f --dark2: #1a1a1a --red: #c0272d
--bg: #f7f5f2 --white: #fff --ink: #141414
--ink-3: #7a7a7a --rule: #e8e4df --rule-lt: #f0ece8
─────────────────────────────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════
1. NAV ROW 2 — department bar trigger updates
══════════════════════════════════════════════════════════════════════ */
/* "All Departments" button (replaces the old tag) */
.nc.all {
background: none;
border: none;
cursor: pointer;
font-family: "Geist", sans-serif;
padding: 0 14px;
gap: 7px;
}
.nc.all:hover,
.nc.all[aria-expanded="true"] {
color: #fff;
background: rgba(255,255,255,.07);
}
.nc.all svg {
flex-shrink: 0;
opacity: .6;
}
/* Body lock when mega open */
body.mega-open { overflow: hidden; }
/* ══════════════════════════════════════════════════════════════════════
2. MEGA MENU OVERLAY
══════════════════════════════════════════════════════════════════════ */
.mega-overlay {
display: none;
position: fixed;
inset: 0;
top: 100px; /* below the full navbar height */
background: rgba(0,0,0,.5);
z-index: 149;
backdrop-filter: blur(1px);
}
.mega-overlay.active { display: block; }
/* ══════════════════════════════════════════════════════════════════════
3. MEGA MENU PANEL
══════════════════════════════════════════════════════════════════════ */
.mega-menu {
position: fixed;
top: 100px; /* matches navbar height */
left: 0;
right: 0;
z-index: 150;
background: var(--dark, #0f0f0f);
border-top: 1px solid rgba(255,255,255,.06);
border-bottom: 3px solid var(--red, #c0272d);
display: none;
grid-template-columns: 240px 1fr 1fr;
min-height: 480px;
max-height: calc(100vh - 100px);
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.mega-menu.open {
display: grid;
animation: megaSlideIn .18s ease;
}
@keyframes megaSlideIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Columns ─────────────────────────────────────────────────────────── */
.mega-col {
display: flex;
flex-direction: column;
border-right: 1px solid rgba(255,255,255,.06);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.1) transparent;
}
.mega-col:last-child { border-right: none; }
.mega-col-head {
padding: 14px 20px 10px;
font-size: .62rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255,255,255,.3);
border-bottom: 1px solid rgba(255,255,255,.06);
flex-shrink: 0;
}
.mega-col-body {
flex: 1;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.1) transparent;
padding: 6px 0;
}
.mega-col-foot {
padding: 12px 20px;
border-top: 1px solid rgba(255,255,255,.06);
flex-shrink: 0;
}
.mega-all-link {
display: block;
font-size: .72rem;
color: var(--red, #c0272d);
text-decoration: none;
font-weight: 600;
letter-spacing: .04em;
transition: opacity .2s;
}
.mega-all-link:hover { opacity: .75; }
/* ── Col 1: Department buttons ─────────────────────────────────────── */
.mega-dept-btn {
display: flex;
align-items: center;
gap: 11px;
width: 100%;
padding: 11px 20px;
background: none;
border: none;
color: rgba(255,255,255,.65);
font-family: "Geist", sans-serif;
font-size: .82rem;
font-weight: 500;
cursor: pointer;
text-align: left;
transition: background .15s, color .15s;
border-left: 3px solid transparent;
}
.mega-dept-btn:hover {
background: rgba(255,255,255,.05);
color: #fff;
border-left-color: rgba(192,39,45,.4);
}
.mega-dept-btn.active {
background: rgba(255,255,255,.07);
color: #fff;
border-left-color: var(--red, #c0272d);
}
.mega-dept-icon {
font-size: 1rem;
flex-shrink: 0;
line-height: 1;
}
.mega-dept-arrow {
margin-left: auto;
flex-shrink: 0;
opacity: .3;
transition: opacity .2s;
}
.mega-dept-btn:hover .mega-dept-arrow,
.mega-dept-btn.active .mega-dept-arrow { opacity: .7; }
/* ── Col 2 & 3: Category / Sub links ─────────────────────────────── */
.mega-cat-see-all,
.mega-sub-see-all {
display: block;
padding: 10px 20px 8px;
font-size: .68rem;
font-weight: 600;
color: var(--red, #c0272d);
text-decoration: none;
letter-spacing: .05em;
border-bottom: 1px solid rgba(255,255,255,.05);
margin-bottom: 4px;
transition: opacity .2s;
}
.mega-cat-see-all:hover { opacity: .75; }
.mega-cat-btn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
padding: 9px 20px;
background: none;
border: none;
color: rgba(255,255,255,.6);
font-family: "Geist", sans-serif;
font-size: .8rem;
font-weight: 400;
cursor: pointer;
text-align: left;
transition: background .15s, color .15s, padding-left .15s;
border-left: 2px solid transparent;
}
.mega-cat-btn:hover {
background: rgba(255,255,255,.05);
color: #fff;
padding-left: 24px;
}
.mega-cat-btn.active {
background: rgba(255,255,255,.07);
color: #fff;
border-left-color: rgba(192,39,45,.6);
}
.mega-cat-btn svg { flex-shrink: 0; opacity: .35; }
.mega-cat-btn:hover svg { opacity: .7; }
.mega-sub-link {
display: flex;
align-items: center;
padding: 8px 20px;
color: rgba(255,255,255,.55);
text-decoration: none;
font-size: .79rem;
font-weight: 400;
transition: background .15s, color .15s, padding-left .15s;
border-left: 2px solid transparent;
}
.mega-sub-link:hover {
background: rgba(255,255,255,.05);
color: #fff;
padding-left: 26px;
border-left-color: rgba(192,39,45,.5);
}
/* ── Loading / hint states ─────────────────────────────────────────── */
.mega-hint {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
height: 200px;
color: rgba(255,255,255,.15);
font-size: .78rem;
text-align: center;
padding: 20px;
}
.mega-hint svg { opacity: .3; }
.mega-hint p { margin: 0; }
.mega-loading {
display: flex;
align-items: center;
justify-content: center;
height: 120px;
}
.mega-spinner {
width: 20px;
height: 20px;
border: 2px solid rgba(255,255,255,.12);
border-top-color: var(--red, #c0272d);
border-radius: 50%;
animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.mega-error {
padding: 16px 20px;
font-size: .75rem;
color: rgba(255,255,255,.35);
}
/* ══════════════════════════════════════════════════════════════════════
4. MOBILE DRAWER SYSTEM
3 panels stack left-to-right.
.open = fully visible (translateX 0)
.peek = pushed left ~6% so next panel overlaps it (depth cue)
Closed = off-screen right (translateX 100%)
══════════════════════════════════════════════════════════════════════ */
/* Overlay */
.md-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.6);
z-index: 299;
backdrop-filter: blur(2px);
}
.md-overlay.active { display: block; }
/* Base panel */
.md-panel {
position: fixed;
top: 0;
right: 0;
width: min(360px, 100vw);
height: 100%;
background: var(--dark, #0f0f0f);
z-index: 300;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform .28s cubic-bezier(.4,0,.2,1);
will-change: transform;
border-left: 1px solid rgba(255,255,255,.07);
}
/* Panel 2 & 3 sit slightly higher z so they cover panel 1/2 */
.md-panel-2 { z-index: 301; }
.md-panel-3 { z-index: 302; }
/* States */
.md-panel.open { transform: translateX(0); }
.md-panel.peek { transform: translateX(-10%); } /* peeks behind next panel */
/* ── Panel anatomy ────────────────────────────────────────────────── */
.md-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
border-bottom: 1px solid rgba(255,255,255,.07);
flex-shrink: 0;
min-height: 56px;
}
.md-back {
display: flex;
align-items: center;
gap: 6px;
background: none;
border: none;
color: rgba(255,255,255,.55);
font-family: "Geist", sans-serif;
font-size: .78rem;
font-weight: 500;
cursor: pointer;
padding: 6px 8px 6px 4px;
transition: color .2s;
letter-spacing: .02em;
}
.md-back:hover { color: #fff; }
.md-back svg { flex-shrink: 0; }
.md-close {
background: rgba(255,255,255,.07);
border: none;
color: rgba(255,255,255,.55);
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: background .2s, color .2s;
}
.md-close:hover { background: rgba(255,255,255,.14); color: #fff; }
.md-panel-title {
padding: 14px 18px 10px;
font-size: .68rem;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
color: rgba(255,255,255,.28);
border-bottom: 1px solid rgba(255,255,255,.05);
flex-shrink: 0;
}
.md-search {
padding: 10px 14px;
border-bottom: 1px solid rgba(255,255,255,.07);
flex-shrink: 0;
}
.md-body {
flex: 1;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.1) transparent;
}
/* ── Rows ─────────────────────────────────────────────────────────── */
.md-section-label {
padding: 12px 18px 6px;
font-size: .6rem;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
color: rgba(255,255,255,.22);
}
.md-row {
display: flex;
align-items: center;
width: 100%;
padding: 13px 18px;
background: none;
border: none;
border-bottom: 1px solid rgba(255,255,255,.05);
color: rgba(255,255,255,.7);
font-family: "Geist", sans-serif;
font-size: .84rem;
font-weight: 400;
text-decoration: none;
cursor: pointer;
text-align: left;
gap: 12px;
transition: background .15s, color .15s, padding-left .15s;
}
.md-row:hover {
background: rgba(255,255,255,.05);
color: #fff;
}
.md-row:active { background: rgba(255,255,255,.09); }
.md-row-icon {
font-size: 1rem;
flex-shrink: 0;
width: 22px;
text-align: center;
line-height: 1;
}
.md-row-label { flex: 1; }
.md-row-arrow {
flex-shrink: 0;
opacity: .3;
transition: opacity .2s, transform .2s;
}
.md-row:hover .md-row-arrow { opacity: .7; }
/* Dept rows — slightly bolder */
.md-row-dept { font-weight: 500; }
/* Sub rows — slightly muted */
.md-row-sub {
color: rgba(255,255,255,.55);
font-size: .81rem;
padding-left: 22px;
}
.md-row-sub:hover { color: #fff; padding-left: 26px; }
/* "See all" rows */
.md-see-all {
color: var(--red, #c0272d) !important;
font-size: .75rem;
font-weight: 600;
letter-spacing: .04em;
border-bottom: 1px solid rgba(255,255,255,.08) !important;
margin-bottom: 2px;
}
/* Divider */
.md-divider {
height: 1px;
background: rgba(255,255,255,.07);
margin: 6px 0;
}
/* Loading */
.md-loading {
display: flex;
align-items: center;
gap: 12px;
padding: 24px 18px;
color: rgba(255,255,255,.3);
font-size: .78rem;
}
.md-error {
padding: 20px 18px;
color: rgba(255,255,255,.3);
font-size: .76rem;
}
/* ── Footer (panel 1 only) ────────────────────────────────────────── */
.md-foot {
border-top: 1px solid rgba(255,255,255,.08);
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 8px;
flex-shrink: 0;
}
.md-rfq-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
background: var(--red, #c0272d);
color: #fff;
border: none;
padding: 13px 20px;
font-family: "Geist", sans-serif;
font-size: .78rem;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
cursor: pointer;
transition: background .2s;
}
.md-rfq-btn:hover { background: #a82228; }
.md-submit-link {
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,.3);
font-size: .71rem;
text-decoration: none;
padding: 4px;
transition: color .2s;
letter-spacing: .03em;
}
.md-submit-link:hover { color: rgba(255,255,255,.6); }
/* ══════════════════════════════════════════════════════════════════════
5. RESPONSIVE
══════════════════════════════════════════════════════════════════════ */
/* Show hamburger only on mobile */
.nav-hamburger { display: none; }
@media (max-width: 1024px) {
.mega-menu { grid-template-columns: 220px 1fr 1fr; }
}
@media (max-width: 768px) {
.nav-bar-top {
display: none;
}
/* Hide department nav row — mobile uses drawers */
.nav-r2 { display: none; }
/* Show hamburger */
.nav-hamburger {
display: flex;
align-items: center;
justify-content: center;
background: none;
border: 1px solid rgba(255,255,255,.15);
color: rgba(255,255,255,.75);
width: 38px;
height: 38px;
cursor: pointer;
flex-shrink: 0;
transition: border-color .2s, color .2s;
}
.nav-hamburger:hover { border-color: rgba(255,255,255,.4); color: #fff; }
/* Desktop mega menu never shown on mobile */
.mega-menu,
.mega-overlay { display: none !important; }
}
@media (max-width: 480px) {
/* Full-width drawers on small phones */
.md-panel { width: 100vw; }
}
/* ═══════════════════════════════════════════════════════════════════════
MEGA MENU + MOBILE MENU — RedGround darkred rebuild
Works alongside existing nav.css without conflicting
═══════════════════════════════════════════════════════════════════════ */
/* ── VARIABLES (already in site.css, here for reference only) ──────────
--dark: #0f0f0f --dark2: #1a1a1a --red: #c0272d
--bg: #f7f5f2 --white: #fff --ink: #141414
--ink-3: #7a7a7a --rule: #e8e4df --rule-lt: #f0ece8
─────────────────────────────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════
1. NAV ROW 2 — department bar trigger updates
══════════════════════════════════════════════════════════════════════ */
/* "All Departments" button (replaces the old tag) */
.nc.all {
background: none;
border: none;
cursor: pointer;
font-family: "Geist", sans-serif;
padding: 0 14px;
gap: 7px;
}
.nc.all:hover,
.nc.all[aria-expanded="true"] {
color: #fff;
background: rgba(255,255,255,.07);
}
.nc.all svg {
flex-shrink: 0;
opacity: .6;
}
/* Body lock when mega open */
body.mega-open { overflow: hidden; }
/* ══════════════════════════════════════════════════════════════════════
2. MEGA MENU OVERLAY
══════════════════════════════════════════════════════════════════════ */
.mega-overlay {
display: none;
position: fixed;
inset: 0;
top: 100px; /* below the full navbar height */
background: rgba(0,0,0,.5);
z-index: 149;
backdrop-filter: blur(1px);
}
.mega-overlay.active { display: block; }
/* ══════════════════════════════════════════════════════════════════════
3. MEGA MENU PANEL
══════════════════════════════════════════════════════════════════════ */
.mega-menu {
position: fixed;
top: 100px; /* matches navbar height */
left: 0;
right: 0;
z-index: 150;
background: var(--dark, #0f0f0f);
border-top: 1px solid rgba(255,255,255,.06);
border-bottom: 3px solid var(--red, #c0272d);
display: none;
grid-template-columns: 240px 1fr 1fr;
min-height: 480px;
max-height: calc(100vh - 100px);
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,.5);
padding: 24px 0;
}
.mega-menu.open {
display: grid;
animation: megaSlideIn .18s ease;
}
@keyframes megaSlideIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Columns ─────────────────────────────────────────────────────────── */
.mega-col {
display: flex;
flex-direction: column;
border-right: 1px solid rgba(255,255,255,.06);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.1) transparent;
}
.mega-col:last-child { border-right: none; }
.mega-col-head {
padding: 14px 20px 10px;
font-size: .62rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255,255,255,.3);
border-bottom: 1px solid rgba(255,255,255,.06);
flex-shrink: 0;
}
.mega-col-body {
flex: 1;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.1) transparent;
padding: 6px 0;
}
.mega-col-foot {
padding: 12px 20px;
border-top: 1px solid rgba(255,255,255,.06);
flex-shrink: 0;
}
.mega-all-link {
display: block;
font-size: .72rem;
color: var(--red, #c0272d);
text-decoration: none;
font-weight: 600;
letter-spacing: .04em;
transition: opacity .2s;
}
.mega-all-link:hover { opacity: .75; }
/* ── Col 1: Department buttons ─────────────────────────────────────── */
.mega-dept-btn {
display: flex;
align-items: center;
gap: 11px;
width: 100%;
padding: 11px 20px;
background: none;
border: none;
color: rgba(255,255,255,.65);
font-family: "Geist", sans-serif;
font-size: .82rem;
font-weight: 500;
cursor: pointer;
text-align: left;
transition: background .15s, color .15s;
border-left: 3px solid transparent;
}
.mega-dept-btn:hover {
background: rgba(255,255,255,.05);
color: #fff;
border-left-color: rgba(192,39,45,.4);
}
.mega-dept-btn.active {
background: rgba(255,255,255,.07);
color: #fff;
border-left-color: var(--red, #c0272d);
}
.mega-dept-icon {
font-size: 1rem;
flex-shrink: 0;
line-height: 1;
}
.mega-dept-arrow {
margin-left: auto;
flex-shrink: 0;
opacity: .3;
transition: opacity .2s;
}
.mega-dept-btn:hover .mega-dept-arrow,
.mega-dept-btn.active .mega-dept-arrow { opacity: .7; }
/* ── Col 2 & 3: Category / Sub links ─────────────────────────────── */
.mega-cat-see-all,
.mega-sub-see-all {
display: block;
padding: 10px 20px 8px;
font-size: .68rem;
font-weight: 600;
color: var(--red, #c0272d);
text-decoration: none;
letter-spacing: .05em;
border-bottom: 1px solid rgba(255,255,255,.05);
margin-bottom: 4px;
transition: opacity .2s;
}
.mega-cat-see-all:hover { opacity: .75; }
.mega-cat-btn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
padding: 9px 20px;
background: none;
border: none;
color: rgba(255,255,255,.6);
font-family: "Geist", sans-serif;
font-size: .8rem;
font-weight: 400;
cursor: pointer;
text-align: left;
transition: background .15s, color .15s, padding-left .15s;
border-left: 2px solid transparent;
}
.mega-cat-btn:hover {
background: rgba(255,255,255,.05);
color: #fff;
padding-left: 24px;
}
.mega-cat-btn.active {
background: rgba(255,255,255,.07);
color: #fff;
border-left-color: rgba(192,39,45,.6);
}
.mega-cat-btn svg { flex-shrink: 0; opacity: .35; }
.mega-cat-btn:hover svg { opacity: .7; }
.mega-sub-link {
display: flex;
align-items: center;
padding: 8px 20px;
color: rgba(255,255,255,.55);
text-decoration: none;
font-size: .79rem;
font-weight: 400;
transition: background .15s, color .15s, padding-left .15s;
border-left: 2px solid transparent;
}
.mega-sub-link:hover {
background: rgba(255,255,255,.05);
color: #fff;
padding-left: 26px;
border-left-color: rgba(192,39,45,.5);
}
/* ── Loading / hint states ─────────────────────────────────────────── */
.mega-hint {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
height: 200px;
color: rgba(255,255,255,.15);
font-size: .78rem;
text-align: center;
padding: 20px;
}
.mega-hint svg { opacity: .3; }
.mega-hint p { margin: 0; }
.mega-loading {
display: flex;
align-items: center;
justify-content: center;
height: 120px;
}
.mega-spinner {
width: 20px;
height: 20px;
border: 2px solid rgba(255,255,255,.12);
border-top-color: var(--red, #c0272d);
border-radius: 50%;
animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.mega-error {
padding: 16px 20px;
font-size: .75rem;
color: rgba(255,255,255,.35);
}
/* ══════════════════════════════════════════════════════════════════════
4. MOBILE DRAWER SYSTEM
3 panels stack left-to-right.
.open = fully visible (translateX 0)
.peek = pushed left ~6% so next panel overlaps it (depth cue)
Closed = off-screen right (translateX 100%)
══════════════════════════════════════════════════════════════════════ */
/* Overlay */
.md-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.6);
z-index: 299;
backdrop-filter: blur(2px);
}
.md-overlay.active { display: block; }
/* Base panel */
.md-panel {
position: fixed;
top: 0;
right: 0;
width: min(360px, 100vw);
height: 100%;
background: var(--dark, #0f0f0f);
z-index: 300;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform .28s cubic-bezier(.4,0,.2,1);
will-change: transform;
border-left: 1px solid rgba(255,255,255,.07);
}
/* Panel 2 & 3 sit slightly higher z so they cover panel 1/2 */
.md-panel-2 { z-index: 301; }
.md-panel-3 { z-index: 302; }
/* States */
.md-panel.open { transform: translateX(0); }
.md-panel.peek { transform: translateX(-10%); } /* peeks behind next panel */
/* ── Panel anatomy ────────────────────────────────────────────────── */
.md-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
border-bottom: 1px solid rgba(255,255,255,.07);
flex-shrink: 0;
min-height: 56px;
}
.md-back {
display: flex;
align-items: center;
gap: 6px;
background: none;
border: none;
color: rgba(255,255,255,.55);
font-family: "Geist", sans-serif;
font-size: .78rem;
font-weight: 500;
cursor: pointer;
padding: 6px 8px 6px 4px;
transition: color .2s;
letter-spacing: .02em;
}
.md-back:hover { color: #fff; }
.md-back svg { flex-shrink: 0; }
.md-close {
background: rgba(255,255,255,.07);
border: none;
color: rgba(255,255,255,.55);
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: background .2s, color .2s;
}
.md-close:hover { background: rgba(255,255,255,.14); color: #fff; }
.md-panel-title {
padding: 14px 18px 10px;
font-size: .68rem;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
color: rgba(255,255,255,.28);
border-bottom: 1px solid rgba(255,255,255,.05);
flex-shrink: 0;
}
.md-search {
padding: 10px 14px;
border-bottom: 1px solid rgba(255,255,255,.07);
flex-shrink: 0;
}
.md-body {
flex: 1;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.1) transparent;
}
/* ── Rows ─────────────────────────────────────────────────────────── */
.md-section-label {
padding: 12px 18px 6px;
font-size: .6rem;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
color: rgba(255,255,255,.22);
}
.md-row {
display: flex;
align-items: center;
width: 100%;
padding: 13px 18px;
background: none;
border: none;
border-bottom: 1px solid rgba(255,255,255,.05);
color: rgba(255,255,255,.7);
font-family: "Geist", sans-serif;
font-size: .84rem;
font-weight: 400;
text-decoration: none;
cursor: pointer;
text-align: left;
gap: 12px;
transition: background .15s, color .15s, padding-left .15s;
}
.md-row:hover {
background: rgba(255,255,255,.05);
color: #fff;
}
.md-row:active { background: rgba(255,255,255,.09); }
.md-row-icon {
font-size: 1rem;
flex-shrink: 0;
width: 22px;
text-align: center;
line-height: 1;
}
.md-row-label { flex: 1; }
.md-row-arrow {
flex-shrink: 0;
opacity: .3;
transition: opacity .2s, transform .2s;
}
.md-row:hover .md-row-arrow { opacity: .7; }
/* Dept rows — slightly bolder */
.md-row-dept { font-weight: 500; }
/* Sub rows — slightly muted */
.md-row-sub {
color: rgba(255,255,255,.55);
font-size: .81rem;
padding-left: 22px;
}
.md-row-sub:hover { color: #fff; padding-left: 26px; }
/* "See all" rows */
.md-see-all {
color: var(--red, #c0272d) !important;
font-size: .75rem;
font-weight: 600;
letter-spacing: .04em;
border-bottom: 1px solid rgba(255,255,255,.08) !important;
margin-bottom: 2px;
}
/* Divider */
.md-divider {
height: 1px;
background: rgba(255,255,255,.07);
margin: 6px 0;
}
/* Loading */
.md-loading {
display: flex;
align-items: center;
gap: 12px;
padding: 24px 18px;
color: rgba(255,255,255,.3);
font-size: .78rem;
}
.md-error {
padding: 20px 18px;
color: rgba(255,255,255,.3);
font-size: .76rem;
}
/* ── Footer (panel 1 only) ────────────────────────────────────────── */
.md-foot {
border-top: 1px solid rgba(255,255,255,.08);
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 8px;
flex-shrink: 0;
}
.md-rfq-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
background: var(--red, #c0272d);
color: #fff;
border: none;
padding: 13px 20px;
font-family: "Geist", sans-serif;
font-size: .78rem;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
cursor: pointer;
transition: background .2s;
}
.md-rfq-btn:hover { background: #a82228; }
.md-submit-link {
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,.3);
font-size: .71rem;
text-decoration: none;
padding: 4px;
transition: color .2s;
letter-spacing: .03em;
}
.md-submit-link:hover { color: rgba(255,255,255,.6); }
/* ── History link in drawer footer ───────────────────────────────────── */
.md-history-link {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
width: 100%;
background: none;
border: 1px solid rgba(255,255,255,.1);
color: rgba(255,255,255,.4);
font-family: "Geist", sans-serif;
font-size: .72rem;
font-weight: 500;
letter-spacing: .04em;
padding: 9px;
cursor: pointer;
transition: color .2s, border-color .2s;
}
.md-history-link:hover { color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.25); }
/* ══════════════════════════════════════════════════════════════════════
5. MOBILE BOTTOM BAR
Fixed to bottom of viewport. Mobile only (hidden on desktop).
5 equal-width tap targets: RFQ · Saved · Compare · History · Menu
══════════════════════════════════════════════════════════════════════ */
.mob-bar {
display: none;
position: fixed;
top: auto; /* override the global nav { top: 0 } rule */
bottom: 0;
left: 0;
right: 0;
height: 60px;
background: var(--dark, #0f0f0f);
border-top: 1px solid rgba(255,255,255,.1);
z-index: 200;
flex-direction: row;
align-items: stretch;
box-shadow: 0 -4px 20px rgba(0,0,0,.3);
/* Safe area padding for notched phones */
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mob-bar.hidden { display: none !important; }
.mob-bar-btn {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
background: none;
border: none;
color: rgba(255,255,255,.45);
cursor: pointer;
padding: 8px 4px 6px;
transition: color .15s, background .15s;
-webkit-tap-highlight-color: transparent;
}
.mob-bar-btn:hover,
.mob-bar-btn:active { color: #fff; background: rgba(255,255,255,.06); }
/* RFQ button — accent colour */
.mob-bar-rfq { color: var(--red, #c0272d); }
.mob-bar-rfq:hover,
.mob-bar-rfq:active { color: #e03039; background: rgba(192,39,45,.1); }
.mob-bar-icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
}
.mob-bar-badge {
position: absolute;
top: -4px;
right: -6px;
background: var(--red, #c0272d);
color: #fff;
font-size: .52rem;
font-weight: 700;
min-width: 14px;
height: 14px;
border-radius: 7px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 3px;
line-height: 1;
}
/* RFQ badge uses white-on-red, others use same */
.mob-bar-label {
font-size: .58rem;
font-weight: 500;
letter-spacing: .04em;
text-transform: uppercase;
line-height: 1;
}
/* ══════════════════════════════════════════════════════════════════════
6. MOBILE SEARCH OVERLAY
Full-screen, slides up from bottom bar tap
══════════════════════════════════════════════════════════════════════ */
.mob-search-overlay {
display: none;
position: fixed;
inset: 0;
background: var(--dark, #0f0f0f);
z-index: 600;
flex-direction: column;
padding: 0;
}
.mob-search-overlay.open { display: flex; }
.mob-search-box {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-bottom: 1px solid rgba(255,255,255,.08);
flex-shrink: 0;
}
.mob-search-inner {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.1);
padding: 10px 14px;
border-radius: 2px;
}
.mob-search-icon { flex-shrink: 0; color: rgba(255,255,255,.35); }
.mob-search-input {
flex: 1;
background: none;
border: none;
outline: none;
color: #fff;
font-family: "Geist", sans-serif;
font-size: 1rem;
font-weight: 400;
min-width: 0;
}
.mob-search-input::placeholder { color: rgba(255,255,255,.3); }
.mob-search-input::-webkit-search-cancel-button { display: none; }
.mob-search-clear {
background: none;
border: none;
color: rgba(255,255,255,.4);
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: color .2s;
}
.mob-search-clear:hover { color: #fff; }
.mob-search-cancel {
background: none;
border: none;
color: var(--red, #c0272d);
font-family: "Geist", sans-serif;
font-size: .85rem;
font-weight: 600;
cursor: pointer;
padding: 6px 4px;
flex-shrink: 0;
white-space: nowrap;
}
.mob-search-hint {
padding: 20px 18px;
color: rgba(255,255,255,.25);
font-size: .78rem;
}
.mob-search-hint span {
color: rgba(255,255,255,.5);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
transition: color .2s;
}
.mob-search-hint span:hover { color: #fff; }
/* ══════════════════════════════════════════════════════════════════════
7. RESPONSIVE
══════════════════════════════════════════════════════════════════════ */
/* Show hamburger only on mobile */
.nav-hamburger { display: none; }
@media (max-width: 1024px) {
.mega-menu { grid-template-columns: 220px 1fr 1fr; }
}
@media (max-width: 768px) {
/* Hide department nav row — mobile uses drawers */
.nav-r2 { display: none; }
/* Hide hamburger in nav — bottom bar Menu button handles it */
.nav-hamburger { display: none; }
/* Desktop mega menu never shown on mobile */
.mega-menu,
.mega-overlay { display: none !important; }
/* Show the bottom bar */
.mob-bar { display: flex; }
/* Push page content up so bottom bar doesn't cover it */
body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 480px) {
/* Full-width drawers on small phones */
.md-panel { width: 100vw; }
}
/* ── QUICK SEARCH DROPDOWN ──────────────────────────────────── */
.qs-drop {
display: none;
position: fixed;
top: 100px; /* below navbar height */
left: 0;
right: 0;
z-index: 148;
background: var(--white);
border-top: 2px solid var(--red);
box-shadow: 0 12px 40px rgba(0,0,0,.15);
}
.qs-drop.open { display: block; }
.qs-drop > .qs-cols {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 280px 1fr;
min-height: 200px;
max-height: 480px;
}
.qs-col {
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--rule) transparent;
}
.qs-col-cats {
border-right: 1px solid var(--rule);
background: var(--bg);
}
.qs-col-prods {
background: var(--white);
}
.qs-col-head {
padding: 10px 18px 8px;
font-size: .62rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ink-3);
border-bottom: 1px solid var(--rule-lt);
position: sticky;
top: 0;
background: inherit;
z-index: 1;
}
/* Category rows */
.qs-cat-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 18px;
text-decoration: none;
border-bottom: 1px solid var(--rule-lt);
transition: background .15s;
gap: 12px;
}
.qs-cat-row:hover { background: rgba(192,39,45,.04); }
.qs-cat-label {
font-size: .78rem;
font-weight: 500;
color: var(--ink);
line-height: 1.3;
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.qs-cat-row:hover .qs-cat-label { color: var(--red); }
.qs-cat-count {
font-size: .64rem;
color: var(--ink-3);
background: var(--rule-lt);
padding: 1px 6px;
border-radius: 10px;
flex-shrink: 0;
font-weight: 500;
}
/* Product rows */
.qs-prod-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 18px;
text-decoration: none;
border-bottom: 1px solid var(--rule-lt);
transition: background .15s;
}
.qs-prod-row:hover { background: var(--bg); }
.qs-prod-img {
width: 44px;
height: 44px;
flex-shrink: 0;
background: var(--bg);
border: 1px solid var(--rule-lt);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.qs-prod-img img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 4px;
}
.qs-prod-info { flex: 1; min-width: 0; }
.qs-prod-title {
font-size: .78rem;
font-weight: 600;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
transition: color .15s;
}
.qs-prod-row:hover .qs-prod-title { color: var(--red); }
.qs-prod-meta {
font-size: .67rem;
color: var(--ink-3);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Empty state */
.qs-empty {
padding: 20px 18px;
font-size: .78rem;
color: var(--ink-3);
font-style: italic;
}
/* Footer — "See all results" */
.qs-footer {
border-top: 1px solid var(--rule);
background: var(--bg);
}
.qs-see-all {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 18px;
font-size: .76rem;
font-weight: 500;
color: var(--ink-3);
text-decoration: none;
max-width: 1200px;
margin: 0 auto;
transition: color .2s;
}
.qs-see-all:hover { color: var(--red); }
.qs-see-all strong { color: var(--ink); font-weight: 600; }
/* Hide on mobile — uses overlay instead */
@media (max-width: 768px) {
.qs-drop { display: none !important; }
}
/* Spinner */
.qs-spinner-wrap {
display: flex;
align-items: center;
justify-content: center;
padding: 32px 0;
}
.qs-spinner {
width: 20px;
height: 20px;
border: 2px solid var(--rule);
border-top-color: var(--red);
border-radius: 50%;
animation: qsSpin .6s linear infinite;
}
@keyframes qsSpin {
to { transform: rotate(360deg); }
}
/* ── MOBILE SEARCH GO BUTTON ─────────────────────────────────── */
.mob-search-go {
flex-shrink: 0;
width: 38px;
height: 38px;
background: var(--red);
border: none;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #fff;
margin-left: 4px;
}
.mob-search-go:active { opacity: .75; }
/* ── MOBILE QUICK RESULTS ────────────────────────────────────── */
.mob-qs-results {
flex: 1;
overflow-y: auto;
padding-bottom: 16px;
}
.mob-qs-head {
font-size: .62rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: wheat;
padding: 12px 16px 6px;
border-bottom: 1px solid var(--rule-lt);
}
.mob-qs-cat {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
border-bottom: 1px solid var(--rule-lt);
text-decoration: none;
gap: 8px;
}
.mob-qs-cat:active { background: var(--bg); }
.mob-qs-cat-label {
font-size: .8rem;
font-weight: 500;
color: white;
}
.mob-qs-cat-count {
font-size: .65rem;
color: var(--ink-3);
background: var(--rule-lt);
padding: 1px 6px;
border-radius: 10px;
flex-shrink: 0;
}
.mob-qs-prod {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
border-bottom: 1px solid var(--rule-lt);
text-decoration: none;
}
.mob-qs-prod:active { background: var(--bg); }
.mob-qs-thumb {
width: 42px;
height: 42px;
object-fit: contain;
flex-shrink: 0;
background: var(--bg);
border: 1px solid var(--rule-lt);
padding: 3px;
}
.mob-qs-prod-info { flex: 1; min-width: 0; }
.mob-qs-prod-title {
font-size: .78rem;
font-weight: 600;
color: lightgoldenrodyellow;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mob-qs-prod-meta {
font-size: .67rem;
color: white;
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mob-qs-see-all {
display: block;
padding: 14px 16px;
font-size: .78rem;
color: var(--ink-3);
text-decoration: none;
border-top: 1px solid var(--rule);
}
.mob-qs-see-all strong { color: var(--ink); }