/* =============================================================
   BestDealz International — Alibaba-style B2B Sourcing Homepage
   Theme: Dense, sourcing-focused, supplier-led discovery
   Brand: Blue #003c8c · Orange #f08c00 · Red accent #d8232a
============================================================= */

:root {
    --ali-orange:    #ff6a00;
    --ali-red:       #d8232a;
    --bd-orange:     #f08c00;
    --bd-orange-dk:  #d97800;
    --bd-orange-soft:#fff4e0;
    --bd-blue:       #003c8c;
    --bd-blue-dk:    #001f5b;
    --bd-blue-soft:  #e8efff;
    --bd-green:      #00aa55;
    --bd-green-soft: #e6f7ee;
    --hot-red:       #ee4d2d;

    --ink-900: #111418;
    --ink-800: #1f2328;
    --ink-700: #333;
    --ink-500: #666;
    --ink-400: #888;
    --ink-300: #aaa;
    --line:    #e8e8e8;
    --line-soft: #f0f0f0;
    --bg:      #fff;
    --bg-soft: #f5f5f5;
    --bg-tint: #fafafa;

    --radius:   8px;
    --radius-sm: 4px;
    --radius-lg: 12px;

    --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
    --shadow-sm: 0 4px 12px rgba(0,0,0,.06);
    --shadow-md: 0 8px 24px rgba(0,0,0,.10);
    --shadow-lg: 0 18px 50px rgba(0,0,0,.16);

    --container: 1480px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink-700);
    background: var(--bg-soft);
    font-size: 14px;
    line-height: 1.5;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color .15s; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }

.bd-container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

.i { width: 18px; height: 18px; flex-shrink: 0; }
.i-sm { width: 14px; height: 14px; }
.i-lg { width: 22px; height: 22px; }

/* ---------- Buttons ---------- */
.bd-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    border: 1px solid transparent;
}
.bd-btn-primary {
    background: var(--bd-orange); color: #fff;
}
.bd-btn-primary:hover { background: var(--bd-orange-dk); }
.bd-btn-red { background: var(--ali-red); color: #fff; }
.bd-btn-red:hover { background: #b4181f; }
.bd-btn-blue { background: var(--bd-blue); color: #fff; }
.bd-btn-blue:hover { background: var(--bd-blue-dk); }
.bd-btn-ghost {
    background: #fff; color: var(--ink-700);
    border-color: var(--line);
}
.bd-btn-ghost:hover { color: var(--bd-orange); border-color: var(--bd-orange); }
.bd-btn-outline-orange {
    background: #fff; color: var(--bd-orange);
    border: 1px solid var(--bd-orange);
}
.bd-btn-outline-orange:hover { background: var(--bd-orange); color: #fff; }
.bd-btn-lg { padding: 12px 22px; font-size: 14px; }
.bd-btn-sm { padding: 6px 12px; font-size: 12px; }

/* ---------- Top utility bar ---------- */
.topstrip {
    background: #2b2f33;
    color: #d6d8db;
    font-size: 12px;
    border-bottom: 1px solid #1a1d20;
}
.topstrip-row {
    display: flex; justify-content: space-between; align-items: center;
    height: 30px;
}
.topstrip-left, .topstrip-right { display: flex; align-items: center; gap: 0; }
.ts-link {
    color: inherit;
    padding: 0 10px;
    height: 30px;
    display: inline-flex; align-items: center; gap: 4px;
    transition: color .15s;
    border: 0; background: none; cursor: pointer;
    font: inherit;
}
.ts-link:hover { color: var(--bd-orange); }
.ts-link svg { width: 12px; height: 12px; opacity: .8; }
.ts-divider { width: 1px; height: 12px; background: rgba(255,255,255,.15); }
.ts-link strong { color: #fff; font-weight: 600; }

/* ---------- Main header (logo + search-with-tabs + actions) ---------- */
.main-header {
    background: #fff;
    padding: 18px 0;
    position: relative;
    z-index: 80;
}
.main-header-row {
    display: flex; align-items: center;
    gap: 32px;
}
.brand {
    display: inline-flex; align-items: center;
    flex-shrink: 0;
}
.brand-logo {
    height: 50px;
    width: auto;
}
.search-block { flex: 1; min-width: 0; }

/* Search tabs */
.search-tabs {
    display: flex; align-items: flex-end;
    gap: 0;
    padding-left: 6px;
}
.search-tab {
    padding: 8px 18px;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-500);
    cursor: pointer;
    transition: all .15s;
    margin-bottom: -1px;
    border-radius: 6px 6px 0 0;
    display: inline-flex; align-items: center; gap: 6px;
}
.search-tab:hover { color: var(--bd-orange); }
.search-tab.active {
    color: var(--bd-orange);
    border-bottom-color: var(--bd-orange);
    background: #fff;
}
.search-tab .pill {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 50px;
    background: var(--bd-orange);
    color: #fff;
    font-weight: 800;
    letter-spacing: .5px;
}

/* Search input */
.search-bar {
    display: flex; align-items: stretch;
    border: 2px solid var(--bd-orange);
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    height: 44px;
}
.search-input {
    flex: 1; border: 0; outline: none;
    padding: 0 16px;
    font-size: 14px;
    color: var(--ink-900);
}
.search-input::placeholder { color: var(--ink-400); }
.search-cam {
    width: 44px;
    border-left: 1px solid var(--line);
    background: #fff;
    color: var(--ink-500);
    display: grid; place-items: center;
    cursor: pointer;
}
.search-cam:hover { color: var(--bd-orange); }
.search-btn {
    background: var(--bd-orange);
    color: #fff;
    font-weight: 700;
    padding: 0 28px;
    font-size: 14px;
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer;
    border: 0;
}
.search-btn:hover { background: var(--bd-orange-dk); }
.search-suggestions {
    display: flex; gap: 14px; flex-wrap: wrap;
    padding: 8px 4px 0;
    font-size: 12px;
    color: var(--ink-400);
}
.search-suggestions strong { color: var(--ink-500); margin-right: 4px; }
.search-suggestions a {
    color: var(--ink-400);
    transition: color .15s;
}
.search-suggestions a:hover { color: var(--bd-orange); }
.search-suggestions a.hot { color: var(--ali-red); font-weight: 600; }

/* Header actions */
.header-actions {
    display: flex; align-items: center;
    gap: 18px;
    flex-shrink: 0;
}
.ha-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--ink-700);
    font-size: 13px;
    font-weight: 500;
    padding: 6px;
    border-radius: 6px;
    transition: all .15s;
    position: relative;
}
.ha-link:hover { color: var(--bd-orange); }
.ha-link svg { width: 20px; height: 20px; }
.ha-badge {
    position: absolute;
    top: -2px; right: -4px;
    min-width: 16px; height: 16px;
    border-radius: 8px;
    background: var(--ali-red);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    display: grid; place-items: center;
    padding: 0 4px;
    border: 1.5px solid #fff;
}
.signin-btn {
    background: var(--bd-orange);
    color: #fff;
    font-weight: 700;
    padding: 9px 22px;
    border-radius: 4px;
    transition: background .15s;
}
.signin-btn:hover { background: var(--bd-orange-dk); }

/* ---------- Sub-nav (after main header) ---------- */
.subnav {
    background: #fff;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 12px 0;
    position: sticky;
    top: 0;
    /* Must be above .bd-mega-backdrop (200) so the mega menu stacking context
       stays visible and clickable when the backdrop is shown */
    z-index: 210;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.subnav-row {
    display: flex; align-items: center;
    gap: 0;
}
/* ── "All Categories" mega-menu trigger button ───────────────── */
.cat-trigger-wrap {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 0 14px 0 16px;
    height: 38px;
    background: var(--bd-orange);
    color: #fff;
    font-weight: 700;
    font-size: 13.5px;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    transition: background .15s;
    flex-shrink: 0;
    white-space: nowrap;
    user-select: none;
}
.cat-trigger-wrap:hover,
.cat-trigger-wrap[aria-expanded="true"] { background: var(--bd-orange-dk); }
.cat-trigger-wrap .chev {
    width: 13px; height: 13px; flex-shrink: 0;
    transition: transform .2s;
}
.cat-trigger-wrap[aria-expanded="true"] .chev { transform: rotate(180deg); }
.cat-trigger-text { white-space: nowrap; }
/* Legacy selector kept for JS compatibility */
.cat-trigger {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 0 22px;
    height: 38px;
    background: var(--bd-orange);
    color: #fff;
    font-weight: 700;
    font-size: 13.5px;
    border-radius: 4px;
    cursor: pointer;
    transition: background .15s;
    flex-shrink: 0;
}
.cat-trigger:hover { background: var(--bd-orange-dk); }
.cat-trigger svg { width: 16px; height: 16px; }
.cat-trigger .chev { margin-left: 4px; }

.subnav-links {
    display: flex; align-items: center;
    margin-left: 22px;
    gap: 2px;
    overflow: auto;
    scrollbar-width: none;
}
.subnav-links::-webkit-scrollbar { display: none; }
.subnav-link {
    padding: 0 14px;
    height: 38px;
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-700);
    white-space: nowrap;
    border-radius: 4px;
    transition: all .15s;
}
.subnav-link:hover { color: var(--bd-orange); background: var(--bd-orange-soft); }
.subnav-link.hot { color: var(--ali-red); font-weight: 700; }
.subnav-link.class-a::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--bd-blue); }
.subnav-link.class-b::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--bd-orange); }
.subnav-link.class-c::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--bd-green); }
.subnav-link .new-pill {
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--ali-red);
    color: #fff;
    font-weight: 800;
    letter-spacing: .5px;
}
.subnav-cta {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 16px;
    height: 38px;
    background: var(--bd-blue);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    border-radius: 4px;
    flex-shrink: 0;
}
.subnav-cta:hover { background: var(--bd-blue-dk); }

/* ---------- Hero area (sidebar departments + hero banner) ---------- */
.hero-area {
    padding: 14px 0;
    background: var(--bg-soft);
}
.hero-grid {
    display: grid;
    grid-template-columns: 220px 1fr 280px;
    gap: 14px;
    align-items: stretch;
}

/* Wrapper — holds .depts + .dept-mega as siblings.
   Needed because overflow-y:auto on .depts would otherwise clip the
   absolutely-positioned mega panel. */
.depts-wrap {
    position: relative;
    min-height: 480px;
    height: 100%;
}

/* Department sidebar */
.depts {
    background: #fff;
    border-radius: var(--radius);
    padding: 6px 0;
    height: 100%;
    overflow-y: auto;
    border: 1px solid var(--line);
    position: relative;
    z-index: 1;
}
.depts::-webkit-scrollbar { width: 4px; }
.depts::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
.depts::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }

.dept {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-800);
    cursor: pointer;
    transition: all .15s ease;
    position: relative;
    border-left: 3px solid transparent;
    text-decoration: none;
    gap: 8px;
}
.dept:hover, .dept.active {
    background: linear-gradient(90deg, var(--bd-orange-soft) 0%, transparent 100%);
    color: var(--bd-orange);
    border-left-color: var(--bd-orange);
}
.dept-name {
    display: inline-flex; align-items: center; gap: 10px;
    overflow: hidden;
    flex: 1; min-width: 0;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.dept-ic {
    width: 22px; height: 22px;
    color: var(--ink-400);
    flex-shrink: 0;
    transition: color .15s;
}
.dept:hover .dept-ic, .dept.active .dept-ic { color: var(--bd-orange); }
.dept-arrow {
    color: var(--ink-300); flex-shrink: 0;
    opacity: 0;
    transform: translateX(-4px);
    transition: all .15s;
}
.dept:hover .dept-arrow, .dept.active .dept-arrow {
    color: var(--bd-orange);
    opacity: 1;
    transform: translateX(0);
}

/* Mega panel — slides out to the right of the sidebar on hover */
.dept-mega {
    position: absolute;
    left: 100%; top: 0; bottom: 0;
    width: 880px;
    min-height: 480px;
    margin-left: 1px;
    background: #fff;
    border-radius: 0 var(--radius) var(--radius) 0;
    box-shadow: 18px 18px 50px rgba(11,18,32,.16), 4px 0 0 var(--bd-orange);
    border: 1px solid var(--line);
    border-left: 0;
    padding: 0;
    display: none;
    z-index: 50;
    overflow: hidden;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}
.dept-mega.open {
    display: block;
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

/* Header bar of the mega panel */
.dm-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(90deg, var(--bd-orange-soft) 0%, #fff 60%);
    flex-shrink: 0;
}
.dm-titles { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.dm-titles h4 {
    font-size: 17px;
    font-weight: 800;
    color: var(--ink-900);
    margin: 0;
    letter-spacing: -.01em;
}
.dm-sub {
    font-size: 12px;
    color: var(--ink-500);
    font-weight: 500;
}
.dm-view-all {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px;
    font-weight: 700;
    color: var(--bd-orange);
    padding: 6px 12px;
    border-radius: 6px;
    transition: background .15s;
    text-decoration: none;
    flex-shrink: 0;
}
.dm-view-all:hover { background: rgba(240,140,0,.1); color: var(--bd-orange-dk); }

/* Body: categories grid + promo aside */
.dm-body {
    display: grid;
    grid-template-columns: 1fr 220px;
    height: calc(100% - 53px);
}

.dept-mega-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 26px;
    padding: 20px 24px 28px;
    overflow-y: auto;
    align-content: flex-start;
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 24px), transparent 100%);
}
.dept-mega-grid::-webkit-scrollbar { width: 4px; }
.dept-mega-grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }

.dm-cat h6 {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--ink-900);
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
    line-height: 1.3;
}
.dm-cat h6 a {
    color: inherit;
    transition: color .15s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: none;
}
.dm-cat h6 a:hover { color: var(--bd-orange); }

.dm-cat ul {
    display: flex; flex-direction: column;
    gap: 7px;
    list-style: none; padding: 0; margin: 0;
}
.dm-cat li a {
    font-size: 12.5px;
    color: var(--ink-500);
    transition: all .15s;
    display: inline-flex; align-items: center;
    line-height: 1.35;
    text-decoration: none;
    padding: 1px 0;
    position: relative;
}
.dm-cat li a:hover {
    color: var(--bd-orange);
    transform: translateX(3px);
}
.dm-cat li a.more {
    color: var(--bd-blue);
    font-weight: 700;
    font-size: 12px;
    margin-top: 2px;
}
.dm-cat li a.more:hover { color: var(--bd-orange); }

/* Promo aside (right column inside mega body) */
.dm-promo {
    background: linear-gradient(165deg, #001838 0%, var(--bd-blue) 100%);
    color: #fff;
    padding: 22px 20px;
    display: flex; flex-direction: column;
    position: relative;
    overflow: hidden;
}
.dm-promo::before {
    content: '';
    position: absolute;
    right: -40px; top: -40px;
    width: 160px; height: 160px;
    background: radial-gradient(circle, rgba(240,140,0,.32), transparent 60%);
    pointer-events: none;
}
.dm-promo > * { position: relative; z-index: 1; }
.dm-promo-tag {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(240,140,0,.2);
    color: var(--bd-orange);
    font-size: 9.5px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 50px;
    font-weight: 800;
    width: max-content;
    margin-bottom: 14px;
    border: 1px solid rgba(240,140,0,.32);
}
.dm-promo h5 {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 6px;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: #fff;
}
.dm-promo p {
    font-size: 12px;
    color: rgba(255,255,255,.78);
    line-height: 1.5;
    margin: 0 0 14px;
}
.dm-promo-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--bd-orange);
    color: #fff;
    padding: 10px 14px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 12.5px;
    transition: all .15s;
    width: 100%;
    text-decoration: none;
}
.dm-promo-btn:hover {
    background: var(--bd-orange-dk);
    color: #fff;
    transform: translateX(2px);
}
.dm-promo-perks {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.12);
    display: flex; flex-direction: column; gap: 7px;
    list-style: none; padding-left: 0;
    margin-bottom: 0;
}
.dm-promo-perks li {
    font-size: 11.5px;
    color: rgba(255,255,255,.85);
    display: inline-flex; align-items: center; gap: 6px;
    margin: 0;
}
.dm-promo-perks svg {
    width: 12px; height: 12px;
    color: #4ade80;
    flex-shrink: 0;
}

/* Hero banner */
.hero-banner {
    position: relative;
    min-height: 480px;
    border-radius: var(--radius);
    overflow: hidden;
    background: linear-gradient(120deg, var(--bd-blue), #2453a8 60%, var(--bd-blue-dk));
    display: flex;
}
.hero-banner-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: .42;
}
.hero-banner::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(0,31,91,.88) 0%, rgba(0,31,91,.5) 55%, rgba(0,31,91,.05) 100%);
}
.hero-banner-content {
    position: relative;
    padding: 44px 48px;
    display: flex; flex-direction: column; justify-content: center;
    color: #fff;
    z-index: 2;
    max-width: 62%;
    width: 100%;
}
.hb-tag {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(240,140,0,.2);
    border: 1px solid rgba(240,140,0,.4);
    color: var(--bd-orange);
    padding: 5px 14px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    width: max-content;
    margin-bottom: 18px;
}
.hb-tag .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--bd-orange);
    box-shadow: 0 0 0 3px rgba(240,140,0,.25);
}
.hero-banner h1 {
    font-size: 44px;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.02em;
    margin: 0 0 14px;
    color: #fff;
}
.hero-banner h1 .accent { color: var(--bd-orange); }
.hero-banner p {
    font-size: 16px;
    color: rgba(255,255,255,.85);
    line-height: 1.5;
    margin: 0 0 28px;
    max-width: 480px;
}
.hb-stats {
    display: flex; gap: 28px;
    margin-top: 24px;
    flex-wrap: wrap;
}
.hb-stat {
    color: #fff;
}
.hb-stat-num {
    font-size: 24px; font-weight: 800;
    color: var(--bd-orange);
    letter-spacing: -.01em;
}
.hb-stat-label {
    font-size: 12px;
    color: rgba(255,255,255,.7);
    margin-top: 2px;
}
.hb-cta {
    display: flex; gap: 10px; flex-wrap: wrap;
}

/* RFQ widget (right column of hero area) */
.rfq-widget {
    background: #fff;
    border-radius: var(--radius);
    padding: 22px 22px 18px;
    border: 1px solid var(--line);
    min-height: 480px;
    display: flex; flex-direction: column;
    position: relative; overflow: hidden;
}
.rfq-widget::before {
    content: '';
    position: absolute; right: -40px; top: -40px;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: var(--bd-orange-soft);
}
.rfq-widget > * { position: relative; z-index: 1; }
.rfq-tag {
    display: inline-flex; align-items: center; gap: 6px;
    width: max-content;
    background: var(--bd-blue);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.rfq-widget h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--ink-900);
    line-height: 1.2;
    margin: 0 0 6px;
    letter-spacing: -.01em;
}
.rfq-widget h3 .accent { color: var(--bd-orange); }
.rfq-widget .lead {
    font-size: 13px;
    color: var(--ink-500);
    margin: 0 0 14px;
    line-height: 1.5;
}
.rfq-form {
    display: flex; flex-direction: column;
    gap: 10px;
    flex: 1;
}
.rfq-input, .rfq-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 13px;
    background: #fff;
    color: var(--ink-900);
    outline: none;
    transition: border-color .15s;
    font-family: inherit;
}
.rfq-input:focus, .rfq-textarea:focus { border-color: var(--bd-orange); }
.rfq-textarea { resize: none; min-height: 60px; }
.rfq-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rfq-perks {
    display: flex; flex-direction: column; gap: 6px;
    padding: 10px 0 6px;
    border-top: 1px dashed var(--line);
    margin-top: 8px;
}
.rfq-perks .p {
    font-size: 11.5px;
    color: var(--ink-500);
    display: inline-flex; align-items: center; gap: 6px;
}
.rfq-perks svg {
    width: 12px; height: 12px;
    color: var(--bd-green);
}

/* ---------- Trust mini strip ---------- */
.trust-mini {
    background: #fff;
    border-radius: var(--radius);
    margin: 14px auto;
    padding: 16px 22px;
    border: 1px solid var(--line);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}
.tm-item {
    display: flex; align-items: center; gap: 12px;
}
.tm-ic {
    width: 38px; height: 38px;
    border-radius: 8px;
    background: var(--bd-orange-soft);
    color: var(--bd-orange);
    display: grid; place-items: center;
    flex-shrink: 0;
}
.tm-text .label { font-size: 13px; font-weight: 700; color: var(--ink-900); line-height: 1.2; }
.tm-text .meta { font-size: 11.5px; color: var(--ink-500); margin-top: 2px; }

/* ---------- Section frame ---------- */
.section {
    margin: 14px 0;
}
.section .bd-container > .bd-panel,
.bd-panel {
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    padding: 22px;
}
.sec-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}
.sec-head .left h2 {
    font-size: 22px; font-weight: 800; color: var(--ink-900);
    line-height: 1.2;
    margin: 0;
    letter-spacing: -.01em;
    display: flex; align-items: center; gap: 12px;
}
.sec-head .left h2 .accent { color: var(--bd-orange); }
.sec-head .left h2 .badge {
    background: var(--ali-red); color: #fff;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.sec-head .left p {
    font-size: 13px;
    color: var(--ink-500);
    margin: 4px 0 0;
}
.sec-head .right {
    display: flex; align-items: center; gap: 8px;
}
.sec-head .all-link {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 13px; font-weight: 600;
    color: var(--ink-500);
    transition: color .15s;
}
.sec-head .all-link:hover { color: var(--bd-orange); }

/* ---------- Sourcing solutions cards (3 across) ---------- */
.sourcing-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.sourcing-card {
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    padding: 28px 26px 26px;
    position: relative;
    overflow: hidden;
    transition: all .25s;
    cursor: pointer;
    min-height: 180px;
    display: flex; flex-direction: column;
}
.sourcing-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--bd-orange);
}
.sourcing-card .ic {
    width: 52px; height: 52px;
    border-radius: var(--radius);
    background: var(--bd-orange-soft);
    color: var(--bd-orange);
    display: grid; place-items: center;
    margin-bottom: 14px;
    flex-shrink: 0;
}
.sourcing-card.s-blue .ic { background: var(--bd-blue-soft); color: var(--bd-blue); }
.sourcing-card.s-green .ic { background: var(--bd-green-soft); color: var(--bd-green); }
.sourcing-card h4 {
    font-size: 17px; font-weight: 800; color: var(--ink-900);
    line-height: 1.25; margin: 0 0 8px;
    letter-spacing: -.01em;
}
.sourcing-card p {
    font-size: 13px; color: var(--ink-500);
    line-height: 1.55; margin: 0 0 16px;
    flex: 1;
}
.sourcing-card .arrow {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px; font-weight: 700;
    color: var(--bd-orange);
    transition: gap .2s;
}
.sourcing-card.s-blue .arrow { color: var(--bd-blue); }
.sourcing-card.s-green .arrow { color: var(--bd-green); }
.sourcing-card:hover .arrow { gap: 8px; }
.sourcing-card .bg-watermark {
    position: absolute;
    right: -10px; bottom: -20px;
    width: 110px; height: 110px;
    color: var(--bg-soft);
    z-index: 0;
}

/* ---------- Class section (signature tri-channel showcase) ---------- */
.class-showcase .bd-panel {
    padding: 0;
    overflow: hidden;
}
.class-tabs {
    display: flex; align-items: stretch;
    border-bottom: 1px solid var(--line);
    background: var(--bg-tint);
}
.class-tab {
    padding: 14px 26px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink-500);
    border-bottom: 3px solid transparent;
    transition: all .15s;
    cursor: pointer;
    background: none; border: 0; border-bottom: 3px solid transparent;
    display: inline-flex; align-items: center; gap: 8px;
    position: relative;
}
.class-tab:hover { color: var(--ink-900); }
.class-tab.active {
    color: var(--ink-900);
    background: #fff;
    border-bottom-color: var(--bd-orange);
}
.class-tab.tab-a.active { border-bottom-color: var(--bd-blue); }
.class-tab.tab-b.active { border-bottom-color: var(--bd-orange); }
.class-tab.tab-c.active { border-bottom-color: var(--bd-green); }
.class-tab .badge {
    font-size: 10px; padding: 2px 7px;
    border-radius: 3px;
    color: #fff;
    font-weight: 800;
    letter-spacing: .8px;
}
.class-tab.tab-a .badge { background: var(--bd-blue); }
.class-tab.tab-b .badge { background: var(--bd-orange); }
.class-tab.tab-c .badge { background: var(--bd-green); }
.class-tab .meta {
    font-size: 11.5px;
    color: var(--ink-400);
    font-weight: 500;
    margin-left: 4px;
}
.class-tab.active .meta { color: var(--ink-700); }
.class-tab .all-tab {
    margin-left: auto;
}

.class-panel {
    display: none;
    padding: 22px;
}
.class-panel.active { display: block; }
.class-panel-banner {
    display: flex; align-items: center; gap: 18px;
    padding: 14px 18px;
    background: var(--bd-orange-soft);
    border-radius: var(--radius);
    margin-bottom: 18px;
}
.class-panel.p-a .class-panel-banner { background: var(--bd-blue-soft); }
.class-panel.p-c .class-panel-banner { background: var(--bd-green-soft); }
.class-panel-banner .ic {
    width: 42px; height: 42px;
    background: #fff;
    border-radius: 8px;
    color: var(--bd-orange);
    display: grid; place-items: center;
    flex-shrink: 0;
}
.class-panel.p-a .class-panel-banner .ic { color: var(--bd-blue); }
.class-panel.p-c .class-panel-banner .ic { color: var(--bd-green); }
.class-panel-banner h4 {
    font-size: 15px; font-weight: 800;
    color: var(--ink-900);
    margin: 0;
}
.class-panel-banner p {
    font-size: 12.5px;
    color: var(--ink-500);
    margin: 2px 0 0;
}
.class-panel-banner-meta {
    display: flex; gap: 18px;
    margin-left: auto;
}
.class-panel-banner-meta .m {
    font-size: 12px; color: var(--ink-700);
    display: inline-flex; align-items: center; gap: 5px;
}
.class-panel-banner-meta .m strong { font-weight: 700; color: var(--ink-900); }

/* ---------- Product grid (Alibaba-style 6-col compact) ---------- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}
.product-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.product-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.pd-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all .2s;
    position: relative;
    display: flex; flex-direction: column;
}
.pd-card:hover {
    border-color: var(--bd-orange);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}
.pd-image {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--bg-tint);
    overflow: hidden;
}
.pd-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .3s;
}
.pd-card:hover .pd-image img { transform: scale(1.05); }
.pd-class {
    position: absolute; top: 6px; left: 6px;
    background: var(--bd-blue);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .8px;
    padding: 3px 6px;
    border-radius: 3px;
    z-index: 2;
}
.pd-class.b { background: var(--bd-orange); }
.pd-class.c { background: var(--bd-green); }
.pd-discount {
    position: absolute; top: 6px; right: 6px;
    background: var(--ali-red);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 3px;
    z-index: 2;
}
.pd-quick-actions {
    position: absolute; bottom: 8px; right: 8px;
    display: flex; flex-direction: column; gap: 5px;
    opacity: 0;
    transform: translateX(8px);
    transition: all .2s;
    z-index: 2;
}
.pd-card:hover .pd-quick-actions { opacity: 1; transform: translateX(0); }
.pd-qa {
    width: 30px; height: 30px;
    background: rgba(255,255,255,.96);
    border-radius: 6px;
    display: grid; place-items: center;
    color: var(--ink-700);
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    cursor: pointer;
    transition: all .15s;
}
.pd-qa:hover { background: var(--bd-orange); color: #fff; }
.pd-qa svg { width: 14px; height: 14px; }

.pd-body {
    padding: 10px 12px 12px;
    display: flex; flex-direction: column;
    gap: 6px;
    flex: 1;
}
.pd-title {
    font-size: 12.5px;
    color: var(--ink-800);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    min-height: 35px;
    font-weight: 500;
}
.pd-title a { color: inherit; }
.pd-title a:hover { color: var(--bd-orange); }
.pd-price-row {
    display: flex; align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
.pd-price {
    font-size: 16px; font-weight: 800;
    color: var(--ali-red);
    letter-spacing: -.01em;
}
.pd-price .from { font-size: 11px; color: var(--ink-500); font-weight: 500; margin-right: 2px; }
.pd-price-was {
    font-size: 11.5px;
    color: var(--ink-300);
    text-decoration: line-through;
}
.pd-price-range {
    font-size: 11px;
    color: var(--ink-500);
}
.pd-moq {
    font-size: 11px;
    color: var(--ink-400);
    display: inline-flex; align-items: center; gap: 4px;
}
.pd-moq strong { color: var(--ink-700); font-weight: 600; }
.pd-rating {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px;
    color: var(--ink-400);
}
.pd-rating .stars {
    color: #ff9900;
    display: inline-flex; gap: 1px;
}
.pd-rating .stars svg { width: 11px; height: 11px; fill: currentColor; }
.pd-rating .reviews { color: var(--ink-400); }

.pd-supplier {
    display: flex; align-items: center; gap: 5px;
    padding: 6px 12px;
    background: var(--bg-tint);
    border-top: 1px solid var(--line-soft);
    font-size: 10.5px;
    color: var(--ink-500);
}
.pd-supplier .flag {
    width: 14px; height: 10px;
    background: linear-gradient(0deg, #007749 33%, #fff 33% 66%, #de3831 66%);
    border-radius: 1px;
    flex-shrink: 0;
}
.pd-supplier .flag.cn {
    background: #d8232a;
    position: relative;
}
.pd-supplier .flag.cn::before {
    content: '★';
    position: absolute;
    color: #ffd700;
    font-size: 7px;
    top: 0; left: 1px;
    line-height: 1;
}
.pd-supplier .name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink-700);
    font-weight: 500;
}
.pd-supplier .verified {
    color: var(--bd-green);
    font-weight: 700;
    display: inline-flex; align-items: center; gap: 2px;
}
.pd-supplier .verified svg { width: 11px; height: 11px; }

/* Trade Assurance ribbon */
.pd-ta {
    padding: 4px 12px;
    background: var(--bd-blue-soft);
    color: var(--bd-blue);
    font-size: 10.5px;
    font-weight: 700;
    display: flex; align-items: center; gap: 5px;
    border-top: 1px solid var(--line-soft);
}
.pd-ta svg { width: 12px; height: 12px; }

/* ---------- Featured Industries (Alibaba signature) ---------- */
.industries-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
}
.industry {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--line);
    background: var(--bd-blue-dk);
}
.industry img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .3s;
    opacity: .85;
}
.industry::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.7));
    z-index: 1;
}
.industry:hover img { transform: scale(1.08); }
.industry .label {
    position: absolute; left: 12px; right: 12px; bottom: 10px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    z-index: 2;
    line-height: 1.25;
}
.industry .label .ind-count {
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    color: rgba(255,255,255,.78);
    margin-top: 2px;
}
/* Spacing breathing room around the "Hot picks this week" section */
.bd-hot-picks { margin-top: 32px; margin-bottom: 32px; }

/* ---------- Top ranking lists (3 columns) ---------- */
.ranking-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.ranking {
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    overflow: hidden;
}
.ranking-head {
    background: linear-gradient(135deg, var(--bd-orange) 0%, var(--ali-red) 100%);
    color: #fff;
    padding: 14px 18px;
    display: flex; align-items: center; justify-content: space-between;
}
.ranking.r-blue .ranking-head { background: linear-gradient(135deg, var(--bd-blue) 0%, #0050b8 100%); }
.ranking.r-green .ranking-head { background: linear-gradient(135deg, var(--bd-green) 0%, #007a3d 100%); }
.ranking-head .title {
    font-size: 15px; font-weight: 800;
    letter-spacing: -.01em;
}
.ranking-head .title .sub {
    font-size: 11px;
    font-weight: 500;
    opacity: .85;
    display: block;
    margin-top: 2px;
}
.ranking-head .all {
    font-size: 12px;
    font-weight: 600;
    opacity: .9;
    display: inline-flex; align-items: center; gap: 4px;
}
.ranking-list { padding: 6px; }
.ranking-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px;
    border-radius: 6px;
    transition: background .15s;
    cursor: pointer;
}
.ranking-item:hover { background: var(--bg-tint); }
.ranking-rank {
    width: 22px; height: 22px;
    border-radius: 4px;
    background: var(--ink-300);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: grid; place-items: center;
    flex-shrink: 0;
}
.ranking-item:nth-child(1) .ranking-rank { background: linear-gradient(135deg, #ffb000, #ff7700); }
.ranking-item:nth-child(2) .ranking-rank { background: linear-gradient(135deg, #c0c0c0, #888); }
.ranking-item:nth-child(3) .ranking-rank { background: linear-gradient(135deg, #cd7f32, #8b5a2b); }
.ranking-thumb {
    width: 50px; height: 50px;
    border-radius: 6px;
    background: var(--bg-tint);
    overflow: hidden;
    flex-shrink: 0;
}
.ranking-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ranking-info { flex: 1; min-width: 0; }
.ranking-info .title {
    font-size: 12.5px;
    color: var(--ink-800);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 4px;
}
.ranking-item:hover .title { color: var(--bd-orange); }
.ranking-info .price {
    font-size: 13px; font-weight: 800;
    color: var(--ali-red);
}
.ranking-info .price .moq {
    color: var(--ink-400); font-weight: 500; font-size: 10.5px;
    margin-left: 5px;
}

/* ---------- Top Suppliers (Alibaba signature) ---------- */
.suppliers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.supplier-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all .25s;
    cursor: pointer;
}
.supplier-card:hover {
    border-color: var(--bd-orange);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}
.sup-cover {
    position: relative;
    height: 100px;
    background: linear-gradient(135deg, var(--bd-blue-soft), var(--bd-orange-soft));
    overflow: hidden;
}
.sup-cover img { width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.sup-cover::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.3));
}
.sup-logo {
    position: absolute;
    left: 14px; bottom: -20px;
    width: 56px; height: 56px;
    border-radius: 8px;
    background: #fff;
    border: 2px solid #fff;
    box-shadow: var(--shadow-sm);
    display: grid; place-items: center;
    font-size: 18px;
    font-weight: 900;
    color: var(--bd-orange);
    z-index: 2;
}
.sup-body {
    padding: 28px 16px 16px;
}
.sup-name {
    font-size: 14px; font-weight: 700;
    color: var(--ink-900);
    line-height: 1.3;
    margin: 0 0 5px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sup-meta {
    display: flex; align-items: center; gap: 6px;
    font-size: 11.5px;
    color: var(--ink-500);
    margin-bottom: 10px;
}
.sup-meta .flag {
    width: 14px; height: 10px;
    border-radius: 1px;
}
.sup-meta .flag.cn { background: #d8232a; }
.sup-meta .flag.za { background: linear-gradient(180deg, #007749 50%, #de3831 50%); }
.sup-meta .dot { color: var(--ink-300); }
.sup-badges {
    display: flex; gap: 4px; flex-wrap: wrap;
    margin-bottom: 12px;
}
.sup-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 3px;
    background: var(--bd-orange-soft);
    color: var(--bd-orange);
    display: inline-flex; align-items: center; gap: 3px;
}
.sup-badge.gold { background: #fff4d3; color: #b8860b; }
.sup-badge.green { background: var(--bd-green-soft); color: var(--bd-green); }
.sup-badge.blue { background: var(--bd-blue-soft); color: var(--bd-blue); }
.sup-badge svg { width: 10px; height: 10px; }
.sup-stats {
    display: flex; gap: 14px;
    font-size: 11.5px;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
}
.sup-stat .num { font-size: 14px; font-weight: 800; color: var(--ink-900); display: block; }
.sup-stat .label { color: var(--ink-400); font-size: 10.5px; }
.sup-cta {
    margin-top: 12px;
    display: flex; gap: 6px;
}
.sup-cta .bd-btn { flex: 1; }

/* ---------- Horizontal product scroller ---------- */
.scroller {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    scrollbar-width: thin;
}
.scroller::-webkit-scrollbar { height: 6px; }
.scroller::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.scroller .pd-card {
    flex: 0 0 200px;
    scroll-snap-align: start;
}

/* ---------- Quick categories cards (Alibaba "Hot Picks") ---------- */
.quick-cats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}
.quick-cat {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 12px;
    text-align: center;
    transition: all .2s;
    cursor: pointer;
}
.quick-cat:hover {
    border-color: var(--bd-orange);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.qc-img {
    width: 60px; height: 60px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: var(--bg-tint);
    display: grid; place-items: center;
    overflow: hidden;
}
.qc-img img { width: 100%; height: 100%; object-fit: cover; }
.qc-name {
    font-size: 12.5px;
    color: var(--ink-700);
    font-weight: 600;
    line-height: 1.3;
}
.qc-count {
    font-size: 10.5px;
    color: var(--ink-400);
    margin-top: 2px;
}

/* ---------- Why BestDealz strip (3 columns) ---------- */
.why-strip {
    background: linear-gradient(135deg, var(--bd-blue) 0%, var(--bd-blue-dk) 100%);
    color: #fff;
    padding: 38px 28px;
    border-radius: var(--radius);
    position: relative;
    overflow: hidden;
}
.why-strip::before {
    content: '';
    position: absolute;
    right: -100px; top: -100px;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(240,140,0,.3), transparent 60%);
    pointer-events: none;
}
.why-strip-grid {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 30px;
    align-items: center;
}
.why-strip h3 {
    font-size: 28px; font-weight: 800;
    margin: 0 0 8px;
    line-height: 1.15;
    letter-spacing: -.01em;
}
.why-strip h3 .accent { color: var(--bd-orange); }
.why-strip-intro p {
    font-size: 13.5px;
    color: rgba(255,255,255,.78);
    margin: 0 0 16px;
    line-height: 1.5;
}
.why-item {
    display: flex; flex-direction: column; gap: 6px;
    padding: 0 14px;
    border-left: 2px solid rgba(255,255,255,.18);
}
.why-item .ic {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: rgba(240,140,0,.2);
    color: var(--bd-orange);
    display: grid; place-items: center;
    margin-bottom: 6px;
}
.why-item .label { font-size: 14px; font-weight: 700; color: #fff; }
.why-item .meta { font-size: 12px; color: rgba(255,255,255,.65); line-height: 1.45; }

/* ---------- Help / Sourcing center (Alibaba help links section) ---------- */
.help-center {
    background: #fff;
    border-radius: var(--radius);
    padding: 28px 26px;
    border: 1px solid var(--line);
}
.help-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}
.help-col h6 {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink-900);
    margin: 0 0 14px;
    display: flex; align-items: center; gap: 8px;
}
.help-col h6 svg {
    width: 18px; height: 18px;
    color: var(--bd-orange);
}
.help-col ul { display: flex; flex-direction: column; gap: 8px; }
.help-col li a {
    font-size: 12.5px;
    color: var(--ink-500);
    transition: color .15s;
    display: inline-flex; align-items: center; gap: 4px;
}
.help-col li a:hover { color: var(--bd-orange); }

/* ---------- Newsletter band ---------- */
.nl-band {
    background: linear-gradient(120deg, var(--bd-orange) 0%, var(--bd-orange-dk) 100%);
    color: #fff;
    padding: 36px 0;
    margin-top: 14px;
}
.nl-band-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
}
.nl-band h3 {
    font-size: 26px; font-weight: 800;
    margin: 0 0 6px;
    line-height: 1.18;
    letter-spacing: -.01em;
}
.nl-band p { font-size: 13.5px; color: rgba(255,255,255,.85); margin: 0; }
.nl-band-form {
    display: flex; gap: 6px;
    background: #fff;
    padding: 5px;
    border-radius: 6px;
    box-shadow: var(--shadow-md);
}
.nl-band-form input {
    flex: 1; border: 0; outline: none;
    padding: 0 16px;
    font-size: 14px;
    background: transparent;
    color: var(--ink-900);
}
.nl-band-form button {
    background: var(--bd-blue);
    color: #fff;
    padding: 12px 24px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 14px;
    border: 0;
    cursor: pointer;
    transition: background .15s;
}
.nl-band-form button:hover { background: var(--bd-blue-dk); }

/* ---------- Footer (dense Alibaba-style) ---------- */
.site-footer {
    background: #2b2f33;
    color: #b0b3b8;
    padding: 50px 0 0;
    font-size: 13px;
}
.foot-top-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(5, 1fr);
    gap: 30px;
    padding-bottom: 36px;
    border-bottom: 1px solid #3a3e42;
}
.foot-brand-block .brand-logo { height: 50px; margin-bottom: 16px; }
.foot-brand-block p {
    color: #888;
    line-height: 1.55;
    margin: 0 0 18px;
    font-size: 12.5px;
}
.foot-contact-list {
    display: flex; flex-direction: column; gap: 10px;
    font-size: 12.5px;
}
.foot-contact-list .item {
    display: flex; align-items: flex-start; gap: 9px;
    color: #b0b3b8;
}
.foot-contact-list svg { width: 16px; height: 16px; color: var(--bd-orange); flex-shrink: 0; margin-top: 2px; }
.foot-contact-list a { color: inherit; }
.foot-contact-list a:hover { color: var(--bd-orange); }
.foot-contact-list strong { color: #fff; font-weight: 600; }

.foot-col h6 {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin: 0 0 14px;
}
.foot-col ul { display: flex; flex-direction: column; gap: 9px; }
.foot-col a {
    color: #888;
    font-size: 12.5px;
    transition: color .15s;
    display: inline-flex; align-items: center; gap: 5px;
}
.foot-col a:hover { color: var(--bd-orange); }
.foot-col .tag {
    background: var(--ali-red); color: #fff;
    font-size: 9px; padding: 1px 5px;
    border-radius: 2px; font-weight: 800; letter-spacing: .5px;
}
.foot-col .tag.new { background: var(--bd-orange); }

/* Footer middle: payments + ships + apps */
.foot-middle {
    padding: 22px 0;
    border-bottom: 1px solid #3a3e42;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 30px;
    align-items: center;
}
.foot-middle .label {
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #888;
    font-weight: 700;
}
.foot-method-rows {
    display: flex; flex-direction: column; gap: 10px;
}
.foot-method-row {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
}
.foot-method {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    color: #ccc;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 700;
    transition: all .2s;
}
.foot-method:hover {
    background: rgba(255,255,255,.12);
    border-color: var(--bd-orange);
    color: #fff;
}
.foot-apps {
    display: flex; gap: 8px;
}
.foot-app {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 6px;
    padding: 8px 12px;
    color: #ccc;
    font-size: 11.5px;
}
.foot-app:hover { background: rgba(255,255,255,.12); border-color: var(--bd-orange); color: #fff; }
.foot-app svg { width: 22px; height: 22px; color: var(--bd-orange); }
.foot-app .l { font-size: 9px; opacity: .7; letter-spacing: .5px; text-transform: uppercase; line-height: 1.2; }
.foot-app .n { font-size: 12px; font-weight: 700; line-height: 1.2; }

/* Footer bottom */
.foot-bottom {
    padding: 22px 0;
    display: flex; justify-content: space-between; align-items: center;
    gap: 20px; flex-wrap: wrap;
    color: #888;
    font-size: 12px;
}
.foot-bottom a { color: #aaa; transition: color .15s; }
.foot-bottom a:hover { color: var(--bd-orange); }
.foot-bottom-links { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-region {
    display: inline-flex; align-items: center; gap: 6px;
    color: #ccc;
}
.foot-region .flag {
    width: 16px; height: 11px;
    background: linear-gradient(180deg, #007749 50%, #de3831 50%);
    border-radius: 1px;
}
.foot-socials { display: flex; gap: 6px; }
.foot-socials a {
    width: 32px; height: 32px;
    border-radius: 6px;
    background: rgba(255,255,255,.06);
    display: grid; place-items: center;
    color: #aaa;
    transition: all .2s;
}
.foot-socials a:hover { background: var(--bd-orange); color: #fff; }
.foot-socials svg { width: 14px; height: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 1400px) {
    .dept-mega { width: 760px; }
    .dm-body { grid-template-columns: 1fr 200px; }
}
@media (max-width: 1300px) {
    .hero-grid { grid-template-columns: 200px 1fr; }
    .rfq-widget { grid-column: 1 / -1; height: auto; }
    .dept-mega { width: 700px; }
    .dept-mega-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 22px; }
    .dm-body { grid-template-columns: 1fr 190px; }
    .industries-grid { grid-template-columns: repeat(4, 1fr); }
    .suppliers-grid { grid-template-columns: repeat(2, 1fr); }
    .product-grid { grid-template-columns: repeat(4, 1fr); }
    .quick-cats { grid-template-columns: repeat(4, 1fr); }
    .why-strip-grid { grid-template-columns: 1fr; }
    .foot-top-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
    .foot-top-grid .foot-col:nth-child(5),
    .foot-top-grid .foot-col:nth-child(6) { display: none; }
    .help-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; }
    .depts { display: none; }
    .product-grid, .product-grid.cols-5 { grid-template-columns: repeat(2, 1fr); }
    .product-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
    .industries-grid { grid-template-columns: repeat(2, 1fr); }
    .ranking-grid { grid-template-columns: 1fr; }
    .sourcing-cards { grid-template-columns: 1fr; }
    .trust-mini { grid-template-columns: repeat(2, 1fr); }
    .quick-cats { grid-template-columns: repeat(3, 1fr); }
    .nl-band-grid { grid-template-columns: 1fr; }
    .foot-top-grid { grid-template-columns: 1fr 1fr; }
    .foot-middle { grid-template-columns: 1fr; }
    .header-actions .ha-link span { display: none; }
    .topstrip-left { display: none; }
    .hero-banner h1 { font-size: 32px; }
    .hero-banner-content { padding: 30px; max-width: 100%; }
}
@media (max-width: 600px) {
    .product-grid, .product-grid.cols-5, .product-grid.cols-4 { grid-template-columns: 1fr; }
    .industries-grid, .quick-cats { grid-template-columns: repeat(2, 1fr); }
    .trust-mini { grid-template-columns: 1fr; }
    /* Footer: 2-column grid for menus, brand spans full width */
    .foot-top-grid {
        grid-template-columns: 1fr 1fr;
        gap: 26px 18px;
    }
    .foot-top-grid .foot-brand-block { grid-column: 1 / -1; }
    /* Re-show the columns that were hidden at the 1300px breakpoint */
    .foot-top-grid .foot-col:nth-child(5),
    .foot-top-grid .foot-col:nth-child(6) { display: block; }
    .foot-col h6 { font-size: 11.5px; margin-bottom: 14px; padding-bottom: 10px; }
    .foot-col ul { gap: 8px; }
    .foot-col a { font-size: 12.5px; }
    .help-grid { grid-template-columns: 1fr; }
    .hero-banner { height: auto; }
    .hero-banner-content { padding: 24px; position: static; }
    .hero-banner-bg { display: none; }
    .hero-banner h1 { font-size: 24px; }
    .rfq-widget { height: auto; }
    .class-tab { padding: 10px 14px; font-size: 12px; }
    .class-tab .meta { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE HEADER OPTIMIZATION (≤ 768px)
   Fixes: collapsed search bar, wrapping trending pills, overlapping
   topstrip items, oversized logo, icon labels eating space.
═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* ── TOPSTRIP: hide left content, compact the right ─────────── */
    .topstrip {
        font-size: 11px;
        border-bottom: 0;
    }
    .topstrip .bd-container { padding-left: 12px; padding-right: 12px; }
    .topstrip-row { height: 32px; }
    .topstrip-left {
        display: none !important;
    }
    .topstrip-right {
        width: 100%;
        justify-content: flex-end;
        gap: 0;
        overflow-x: auto;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }
    .topstrip-right::-webkit-scrollbar { display: none; }
    .topstrip-right .ts-link {
        padding: 0 9px;
        font-size: 11px;
        height: 32px;
        gap: 4px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .topstrip-right .ts-link svg { width: 11px; height: 11px; }
    .topstrip-right .ts-divider { display: none; }
    /* Hide secondary topstrip items on mobile */
    .topstrip-right > .ts-link:nth-child(1), /* Notifications */
    .topstrip-right > .ts-link[href*="about"],
    .topstrip-right > .ts-link[href*="contact"] {
        display: none;
    }

    /* ── MAIN HEADER: stack to 2 rows ───────────────────────────── */
    .main-header { padding: 10px 0; position: relative; z-index: 50; }
    .main-header .bd-container { padding-left: 12px; padding-right: 12px; }

    .main-header-row {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        gap: 10px 8px;
        align-items: center;
    }

    /* Logo: smaller */
    .brand { grid-column: 1; grid-row: 1; }
    .brand-logo, .brand img { height: 36px !important; width: auto !important; }

    /* Header actions: row 1 right side, icon-only */
    .header-actions {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        gap: 2px;
        flex-wrap: nowrap;
    }
    .header-actions .ha-link {
        padding: 8px 6px;
        gap: 0;
        min-width: 38px;
    }
    .header-actions .ha-link svg { width: 22px; height: 22px; }
    .header-actions .ha-link span:not(.ha-badge) { display: none; }
    .header-actions .ha-link .ha-badge {
        position: absolute;
        top: 2px; right: -2px;
    }
    /* The "Sign in / Register" button — on tiny mobile becomes a user-icon only */
    .signin-btn {
        padding: 8px 12px;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
    }

    /* Search block: full row 2 */
    .search-block {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
    }
    .search-tabs {
        gap: 0;
        padding-left: 0;
        overflow-x: auto;
        scrollbar-width: none;
        flex-wrap: nowrap;
        margin-bottom: 0;
    }
    .search-tabs::-webkit-scrollbar { display: none; }
    .search-tab {
        padding: 6px 11px;
        font-size: 12px;
        gap: 4px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .search-tab svg { width: 12px; height: 12px; }
    .search-tab .pill { font-size: 8px; padding: 1px 4px; }

    .search-bar {
        height: 42px;
        border-width: 1.5px;
        border-radius: 6px;
    }
    .search-input {
        padding: 0 12px;
        font-size: 13.5px;
        min-width: 0;
    }
    .search-cat {
        display: none; /* Hide category selector — full-width search is enough */
    }
    .search-cam {
        width: 38px;
        flex-shrink: 0;
    }
    .search-cam svg { width: 16px; height: 16px; }
    .search-btn {
        padding: 0 14px;
        font-size: 13px;
        flex-shrink: 0;
        gap: 4px;
    }
    .search-btn svg { width: 14px; height: 14px; }
    /* Hide the trending suggestions row on mobile (saves vertical space) */
    .search-suggestions { display: none; }

    /* ── SUB-NAV: keep only the essentials ──────────────────────── */
    .subnav { padding: 8px 0; }
    .subnav .bd-container { padding-left: 12px; padding-right: 12px; }
    .subnav-row {
        gap: 8px;
        height: auto;
    }
    .cat-trigger,
    .cat-trigger-wrap {
        flex: 1;
        padding: 0 12px;
        height: 40px;
        font-size: 13px;
        min-width: 0;
        justify-content: center;
        gap: 8px;
    }
    .cat-trigger .bars,
    .cat-trigger-wrap svg:first-child { width: 14px; height: 14px; }
    .cat-trigger .chev,
    .cat-trigger-wrap .chev { width: 11px; height: 11px; margin-left: 0; }
    .subnav-links, .nav-classes, .nav-extras { display: none !important; }
    .subnav-cta {
        padding: 0 12px;
        height: 40px;
        font-size: 12px;
        flex-shrink: 0;
        gap: 5px;
    }
    .subnav-cta svg { width: 12px; height: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════
   TINY MOBILE (≤ 480px) — further compaction
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    /* Hide topstrip entirely — chrome is too tight to be useful */
    .topstrip { display: none; }

    /* Even smaller logo */
    .brand-logo, .brand img { height: 32px !important; }

    /* Drop the Inbox icon — Wishlist + Cart only (Account is in bottom nav) */
    .header-actions .ha-link[href*="my-chats"],
    .header-actions .ha-link[href*="message"] {
        display: none;
    }
    /* Sign in becomes a tiny pill — text gets shorter on tiny screens */
    .signin-btn {
        padding: 7px 10px;
        font-size: 11px;
    }

    /* Hide the search tabs entirely — single search bar wins on tiny screens */
    .search-tabs { display: none; }
    .search-bar { height: 40px; }
    .search-btn { padding: 0 12px; }
    .search-btn span,
    .search-btn { font-size: 0; }
    .search-btn svg { font-size: 14px; }
    .search-btn::after { content: ""; }
    /* keep the SVG icon visible inside the button by ensuring it stays sized */
    .search-btn svg { width: 16px; height: 16px; }

    /* Subnav: tighter */
    .cat-trigger, .cat-trigger-wrap { font-size: 12.5px; padding: 0 10px; }
    .subnav-cta { padding: 0 10px; font-size: 11.5px; }
    .subnav-cta svg { width: 11px; height: 11px; }
}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL OVERRIDES — neutralise legacy .label rule from style.css
   (legacy theme has `.label { position:absolute; background:#FD9636 }`
   which absolutely-positions every element named "label" and slaps
   an orange pill behind it — that's what was floating over the
   "Built for SA buyers" heading and breaking other sections too.)
═══════════════════════════════════════════════════════════════════ */
.why-item .label,
.tm-text .label,
.nl-perk .label,
.foot-strip-label,
.pd-supplier-section-head .meta .label,
.bd-mega .label,
.pd-supplier-stats .stat .label,
.contact-row .label,
.story-img-badge .label {
    position: static !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    line-height: inherit !important;
    z-index: auto !important;
}

/* Industry tile labels — KEEP absolute-positioned at the BOTTOM of each
   card (overlay over the photo), but strip the legacy .label rule's
   orange background + top:10px so it doesn't become a big orange pill
   covering the image. */
.industry .label,
.industry-card .label {
    position: absolute !important;
    top: auto !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 10px !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    z-index: 2 !important;
    text-align: left;
}
/* Make the industry photo fully opaque (matches the mockup —
   was at .85 which slightly washed the image). */
.industry img { opacity: 1; }
/* Slightly darker bottom gradient so the label text reads cleanly */
.industry::before {
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55) 75%, rgba(0,0,0,.78) 100%) !important;
}
/* Same treatment for the map-card city label and other overlay labels */
.map-card .city .label,
.story-img-badge .label {
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   HERO CTA CONTRAST — make the Submit-RFQ / Browse buttons pop on
   the dark-blue gradient background (mobile + desktop both)
═══════════════════════════════════════════════════════════════════ */
.hero-banner .hb-cta .bd-btn,
.hero-banner .hb-cta a,
.hero-banner-content .hb-cta a {
    /* Ensure no legacy .btn-* dark style bleeds through */
    text-decoration: none;
    transition: all .18s ease;
}
/* Primary CTA — solid orange with shadow halo */
.hero-banner .hb-cta .bd-btn-primary,
.hero-banner-content .hb-cta a.bd-btn-primary {
    background: var(--bd-orange) !important;
    color: #fff !important;
    border: 0 !important;
    font-weight: 800;
    box-shadow: 0 6px 18px rgba(240,140,0,.42), inset 0 0 0 1px rgba(255,255,255,.15);
    letter-spacing: .2px;
}
.hero-banner .hb-cta .bd-btn-primary:hover,
.hero-banner-content .hb-cta a.bd-btn-primary:hover {
    background: var(--bd-orange-dk) !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(240,140,0,.5);
    color: #fff !important;
}
/* Ghost/secondary CTA — frosted white, dark text */
.hero-banner .hb-cta .bd-btn-ghost,
.hero-banner .hb-cta .bd-btn-outline-light,
.hero-banner-content .hb-cta a.bd-btn-ghost,
.hero-banner-content .hb-cta a.bd-btn-outline-light {
    background: rgba(255,255,255,.96) !important;
    color: var(--bd-navy-900, #001838) !important;
    border: 0 !important;
    font-weight: 800;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    letter-spacing: .2px;
}
.hero-banner .hb-cta .bd-btn-ghost:hover,
.hero-banner .hb-cta .bd-btn-outline-light:hover,
.hero-banner-content .hb-cta a.bd-btn-ghost:hover,
.hero-banner-content .hb-cta a.bd-btn-outline-light:hover {
    background: #fff !important;
    color: var(--bd-orange) !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0,0,0,.22);
}
/* Force icon color inside hero CTAs */
.hero-banner .hb-cta .bd-btn-primary svg { color: #fff; }
.hero-banner .hb-cta .bd-btn-ghost svg,
.hero-banner .hb-cta .bd-btn-outline-light svg { color: var(--bd-navy-900, #001838); }

/* Hero heading + body text — stronger weight, sharper contrast on mobile */
.hero-banner h1 {
    text-shadow: 0 2px 14px rgba(0,0,0,.35);
    color: #fff !important;
}
.hero-banner p {
    color: rgba(255,255,255,.94) !important;
    font-weight: 500;
}
.hb-stat-num { color: var(--bd-orange) !important; }
.hb-stat-label { color: rgba(255,255,255,.86) !important; }

/* "Built for SA buyers" why-strip — make sure heading is crisp white,
   labels aren't ghosted by legacy .label rule, and items have breathing
   room above the heading on mobile. */
.why-strip h3 {
    color: #fff !important;
    text-shadow: 0 1px 4px rgba(0,0,0,.18);
    margin-top: 0 !important;
    position: relative;
    z-index: 2;
}
.why-strip-intro p { color: rgba(255,255,255,.86) !important; }
.why-item .label {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin-top: 4px;
}
.why-item .meta { color: rgba(255,255,255,.7) !important; }
/* Add a top margin/padding so why-strip never feels cramped against the
   section above (extends to PC version per user request) */
.why-strip { margin-top: 10px; }

/* ═══════════════════════════════════════════════════════════════════
   ACCESSIBILITY: minimum 44px tap targets on mobile
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .ha-link, .ts-link, .search-tab, .cat-trigger, .subnav-cta {
        min-height: 38px;
    }
    .search-btn, .search-cam, .pd-qty-stepper button { min-height: 42px; }
}

/* ═══════════════════════════════════════════════════════════════════
   MEGA MENU (All Categories) — desktop dropdown, mobile drawer
═══════════════════════════════════════════════════════════════════ */
.bd-mega {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #fff;
    box-shadow: 0 30px 60px rgba(11,18,32,.18);
    border-top: 3px solid var(--bd-orange);
    display: none;
    z-index: 100;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}
.bd-mega.open { display: block; animation: fadeUp .2s ease; }
.bd-mega-mobile-head { display: none; }
.bd-mega-inner { padding-top: 18px; padding-bottom: 18px; }
.bd-mega-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px 28px;
}
.bd-mega-col h6 {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink-900);
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
    display: flex; align-items: center; gap: 8px;
}
.bd-mega-col h6 img {
    width: 18px; height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}
.bd-mega-col h6 a {
    color: inherit; text-decoration: none;
    transition: color .15s;
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bd-mega-col h6 a:hover { color: var(--bd-orange); }
.bd-mega-col h6 .bd-mega-chev {
    margin-left: auto;
    color: var(--ink-400);
    display: none; /* desktop hides accordion chevron */
    flex-shrink: 0;
}
.bd-mega-col ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 5px;
}
.bd-mega-col li a {
    font-size: 12.5px; color: var(--ink-500);
    text-decoration: none;
    transition: color .15s;
    display: inline-flex; align-items: center; gap: 4px;
}
.bd-mega-col li a:hover { color: var(--bd-orange); }
.bd-mega-col li a.view-all {
    color: var(--bd-orange); font-weight: 700; font-size: 12px;
}
.bd-mega-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    /* Between page content and the subnav (210) so it dims the page
       but never covers the mega menu which lives inside subnav's stacking context */
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.bd-mega-backdrop.show { opacity: 1; pointer-events: auto; }

@media (max-width: 1100px) {
    .bd-mega-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    /* MOBILE: convert to full-height right-side drawer with accordion sections */
    .bd-mega {
        position: fixed;
        top: 0; right: 0; left: auto;
        width: min(92vw, 380px);
        height: 100vh;
        max-height: 100vh;
        border-top: 0;
        box-shadow: -10px 0 40px rgba(0,0,0,.25);
        transform: translateX(100%);
        transition: transform .28s cubic-bezier(.2,.7,.3,1);
        display: block;
        animation: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 1001;
    }
    .bd-mega.open { transform: translateX(0); }
    /* Mobile: backdrop needs to be below the drawer (1001) */
    .bd-mega-backdrop { z-index: 1000; }
    /* While the drawer is open on mobile, BUMP .subnav's stacking context
       higher than the backdrop (1000) AND any page content. This lifts the
       whole subnav group — including the .bd-mega drawer inside it — above
       the backdrop AND above any hero/page section that creates its own
       stacking context. Note: do NOT use z-index: auto here — iOS Safari
       has a quirk where fixed children of a sticky parent without an
       explicit stacking context fall behind sibling stacking contexts. */
    body.bd-mega-open .subnav { z-index: 100001 !important; }
    /* Force the drawer to its mobile shape even if a later rule tries
       to override it (defensive against cached CSS / load order). */
    body.bd-mega-open .bd-mega {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        bottom: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        width: min(92vw, 380px) !important;
        z-index: 100002 !important;
    }
    body.bd-mega-open .bd-mega-backdrop { z-index: 100000 !important; }

    .bd-mega-mobile-head {
        display: flex; align-items: center; justify-content: space-between;
        padding: 14px 18px;
        background: var(--bd-orange);
        color: #fff;
        position: sticky; top: 0;
        z-index: 3;
    }
    .bd-mega-mobile-title {
        font-size: 15px; font-weight: 800;
        letter-spacing: -.01em;
    }
    .bd-mega-close {
        background: rgba(255,255,255,.18);
        color: #fff;
        border: 0;
        width: 34px; height: 34px;
        border-radius: 50%;
        font-size: 22px; line-height: 1;
        cursor: pointer;
        display: grid; place-items: center;
        transition: background .15s;
    }
    .bd-mega-close:hover { background: rgba(255,255,255,.3); }
    .bd-mega-inner { padding: 0; max-width: 100%; }
    .bd-mega-grid {
        display: block;
        gap: 0;
    }
    .bd-mega-col {
        border-bottom: 1px solid var(--line);
    }
    .bd-mega-col h6 {
        margin: 0; padding: 14px 18px;
        font-size: 14px;
        border-bottom: 0;
        cursor: pointer;
        user-select: none;
        background: #fff;
        transition: background .15s;
        gap: 12px;
    }
    .bd-mega-col h6 a {
        flex: 1;
        font-weight: 700;
    }
    .bd-mega-col h6 .bd-mega-chev {
        display: block;
        transition: transform .2s;
        color: var(--ink-400);
    }
    .bd-mega-col.open h6 {
        background: var(--bd-orange-soft);
    }
    .bd-mega-col.open h6 .bd-mega-chev {
        transform: rotate(180deg);
        color: var(--bd-orange);
    }
    .bd-mega-col ul {
        display: none;
        background: var(--bg-tint);
        padding: 8px 18px 14px 50px;
        gap: 4px;
    }
    .bd-mega-col.open ul { display: flex; }
    .bd-mega-col li a {
        font-size: 13.5px;
        color: var(--ink-700);
        padding: 9px 0;
        min-height: 38px;
        display: inline-flex; align-items: center;
        line-height: 1.35;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   HOMEPAGE SECTIONS — COMPREHENSIVE MOBILE AUDIT
   Fixes: cramped padding, oversized typography, grid overflow,
   broken side cards, tab overflow. Performance: content-visibility
   on below-fold sections for faster initial paint.
═══════════════════════════════════════════════════════════════════ */

/* ── Below-fold sections: skip rendering until near viewport ── */
.bd-section,
.class-showcase,
.suppliers-grid,
.help-center,
.brands-strip,
.testi-grid,
.blog-grid {
    content-visibility: auto;
    contain-intrinsic-size: auto 400px;
}

/* ── Tablet (≤ 1100px) — homepage hero + section adjustments ── */
@media (max-width: 1100px) {
    .home-hero { padding: 20px 0 36px; }
    .hero-side { gap: 12px; }
    .hero-side-card { min-height: 180px; padding: 18px 18px; }
    .hero-banner { min-height: 360px; }
    .hero-slide { padding: 38px 32px; min-height: 380px; }
    .hero-slide h1 { font-size: clamp(28px, 4vw, 44px); }
    .hero-slide p { font-size: 16px; }
    .hb-stats { gap: 18px; }
    .hb-stat-num { font-size: 20px; }
}

/* ── Tablet portrait + mobile landscape (≤ 900px) ── */
@media (max-width: 900px) {
    /* THE empty-space fix: hide the depts WRAPPER (not just .depts inside it)
       so the 460px-tall placeholder column doesn't reserve space on mobile. */
    .depts-wrap { display: none !important; }

    /* Section padding — tighter */
    .bd-section, .section { padding: 28px 0; }
    .bd-section.tight, .section.tight { padding: 18px 0; }

    /* Section heads — smaller, fewer margins */
    .sec-head { margin-bottom: 18px; gap: 14px; }
    .sec-head h2,
    .sec-head .left h2 {
        font-size: clamp(18px, 3.4vw, 22px);
        line-height: 1.2;
    }
    .sec-head .left p { font-size: 13px; margin-top: 4px; }
    .sec-head .right { width: 100%; }
    .sec-head .all-link { font-size: 12.5px; padding: 7px 12px; }

    /* Hero area on tablet — rfq widget collapses (already in CSS); slim it */
    .rfq-widget { padding: 18px; min-height: auto; height: auto; }
    .rfq-widget h3 { font-size: 17px; }

    /* Hero banner — readable on tablet, premium feel */
    .hero-area { padding: 10px 0 18px; }
    .hero-grid { gap: 12px; }
    .hero-banner {
        min-height: 360px;
        height: auto;
        border-radius: var(--radius);
        position: relative;
    }
    .hero-banner-bg { opacity: .35; }
    .hero-banner::before {
        background: linear-gradient(135deg, rgba(0,31,91,.92) 0%, rgba(0,31,91,.65) 55%, rgba(0,31,91,.35) 100%);
    }
    .hero-banner-content {
        max-width: 100%;
        padding: 30px 26px 26px;
        position: static;
        height: auto;
    }
    .hb-tag { margin-bottom: 14px; }
    .hero-banner h1 {
        font-size: clamp(24px, 4vw, 34px);
        margin-bottom: 10px;
        line-height: 1.12;
    }
    .hero-banner p {
        font-size: 14px;
        line-height: 1.55;
        margin-bottom: 20px;
        max-width: 100%;
    }
    .hb-cta {
        gap: 8px;
        flex-wrap: wrap;
        display: flex;
    }
    .hb-cta a {
        flex: 1 1 auto;
        min-width: 160px;
        justify-content: center;
    }
    .hb-stats {
        gap: 0;
        margin-top: 18px;
        padding-top: 16px;
        border-top: 1px solid rgba(255,255,255,.15);
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }
    .hb-stat {
        text-align: center;
        padding: 0 8px;
        border-right: 1px solid rgba(255,255,255,.12);
    }
    .hb-stat:last-child { border-right: 0; }
    .hb-stat-num { font-size: 18px; }
    .hb-stat-label { font-size: 10.5px; }

    /* Class showcase tabs — scroll horizontally if cramped */
    .class-tabs {
        overflow-x: auto;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }
    .class-tabs::-webkit-scrollbar { display: none; }
    .class-tab { flex-shrink: 0; padding: 12px 18px; font-size: 13.5px; }
    .class-tab .badge { font-size: 9px; }
    .class-tab .all-link { display: none; }
    .class-panel { padding: 14px; }
    .class-panel-banner {
        gap: 12px; padding: 10px 14px;
        flex-wrap: wrap;
    }
    .class-panel-banner h4 { font-size: 13.5px; }
    .class-panel-banner p { font-size: 11.5px; }
    .class-panel-banner-meta { gap: 12px; margin-left: 0; width: 100%; padding-top: 8px; border-top: 1px dashed var(--line); }
    .class-panel-banner-meta .m { font-size: 11.5px; }

    /* Trust mini strip — 2 cols */
    .trust-mini { padding: 14px 16px; gap: 14px; grid-template-columns: repeat(2, 1fr); }
    .tm-ic { width: 34px; height: 34px; }
    .tm-ic svg { width: 17px; height: 17px; }
    .tm-text .label { font-size: 12.5px; }
    .tm-text .meta { font-size: 11px; }

    /* Sourcing cards */
    .sourcing-card { min-height: 150px; padding: 22px 20px; }
    .sourcing-card h4 { font-size: 16px; }
    .sourcing-card p { font-size: 12.5px; }

    /* Suppliers — single column for tablet portrait */
    .suppliers-grid { grid-template-columns: 1fr; }

    /* Why strip — stack everything */
    .why-strip { padding: 26px 22px; }
    .why-strip h3 { font-size: 22px; }
    .why-strip-grid { grid-template-columns: 1fr; gap: 18px; }
    .why-item { border-left: 0; padding: 10px 0 0; border-top: 1px solid rgba(255,255,255,.12); }
    .why-item:first-of-type { border-top: 0; padding-top: 0; }

    /* Help center */
    .help-center { padding: 22px 20px; }
    .help-grid { gap: 24px; }

    /* Newsletter band — keep readable */
    .nl-band { padding: 28px 0; }
    .nl-band h3 { font-size: 22px; }
    .nl-band p { font-size: 13px; }
    .nl-band-form { padding: 4px; }
    .nl-band-form input { padding: 0 12px; font-size: 13.5px; }
    .nl-band-form button { padding: 10px 18px; font-size: 13px; }

    /* Brands strip */
    .brands-strip { padding: 30px 0; }
    .brands-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
    .brand-item { padding: 16px 10px; }
    .brand-item .logo-text { font-size: 14px; }

    /* Testimonials + blog */
    .testi-grid, .blog-grid { gap: 16px; }
    .testi { padding: 22px 20px; }
    .testi-text { font-size: 13.5px; }
}

/* ── Mobile (≤ 600px) ── */
@media (max-width: 600px) {
    /* Tighter sections */
    .bd-section, .section { padding: 22px 0; }
    .bd-container { padding-left: 12px; padding-right: 12px; }

    /* Section heads — even tighter */
    .sec-head { margin-bottom: 14px; flex-wrap: wrap; }
    .sec-head h2,
    .sec-head .left h2 {
        font-size: 17px;
        line-height: 1.2;
        flex-wrap: wrap;
    }
    .sec-head h2 .badge { font-size: 9px; padding: 2px 6px; }
    .sec-head .left p { font-size: 12.5px; }

    /* Hero area on mobile — clean, premium, no empty space */
    .hero-area { padding: 8px 0 14px; }
    .home-hero { padding: 8px 0 14px; }
    .home-hero-grid, .hero-grid { gap: 10px; }
    .hero-banner {
        min-height: 300px;
        height: auto;
        border-radius: var(--radius);
    }
    /* Make the bg image more visible behind the gradient on phone */
    .hero-banner-bg { opacity: .42; }
    .hero-banner::before {
        background: linear-gradient(160deg, rgba(0,31,91,.94) 0%, rgba(0,31,91,.7) 55%, rgba(0,31,91,.35) 100%);
    }
    .hero-banner-content {
        padding: 24px 20px 22px;
        position: static;
    }
    .hb-tag {
        font-size: 9.5px;
        padding: 4px 11px;
        margin-bottom: 12px;
        letter-spacing: 1.2px;
    }
    .hero-banner h1 {
        font-size: 22px;
        line-height: 1.13;
        letter-spacing: -.02em;
        margin-bottom: 10px;
    }
    .hero-banner p {
        font-size: 13px;
        line-height: 1.5;
        margin-bottom: 16px;
    }
    .hb-cta {
        gap: 7px;
        display: flex;
        flex-wrap: wrap;
    }
    .hb-cta a {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        justify-content: center;
        font-size: 12.5px;
        padding: 10px 12px;
        gap: 6px;
    }
    .hb-cta a svg { width: 13px !important; height: 13px !important; }
    /* Stats in 2x2 grid on small mobile so they don't squish */
    .hb-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px 0;
        margin-top: 16px;
        padding-top: 14px;
    }
    .hb-stat { border-right: 1px solid rgba(255,255,255,.12); }
    .hb-stat:nth-child(2n) { border-right: 0; }
    .hb-stat-num { font-size: 17px; }
    .hb-stat-label { font-size: 10px; }
    /* Hero side (if used) */
    .hero-side { flex-direction: column; }
    .hero-side-card { min-height: 140px; padding: 16px 18px; }
    .hero-side-card h4 { font-size: 17px; margin: 10px 0 4px; }
    .hero-side-card p { font-size: 12px; }

    /* RFQ widget on mobile — pull it tighter */
    .rfq-widget { padding: 16px 16px 14px; height: auto; }
    .rfq-widget h3 { font-size: 16px; line-height: 1.2; }

    /* RFQ widget */
    .rfq-widget { padding: 16px; }
    .rfq-widget h3 { font-size: 16px; }
    .rfq-widget .lead { font-size: 12.5px; margin-bottom: 12px; }
    .rfq-input, .rfq-textarea { padding: 9px 10px; font-size: 12.5px; }
    .rfq-row { gap: 6px; }

    /* Trust mini — single column */
    .trust-mini { grid-template-columns: 1fr; padding: 12px 14px; gap: 10px; }
    .trust-mini { margin: 8px auto; }
    .tm-item { gap: 10px; }

    /* Sourcing cards */
    .sourcing-card { min-height: 130px; padding: 18px 18px; }
    .sourcing-card .ic { width: 42px; height: 42px; margin-bottom: 10px; }
    .sourcing-card h4 { font-size: 15px; }
    .sourcing-card p { font-size: 12px; line-height: 1.5; margin-bottom: 12px; }

    /* Class panel — even tighter */
    .class-panel { padding: 10px; }
    .class-panel-banner {
        gap: 10px; padding: 10px 12px;
    }
    .class-panel-banner .ic { width: 34px; height: 34px; }
    .class-panel-banner h4 { font-size: 13px; }
    .class-panel-banner p { font-size: 11px; }
    .class-panel-banner-meta { gap: 8px; }
    .class-panel-banner-meta .m { font-size: 10.5px; }

    /* Product grids — keep 2 cols on mobile (NOT 1 — too sparse) */
    .product-grid,
    .product-grid.cols-5,
    .product-grid.cols-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .pd-card { border-radius: 8px; }
    .pd-image { padding: 0; }
    .pd-image img { padding: 8px; }
    .pd-body { padding: 8px 10px 12px; gap: 4px; }
    .pd-title { font-size: 11.5px; min-height: 32px; }
    .pd-price { font-size: 13px; }
    .pd-supplier { padding: 5px 10px; font-size: 9.5px; }
    .pd-supplier .verified svg { width: 9px; height: 9px; }
    .pd-supplier .name { font-size: 9.5px; }
    .pd-moq { font-size: 10px; }
    .pd-class { font-size: 8px; padding: 2px 5px; }

    /* Industries grid — 2 cols */
    .industries-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .industry .label { font-size: 11.5px; left: 10px; right: 10px; bottom: 8px; }
    .industry .label .count { font-size: 9.5px; }

    /* Top suppliers — full width single card */
    .suppliers-grid { grid-template-columns: 1fr; gap: 12px; }
    .supplier-card { padding: 0; }
    .sup-cover { height: 80px; }
    .sup-logo { width: 48px; height: 48px; left: 12px; bottom: -18px; font-size: 15px; }
    .sup-body { padding: 24px 14px 14px; }
    .sup-name { font-size: 13.5px; }
    .sup-meta { font-size: 11px; }

    /* Quick categories — 2 cols, smaller circles */
    .quick-cats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .quick-cat { padding: 12px 10px; }
    .qc-img { width: 50px; height: 50px; margin-bottom: 6px; }
    .qc-name { font-size: 11.5px; }
    .qc-count { font-size: 10px; }

    /* Brands strip */
    .brands-strip { padding: 22px 0; }
    .brands-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .brand-item { padding: 12px 8px; aspect-ratio: 5/3; }
    .brand-item .logo-text { font-size: 12.5px; }

    /* Ranking grid */
    .ranking-grid { gap: 10px; }
    .ranking-head { padding: 12px 14px; }
    .ranking-head .title { font-size: 13.5px; }
    .ranking-head .title .sub { font-size: 10.5px; }
    .ranking-item { padding: 7px 6px; gap: 8px; }
    .ranking-rank { width: 20px; height: 20px; font-size: 10.5px; }
    .ranking-thumb { width: 44px; height: 44px; }
    .ranking-info .title { font-size: 11.5px; }
    .ranking-info .price { font-size: 12px; }

    /* Why strip */
    .why-strip { padding: 22px 18px; border-radius: var(--radius); }
    .why-strip h3 { font-size: 19px; }
    .why-strip-intro p { font-size: 12.5px; }

    /* Help center */
    .help-center { padding: 20px 16px; }
    .help-grid { gap: 18px; grid-template-columns: 1fr; }
    .help-col h6 { font-size: 13px; margin-bottom: 10px; }
    .help-col ul { gap: 6px; }
    .help-col li a { font-size: 12.5px; }

    /* Newsletter — compact */
    .nl-band { padding: 22px 0; }
    .nl-band h3 { font-size: 19px; }
    .nl-band-form { flex-direction: row; }
    .nl-band-form input { font-size: 13px; min-width: 0; }
    .nl-band-form button { padding: 9px 14px; font-size: 12.5px; flex-shrink: 0; }

    /* Testimonials + blog */
    .testi { padding: 18px 16px; }
    .testi-text { font-size: 13px; }
    .blog-card { border-radius: 10px; }
    .blog-body { padding: 14px 16px 18px; }
    .blog-title { font-size: 15px; }

    /* Promo banners (if used elsewhere) */
    .promo-banners { gap: 10px; }
    .promo-banner { padding: 24px 22px; min-height: 180px; }
    .promo-banner h3 { font-size: 20px; }
    .promo-banner p { font-size: 13px; }

    /* Class strip mini */
    .class-strip { padding: 18px 0; }
    .class-strip-grid { gap: 8px; }
    .class-mini { padding: 14px 14px; }
    .class-mini-ic { width: 40px; height: 40px; }
    .class-mini h5 { font-size: 14px; }
    .class-mini-meta { font-size: 11px; }
}

/* ── Tiny mobile (≤ 400px) ── */
@media (max-width: 400px) {
    .bd-container { padding-left: 10px; padding-right: 10px; }
    .hero-banner h1 { font-size: 19px; }
    .hero-banner p { font-size: 12px; }
    .industries-grid { grid-template-columns: 1fr 1fr; }
    .quick-cats { grid-template-columns: 1fr 1fr; }
    .product-grid,
    .product-grid.cols-5,
    .product-grid.cols-4 { grid-template-columns: 1fr; }
    .pd-card { display: grid; grid-template-columns: 110px 1fr; }
    .pd-card .pd-image { aspect-ratio: 1/1; }
    .pd-card .pd-body { padding: 10px 12px; }
    .pd-card .pd-title { font-size: 12.5px; }
    .brands-grid { grid-template-columns: repeat(2, 1fr); }
    .nl-band h3 { font-size: 17px; }
    .nl-band-form button { padding: 9px 11px; font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE HERO CRISPNESS FIX (≤ 768px)
   Strips the faded background photo, replaces the multi-stop overlay
   with a dense solid navy, removes text-shadow blur, and forces solid
   colour tokens so every layer renders pixel-sharp on mobile.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Kill the unsplash photo entirely on mobile — it bleeds through and
       softens every layer above it */
    .hero-banner-bg { display: none !important; opacity: 0 !important; }

    /* Solid premium navy gradient (no photo, no semi-transparent gradient
       overlay = no haze) */
    .hero-banner {
        background: linear-gradient(135deg, #002766 0%, #003a85 55%, #001b40 100%) !important;
    }
    .hero-banner::before {
        background: none !important;
        display: none;
    }

    /* Crisp text — drop blur shadows, force solid white, antialias */
    .hero-banner,
    .hero-banner-content {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
    .hero-banner h1 {
        text-shadow: none !important;
        color: #fff !important;
        font-weight: 800;
        letter-spacing: -.01em;
    }
    .hero-banner p {
        color: #e6ecf5 !important;
        text-shadow: none !important;
        font-weight: 500;
    }

    /* Tag pill — brighten so it reads at a glance */
    .hb-tag {
        background: rgba(240,140,0,.28) !important;
        border-color: rgba(240,140,0,.7) !important;
        color: #ffc066 !important;
        text-shadow: none !important;
    }

    /* CTAs — solid colors, no translucency */
    .hero-banner .hb-cta a,
    .hero-banner .hb-cta .bd-btn {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .hero-banner .hb-cta .bd-btn-primary,
    .hero-banner-content .hb-cta a.bd-btn-primary {
        background: #f08c00 !important;
        color: #fff !important;
        box-shadow: 0 4px 12px rgba(0,0,0,.25) !important;
    }
    .hero-banner .hb-cta .bd-btn-ghost,
    .hero-banner .hb-cta .bd-btn-outline-light,
    .hero-banner-content .hb-cta a.bd-btn-ghost,
    .hero-banner-content .hb-cta a.bd-btn-outline-light {
        background: #ffffff !important;
        color: #001838 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,.25) !important;
    }

    /* Stats — solid orange numbers, readable labels */
    .hb-stat-num   { color: #ffa733 !important; text-shadow: none !important; }
    .hb-stat-label { color: #c9d4e3 !important; text-shadow: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   READABILITY BUMP — frontend-wide font-size increase (≈ +3px)
   Loaded last so it wins the cascade. Targets the most-visible content
   text. Intentionally leaves badges / pills / tiny meta labels alone
   so the visual hierarchy stays intact.
═══════════════════════════════════════════════════════════════════ */

/* ── Base body (affects elements without an explicit font-size) ── */
body { font-size: 17px; line-height: 1.6; }

/* ── Paragraphs & list copy ────────────────────────────────────── */
.bd-container p,
.bd-container li,
section p, article p,
.bj-card p, .ba-card p,
.dx-page-head p, .cl-hero p,
.cl-sec-head .sub, .sec-head .left p { font-size: 16px; line-height: 1.65; }

/* ── Form fields & buttons ─────────────────────────────────────── */
input[type=text], input[type=email], input[type=tel],
input[type=password], input[type=number], input[type=search],
input[type=url], textarea, select { font-size: 16px; }

.bj-form-group input, .bj-form-group select, .bj-form-group textarea { font-size: 15.5px; }
.bj-form-group label { font-size: 14px; }

.bd-btn { font-size: 15.5px; }
.bd-btn-lg { font-size: 17px; }
.bd-btn-sm { font-size: 14px; }

/* ── Product cards (biggest visual impact across catalog) ──────── */
.pd-card .pd-title, .pd-title,
.cc-card .cc-title, .cc-title,
.product-card .product-name { font-size: 15.5px; line-height: 1.4; }

.pd-card .pd-price, .pd-price,
.cc-card .cc-price-now, .cc-price-now,
.product-card .product-price { font-size: 18px; }

.pd-card .pd-meta, .pd-card .pd-shipping, .pd-card .pd-supplier,
.cc-card .cc-meta, .cc-card .cc-supplier { font-size: 13px; }

/* ── Section headings ──────────────────────────────────────────── */
.sec-head h2, .cl-sec-head h2, .dx-page-head h1,
.bj-page-head h1, .ba-title { font-size: 24px; }
.ba-card-head h3 { font-size: 18px; }

/* ── Card heads (account / checkout / suppliers) ───────────────── */
.bj-card-head h2, .bj-card-head h3,
.bj-auth-head h3 { font-size: 18px; }
.bj-auth-head .sub { font-size: 13.5px; }
.bj-auth-foot { font-size: 13.5px; }
.bj-summary-row { font-size: 15px; }
.bj-summary-row.total .val { font-size: 25px; }

/* ── Header / top utility bar ──────────────────────────────────── */
.search-input { font-size: 16px; }
.ha-link, .ts-link { font-size: 13.5px; }
.subnav-link, .subnav-cta, .cat-trigger-text { font-size: 15.5px; }

/* ── Breadcrumbs ───────────────────────────────────────────────── */
.bj-breadcrumb ol, .bj-breadcrumb li, .bj-breadcrumb a { font-size: 14px; }

/* ── Supplier cards ────────────────────────────────────────────── */
.sp-card .sp-name { font-size: 18px; }
.sp-card .sp-slogan, .sp-card .sp-desc { font-size: 14px; }
.sp-stat .n { font-size: 16px; }
.sp-mini-name { font-size: 12.5px; }
.sp-mini-price { font-size: 13.5px; }

/* ── Footer ────────────────────────────────────────────────────── */
.foot-col a, .foot-col p, .foot-col li { font-size: 14px; }
.foot-col h6 { font-size: 13.5px; }
.foot-bottom { font-size: 13px; }

/* ── Tables (orders / dashboard) ───────────────────────────────── */
.bj-table { font-size: 14.5px; }
.bj-table th { font-size: 12.5px; }

/* ── Toolbars & filters ────────────────────────────────────────── */
.dx-toolbar, .cl-toolbar { font-size: 14.5px; }
.cl-toolbar-count, .dx-filter-item { font-size: 14px; }
.dx-sidebar h4, .dx-filter-head h6 { font-size: 14.5px; }

/* ── Cart line items ───────────────────────────────────────────── */
.bj-cart-info h4 { font-size: 15.5px; }
.bj-cart-price { font-size: 16px; }
.bj-cart-subtotal { font-size: 18px; }
.bj-cart-meta { font-size: 13px; }

/* ── Mobile — slightly smaller than desktop but still comfortable ── */
@media (max-width: 600px) {
    body { font-size: 16px; line-height: 1.6; }

    .bd-container p,
    .bd-container li,
    section p, article p,
    .bj-card p, .ba-card p { font-size: 15px; line-height: 1.6; }

    .pd-card .pd-title, .pd-title,
    .cc-card .cc-title, .cc-title,
    .product-card .product-name { font-size: 14.5px; }
    .pd-card .pd-price, .pd-price,
    .cc-card .cc-price-now, .cc-price-now { font-size: 17px; }

    .sec-head h2, .cl-sec-head h2, .dx-page-head h1,
    .bj-page-head h1, .ba-title { font-size: 22px; }

    .bj-card-head h2, .bj-card-head h3,
    .bj-auth-head h3, .ba-card-head h3 { font-size: 17px; }

    input[type=text], input[type=email], input[type=tel],
    input[type=password], input[type=number], input[type=search],
    textarea, select { font-size: 16px; } /* keep ≥16px on mobile to prevent iOS zoom-on-focus */

    .bd-btn { font-size: 15px; }
    .bd-btn-lg { font-size: 16px; }

    .subnav-link, .subnav-cta { font-size: 14.5px; }

    .sp-card .sp-name { font-size: 16.5px; }
    .sp-card .sp-slogan, .sp-card .sp-desc { font-size: 13.5px; }
}