/* ==========================================================================
   B2B THEME — Stitch "ProTrade Global" design system
   Self-contained, prefixed with .b2b-* to avoid clashing with the base
   (Bootstrap-based) theme styles. Loaded AFTER css/style.css.
   ========================================================================== */

:root {
    /* Surfaces / neutrals */
    --b2b-surface: #f8fafc;
    --b2b-surface-dim: #d8dadc;
    --b2b-surface-lowest: #ffffff;
    --b2b-surface-low: #f2f4f6;
    --b2b-surface-container: #eceef0;
    --b2b-surface-high: #e6e8ea;
    --b2b-surface-highest: #e0e3e5;
    --b2b-on-surface: #191c1e;
    --b2b-on-surface-variant: #45464d;
    --b2b-outline: #76777d;
    --b2b-outline-variant: #c6c6cd;
    --b2b-inverse-surface: #2d3133;
    --b2b-inverse-on-surface: #eff1f3;

    /* Primary — deep navy (authoritative brand) */
    --b2b-primary: #0f172a;
    --b2b-on-primary: #ffffff;
    --b2b-primary-container: #131b2e;
    --b2b-on-primary-container: #7c839b;

    /* Secondary — emerald (verified / accent) */
    --b2b-secondary: #10b981;
    --b2b-on-secondary: #ffffff;
    --b2b-secondary-container: #d1fae5;
    --b2b-on-secondary-container: #065f46;
    --b2b-secondary-accent: #6ee7b7;

    /* Tertiary — slate */
    --b2b-tertiary: #64748b;

    /* Feedback */
    --b2b-success: #10b981;
    --b2b-error: #ba1a1a;
    --b2b-warning: #ff9900;
    --b2b-info: #2cc1d8;
    --b2b-on-error: #ffffff;

    /* Type */
    --b2b-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Radii */
    --b2b-radius-sm: .25rem;
    --b2b-radius: .5rem;
    --b2b-radius-md: .75rem;
    --b2b-radius-lg: 1rem;
    --b2b-radius-xl: 1.5rem;
    --b2b-radius-full: 9999px;

    /* Layout */
    --b2b-container: 1440px;
    --b2b-gutter: 24px;
    --b2b-margin: 40px;
    --b2b-margin-mobile: 16px;
    --b2b-header-h: 72px;

    /* Elevation */
    --b2b-shadow-card: 0 2px 4px rgba(15, 23, 42, .05);
    --b2b-shadow-md: 0 10px 15px rgba(15, 23, 42, .10);
    --b2b-shadow-lg: 0 20px 40px rgba(15, 23, 42, .14);
}

/* ------------------------------------------------------------------ Fonts */
/* Self-hosted Material Symbols (full variable font). Shipped as a theme asset so the
   storefront icons never depend on Google Fonts / the runtime google-fonts cache / the
   storage symlink. `font-display: block` avoids the raw ligature-text flash ("favorite",
   "chat_bubble", …) while the glyph loads. Keep in sync with public/themes/b2b/fonts/. */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 700;
    font-display: block;
    src: url(../fonts/material-symbols/material-symbols-outlined.woff2) format('woff2');
}
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    user-select: none;
}
.material-symbols-outlined.b2b-fill { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }

/* --------------------------------------------------------------- Layout */
.b2b-container {
    width: 100%;
    max-width: var(--b2b-container);
    margin-inline: auto;
    padding-inline: var(--b2b-margin);
}

.b2b-scope { font-family: var(--b2b-font); color: var(--b2b-on-surface); }

/* ------------------------------------------------------------- Buttons */
.b2b-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: var(--b2b-font);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1;
    border-radius: var(--b2b-radius);
    padding: .78rem 1.35rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .15s ease, opacity .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
    text-decoration: none !important;
    white-space: nowrap;
}
.b2b-btn:active { transform: scale(.97); }
.b2b-btn-primary { background: var(--b2b-primary); color: var(--b2b-on-primary) !important; }
.b2b-btn-primary:hover { opacity: .9; color: #fff !important; box-shadow: var(--b2b-shadow-md); }
.b2b-btn-outline { background: transparent; border-color: var(--b2b-outline-variant); color: var(--b2b-primary) !important; }
.b2b-btn-outline:hover { background: #fff; border-color: var(--b2b-primary); }
.b2b-btn-accent { background: var(--b2b-secondary-container); color: var(--b2b-on-secondary-container) !important; }
.b2b-btn-accent:hover { opacity: .9; }
.b2b-btn-ghost { background: transparent; color: var(--b2b-on-surface-variant) !important; }
.b2b-btn-ghost:hover { background: var(--b2b-surface-low); color: var(--b2b-primary) !important; }
.b2b-btn-lg { padding: 1rem 2rem; font-size: 15px; border-radius: var(--b2b-radius-md); }
.b2b-btn-block { width: 100%; }

/* -------------------------------------------------------------- Badges */
.b2b-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .8rem;
    border-radius: var(--b2b-radius-full);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}
.b2b-badge-verified { background: var(--b2b-secondary-container); color: var(--b2b-on-secondary-container); }
.b2b-badge .material-symbols-outlined { font-size: 16px; }

/* ------------------------------------------------------- Section titles */
.b2b-section { padding: 72px 0; }
.b2b-section-head { margin-bottom: 48px; }
.b2b-section-title {
    font-family: var(--b2b-font);
    font-size: 32px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--b2b-on-surface);
    margin: 0 0 8px;
}
.b2b-section-sub { font-size: 16px; line-height: 1.5; color: var(--b2b-on-surface-variant); margin: 0; }
.b2b-link-more {
    display: inline-flex; align-items: center; gap: .35rem;
    color: var(--b2b-primary); font-weight: 700; font-size: 14px; text-decoration: none;
}
.b2b-link-more:hover { color: var(--b2b-secondary); text-decoration: underline; }

/* ------------------------------------------------------------ Cards base */
.b2b-card {
    background: var(--b2b-surface-lowest);
    border: 1px solid var(--b2b-outline-variant);
    border-radius: var(--b2b-radius-xl);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.b2b-card-hover:hover { transform: translateY(-4px); box-shadow: var(--b2b-shadow-md); }

@media (max-width: 1024px) {
    .b2b-section { padding: 56px 0; }
    .b2b-section-title { font-size: 26px; }
}
@media (max-width: 640px) {
    .b2b-container { padding-inline: var(--b2b-margin-mobile); }
    .b2b-section { padding: 40px 0; }
    .b2b-section-head { margin-bottom: 28px; }
    .b2b-section-title { font-size: 24px; letter-spacing: -.01em; }
}

/* ==========================================================================
   COMPONENT BLOCKS (header / footer / home sections) are appended below.
   ========================================================================== */
/* =============================================================== HEADER === */
.b2b-header { position: relative; z-index: 900; background: var(--b2b-surface-lowest); font-family: var(--b2b-font); border: 0; box-shadow: none; }
.b2b-header a { text-decoration: none; }
.b2b-header .header-top,
.b2b-header .header-middle,
.b2b-header .header-bottom { padding: 0; border: 0; }
/* brand text fallback when no logo image is set */
.b2b-brand-text { font-weight: 800; font-size: 21px; letter-spacing: -.02em; color: var(--b2b-primary); white-space: nowrap; }
.b2b-brand-mobile .b2b-brand-text { font-size: 18px; }

/* Promo strip */
.b2b-promo { background: var(--b2b-primary); color: #fff; text-align: center; font-size: 13px; padding: 8px 16px; }
.b2b-promo a { color: var(--b2b-secondary-accent); }

/* ---- Utility strip ---- */
.b2b-utilitybar { background: var(--b2b-primary-container); color: var(--b2b-on-primary-container); font-size: 12.5px; }
.b2b-utilitybar-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 40px; }
.b2b-utilitybar a { color: #c3cbdb !important; transition: color .15s; }
.b2b-utilitybar a:hover { color: #fff !important; }
.b2b-utilitybar ul { display: flex; align-items: center; gap: 20px; margin: 0; padding: 0; list-style: none; }
.b2b-utilitybar li { margin: 0; position: relative; }
.b2b-utilitybar-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 0; font-weight: 500; }
.b2b-utilitybar-nav .menu-icon { font-size: 13px; }
.b2b-utilitybar-right { display: flex; align-items: center; gap: 22px; }
.b2b-newsflash { color: #aeb7c9; max-width: 460px; height: 40px; overflow: hidden; }
.b2b-newsflash ul { margin: 0; padding: 0; list-style: none; }
.b2b-newsflash li { height: 40px; line-height: 40px; list-style: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b2b-utils-hotline { display: inline-flex; align-items: center; gap: 6px; color: #c3cbdb; }
.b2b-utils-hotline .material-symbols-outlined { font-size: 16px; }
.b2b-utils-hotline strong { color: var(--b2b-secondary-accent); font-weight: 700; }
/* utility dropdowns (language / currency) */
.b2b-utils .language-dropdown,
.b2b-utils .lang-curr-dropdown { position: absolute; top: 100%; right: 0; min-width: 150px; background: #fff; border: 1px solid var(--b2b-outline-variant); border-radius: var(--b2b-radius); box-shadow: var(--b2b-shadow-md); padding: 6px; margin: 6px 0 0; list-style: none; opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .16s ease; z-index: 200; }
.b2b-utils li:hover > .language-dropdown,
.b2b-utils li:hover > ul { opacity: 1; visibility: visible; transform: translateY(0); }
.b2b-utils .language-dropdown a { display: block; padding: 7px 10px; border-radius: 6px; color: var(--b2b-on-surface-variant) !important; }
.b2b-utils .language-dropdown a:hover { background: var(--b2b-surface-low); color: var(--b2b-primary) !important; }

/* ---- App bar ---- */
.b2b-appbar { background: var(--b2b-surface-lowest); border-bottom: 1px solid var(--b2b-outline-variant); }
.b2b-appbar-inner { display: flex; align-items: center; gap: 28px; min-height: var(--b2b-header-h); padding-block: 12px; }
.b2b-brand { flex: 0 0 auto; margin: 0; line-height: 0; }
.b2b-brand img { max-height: 44px; width: auto; }
.b2b-search { flex: 1 1 auto; max-width: 600px; margin: 0; }
.b2b-search-form { position: relative; display: flex; align-items: center; height: 46px; background: var(--b2b-surface-low); border: 1px solid var(--b2b-outline-variant); border-radius: var(--b2b-radius); padding-left: 38px; padding-right: 5px; transition: border-color .15s, box-shadow .15s; }
.b2b-search-form:focus-within { border-color: var(--b2b-primary); background: #fff; box-shadow: 0 0 0 3px rgba(15, 23, 42, .07); }
.b2b-search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--b2b-outline); font-size: 20px; pointer-events: none; }
.b2b-search-cats { flex: 0 0 auto; display: flex; align-items: center; }
.b2b-search-cats::after { content: ""; width: 1px; height: 22px; background: var(--b2b-outline-variant); margin-left: 8px; }
.b2b-search-cats select.product-category-select { border: 0; background: transparent; height: 42px; max-width: 130px; color: var(--b2b-on-surface-variant); font-size: 13px; font-weight: 500; outline: none; cursor: pointer; }
.b2b-search-input { flex: 1 1 auto; min-width: 0; height: 44px; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 10px; font-size: 14px; color: var(--b2b-on-surface); outline: none; }
.b2b-search-input::placeholder { color: var(--b2b-outline); }
.b2b-search-btn { flex: 0 0 auto; height: 36px; padding: 0 18px; background: var(--b2b-primary); color: #fff; border: 0; border-radius: calc(var(--b2b-radius) - 1px); font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity .15s; }
.b2b-search-btn:hover { opacity: .9; color: #fff; }
.b2b-search .panel--search-result { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 300; background: #fff; border-radius: var(--b2b-radius-md); box-shadow: var(--b2b-shadow-md); }
.b2b-search .panel--search-result:empty { display: none; }

/* actions */
.b2b-appbar-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; margin-left: auto; }
.b2b-actions { display: flex; align-items: center; gap: 4px; }
.b2b-action { position: relative; margin: 0; }
/* the icons keep the legacy .header-action-icon-2 class for JS hooks; neutralise its 0 10px padding so the square hit-areas sit on an even rhythm */
.b2b-appbar .b2b-action,
.b2b-mobilebar .b2b-action { padding: 0; }
.b2b-action > a { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--b2b-radius); color: var(--b2b-on-surface-variant); transition: background .15s, color .15s; }
.b2b-action > a:hover { background: var(--b2b-surface-low); color: var(--b2b-primary); }
.b2b-action .material-symbols-outlined { font-size: 23px; }
/* legacy `.header-action-2 .header-action-icon-2 > a` (0,2,1) forces `display: inline-block`,
   which defeats the base `.b2b-action > a` (0,1,1) grid centering and drops the glyph into the
   top-left of its 42px hover square. Re-assert grid centering at higher specificity so the icon
   sits dead-center in the hover chip. */
.b2b-appbar .b2b-actions .b2b-action > a,
.b2b-mobilebar .b2b-actions .b2b-action > a { display: grid; place-items: center; }
/* Stack the glyph and the count badge in ONE grid cell. Without this, the badge counts as a
   second grid row (e.g. `23px 17px`) whenever it falls into flow, shoving the glyph up into the
   top row — it then reads as horizontally-centered-but-vertically-top. Pinning every child to
   cell 1/1 keeps a single row so the glyph stays dead-center (the badge is absolutely positioned
   to the corner regardless). */
.b2b-appbar .b2b-actions .b2b-action > a > *,
.b2b-mobilebar .b2b-actions .b2b-action > a > * { grid-area: 1 / 1; }
/* legacy `.header-action-2 .header-action-icon-2 > a span` (0,2,2) shrinks the glyph to 14px; win it back on both b2b bars so the icons render at full size */
.b2b-appbar .b2b-actions .b2b-action > a .material-symbols-outlined,
.b2b-mobilebar .b2b-actions .b2b-action > a .material-symbols-outlined { font-size: 23px; }
/* count badge — beat legacy `.header-action-2 .header-action-icon-2 > a span.pro-count` (0,3,2: top:-5;right:-11;20px) so it tucks onto the icon's top-right corner */
.b2b-appbar .b2b-actions .b2b-action > a > .b2b-count,
.b2b-mobilebar .b2b-actions .b2b-action > a > .b2b-count { position: absolute; top: 1px; right: 1px; bottom: auto; left: auto; min-width: 17px; width: auto; height: 17px; padding: 0 4px; display: grid; place-items: center; background: var(--b2b-secondary); color: #fff; border: 2px solid #fff; border-radius: 9999px; font-size: 10px; font-weight: 700; line-height: 1; }
/* beat legacy `.header-action-2 .header-action-icon-2 > a img{width:100%;max-width:25px}` (0,2,2) that squished the avatar into an oval */
.b2b-appbar .b2b-actions .b2b-action > a img.b2b-avatar,
.b2b-mobilebar .b2b-actions .b2b-action > a img.b2b-avatar { width: 30px; height: 30px; max-width: 30px; object-fit: cover; border-radius: 50%; }
.b2b-avatar { width: 30px; height: 30px; object-fit: cover; border-radius: 50%; }
.b2b-cta-vendor { height: 42px; }
.b2b-cta-vendor .material-symbols-outlined { font-size: 19px; }

/* cart & account dropdown panels reuse legacy hover mechanics (.header-action-icon-2:hover) */
.b2b-appbar .cart-dropdown-wrap,
.b2b-mobilebar .cart-dropdown-wrap { right: 0; left: auto; border-radius: var(--b2b-radius-md); border: 1px solid var(--b2b-outline-variant); box-shadow: var(--b2b-shadow-md); }
.b2b-appbar .account-dropdown { min-width: 210px; padding: 8px; }
.b2b-appbar .account-dropdown ul { margin: 0; padding: 0; list-style: none; }
.b2b-appbar .account-dropdown li { width: 100%; }
.b2b-appbar .account-dropdown li a { display: flex; align-items: center; width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: var(--b2b-radius); color: var(--b2b-on-surface-variant) !important; font-size: 13.5px; font-weight: 500; }
.b2b-appbar .account-dropdown li a:hover { background: var(--b2b-surface-low); color: var(--b2b-primary) !important; }

/* ---- Nav bar ---- */
.b2b-navbar { background: var(--b2b-surface-lowest); border-bottom: 1px solid var(--b2b-outline-variant); }
.b2b-navbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 54px; }
.b2b-navbar-left { display: flex; align-items: center; gap: 14px; }
.b2b-navbar-right { flex: 0 0 auto; }
.b2b-trust-pill { display: inline-flex; align-items: center; gap: 7px; color: var(--b2b-on-surface-variant); font-size: 13px; font-weight: 600; }
.b2b-trust-pill .material-symbols-outlined { font-size: 19px; color: var(--b2b-secondary); }

/* browse categories */
.b2b-browse { position: relative; margin: 0; }
.b2b-browse-btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; background: var(--b2b-primary); color: #fff !important; border-radius: var(--b2b-radius); font-weight: 600; font-size: 14px; }
.b2b-browse-btn:hover { opacity: .92; color: #fff !important; }
.b2b-browse-btn .material-symbols-outlined { font-size: 20px; }
.b2b-browse-btn .fi-rs-angle-down { font-size: 11px; margin-left: 2px; }
.b2b-navbar .categories-dropdown-active-large { border-radius: var(--b2b-radius-md); border: 1px solid var(--b2b-outline-variant); box-shadow: var(--b2b-shadow-md); }

/* main menu */
.b2b-mainmenu { margin: 0; }
.b2b-mainmenu > nav > ul { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.b2b-mainmenu > nav > ul > li { position: relative; margin: 0; }
.b2b-mainmenu > nav > ul > li > a { display: inline-flex; align-items: center; gap: 5px; padding: 15px 13px; color: var(--b2b-on-surface); font-weight: 600; font-size: 14px; line-height: 1; transition: color .15s; }
.b2b-mainmenu > nav > ul > li > a:hover,
.b2b-mainmenu > nav > ul > li.current > a,
.b2b-mainmenu > nav > ul > li > a.active { color: var(--b2b-primary); }
.b2b-mainmenu > nav > ul > li > a .fi-rs-angle-down { font-size: 10px; opacity: .55; }
/* dropdown cards (legacy hover show/hide preserved) */
.b2b-mainmenu .sub-menu,
.b2b-mainmenu .level-menu { background: #fff; border: 1px solid var(--b2b-outline-variant); border-radius: var(--b2b-radius-md); box-shadow: var(--b2b-shadow-md); padding: 8px; min-width: 224px; }
.b2b-mainmenu .sub-menu li,
.b2b-mainmenu .level-menu li { margin: 0; }
.b2b-mainmenu .sub-menu li a,
.b2b-mainmenu .level-menu li a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-radius: var(--b2b-radius); color: var(--b2b-on-surface-variant); font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.b2b-mainmenu .sub-menu li a:hover,
.b2b-mainmenu .level-menu li a:hover { background: var(--b2b-surface-low); color: var(--b2b-primary); }
.b2b-mainmenu .sub-menu .fi-rs-angle-right { font-size: 10px; opacity: .5; }

/* ---- Mobile app bar ---- */
.b2b-mobilebar { background: var(--b2b-surface-lowest); border-bottom: 1px solid var(--b2b-outline-variant); }
.b2b-mobilebar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 62px; }
.b2b-mobilebar .b2b-brand-mobile { flex: 0 1 auto; min-width: 0; margin: 0; line-height: 0; overflow: hidden; }
.b2b-mobilebar .b2b-brand-mobile img { max-height: 38px; width: auto; }
/* when no logo image is set, the site-title fallback text must not force the bar wider than the viewport (horizontal scroll) — let it shrink and ellipsis */
.b2b-mobilebar .b2b-brand-mobile > a { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b2b-mobilebar .b2b-brand-mobile .b2b-brand-text { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.b2b-mobile-burger { flex: 0 0 auto; margin: 0; }
.b2b-mobilebar .burger-icon { position: relative; width: 26px; height: 20px; display: inline-block; cursor: pointer; }
.b2b-mobilebar .burger-icon span { background-color: var(--b2b-on-surface); }
/* the wrapper reuses the legacy `.header-action-right` class, which base style.css hides below 1200px; restore it for the mobile bar (mirrors .b2b-appbar-actions) */
.b2b-mobile-actions { display: flex; align-items: center; flex: 0 0 auto; margin: 0; }
.b2b-mobile-actions .b2b-action > a { width: 40px; height: 40px; }

/* stuck (sticky) shadow */
.b2b-navbar.sticky-bar.stick,
.b2b-appbar.sticky-bar.stick { box-shadow: var(--b2b-shadow-card); background: rgba(255, 255, 255, .96); backdrop-filter: saturate(180%) blur(6px); }

@media (max-width: 1200px) {
    .b2b-appbar-inner { gap: 18px; }
    .b2b-mainmenu > nav > ul > li > a { padding: 15px 10px; }
    .b2b-cta-vendor .b2b-cta-label { display: none; }
}

/* ---- specificity overrides vs base (Bootstrap) theme ---- */
.b2b-header .b2b-utilitybar { background: var(--b2b-primary-container); }
.b2b-header .b2b-appbar,
.b2b-header .b2b-navbar,
.b2b-header .b2b-mobilebar { background: var(--b2b-surface-lowest); border-bottom: 1px solid var(--b2b-outline-variant); }
.b2b-appbar .b2b-search .form--quick-search.b2b-search-form { border-radius: var(--b2b-radius); }
.b2b-appbar .b2b-search-input,
.b2b-appbar .b2b-search-form .input-search-product { border: 0 !important; background: transparent !important; box-shadow: none !important; height: 44px; }
.b2b-appbar .b2b-search .b2b-search-btn.btn { background: var(--b2b-primary); color: #fff; border: 0; border-radius: calc(var(--b2b-radius) - 1px); }
.b2b-appbar .b2b-search .b2b-search-btn.btn:hover { background: var(--b2b-primary); opacity: .9; color: #fff; }
.b2b-navbar .b2b-browse-btn.categories-button-active { background: var(--b2b-primary); color: #fff !important; border: 0; }
.b2b-navbar .b2b-browse-btn.categories-button-active:hover { background: var(--b2b-primary); opacity: .92; }

/* =============================================================== FOOTER === */
.b2b-footer { background: var(--b2b-surface-highest); border-top: 1px solid var(--b2b-outline-variant); color: var(--b2b-on-surface-variant); font-family: var(--b2b-font); margin-top: 0; }
.b2b-footer a { color: var(--b2b-on-surface-variant); text-decoration: none; transition: color .15s; }
.b2b-footer a:hover { color: var(--b2b-secondary); }

/* pre-footer band (newsletter / site features widgets) */
.b2b-footer-pre:empty { display: none; }
.b2b-footer-pre { background: var(--b2b-surface-lowest); border-bottom: 1px solid var(--b2b-outline-variant); }

/* mid columns */
.b2b-footer .b2b-footer-mid { padding: 64px 0 40px; }
.b2b-footer .b2b-footer-cols { display: flex; flex-wrap: wrap; gap: 44px 32px; margin: 0; }
.b2b-footer .b2b-footer-cols > .col { flex: 1 1 160px; min-width: 150px; margin: 0; padding: 0; }
.b2b-footer .b2b-footer-cols > .col:first-child { flex: 1.8 1 280px; }
.b2b-footer .b2b-footer-cols img { max-width: 100%; height: auto; }

/* site info column */
.b2b-footer .widget-about { margin: 0; }
.b2b-footer .widget-about .logo { display: block; margin-bottom: 18px; line-height: 0; }
.b2b-footer .widget-about .logo img { max-height: 46px; width: auto; }
.b2b-footer .widget-about .b2b-brand-text { font-size: 20px; }
.b2b-footer .widget-about > .logo > p,
.b2b-footer .widget-about p.font-lg { color: var(--b2b-on-surface-variant); font-size: 14px; line-height: 1.6; margin: 14px 0 20px; max-width: 340px; }
.b2b-footer .contact-infor { list-style: none; margin: 0; padding: 0; }
.b2b-footer .contact-infor li { display: flex; align-items: flex-start; gap: 4px; margin-bottom: 11px; font-size: 13.5px; color: var(--b2b-on-surface-variant); line-height: 1.5; }
.b2b-footer .contact-infor strong { color: var(--b2b-on-surface); font-weight: 600; }

/* menu columns */
.b2b-footer .footer-link-widget { margin: 0; }
.b2b-footer .footer-link-widget .widget-title { color: var(--b2b-on-surface); font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin: 0 0 20px; }
.b2b-footer .footer-list { list-style: none; margin: 0; padding: 0; }
.b2b-footer .footer-list li { margin: 0 0 12px; }
.b2b-footer .footer-list li a { font-size: 14px; color: var(--b2b-on-surface-variant); }
.b2b-footer .footer-list li a:hover { color: var(--b2b-secondary); }

/* bottom bar */
.b2b-footer .b2b-footer-bottom-wrap { border-top: 1px solid var(--b2b-outline-variant); padding: 22px 0; }
.b2b-footer .b2b-footer-bottom { margin: 0; row-gap: 12px; }
.b2b-footer .b2b-footer-copy { color: var(--b2b-on-surface-variant); font-size: 13px; margin: 0; }
.b2b-footer .b2b-footer-hotline p { margin: 0; font-size: 13px; color: var(--b2b-on-surface-variant); }
.b2b-footer .b2b-footer-social .mobile-social-icon { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; margin: 0; }
.b2b-footer .b2b-footer-social .mobile-social-icon > p { margin: 0; font-size: 13px; color: var(--b2b-on-surface); font-weight: 600; }
.b2b-footer .b2b-footer-social a { display: inline-grid; place-items: center; width: 38px; height: 38px; background: var(--b2b-surface-container); border-radius: var(--b2b-radius-full); transition: background .15s, transform .15s; }
.b2b-footer .b2b-footer-social a:hover { background: var(--b2b-primary); transform: translateY(-2px); }
.b2b-footer .b2b-footer-social a img { width: 18px; height: 18px; object-fit: contain; }
.b2b-footer .b2b-footer-social > p.font-sm { display: none; }

@media (max-width: 640px) {
    .b2b-footer .b2b-footer-mid { padding: 40px 0 24px; }
    .b2b-footer .b2b-footer-cols { gap: 32px; }
    .b2b-footer .b2b-footer-social .mobile-social-icon { justify-content: flex-start; }
}

/* ====================================================== MOBILE DRAWER === */
.mobile-header-active.b2b-drawer {
    position: fixed; top: 0; left: 0; height: 100%; width: 320px; max-width: 86vw;
    background: var(--b2b-surface-lowest); box-shadow: 0 0 44px rgba(15, 23, 42, .2);
    transform: translateX(-100%); transition: transform .3s ease; z-index: 1100;
    display: flex; flex-direction: column; font-family: var(--b2b-font); overflow: hidden;
}
.mobile-header-active.b2b-drawer.sidebar-visible { transform: translateX(0); }
/* RTL: dock the drawer to the right edge and slide it in from the right. */
body[dir=rtl] .mobile-header-active.b2b-drawer { left: auto; right: 0; transform: translateX(100%); }
body[dir=rtl] .mobile-header-active.b2b-drawer.sidebar-visible { transform: translateX(0); }
.b2b-drawer .b2b-drawer-inner { display: flex; flex-direction: column; height: 100%; min-height: 0; }

/* backdrop (main.js injects .body-overlay-1 into <body>) */
.body-overlay-1 { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .3s ease; z-index: 1090; }
.mobile-menu-active .body-overlay-1 { opacity: 1; visibility: visible; }

/* head: profile + close */
.b2b-drawer-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 26px 20px 18px; border-bottom: 1px solid var(--b2b-outline-variant); }
.b2b-drawer-user { display: flex; align-items: center; gap: 12px; min-width: 0; }
.b2b-drawer-avatar { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; border: 2px solid var(--b2b-secondary-container); display: grid; place-items: center; background: var(--b2b-surface-low); }
.b2b-drawer-avatar img { width: 100%; height: 100%; object-fit: cover; }
.b2b-drawer-avatar-guest .material-symbols-outlined { font-size: 30px; color: var(--b2b-on-surface-variant); }
.b2b-drawer-user-text { min-width: 0; display: flex; flex-direction: column; }
.b2b-drawer-user-text strong { font-size: 17px; font-weight: 700; color: var(--b2b-on-surface); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b2b-drawer-user-text span { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--b2b-secondary); }
.b2b-drawer-close { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--b2b-on-surface-variant); cursor: pointer; transition: background .15s; }
.b2b-drawer-close:hover { background: var(--b2b-surface-low); }

/* switch to vendor */
.b2b-drawer-switch { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 0; padding: 13px 16px; background: var(--b2b-surface-high); border-radius: var(--b2b-radius-md); color: var(--b2b-on-surface) !important; font-weight: 600; font-size: 14px; transition: background .15s; }
.b2b-drawer-switch:hover { background: var(--b2b-surface-highest); }
.b2b-drawer-switch-l { display: inline-flex; align-items: center; gap: 12px; }
.b2b-drawer-switch .material-symbols-outlined { font-size: 21px; }

/* scroll area */
.b2b-drawer-scroll { flex: 0 1 auto; min-height: 0; overflow-y: auto; padding: 16px 0 8px; }
/* override legacy .mobile-header-content-area { padding: 30px } (0,3,0) so content aligns to the 20px inset */
.mobile-header-wrapper-style .mobile-header-wrapper-inner .b2b-drawer-scroll { padding: 16px 0 8px; }
.b2b-drawer-scroll::-webkit-scrollbar { width: 4px; }
.b2b-drawer-scroll::-webkit-scrollbar-thumb { background: var(--b2b-surface-highest); border-radius: 10px; }

/* drawer search */
.b2b-drawer-search { position: relative; display: flex; align-items: center; margin: 0 20px 18px; padding-left: 38px; background: var(--b2b-surface-low); border: 1px solid var(--b2b-outline-variant); border-radius: var(--b2b-radius); height: 44px; }
.b2b-drawer-search > .material-symbols-outlined { position: absolute; left: 11px; color: var(--b2b-outline); font-size: 20px; }
.b2b-drawer-search input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; height: 42px; box-shadow: none !important; font-size: 14px; padding: 0 10px; }
.b2b-drawer-search .panel--search-result { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; background: #fff; border-radius: var(--b2b-radius); box-shadow: var(--b2b-shadow-md); }

/* sections */
.b2b-drawer-section { padding: 0 20px; margin-bottom: 22px; }
.b2b-drawer-label { padding: 0 12px; margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--b2b-on-surface-variant); opacity: .55; }

/* items (custom links + rendered menu items share the look) */
.b2b-drawer-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px; border-radius: var(--b2b-radius); color: var(--b2b-on-surface-variant) !important;
    font-size: 14px; font-weight: 500; line-height: 1.2; transition: background .15s, color .15s;
}
.b2b-drawer .b2b-drawer-menu > li > a {
    display: flex; align-items: center; justify-content: flex-start; gap: 14px;
    padding: 12px 44px 12px 12px; border-radius: var(--b2b-radius); color: var(--b2b-on-surface) !important;
    font-size: 14px; font-weight: 600; line-height: 1.2; transition: background .15s, color .15s;
}
.b2b-drawer .b2b-drawer-menu > li > a > i,
.b2b-drawer .b2b-drawer-menu > li > a > img { flex: 0 0 auto; width: 22px; height: 22px; font-size: 19px; line-height: 22px; text-align: center; object-fit: contain; }
.b2b-drawer-item:hover,
.b2b-drawer .b2b-drawer-menu > li > a:hover { background: var(--b2b-surface-low); color: var(--b2b-primary) !important; }
.b2b-drawer-item-l { display: inline-flex; align-items: center; gap: 14px; min-width: 0; }
.b2b-drawer-item .material-symbols-outlined { font-size: 22px; flex: 0 0 auto; }
.b2b-drawer-badge { flex: 0 0 auto; background: var(--b2b-error); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 9999px; }
.b2b-drawer-caret { font-size: 20px; color: var(--b2b-on-surface-variant); transition: transform .2s; flex: 0 0 auto; }

/* rendered mobile menu (main-menu / header-navigation) */
.b2b-drawer .b2b-drawer-menu { list-style: none; margin: 0; padding: 0; }
.b2b-drawer .b2b-drawer-menu li { position: relative; list-style: none; }
.b2b-drawer .b2b-drawer-menu > li > a { font-weight: 600; color: var(--b2b-on-surface) !important; }
.b2b-drawer .b2b-drawer-menu .menu-expand { position: absolute; right: 2px; top: 3px; width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer; color: var(--b2b-on-surface-variant); z-index: 2; }
.b2b-drawer .b2b-drawer-menu .menu-expand i { font-size: 12px; }
.b2b-drawer .b2b-drawer-menu .dropdown { display: none; list-style: none; margin: 0 0 4px; padding: 0 0 0 16px; }
.b2b-drawer .b2b-drawer-menu li li > a { padding: 10px 12px; font-weight: 500; font-size: 13.5px; color: var(--b2b-on-surface-variant) !important; }

/* categories accordion */
.b2b-drawer-cats { margin-top: 2px; }
.b2b-drawer .b2b-drawer-cats .categories-button-active-2 { height: auto; background: transparent; color: var(--b2b-on-surface) !important; font-weight: 600; }
.b2b-drawer-cats-list { display: none; padding: 2px 0 6px 16px; }
.b2b-drawer-cats-list ul { list-style: none; margin: 0; padding: 0; }
.b2b-drawer-cats-list li a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--b2b-radius); color: var(--b2b-on-surface-variant); font-size: 13.5px; }
.b2b-drawer-cats-list li a:hover { background: var(--b2b-surface-low); color: var(--b2b-primary); }
.b2b-drawer-cats-list li a img { width: 22px; height: 22px; object-fit: cover; border-radius: 4px; }
.b2b-drawer-cats-list li a i { font-size: 16px; }

/* footer */
.b2b-drawer-foot { flex: 0 0 auto; padding: 16px 20px 22px; border-top: 1px solid var(--b2b-outline-variant); background: var(--b2b-surface-lowest); }
.b2b-drawer-locale { display: flex; gap: 18px; margin-bottom: 14px; }
.b2b-drawer-locale-item { position: relative; }
.b2b-drawer-locale-item .mobile-language-active { display: inline-flex; align-items: center; gap: 6px; color: var(--b2b-on-surface-variant); font-size: 12.5px; font-weight: 500; }
.b2b-drawer-locale-item .mobile-language-active .material-symbols-outlined { font-size: 17px; }
.b2b-drawer-locale-menu { display: none; position: absolute; bottom: calc(100% + 6px); left: 0; right: auto; min-width: 160px; max-width: calc(100vw - 60px); max-height: 220px; overflow-y: auto; background: #fff; border: 1px solid var(--b2b-outline-variant); border-radius: var(--b2b-radius); box-shadow: var(--b2b-shadow-md); padding: 6px; z-index: 30; }
/* RTL: anchor to the item's right edge so the menu opens into the drawer instead of off the edge. */
body[dir=rtl] .b2b-drawer-locale-menu { left: auto; right: 0; }
.b2b-drawer-locale-menu ul { list-style: none; margin: 0; padding: 0; }
.b2b-drawer-locale-menu li a { display: block; padding: 8px 10px; border-radius: 6px; color: var(--b2b-on-surface-variant); font-size: 13px; }
.b2b-drawer-locale-menu li a:hover { background: var(--b2b-surface-low); color: var(--b2b-primary); }

/* logout / login */
.b2b-drawer-logout, .b2b-drawer-login { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px; border-radius: var(--b2b-radius-md); font-weight: 600; font-size: 14px; border: 1px solid var(--b2b-outline-variant); transition: background .15s, opacity .15s; }
.b2b-drawer-logout { color: var(--b2b-error) !important; background: transparent; }
.b2b-drawer-logout:hover { background: rgba(186, 26, 26, .06); }
.b2b-drawer-login { color: #fff !important; background: var(--b2b-primary); border-color: var(--b2b-primary); }
.b2b-drawer-login:hover { opacity: .92; }

/* ======================================= CART & WISHLIST TABLES (B2B) === */
/* Both pages render the base `.shopping-summery` responsive table. These rules apply b2b
   polish and, crucially, fix RTL: the base collapses each row and floats the data-title
   label to the PHYSICAL left — wrong in Arabic, where the label belongs on the start (right). */
.shopping-summery .product-name a.product-name { color: var(--b2b-on-surface) !important; font-weight: 700; }
.shopping-summery .sold-by a { color: var(--b2b-primary); font-weight: 600; }
.shopping-summery .text-brand,
.shopping-summery h4.text-brand { color: var(--b2b-primary) !important; }
.shopping-summery table tbody tr img { border: 1px solid var(--b2b-outline-variant) !important; border-radius: var(--b2b-radius-md) !important; }
.cart-totals { border-color: var(--b2b-outline-variant) !important; border-radius: var(--b2b-radius-lg); background: var(--b2b-surface-lowest); }
.cart-totals .cart_total_amount .text-brand { color: var(--b2b-primary) !important; }

/* RTL: the collapsed data-title label belongs on the start (right) side, not the left. */
body[dir=rtl] .shopping-summery table tbody tr td::before { float: right; margin-right: 0 !important; margin-left: 14px; }

/* Mobile: frame each line-item as a clean card with breathing room. */
@media (max-width: 480px) {
    .shopping-summery table tbody tr {
        border: 1px solid var(--b2b-outline-variant) !important;
        border-radius: var(--b2b-radius-lg);
        background: var(--b2b-surface-lowest) !important;
        padding: 12px 14px;
        margin-bottom: 14px;
        box-shadow: var(--b2b-shadow-card);
        row-gap: 6px;
    }
    .shopping-summery table tbody tr td { padding: 9px 0 !important; }
    .shopping-summery table tbody tr td::before { color: var(--b2b-on-surface-variant); font-weight: 600; }
    .shopping-summery table tbody tr img { max-width: 88px; }
}
.b2b-drawer-logout .material-symbols-outlined, .b2b-drawer-login .material-symbols-outlined { font-size: 20px; }
/* auth button when placed at the top of the drawer (matches the section inset) */
.b2b-drawer-topbtn { width: auto; margin: 16px 20px 0; }

/* ========================================================= HOME: HERO === */
.b2b-hero { background: linear-gradient(135deg, #f7f9fb 0%, #e9edf1 100%); padding: 72px 0 84px; overflow: hidden; }
.b2b-hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.b2b-hero-copy { max-width: 580px; }
.b2b-hero .b2b-badge { margin-bottom: 22px; }
.b2b-hero-title { font-size: 46px; line-height: 1.08; font-weight: 800; letter-spacing: -.025em; color: var(--b2b-on-surface); margin: 0 0 20px; }
.b2b-hero-sub { font-size: 17px; line-height: 1.6; color: var(--b2b-on-surface-variant); margin: 0 0 30px; }
.b2b-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.b2b-hero-media { position: relative; }
.b2b-hero-image { position: relative; min-height: 440px; border-radius: var(--b2b-radius-xl); background-color: var(--b2b-surface-highest); background-size: cover; background-position: center; box-shadow: var(--b2b-shadow-lg); display: grid; place-items: center; overflow: hidden; }
.b2b-hero-image-icon { font-size: 120px; color: var(--b2b-outline); opacity: .35; }
.b2b-hero-trust { position: absolute; left: 20px; right: 20px; bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .6); border-radius: var(--b2b-radius-lg); box-shadow: var(--b2b-shadow-md); }
.b2b-hero-trust-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--b2b-on-surface-variant); margin: 0 0 2px; }
.b2b-hero-trust-title { font-size: 17px; font-weight: 700; color: var(--b2b-primary); margin: 0; }
.b2b-hero-trust-icon { font-size: 44px; color: var(--b2b-secondary); }

/* ===================================================== HOME: FEATURES === */
.b2b-features { background: var(--b2b-primary-container); color: #fff; }
.b2b-features-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; flex-wrap: wrap; }
.b2b-feature { display: flex; align-items: center; gap: 16px; flex: 1 1 260px; min-width: 220px; }
.b2b-feature-icon { font-size: 32px; color: var(--b2b-secondary-accent); flex: 0 0 auto; }
.b2b-feature-title { font-size: 15px; font-weight: 600; color: #fff; margin: 0; }
.b2b-feature-sub { font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .7); margin: 3px 0 0; }
.b2b-feature-divider { width: 1px; align-self: stretch; min-height: 42px; background: rgba(255, 255, 255, .16); flex: 0 0 auto; }

/* =================================================== HOME: CATEGORIES === */
.b2b-cats-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.b2b-cats-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.b2b-cat-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 26px 14px; background: var(--b2b-surface-lowest); border: 1px solid var(--b2b-outline-variant); border-radius: var(--b2b-radius-lg); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.b2b-cat-card:hover { border-color: var(--b2b-primary); transform: translateY(-4px); box-shadow: var(--b2b-shadow-card); }
.b2b-cat-media { display: grid; place-items: center; width: 68px; height: 68px; border-radius: var(--b2b-radius-md); background: var(--b2b-surface-low); overflow: hidden; }
.b2b-cat-media img { width: 100%; height: 100%; object-fit: cover; }
.b2b-cat-media .material-symbols-outlined { font-size: 32px; color: var(--b2b-primary); }
.b2b-cat-media i { font-size: 30px; color: var(--b2b-primary); }
.b2b-cat-name { font-size: 14px; font-weight: 600; color: var(--b2b-on-surface); line-height: 1.3; }

/* ====================================================== HOME: VENDORS === */
.b2b-vendors { background: var(--b2b-surface-low); }
.b2b-vendors-head { text-align: center; max-width: 660px; margin: 0 auto 48px; }
.b2b-vendors-head .b2b-section-title { margin-bottom: 12px; }
.b2b-vendors-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.b2b-vendor-card { padding: 28px; display: flex; flex-direction: column; }
.b2b-vendor-top { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.b2b-vendor-logo { flex: 0 0 auto; width: 60px; height: 60px; border-radius: var(--b2b-radius-md); overflow: hidden; background: var(--b2b-surface-highest); display: grid; place-items: center; font-weight: 800; color: var(--b2b-primary); font-size: 18px; }
.b2b-vendor-logo img { width: 100%; height: 100%; object-fit: cover; }
.b2b-vendor-meta { min-width: 0; }
.b2b-vendor-name { font-size: 18px; font-weight: 700; margin: 0 0 4px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b2b-vendor-name a { color: var(--b2b-on-surface); }
.b2b-vendor-name a:hover { color: var(--b2b-primary); }
.b2b-vendor-level { display: inline-flex; align-items: center; gap: 5px; color: var(--b2b-secondary); font-size: 13px; font-weight: 600; }
.b2b-vendor-level .material-symbols-outlined { font-size: 17px; }
.b2b-vendor-stats { display: flex; flex-direction: column; gap: 11px; padding: 18px 0; border-top: 1px solid var(--b2b-surface-high); border-bottom: 1px solid var(--b2b-surface-high); margin-bottom: 20px; }
.b2b-vendor-stat { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.b2b-vendor-stat span { color: var(--b2b-on-surface-variant); }
.b2b-vendor-stat strong { color: var(--b2b-on-surface); font-weight: 700; text-align: right; }
.b2b-vendor-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 22px; }
.b2b-vendor-thumb { display: block; aspect-ratio: 1 / 1; border-radius: var(--b2b-radius); overflow: hidden; background: var(--b2b-surface-container); }
.b2b-vendor-thumb img { width: 100%; height: 100%; object-fit: cover; }
.b2b-vendor-card .b2b-btn-block { margin-top: auto; }

/* ========================================================== HOME: CTA === */
.b2b-cta-band { background: var(--b2b-primary); color: #fff; padding: 60px 0; }
.b2b-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.b2b-cta-copy { max-width: 640px; flex: 1 1 420px; }
.b2b-cta-title { font-size: 32px; font-weight: 700; letter-spacing: -.02em; color: #fff; margin: 0 0 12px; }
.b2b-cta-sub { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .78); margin: 0; }
.b2b-cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.b2b-cta-ghost { background: transparent; border: 1px solid rgba(255, 255, 255, .3); color: #fff !important; }
.b2b-cta-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff !important; }

/* ============================ HOME: product cards (deals / featured) ==== */
.b2b-home .featured-products-section,
.b2b-home .trending-products-section { background: var(--b2b-surface); padding: 68px 0; }
.b2b-home .featured-products-section .section-title,
.b2b-home .trending-products-section .section-title { text-align: left; margin-bottom: 34px; }
.b2b-home .featured-products-section .section-title h2,
.b2b-home .trending-products-section .section-title h2 { font-size: 32px; font-weight: 700; letter-spacing: -.02em; color: var(--b2b-on-surface); }
/* Product card (.b2b-pcard) is styled globally in the PRODUCT CARD section below. */

/* ===================================================== HOME responsive === */
@media (max-width: 1024px) {
    .b2b-hero-inner { grid-template-columns: 1fr; gap: 36px; }
    .b2b-hero-media { max-width: 560px; }
    .b2b-hero-title { font-size: 38px; }
    .b2b-cats-grid { grid-template-columns: repeat(4, 1fr); }
    .b2b-vendors-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .b2b-feature-divider { display: none; }
    .b2b-feature { flex-basis: 100%; }
    .b2b-cats-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .b2b-hero { padding: 44px 0 52px; }
    .b2b-hero-title { font-size: 30px; }
    .b2b-hero-image { min-height: 320px; }
    .b2b-cats-head { flex-direction: column; align-items: flex-start; gap: 8px; }
    .b2b-cats-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .b2b-vendors-grid { grid-template-columns: 1fr; }
    .b2b-cta-title { font-size: 26px; }
}

/* ============================================================== CONTACT === */
.b2b-contact { padding: 44px 0 64px; background: var(--b2b-surface); font-family: var(--b2b-font); }
.b2b-contact-head { margin-bottom: 34px; }
.b2b-contact-title { font-size: 34px; font-weight: 700; letter-spacing: -.02em; color: var(--b2b-on-surface); margin: 0 0 12px; }
.b2b-contact-sub { font-size: 16px; line-height: 1.6; color: var(--b2b-on-surface-variant); margin: 0; max-width: 660px; }

/* layout: form on the left (spans both rows), info blocks stack on the right */
.b2b-contact-grid { display: grid; grid-template-columns: 7fr 5fr; grid-template-rows: auto 1fr; gap: 32px; align-items: start; }
/* unwrap Botble's .ck-content page wrapper + any WYSIWYG <p> so the blocks themselves are the grid items */
.b2b-contact-grid > .ck-content,
.b2b-contact-grid > p,
.b2b-contact-grid > .ck-content > p { display: contents; }
.b2b-contact-grid > p:empty,
.b2b-contact-grid > .ck-content > p:empty { display: none; }
.b2b-contact-grid .b2b-contact-form-block { grid-column: 1; grid-row: 1 / span 2; }
.b2b-contact-grid .b2b-support-numbers { grid-column: 2; grid-row: 1; }
.b2b-contact-grid .b2b-offices { grid-column: 2; grid-row: 2; }

/* --- block: inquiry form --- */
.b2b-contact-form-block { background: var(--b2b-surface-lowest); border: 1px solid var(--b2b-outline-variant); border-radius: var(--b2b-radius-lg); padding: 30px; box-shadow: var(--b2b-shadow-card); }
.b2b-contact-form-title { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; color: var(--b2b-on-surface); margin: 0 0 8px; }
.b2b-contact-form-title .material-symbols-outlined { color: var(--b2b-secondary); }
.b2b-contact-form-sub { font-size: 14px; line-height: 1.5; color: var(--b2b-on-surface-variant); margin: 0 0 24px; }
.b2b-contact-form .b2b-contact-field { margin-bottom: 18px; }
.b2b-contact-label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--b2b-on-surface); }
.b2b-contact-form input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.b2b-contact-form select,
.b2b-contact-form textarea,
.b2b-contact-form .form-control { width: 100%; background: var(--b2b-surface); border: 1px solid var(--b2b-outline-variant); border-radius: var(--b2b-radius); padding: 12px 14px; font-size: 14px; color: var(--b2b-on-surface); outline: none; transition: border-color .15s, box-shadow .15s; }
.b2b-contact-form input:not([type=submit]):focus,
.b2b-contact-form select:focus,
.b2b-contact-form textarea:focus { border-color: var(--b2b-primary); box-shadow: 0 0 0 3px rgba(15, 23, 42, .07); }
.b2b-contact-form textarea { min-height: 140px; resize: vertical; }
.b2b-contact-submit { margin-top: 6px; }
.b2b-contact-submit-btn { min-width: 200px; }
/* the base theme styles .submit with the brand colour -- keep the Stitch navy button */
.b2b-contact-form .b2b-contact-submit-btn.submit { background: var(--b2b-primary); border-color: var(--b2b-primary); color: #fff; }
.b2b-contact-form .b2b-contact-submit-btn.submit:hover { background: var(--b2b-primary); opacity: .9; color: #fff; }

/* --- block: global support numbers --- */
.b2b-support-numbers { background: var(--b2b-surface-high); border: 1px solid var(--b2b-outline-variant); border-radius: var(--b2b-radius-lg); padding: 24px; }
.b2b-support-title { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--b2b-secondary); margin: 0 0 12px; }
.b2b-support-list { display: flex; flex-direction: column; }
.b2b-support-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--b2b-outline-variant); color: var(--b2b-on-surface) !important; }
.b2b-support-row:first-child { padding-top: 4px; }
.b2b-support-row:last-child { border-bottom: 0; padding-bottom: 0; }
.b2b-support-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.b2b-support-copy small { font-size: 13px; font-weight: 600; color: var(--b2b-on-surface-variant); }
.b2b-support-copy strong { font-size: 18px; font-weight: 700; color: var(--b2b-on-surface); }
.b2b-support-row > .material-symbols-outlined { flex: 0 0 auto; color: var(--b2b-on-surface-variant); transition: color .15s; }
.b2b-support-row:hover > .material-symbols-outlined { color: var(--b2b-secondary); }

/* --- block: our offices --- */
.b2b-offices-title { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; color: var(--b2b-on-surface); margin: 0 0 16px; }
.b2b-offices-title .material-symbols-outlined { color: var(--b2b-secondary); }
.b2b-offices-list { display: flex; flex-direction: column; gap: 14px; }
.b2b-office { display: flex; gap: 14px; padding: 18px; background: var(--b2b-surface-lowest); border: 1px solid var(--b2b-outline-variant); border-radius: var(--b2b-radius-lg); transition: border-color .15s, box-shadow .15s; }
.b2b-office:hover { border-color: var(--b2b-secondary); box-shadow: var(--b2b-shadow-card); }
.b2b-office-pin { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; background: var(--b2b-secondary-container); color: var(--b2b-on-secondary-container); border-radius: var(--b2b-radius); }
.b2b-office-pin .material-symbols-outlined { font-size: 22px; }
.b2b-office-body { min-width: 0; }
.b2b-office-name { font-size: 15px; font-weight: 700; color: var(--b2b-on-surface); margin: 0 0 4px; }
.b2b-office-address { font-size: 13px; line-height: 1.5; color: var(--b2b-on-surface-variant); margin: 0 0 10px; }
.b2b-office-links { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.b2b-office-link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--b2b-secondary) !important; }
.b2b-office-link .material-symbols-outlined { font-size: 16px; }
.b2b-office-link:hover { text-decoration: underline; }

@media (max-width: 1024px) {
    .b2b-contact-grid { grid-template-columns: 1fr; }
    .b2b-contact-grid .b2b-contact-form-block,
    .b2b-contact-grid .b2b-support-numbers,
    .b2b-contact-grid .b2b-offices { grid-column: 1; grid-row: auto; }
}
@media (max-width: 640px) {
    .b2b-contact { padding: 28px 0 44px; }
    .b2b-contact-title { font-size: 26px; }
    .b2b-contact-form-block { padding: 22px; }
    .b2b-contact-submit-btn { width: 100%; }
}

/* ============================================== BROWSE CATEGORIES (B2B) === */

/* ---------------------------------------------------------- Hero band */
.b2b-cat-hero {
    background: var(--b2b-surface-low);
    border-bottom: 1px solid var(--b2b-outline-variant);
    padding: 64px 0;
}

.b2b-cat-hero-title {
    font-size: 32px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--b2b-on-surface);
    margin: 0 0 16px;
}

.b2b-cat-hero-sub {
    font-size: 16px;
    line-height: 1.5;
    color: var(--b2b-on-surface-variant);
    max-width: 42rem;
    margin: 0;
}

.b2b-cat-hero-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 640px;
    margin-top: 32px;
    background: var(--b2b-surface-lowest);
    border: 1px solid var(--b2b-outline-variant);
    border-radius: var(--b2b-radius);
    padding: 4px 4px 4px 12px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.b2b-cat-hero-search:focus-within {
    border-color: var(--b2b-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--b2b-primary) 12%, transparent);
}

.b2b-cat-hero-search-icon { color: var(--b2b-outline); flex: none; }

.b2b-cat-hero .b2b-cat-hero-search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 10px 0;
    font-size: 14px;
    color: var(--b2b-on-surface);
}

.b2b-cat-hero-search-btn { flex: none; }

/* The ajax panel is absolutely positioned against the form */
.b2b-cat-hero-search .panel--search-result {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    width: auto;
    z-index: 30;
    border-color: var(--b2b-outline-variant);
    border-radius: var(--b2b-radius);
    box-shadow: var(--b2b-shadow-md);
    overflow: hidden;
}

/* ---------------------------------------------------- Category tiles */
.b2b-cat-tiles-sec { padding: 56px 0 24px; }
.b2b-cat-tiles-sec .b2b-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}
.b2b-cat-tiles-sec .b2b-section-title { font-size: 20px; margin: 0; }

/* Fixed-width tracks so a short row stays left-aligned instead of stretching */
.b2b-cat-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, 96px);
    justify-content: start;
    gap: 16px;
}

.b2b-cat-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}

.b2b-cat-tile-media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--b2b-radius-lg);
    background: var(--b2b-surface-high);
    color: var(--b2b-primary);
    overflow: hidden;
    transition: background-color .3s ease, color .3s ease, transform .3s ease;
}

.b2b-cat-tile-media img { width: 100%; height: 100%; object-fit: cover; }
.b2b-cat-tile:hover .b2b-cat-tile-media { transform: translateY(-2px); background: var(--b2b-primary); color: var(--b2b-on-primary); }

.b2b-cat-tile-name {
    font-size: 12px;
    line-height: 1.3;
    font-weight: 500;
    text-align: center;
    color: var(--b2b-on-surface);
}

/* ------------------------------------------------------- Bento grid */
.b2b-bento-sec { padding: 32px 0 48px; }

.b2b-bento {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--b2b-gutter);
}

.b2b-bento-card {
    display: flex;
    flex-direction: column;
    background: var(--b2b-surface-lowest);
    border: 1px solid var(--b2b-outline-variant);
    border-radius: var(--b2b-radius-md);
    overflow: hidden;
    transition: transform .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s cubic-bezier(.4, 0, .2, 1);
}

.b2b-bento-card:hover { transform: translateY(-4px); box-shadow: var(--b2b-shadow-md); }
.b2b-bento-card-wide { grid-column: span 2; }

/* Only meaningful at the 4-column breakpoint; narrower grids already fill evenly */
@media (min-width: 1200px) {
    .b2b-bento-card-fill { grid-column: span var(--b2b-bento-fill, 1); }
}

.b2b-bento-media {
    position: relative;
    display: block;
    height: 192px;
    overflow: hidden;
    text-decoration: none;
}

.b2b-bento-media img { width: 100%; height: 100%; object-fit: cover; }

.b2b-bento-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent);
}

.b2b-bento-media-name {
    position: absolute;
    left: 24px;
    bottom: 16px;
    z-index: 1;
    font-size: 20px;
    line-height: 1.4;
    font-weight: 600;
    color: #fff;
}

.b2b-bento-body { flex: 1 1 auto; padding: 24px; }
.b2b-bento-body-split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.b2b-bento-plain-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }

.b2b-bento-plain-icon {
    background: var(--b2b-secondary-container);
    color: var(--b2b-on-secondary-container);
    padding: 8px;
    border-radius: var(--b2b-radius);
}

.b2b-bento-plain-name { font-size: 20px; font-weight: 600; margin: 0; }
.b2b-bento-plain-name a { color: var(--b2b-on-surface); text-decoration: none; }
.b2b-bento-plain-name a:hover { color: var(--b2b-secondary); }

.b2b-bento-label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--b2b-secondary);
    margin: 0 0 12px;
}

.b2b-bento-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.b2b-bento-links a {
    font-size: 14px;
    line-height: 1.4;
    color: var(--b2b-on-surface-variant);
    text-decoration: none;
    transition: color .2s ease;
}

.b2b-bento-links a:hover { color: var(--b2b-primary); }

/* Live flash-sale panel (only rendered when a sale is running) */
.b2b-bento-deals { background: var(--b2b-surface-low); border-radius: var(--b2b-radius); padding: 16px; }
.b2b-bento-deals-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.b2b-bento-deals-head .material-symbols-outlined { color: var(--b2b-secondary); }
.b2b-bento-deals-title { font-size: 14px; font-weight: 600; color: var(--b2b-on-surface); margin: 0; }
.b2b-bento-deals-list { display: flex; flex-direction: column; gap: 12px; }

.b2b-bento-deal { display: flex; align-items: center; gap: 12px; text-decoration: none; }

.b2b-bento-deal-media {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: var(--b2b-radius-sm);
    overflow: hidden;
    background: var(--b2b-surface-lowest);
    border: 1px solid var(--b2b-outline-variant);
}

.b2b-bento-deal-media img { width: 100%; height: 100%; object-fit: cover; }
.b2b-bento-deal-name { font-size: 12px; line-height: 1.35; color: var(--b2b-on-surface); }
.b2b-bento-deal:hover .b2b-bento-deal-name { color: var(--b2b-secondary); }

.b2b-bento-foot { padding: 0 24px 24px; margin-top: auto; }

.b2b-bento-browse {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-top: 1px solid var(--b2b-outline-variant);
    padding-top: 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--b2b-on-surface-variant);
    text-decoration: none;
    transition: color .2s ease;
}

.b2b-bento-browse:hover { color: var(--b2b-secondary); }

/* -------------------------------------------------------- Promo band */
.b2b-cat-promo { padding: 24px 0 64px; }

.b2b-cat-promo-panel {
    display: flex;
    align-items: center;
    gap: 40px;
    background: var(--b2b-primary-container);
    border-radius: var(--b2b-radius-md);
    padding: 40px;
    color: #fff;
}

.b2b-cat-promo-copy { flex: 1 1 auto; }

.b2b-cat-promo-eyebrow {
    display: block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--b2b-secondary-accent);
    margin-bottom: 8px;
}

.b2b-cat-promo-title {
    font-size: 32px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0 0 16px;
    color: #fff;
}

.b2b-cat-promo-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--b2b-on-primary-container);
    max-width: 36rem;
    margin: 0 0 24px;
}

.b2b-cat-promo-highlights {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: 36rem;
}

.b2b-cat-promo-highlights li { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; }
.b2b-cat-promo-highlights .material-symbols-outlined { color: var(--b2b-secondary-accent); }
.b2b-cat-promo-btn { margin-top: 24px; }

.b2b-cat-promo-art {
    flex: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 8px;
    width: 256px;
    aspect-ratio: 1;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--b2b-radius);
    background: rgba(255, 255, 255, .04);
    opacity: .6;
}

.b2b-cat-promo-art span { border-radius: var(--b2b-radius-sm); background: rgba(255, 255, 255, .18); }
.b2b-cat-promo-art span:nth-child(1),
.b2b-cat-promo-art span:nth-child(5),
.b2b-cat-promo-art span:nth-child(9) { background: var(--b2b-secondary); }
.b2b-cat-promo-art span:nth-child(3) { background: color-mix(in srgb, var(--b2b-secondary) 40%, transparent); }
.b2b-cat-promo-art span:nth-child(7) { background: color-mix(in srgb, var(--b2b-secondary) 60%, transparent); }

/* ------------------------------------------------------- Responsive */
@media (max-width: 1199px) {
    .b2b-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .b2b-bento-card-wide { grid-column: span 2; }
}

/* Match the mockup's 4-up tile row on phones */
@media (max-width: 575px) {
    .b2b-cat-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
    .b2b-cat-promo-panel { flex-direction: column; align-items: flex-start; }
    .b2b-cat-promo-art { width: 100%; max-width: 256px; align-self: center; }
}

@media (max-width: 767px) {
    .b2b-cat-hero { padding: 32px 0; }
    .b2b-cat-hero-title { font-size: 24px; }
    .b2b-cat-hero-sub { font-size: 14px; }
    .b2b-cat-hero-search { margin-top: 24px; }
    .b2b-cat-hero-search-btn { display: none; }

    .b2b-cat-tiles-sec { padding: 32px 0 8px; }
    .b2b-bento-sec { padding: 24px 0 32px; }

    .b2b-bento { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .b2b-bento-card-wide { grid-column: span 1; }
    .b2b-bento-body-split { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .b2b-bento-media { height: 160px; }
    .b2b-bento-body { padding: 20px; }
    .b2b-bento-foot { padding: 0 20px 20px; }

    .b2b-cat-promo { padding: 8px 0 40px; }
    .b2b-cat-promo-panel { padding: 24px; gap: 24px; }
    .b2b-cat-promo-title { font-size: 24px; }
    .b2b-cat-promo-highlights { grid-template-columns: minmax(0, 1fr); }
}

/* ================================================ PRODUCT CATALOG (B2B) === */

.b2b-catalog {
    display: grid;
    grid-template-columns: 256px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    padding: 32px 0 8px;
}

/* ------------------------------------------------------- Filter rail */
.b2b-catalog-sidebar-inner {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    background: var(--b2b-surface-lowest);
    border: 1px solid var(--b2b-outline-variant);
    border-radius: var(--b2b-radius-md);
    box-shadow: var(--b2b-shadow-card);
    max-height: calc(100vh - 120px);
}

.b2b-filter-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--b2b-outline-variant);
}

.b2b-filter-heading {
    flex: 1 1 auto;
    font-size: 20px;
    font-weight: 600;
    color: var(--b2b-primary);
    margin: 0;
}

.b2b-filter-clear {
    font-size: 12px;
    font-weight: 600;
    color: var(--b2b-secondary);
    text-decoration: none;
}

.b2b-filter-clear:hover { color: var(--b2b-secondary); text-decoration: underline; }

/* Close + apply are the bottom-sheet's controls; desktop keeps the rail static */
.b2b-filter-close,
.b2b-filter-actions { display: none; }

.b2b-filter-close {
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--b2b-on-surface-variant);
    padding: 4px;
    border-radius: var(--b2b-radius-full);
    cursor: pointer;
}

.b2b-filter-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px 24px 24px;
    scrollbar-width: thin;
}

.b2b-filter-scroll::-webkit-scrollbar { width: 6px; }
.b2b-filter-scroll::-webkit-scrollbar-track { background: transparent; }
.b2b-filter-scroll::-webkit-scrollbar-thumb { background: var(--b2b-surface-highest); border-radius: 10px; }

/* ------------------------------------------------ Filter sections */
/* style.css paints .bb-product-filter grey and boxes it — flatten it back */
.b2b-catalog .bb-product-filter,
.b2b-catalog .bb-product-filter-content {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}

/* Target .bb-product-filter so plugin-rendered sections (e.g. "On sale",
   attribute swatches) get the same rhythm as the ones the theme overrides */
.b2b-catalog .bb-product-filter { padding: 20px 0 0; }
.b2b-catalog .bb-product-filter + .bb-product-filter { border-top: 1px solid var(--b2b-outline-variant); }

.b2b-filter-title,
.b2b-catalog .bb-product-filter-title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--b2b-outline);
    margin: 0 0 14px;
    border: 0;
    padding: 0;
}

.b2b-filter-body { font-size: 14px; }

/* Price min/max */
.b2b-filter-range { display: flex; align-items: center; gap: 8px; }
.b2b-filter-range-sep { color: var(--b2b-outline); flex: none; }

.b2b-filter-input,
.b2b-filter-select {
    width: 100%;
    min-width: 0;
    background: var(--b2b-surface-low);
    border: 1px solid var(--b2b-outline-variant);
    border-radius: var(--b2b-radius);
    padding: 9px 12px;
    font-size: 14px;
    font-family: var(--b2b-font);
    color: var(--b2b-on-surface);
    outline: 0;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.b2b-filter-input:focus,
.b2b-filter-select:focus {
    border-color: var(--b2b-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--b2b-primary) 12%, transparent);
}

.b2b-filter-select { appearance: none; cursor: pointer; padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
}

/* Site-wide checkbox/radio harmonization — native controls pick up the brand
   accent (Theme Options), so selection controls read consistently across the
   storefront. More specific rules still override this baseline. */
input[type='checkbox'],
input[type='radio'] { accent-color: var(--b2b-secondary); }

/* Checkbox rows */
.b2b-filter-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.b2b-catalog .b2b-filter-check { display: flex; align-items: center; gap: 12px; margin: 0; }

.b2b-catalog .b2b-filter-check input[type='checkbox'] {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--b2b-secondary);
    cursor: pointer;
}

.b2b-catalog .b2b-filter-check label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex: 1 1 auto;
    margin: 0;
    font-size: 14px;
    color: var(--b2b-on-surface-variant);
    cursor: pointer;
    transition: color .2s ease;
}

.b2b-catalog .b2b-filter-check label:hover { color: var(--b2b-primary); }
.b2b-filter-count { font-size: 12px; color: var(--b2b-outline); }

/* Category tree (plugin markup, restyled) */
.b2b-filter-cats .bb-product-filter-items { list-style: none; margin: 0; padding: 0; }
.b2b-filter-cats .bb-product-filter-items .bb-product-filter-items { padding-left: 14px; display: none; }
.b2b-filter-cats .bb-product-filter-items .bb-product-filter-items.active { display: block; }
.b2b-filter-cats .bb-product-filter-item { position: relative; margin: 0 0 8px; }

.b2b-filter-cats .bb-product-filter-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--b2b-on-surface-variant);
    text-decoration: none;
    transition: color .2s ease;
}

.b2b-filter-cats .bb-product-filter-link:hover,
.b2b-filter-cats .bb-product-filter-link.active { color: var(--b2b-secondary); font-weight: 600; }

.b2b-filter-cats [data-bb-toggle='toggle-product-categories-tree'] {
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
    background: transparent;
    color: var(--b2b-outline);
    cursor: pointer;
    padding: 2px;
    line-height: 1;
}

/* ------------------------------------------------------- Results side */
.b2b-catalog-head { margin-bottom: 20px; }

.b2b-catalog-title {
    font-size: 32px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--b2b-primary);
    margin: 0;
}

.b2b-catalog-desc { font-size: 14px; color: var(--b2b-on-surface-variant); margin-top: 6px; }

/* Count + sort row, re-rendered by the ajax filter */
.b2b-catalog .shop-product-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 0 0 20px;
    border: 0;
}

.b2b-catalog .shop-product-filter .total-product p { font-size: 14px; color: var(--b2b-on-surface-variant); margin: 0; }
.b2b-catalog .shop-product-filter .total-product strong { color: var(--b2b-primary); font-weight: 700; }

/* ------------------------------------------- Mobile filter bottom sheet */
.b2b-filter-fab { display: none; }

@media (max-width: 1199px) {
    .b2b-catalog { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 20px; }

    /*
       front-ecommerce.css styles .bb-filter-offcanvas-area as a 340px full-height
       LEFT drawer (width:85%/max-width:340px, top:0, height:100%, translateX).
       The B2B design wants a full-width bottom sheet, so every one of those
       properties has to be restated here — b2b.css loads after it, so equal
       specificity wins.
    */
    .b2b-catalog-sidebar {
        position: fixed;
        inset-inline-start: 0;
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        width: 100%;
        max-width: none;
        height: auto;
        z-index: 1002;
        opacity: 1;
        transform: translateY(100%);
        transition: transform .3s cubic-bezier(.4, 0, .2, 1);
        will-change: transform;
    }

    .b2b-catalog-sidebar.offcanvas-opened { transform: translateY(0); }

    .b2b-catalog-sidebar-inner {
        position: static;
        max-height: 85vh;
        height: 85vh;
        border: 0;
        border-radius: var(--b2b-radius-xl) var(--b2b-radius-xl) 0 0;
        box-shadow: 0 -8px 30px rgba(15, 23, 42, .18);
    }

    .b2b-filter-close { display: inline-flex; }
    .b2b-filter-actions {
        display: block;
        padding: 16px 24px;
        border-top: 1px solid var(--b2b-outline-variant);
        background: var(--b2b-surface-low);
    }
    .b2b-filter-apply { width: 100%; }

    /* The plugin's toggle also drives this overlay */
    .b2b-scope ~ .body-overlay,
    .body-overlay {
        position: fixed;
        inset: 0;
        z-index: 1001;
        background: rgba(0, 0, 0, .4);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease, visibility .3s ease;
    }

    .body-overlay.opened { opacity: 1; visibility: visible; }

    .b2b-filter-fab {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        position: fixed;
        right: 16px;
        bottom: 24px;
        /* Above the bottom-bar-menu bar (.footer-mobile sits at z-index 1000) */
        z-index: 1010;
        width: auto;
        max-width: none;
        border: 0;
        border-radius: var(--b2b-radius-full);
        background: var(--b2b-primary);
        color: var(--b2b-on-primary);
        font-family: var(--b2b-font);
        font-size: 14px;
        font-weight: 600;
        padding: 14px 22px;
        box-shadow: var(--b2b-shadow-md);
        cursor: pointer;
    }

    /* Lift clear of the bottom bar when that plugin actually renders it */
    body:has(.footer-mobile) .b2b-filter-fab { bottom: 84px; }

    /* The sheet has its own close/apply controls — get the FAB out of the way */
    body:has(.b2b-catalog-sidebar.offcanvas-opened) .b2b-filter-fab { display: none; }

    .b2b-filter-fab:active { transform: scale(.96); }
}

@media (max-width: 767px) {
    .b2b-catalog-title { font-size: 24px; }
    .b2b-filter-scroll { padding: 8px 20px 20px; }
    .b2b-filter-head { padding: 18px 20px; }
}

/* ================================================= ABOUT PAGE (B2B) === */
/* Let the page-content wrapper unwrap so each shortcode <section> is full-width */
.b2b-about > .ck-content,
.b2b-about > .ck-content > p { display: contents; }
.b2b-about > .ck-content > p:empty { display: none; }

.b2b-about-eyebrow {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--b2b-secondary);
    margin-bottom: 12px;
}
.b2b-about-eyebrow--light { color: var(--b2b-secondary-accent); }

.b2b-about-rule {
    display: block;
    width: 48px;
    height: 4px;
    border-radius: var(--b2b-radius-full);
    background: var(--b2b-secondary);
    margin-top: 16px;
}

/* --------------------------------------------------------------- Hero */
.b2b-about-hero {
    position: relative;
    background: var(--b2b-primary-container);
    color: #fff;
    overflow: hidden;
}
.b2b-about-hero--photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--b2b-about-hero-img);
    background-size: cover;
    background-position: center;
    opacity: .38;
}
.b2b-about-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--b2b-primary-container) 20%, transparent 100%);
    opacity: .55;
    pointer-events: none;
}
.b2b-about-hero--photo::after { opacity: .7; }
.b2b-about-hero-inner {
    position: relative;
    z-index: 1;
    min-height: 460px;
    display: flex;
    align-items: center;
    padding-block: 96px;
}
.b2b-about-hero-copy { max-width: 640px; }
.b2b-about-hero-title {
    font-size: 44px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #fff;
    margin: 0 0 20px;
}
.b2b-about-hero-sub {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
    margin: 0;
}
.b2b-about-hero-stat {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
    padding: 14px 22px 14px 16px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--b2b-radius-md);
    backdrop-filter: blur(6px);
}
.b2b-about-hero-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--b2b-radius-full);
    background: var(--b2b-secondary-container);
    color: var(--b2b-on-secondary-container);
    flex-shrink: 0;
}
.b2b-about-hero-stat-num { font-size: 20px; font-weight: 700; color: #fff; margin: 0; line-height: 1.1; }
.b2b-about-hero-stat-label { font-size: 13px; color: rgba(255, 255, 255, .7); margin: 2px 0 0; }

/* ------------------------------------------------ Foundation / bento */
.b2b-about-story { background: var(--b2b-surface); }
.b2b-about-story-head { margin-bottom: 48px; }
.b2b-about-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}
.b2b-about-bento-story {
    grid-column: span 7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--b2b-surface-lowest);
    border: 1px solid var(--b2b-outline-variant);
    border-radius: var(--b2b-radius-md);
    padding: 40px;
}
.b2b-about-bento-title { font-size: 22px; font-weight: 600; color: var(--b2b-on-surface); margin: 0 0 20px; }
.b2b-about-bento-p { font-size: 15px; line-height: 1.8; color: var(--b2b-on-surface-variant); margin: 0 0 16px; }
.b2b-about-bento-p:last-child { margin-bottom: 0; }
.b2b-about-bento-visual {
    grid-column: span 5;
    min-height: 400px;
    border-radius: var(--b2b-radius-md);
    border: 1px solid var(--b2b-outline-variant);
    background: linear-gradient(135deg, var(--b2b-primary) 0%, var(--b2b-primary-container) 60%, #1e293b 100%);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.b2b-about-bento-visual-icon { font-size: 88px; color: rgba(255, 255, 255, .18); }
.b2b-about-value {
    grid-column: span 4;
    background: var(--b2b-surface-low);
    border: 1px solid var(--b2b-outline-variant);
    border-radius: var(--b2b-radius-md);
    padding: 32px;
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.b2b-about-value:hover {
    box-shadow: var(--b2b-shadow-card);
    border-color: var(--b2b-outline);
    transform: translateY(-3px);
}
.b2b-about-value-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--b2b-radius-md);
    background: var(--b2b-secondary-container);
    color: var(--b2b-on-secondary-container);
    margin-bottom: 24px;
}
.b2b-about-value-title { font-size: 18px; font-weight: 600; color: var(--b2b-on-surface); margin: 0 0 10px; }
.b2b-about-value-text { font-size: 13px; line-height: 1.6; color: var(--b2b-on-surface-variant); margin: 0; }

/* --------------------------------------------------- Global reach */
.b2b-about-reach { background: var(--b2b-surface-high); }
.b2b-about-reach-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.b2b-about-reach-head .b2b-section-sub { margin-top: 12px; }
.b2b-about-reach-panel {
    background: var(--b2b-surface-lowest);
    border: 1px solid var(--b2b-outline-variant);
    border-radius: var(--b2b-radius-xl);
    padding: 32px;
    box-shadow: var(--b2b-shadow-card);
}
.b2b-about-reach-map {
    aspect-ratio: 16 / 6;
    width: 100%;
    border-radius: var(--b2b-radius-lg);
    background: radial-gradient(circle at 30% 40%, #1e293b 0%, var(--b2b-primary-container) 55%, var(--b2b-primary) 100%);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.b2b-about-reach-map .material-symbols-outlined { font-size: 96px; color: rgba(110, 231, 183, .28); }
.b2b-about-reach-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 40px;
    padding-top: 8px;
}
.b2b-about-reach-stat { text-align: center; }
.b2b-about-reach-num {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--b2b-secondary);
    line-height: 1.1;
}
.b2b-about-reach-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--b2b-on-surface-variant);
    margin-top: 6px;
}

/* ------------------------------------------------ Verification */
.b2b-about-verify { background: var(--b2b-surface-lowest); }
.b2b-about-verify-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.b2b-about-verify-body { font-size: 15px; line-height: 1.7; color: var(--b2b-on-surface-variant); margin: 0 0 28px; }
.b2b-about-verify-list { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.b2b-about-verify-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: var(--b2b-on-surface-variant);
}
.b2b-about-verify-list .material-symbols-outlined { color: var(--b2b-secondary); font-size: 22px; flex-shrink: 0; }
.b2b-about-verify-btn .material-symbols-outlined { font-size: 18px; }
.b2b-about-verify-media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.b2b-about-verify-img {
    aspect-ratio: 3 / 4;
    border-radius: var(--b2b-radius-lg);
    background: linear-gradient(160deg, #334155 0%, var(--b2b-primary-container) 100%);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.b2b-about-verify-img .material-symbols-outlined { font-size: 64px; color: rgba(255, 255, 255, .2); }
.b2b-about-verify-img--b { margin-top: 48px; }

@media (max-width: 1024px) {
    .b2b-about-hero-title { font-size: 36px; }
    .b2b-about-bento-story { grid-column: span 12; }
    .b2b-about-bento-visual { grid-column: span 12; min-height: 260px; }
    .b2b-about-value { grid-column: span 4; }
    .b2b-about-verify-inner { gap: 40px; }
}
@media (max-width: 767px) {
    .b2b-about-hero-inner { min-height: 0; padding-block: 64px; }
    .b2b-about-hero-title { font-size: 28px; }
    .b2b-about-hero-sub { font-size: 16px; }
    .b2b-about-value { grid-column: span 12; }
    .b2b-about-reach-panel { padding: 16px; }
    .b2b-about-reach-stats { grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 28px; }
    .b2b-about-reach-num { font-size: 28px; }
    .b2b-about-verify-inner { grid-template-columns: 1fr; gap: 32px; }
    .b2b-about-verify-media { max-width: 420px; }
}

/* ============================================================= FAQ PAGE === */
.b2b-faq { font-family: var(--b2b-font); color: var(--b2b-on-surface); }

/* hero */
.b2b-faq-hero { background: var(--b2b-surface-low); padding: 64px 0 68px; text-align: center; }
.b2b-faq-title { font-size: 36px; font-weight: 700; letter-spacing: -.02em; color: var(--b2b-on-surface); margin: 0 0 14px; }
.b2b-faq-sub { font-size: 16px; line-height: 1.6; color: var(--b2b-on-surface-variant); margin: 0 auto 32px; max-width: 560px; }
.b2b-faq-search { position: relative; display: flex; align-items: center; max-width: 620px; margin: 0 auto; }
.b2b-faq-search > .material-symbols-outlined { position: absolute; left: 16px; color: var(--b2b-outline); font-size: 22px; pointer-events: none; }
.b2b-faq-search input { width: 100%; height: 56px; padding: 0 18px 0 50px; background: var(--b2b-surface-lowest); border: 1px solid var(--b2b-outline-variant); border-radius: var(--b2b-radius-md); font-size: 16px; color: var(--b2b-on-surface); outline: none; box-shadow: var(--b2b-shadow-card); transition: border-color .15s, box-shadow .15s; }
.b2b-faq-search input::placeholder { color: var(--b2b-outline); }
.b2b-faq-search input:focus { border-color: var(--b2b-primary); box-shadow: 0 0 0 3px rgba(15, 23, 42, .08); }

/* body grid */
.b2b-faq-body { background: var(--b2b-surface); padding: 56px 0 60px; }
.b2b-faq-grid { display: grid; grid-template-columns: 250px 1fr; gap: 48px; align-items: start; }

/* category nav */
.b2b-faq-sidebar { position: sticky; top: 90px; }
.b2b-faq-sidebar-label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--b2b-outline); margin: 0 0 14px; padding: 0 14px; }
.b2b-faq-cats { display: flex; flex-direction: column; gap: 4px; }
.b2b-faq-cat { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--b2b-radius); color: var(--b2b-on-surface-variant) !important; font-size: 14px; font-weight: 600; text-decoration: none; transition: background .15s, color .15s; }
.b2b-faq-cat:hover { background: var(--b2b-surface-high); color: var(--b2b-on-surface) !important; }
.b2b-faq-cat.active { background: var(--b2b-secondary-container); color: var(--b2b-on-secondary-container) !important; }
.b2b-faq-cat .material-symbols-outlined { font-size: 20px; flex: 0 0 auto; }

/* sections */
.b2b-faq-sections { display: flex; flex-direction: column; gap: 44px; min-width: 0; }
.b2b-faq-section-title { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; color: var(--b2b-on-surface); margin: 0 0 18px; }
.b2b-faq-section-title .material-symbols-outlined { color: var(--b2b-secondary); font-size: 24px; }
.b2b-faq-items { display: flex; flex-direction: column; gap: 14px; }

/* accordion item */
.b2b-faq-item { background: var(--b2b-surface-lowest); border: 1px solid var(--b2b-outline-variant); border-radius: var(--b2b-radius-md); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.b2b-faq-item:hover { border-color: var(--b2b-outline); }
.b2b-faq-item.active { box-shadow: var(--b2b-shadow-card); border-color: var(--b2b-outline-variant); }
.b2b-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 18px 22px; background: transparent; border: 0; cursor: pointer; text-align: left; font-family: var(--b2b-font); }
.b2b-faq-q-text { font-size: 15px; font-weight: 600; color: var(--b2b-on-surface); line-height: 1.4; }
.b2b-faq-chevron { flex: 0 0 auto; color: var(--b2b-outline); font-size: 24px; transition: transform .3s ease; }
.b2b-faq-item.active .b2b-faq-chevron { transform: rotate(180deg); }
.b2b-faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.b2b-faq-item.active .b2b-faq-a { max-height: 1200px; }
.b2b-faq-a-inner { padding: 2px 22px 20px; color: var(--b2b-on-surface-variant); font-size: 14px; line-height: 1.75; }
.b2b-faq-a-inner > *:last-child { margin-bottom: 0; }
.b2b-faq-a-inner p { margin: 0 0 10px; }
.b2b-faq-a-inner a { color: var(--b2b-secondary); text-decoration: underline; }

/* empty state */
.b2b-faq-empty { padding: 32px; text-align: center; color: var(--b2b-on-surface-variant); background: var(--b2b-surface-low); border-radius: var(--b2b-radius-md); }

/* CTA */
.b2b-faq-cta-wrap { background: var(--b2b-surface); padding: 0 0 68px; }
.b2b-faq-cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding: 40px; background: var(--b2b-primary-container); color: #fff; border-radius: var(--b2b-radius-xl); }
.b2b-faq-cta-copy { min-width: 0; }
.b2b-faq-cta-title { font-size: 22px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.b2b-faq-cta-sub { font-size: 15px; line-height: 1.6; color: var(--b2b-on-primary-container); margin: 0; max-width: 520px; }
.b2b-faq-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.b2b-faq-cta-ghost { background: transparent; border: 1px solid rgba(255, 255, 255, .3); color: #fff !important; }
.b2b-faq-cta-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff !important; }

@media (max-width: 900px) {
    .b2b-faq-grid { grid-template-columns: 1fr; gap: 22px; }
    .b2b-faq-sidebar { position: static; top: auto; }
    .b2b-faq-sidebar-label { display: none; }
    .b2b-faq-cats { flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 4px; scrollbar-width: none; -ms-overflow-style: none; }
    .b2b-faq-cats::-webkit-scrollbar { display: none; }
    .b2b-faq-cat { flex: 0 0 auto; padding: 10px 16px; border-radius: var(--b2b-radius-full); background: var(--b2b-surface-high); white-space: nowrap; }
}
@media (max-width: 640px) {
    .b2b-faq-hero { padding: 40px 0 44px; }
    .b2b-faq-title { font-size: 26px; }
    .b2b-faq-body { padding: 36px 0 40px; }
    .b2b-faq-cta { padding: 26px; }
    .b2b-faq-cta-actions { width: 100%; }
    .b2b-faq-cta-actions .b2b-btn { flex: 1; }
}

/* ======================================================= PRODUCT CARD === */
/* Global b2b product card (.b2b-pcard) — shared by catalog, storefront,
   category, search and home product grids. Keeps the .product-cart-wrap /
   .product-img / .product-badges hooks; b2b.css loads after style.css. */
.b2b-pcard {
    display: flex;
    flex-direction: column;
    /* Size to content. The base theme's `.product-cart-wrap { height: calc(100%
       - 30px) }` stretched every card to the tallest in its row, so shorter
       cards showed blank space under the vendor row (content packs to the top).
       `height: auto` lets the card hug its content — the slack now falls outside
       the border, in the transparent column, instead of inside the card. */
    height: auto;
    background: var(--b2b-surface-lowest);
    border: 1px solid var(--b2b-outline-variant);
    border-radius: var(--b2b-radius-md);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.b2b-pcard:hover { transform: translateY(-4px); box-shadow: var(--b2b-shadow-md); border-color: var(--b2b-outline); }

.b2b-pcard-media { position: relative; overflow: hidden; background: var(--b2b-surface-container); }
.b2b-pcard-media .product-img { display: block; aspect-ratio: 1 / 1; margin: 0; }
.b2b-pcard-media .product-img > a { display: block; width: 100%; height: 100%; }
.b2b-pcard-media .default-img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.b2b-pcard:hover .b2b-pcard-media .default-img { transform: scale(1.05); }

.b2b-pcard-verified {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 9px; border-radius: var(--b2b-radius-sm);
    background: var(--b2b-secondary); color: var(--b2b-on-secondary);
    font-size: 11px; font-weight: 600; line-height: 1.4;
    box-shadow: var(--b2b-shadow-card);
}
.b2b-pcard-verified .material-symbols-outlined { font-size: 14px; }

/* keep the sale/label/out-of-stock badges but move them to the top-right */
.b2b-pcard .product-badges { position: absolute; top: 12px; right: 12px; left: auto; bottom: auto; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin: 0; }
.b2b-pcard .product-badges span { display: inline-block; padding: 3px 8px; border-radius: var(--b2b-radius-sm); font-size: 11px; font-weight: 600; line-height: 1.5; }

.b2b-pcard-body { display: flex; flex-direction: column; padding: 18px; gap: 4px; }
.b2b-pcard-titlebar { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.b2b-pcard-title { margin: 0; font-size: 15px; line-height: 1.35; font-weight: 600; }
.b2b-pcard-title a {
    color: var(--b2b-on-surface);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    text-decoration: none;
}
.b2b-pcard-title a:hover { color: var(--b2b-primary); }
.b2b-pcard-fav {
    flex: 0 0 auto; width: 32px; height: 32px; margin: -4px -4px 0 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--b2b-radius-full); color: var(--b2b-outline) !important;
    background: transparent; transition: color .15s, background .15s;
}
.b2b-pcard-fav:hover { color: var(--b2b-error) !important; background: var(--b2b-surface-low); }
.b2b-pcard-fav .material-symbols-outlined { font-size: 20px; }
/* Favorited (in-wishlist) state: fill the heart + turn it brand-error red,
   echoing the hover affordance. Keyed off `.js-remove-from-wishlist-button`,
   the hook class the wishlist JS reliably swaps on (add) and off (remove) and
   that product-item.blade.php renders server-side for already-wishlisted items
   — so it is the single source of truth for "this product is favorited". */
.b2b-pcard-fav.js-remove-from-wishlist-button { color: var(--b2b-error) !important; }
.b2b-pcard-fav.js-remove-from-wishlist-button .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

/* Pack the price/MOQ/vendor block right under the title. `margin-top: auto`
   used to spring the foot to the card bottom (cards are equal-height), leaving
   a dead gap under the title — worst on cards with no vendor row. */
.b2b-pcard-foot { padding-top: 2px; }
/* Price sits on its own row; the two injected RFQ CTAs (Request Quotation +
   Add to RFQ Basket) share a tidy equal-width row beneath it. */
/* higher specificity than style.css `.product-cart-wrap .product-card-bottom{display:flex}` */
.b2b-pcard .product-card-bottom.b2b-pcard-price { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 10px; align-items: center; }
/* price colour inherits the site-wide brand token (--color-brand), consistent
   with the product page / home / storefront; only size + weight are set here */
.b2b-pcard-price .product-price { grid-column: 1 / -1; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.b2b-pcard-price .product-price .old-price { font-size: 14px; font-weight: 500; color: var(--b2b-outline); text-decoration: line-through; margin-left: 6px; }
.b2b-pcard-price .rfq-entry-btn--card,
.b2b-pcard-price .rfq-basket-btn--card {
    width: 100%; min-height: 42px; margin: 0; justify-content: center; gap: 6px;
    border-radius: var(--b2b-radius-md); font-size: 12.5px; font-weight: 600; line-height: 1.2;
}
.b2b-pcard-price .rfq-entry-btn--card { border: 1px solid var(--b2b-primary); background: var(--b2b-primary); color: var(--b2b-on-primary); }
.b2b-pcard-price .rfq-entry-btn--card:hover { background: var(--b2b-primary-hover); border-color: var(--b2b-primary-hover); color: var(--b2b-on-primary); }
.b2b-pcard-price .rfq-basket-btn--card { border: 1px solid var(--b2b-outline-variant); background: var(--b2b-surface-lowest); color: var(--b2b-on-surface); }
.b2b-pcard-price .rfq-basket-btn--card:hover { border-color: var(--b2b-primary); background: var(--b2b-surface-low); color: var(--b2b-primary); }
.b2b-pcard-price .rfq-entry-btn--card .material-symbols-outlined,
.b2b-pcard-price .rfq-basket-btn--card .material-symbols-outlined { font-size: 17px; }

.b2b-pcard-moq {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px; font-weight: 600; color: var(--b2b-on-surface-variant);
    margin-bottom: 12px;
}
.b2b-pcard-moq .material-symbols-outlined { font-size: 16px; color: var(--b2b-secondary); }

.b2b-pcard-vendor {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding-top: 14px; border-top: 1px solid var(--b2b-outline-variant);
}
.b2b-pcard-vendor-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.b2b-pcard-avatar {
    flex: 0 0 auto; width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--b2b-radius); background: var(--b2b-primary); color: #fff;
    font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.b2b-pcard-vendor-meta { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.b2b-pcard-vendor-name { font-size: 13px; font-weight: 700; color: var(--b2b-on-surface); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b2b-pcard-vendor-name:hover { color: var(--b2b-secondary); }
.b2b-pcard-rating { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; color: var(--b2b-on-surface-variant); }
.b2b-pcard-rating .material-symbols-outlined { font-size: 14px; color: #f59e0b; }
.b2b-pcard-rating-count { color: var(--b2b-outline); font-weight: 500; }
.b2b-pcard-go {
    flex: 0 0 auto; width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--b2b-radius); background: var(--b2b-surface-container); color: var(--b2b-on-surface) !important;
    transition: background .15s, color .15s;
}
.b2b-pcard-go:hover { background: var(--b2b-primary); color: #fff !important; }
.b2b-pcard-go .material-symbols-outlined { font-size: 20px; }

/* 3-up grid beside the filter rail (product-items-loop passes perRow) */
@media (min-width: 1200px) {
    .product-grid-3 > [class*="col-"] { flex: 0 0 33.3333%; max-width: 33.3333%; }
}

/* ========================================================= VENDOR STORE === */
/* hide the default breadcrumb on the storefront (the full-bleed cover replaces it) */
.main:has(.b2b-store) > .page-header { display: none; }
/* Contain the full-bleed store block. width:100vw is wider than the usable content area
   by the vertical scrollbar (~12-15px), and the breakout margin rounds off-centre, so the
   block leaked that much horizontal page scroll — most visible in RTL / on mobile. Clipping
   the X axis at .main (already full content-width) trims the bleed to the viewport edges.
   overflow-x:clip does NOT create a scroll container, so the sticky sidebar and fixed FAB
   are unaffected; :has() scopes it to the store page only. */
.main:has(.b2b-store) { overflow-x: clip; }

/* margin-inline (not margin-left) keeps the breakout symmetric and direction-agnostic so
   the cover reaches both viewport edges in LTR and RTL alike. */
.b2b-store { position: relative; width: 100vw; margin-inline: calc(50% - 50vw); overflow-x: clip; font-family: var(--b2b-font); color: var(--b2b-on-surface); background: var(--b2b-surface); }
.b2b-store, .b2b-store [id] { scroll-margin-top: 88px; }
/* On desktop (>=992px) the .b2b-appbar becomes position:fixed (~73px) once scrolled and
   leaves normal flow, shifting content up and eating the anchor offset. Add its height
   back so in-page jumps (Contact Vendor / storefront tabs / Request-Quote FAB) land the
   target clear of the sticky header. Below 992px the mobile bar scrolls away, so 88px holds. */
@media (min-width: 992px) { .b2b-store, .b2b-store [id] { scroll-margin-top: 165px; } }

/* cover */
.b2b-store-cover { height: 300px; background-color: var(--b2b-primary-container); background-image: linear-gradient(120deg, var(--b2b-primary-container), var(--b2b-primary)); background-size: cover; background-position: center; display: grid; place-items: center; }
.b2b-store-cover-icon { font-size: 96px; color: rgba(255, 255, 255, .22); }

/* header card */
.b2b-store-header { position: relative; z-index: 2; margin-top: -72px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 26px 30px; background: var(--b2b-surface-lowest); border: 1px solid var(--b2b-outline-variant); border-radius: var(--b2b-radius-xl); box-shadow: var(--b2b-shadow-md); }
.b2b-store-logo { flex: 0 0 auto; width: 116px; height: 116px; margin-top: -66px; padding: 10px; background: #fff; border: 1px solid var(--b2b-outline-variant); border-radius: var(--b2b-radius-lg); box-shadow: var(--b2b-shadow-card); display: grid; place-items: center; }
.b2b-store-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.b2b-store-headmain { flex: 1 1 320px; min-width: 0; position: relative; }
.b2b-store-headtop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; padding-inline-end: 56px; }
.b2b-store-name { font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: var(--b2b-on-surface); margin: 0; }
.b2b-store-desc { font-size: 14px; line-height: 1.6; color: var(--b2b-on-surface-variant); margin: 0; max-width: 660px; }
.b2b-store-headactions { flex: 0 0 auto; display: flex; gap: 12px; margin-inline-start: auto; }
/* Small QR icon pinned to the top-right of the name block — scrolls to the full #store-qr section. */
.b2b-store-qr-btn { position: absolute; top: 0; inset-inline-end: 0; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--b2b-radius-lg); background: var(--b2b-surface-lowest); border: 1px solid var(--b2b-outline-variant); color: var(--b2b-primary); box-shadow: var(--b2b-shadow-card); transition: border-color .15s, transform .15s; }
.b2b-store-qr-btn:hover { border-color: var(--b2b-outline); transform: translateY(-1px); color: var(--b2b-primary); }
.b2b-store-qr-btn .material-symbols-outlined { font-size: 26px; line-height: 1; }

.b2b-store-vacation:empty { display: none; }
.b2b-store-vacation { margin-top: 16px; }

/* tabs */
.b2b-store-tabs { display: flex; justify-content: safe center; gap: 4px; margin-top: 26px; padding-inline: 8px; border-bottom: 1px solid var(--b2b-outline-variant); overflow-x: auto; scrollbar-width: none; }
.b2b-store-tabs::-webkit-scrollbar { display: none; }
.b2b-store-tabs a { flex: 0 0 auto; padding: 0 12px 14px; color: var(--b2b-on-surface-variant); font-weight: 600; font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; }
.b2b-store-tabs a:hover { color: var(--b2b-primary); }
.b2b-store-tabs a.active { color: var(--b2b-primary); border-bottom-color: var(--b2b-primary); }

/* store QR code — concept "Store QR Card": brand-banded vertical card, centred QR,
   mono link row + Copy, Download / Share actions. Colours come only from the
   Theme-Options tokens (var(--fbl-*)); no hard-coded brand hex. */
.b2b-store-qr { margin-top: 28px; display: flex; justify-content: center; }
.b2b-qrcard { width: 100%; max-width: 420px; background: var(--fbl-surface); border: 1px solid var(--fbl-border); border-radius: var(--r-card); overflow: hidden; box-shadow: 0 6px 24px rgba(26, 35, 33, .08); }

/* Header band */
.b2b-qrcard-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; background: linear-gradient(135deg, var(--fbl-brand-deep), var(--fbl-brand)); }
.b2b-qrcard-mark { flex: none; width: 40px; height: 40px; border-radius: var(--r-control); background: rgba(255, 255, 255, .14); display: flex; align-items: center; justify-content: center; color: #fff; }
.b2b-qrcard-mark .material-symbols-outlined { font-size: 22px; line-height: 1; }
.b2b-qrcard-headmeta { min-width: 0; display: flex; flex-direction: column; }
.b2b-qrcard-eyebrow { font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; }
.b2b-qrcard-store { font-size: 12px; color: var(--fbl-on-brand-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b2b-qrcard-verified { margin-inline-start: auto; flex: none; display: inline-flex; align-items: center; gap: 4px; background: rgba(255, 255, 255, .15); color: #fff; border-radius: var(--r-badge); padding: 4px 9px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.b2b-qrcard-verified .material-symbols-outlined { font-size: 14px; line-height: 1; }

/* Body: QR + caption + link row */
.b2b-qrcard-body { padding: 26px 26px 20px; display: flex; flex-direction: column; align-items: center; }
.b2b-qrcard-frame { width: clamp(180px, 62%, 232px); max-width: 100%; background: #fff; border: 1px solid var(--fbl-border); border-radius: var(--r-card); padding: 16px; box-shadow: 0 3px 14px rgba(26, 35, 33, .07); }
.b2b-qrcard-frame svg { display: block; width: 100%; height: auto; }
.b2b-qrcard-title { font-size: var(--fs-h2); font-weight: 600; color: var(--fbl-ink); text-align: center; margin: 18px 0 0; }
.b2b-qrcard-sub { font-size: 13px; color: var(--fbl-ink-3); text-align: center; line-height: 1.5; margin: 4px 0 0; }

.b2b-qrcard-urlrow { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 16px; background: var(--fbl-bg); border: 1px solid var(--fbl-border); border-radius: var(--r-control); padding: 8px 10px 8px 12px; box-sizing: border-box; }
.b2b-qrcard-url { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 12px; color: var(--fbl-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; unicode-bidi: isolate; }
.b2b-qrcard-copy { flex: none; background: var(--fbl-surface); border: 1px solid var(--fbl-border-strong); border-radius: var(--r-control); padding: 5px 12px; font: inherit; font-size: 12px; font-weight: 600; color: var(--fbl-brand); cursor: pointer; transition: border-color .15s, color .15s; }
.b2b-qrcard-copy:hover { border-color: var(--fbl-brand); }
.b2b-qrcard-copy.is-copied { border-color: var(--fbl-success); color: var(--fbl-success); }

/* Actions */
.b2b-qrcard-actions { display: flex; gap: 8px; padding: 0 26px 24px; }
.b2b-qrcard-btn { flex: 1; height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: var(--r-control); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.b2b-qrcard-btn .material-symbols-outlined { font-size: 18px; line-height: 1; }
.b2b-qrcard-btn-primary { background: var(--fbl-brand); color: #fff; border: 1px solid var(--fbl-brand); }
.b2b-qrcard-btn-primary:hover { background: var(--fbl-brand-deep); border-color: var(--fbl-brand-deep); }
.b2b-qrcard-btn-ghost { background: var(--fbl-surface); color: var(--fbl-ink); border: 1px solid var(--fbl-border-strong); }
.b2b-qrcard-btn-ghost:hover { border-color: var(--fbl-brand); color: var(--fbl-brand); }

@media (max-width: 420px) {
    .b2b-qrcard-actions { flex-direction: column; }
}

/* body grid */
.b2b-store-body { display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: start; padding-top: 40px; padding-bottom: 48px; }
.b2b-store-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* sidebar cards */
.b2b-store-card { background: var(--b2b-surface-low); border: 1px solid var(--b2b-outline-variant); border-radius: var(--b2b-radius-lg); padding: 22px; }
.b2b-store-card-title { font-size: 18px; font-weight: 700; color: var(--b2b-on-surface); margin: 0 0 16px; }
.b2b-store-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.b2b-store-facts li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--b2b-on-surface-variant); }
.b2b-store-facts li .material-symbols-outlined { font-size: 20px; color: var(--b2b-outline); flex: 0 0 auto; }
.b2b-store-cats { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--b2b-outline-variant); }
.b2b-store-cats-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--b2b-on-surface-variant); margin: 0 0 12px; }
.b2b-store-cats-title .material-symbols-outlined { font-size: 18px; color: var(--b2b-outline); }
.b2b-store-cats-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.b2b-store-cat { display: inline-flex; align-items: center; padding: 5px 12px; background: var(--b2b-surface); border: 1px solid var(--b2b-outline-variant); border-radius: 999px; font-size: 13px; color: var(--b2b-on-surface); }
a.b2b-store-cat { text-decoration: none; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; }
a.b2b-store-cat:hover { border-color: var(--b2b-primary); color: var(--b2b-primary); }
.b2b-store-rating { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--b2b-outline-variant); }

/* trade assurance */
.b2b-store-assurance { position: relative; overflow: hidden; background: var(--b2b-primary-container); color: #fff; border-radius: var(--b2b-radius-lg); padding: 24px; }
/* Decorative corner glyph — also a Material Symbols element (forced LTR), so mirror it with
   direction-scoped physical offsets rather than logical props. */
.b2b-store-assurance-badge { position: absolute; top: -8px; right: -8px; left: auto; font-size: 86px; color: rgba(255, 255, 255, .06); }
body[dir=rtl] .b2b-store-assurance-badge { right: auto; left: -8px; }
.b2b-store-assurance h3 { font-size: 18px; font-weight: 700; color: #fff; margin: 0 0 6px; }
.b2b-store-assurance p { font-size: 13px; line-height: 1.5; color: var(--b2b-on-primary-container); margin: 0 0 16px; }
.b2b-store-assurance ul { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.b2b-store-assurance li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #fff; }
.b2b-store-assurance li .material-symbols-outlined { font-size: 18px; color: var(--b2b-secondary-accent); }
.b2b-store-assurance-link { display: block; text-align: center; padding: 11px; background: #fff; color: var(--b2b-primary) !important; border-radius: var(--b2b-radius); font-weight: 600; font-size: 14px; }
.b2b-store-assurance-link:hover { background: var(--b2b-surface-low); }

/* contact form */
.b2b-store-contact-note { font-size: 12.5px; line-height: 1.5; color: var(--b2b-on-surface-variant); margin: 0 0 16px; }
.b2b-store-contact input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.b2b-store-contact textarea,
.b2b-store-contact .form-control { width: 100%; border: 1px solid var(--b2b-outline-variant); border-radius: var(--b2b-radius); padding: 10px 12px; font-size: 14px; background: var(--b2b-surface-lowest); color: var(--b2b-on-surface); }
.b2b-store-contact textarea { min-height: 96px; }

/* main products */
.b2b-store-main { min-width: 0; }
.b2b-store-main-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.b2b-store-main-title { font-size: 24px; font-weight: 700; letter-spacing: -.01em; color: var(--b2b-on-surface); margin: 0; }
.b2b-store-search { position: relative; display: flex; align-items: center; min-width: 240px; flex: 1 1 240px; max-width: 320px; }
.b2b-store-search .material-symbols-outlined { position: absolute; left: 12px; right: auto; color: var(--b2b-outline); font-size: 20px; }
/* The Material Symbols glyph is forced `direction: ltr` (icon-font requirement), so logical
   inset props resolve against its own LTR axis and never flip. Pin it per document direction. */
body[dir=rtl] .b2b-store-search .material-symbols-outlined { left: auto; right: 12px; }
/* Selector carries .b2b-store so it outweighs the theme-wide `body[dir=rtl] input { padding-right:20px; padding-left:0 }`
   in rtl.css (0,1,2) that would otherwise clobber the icon-side padding. Logical padding keeps the 40px gutter on
   the icon side in both directions. */
.b2b-store .b2b-store-search input { width: 100%; height: 42px; padding-block: 0; padding-inline: 40px 14px; background: var(--b2b-surface-lowest); border: 1px solid var(--b2b-outline-variant); border-radius: var(--b2b-radius); font-size: 14px; outline: none; }
.b2b-store-search input:focus { border-color: var(--b2b-primary); }
.b2b-store .shop-product-filter { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.b2b-store .shop-product-filter .total-product p { margin: 0; font-size: 14px; color: var(--b2b-on-surface-variant); }

/* product cards inside the store use the global .b2b-pcard styling */

/* company profile */
.b2b-store-profile { padding-top: 4px; padding-bottom: 52px; }
.b2b-store-section-title { font-size: 24px; font-weight: 700; color: var(--b2b-on-surface); margin: 0 0 18px; }
.b2b-store-about { background: var(--b2b-surface-lowest); border: 1px solid var(--b2b-outline-variant); border-radius: var(--b2b-radius-lg); padding: 28px; font-size: 15px; line-height: 1.7; color: var(--b2b-on-surface-variant); }

/* stats band — bordered cards on the page surface (matches .b2b-store-about /
   .b2b-product-fact) instead of a flat full-bleed grey block */
.b2b-store-stats { background: transparent; padding: 4px 0 52px; }
.b2b-store-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; text-align: center; }
.b2b-store-stat {
    display: flex; flex-direction: column; justify-content: center;
    padding: 26px 18px; border: 1px solid var(--b2b-outline-variant);
    border-radius: var(--b2b-radius-lg); background: var(--b2b-surface-lowest);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.b2b-store-stat:hover { border-color: var(--b2b-surface-dim); box-shadow: var(--b2b-shadow-md); }
.b2b-store-stat strong { display: block; font-size: 32px; font-weight: 700; letter-spacing: -.02em; color: var(--b2b-primary); line-height: 1.1; }
.b2b-store-stat span { display: block; margin-top: 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--b2b-on-surface-variant); }

/* request quote FAB */
.b2b-store-fab { position: fixed; bottom: 28px; inset-inline-end: 28px; z-index: 900; display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 22px; background: var(--b2b-primary); color: #fff !important; border-radius: var(--b2b-radius-full); box-shadow: var(--b2b-shadow-lg); font-weight: 600; font-size: 14px; transition: transform .15s; }
.b2b-store-fab:hover { transform: translateY(-2px); }

@media (max-width: 1024px) {
    .b2b-store-body { grid-template-columns: 1fr; }
    .b2b-store-side { flex-direction: row; flex-wrap: wrap; }
    .b2b-store-side > * { flex: 1 1 260px; }
}
@media (max-width: 768px) {
    .b2b-store-cover { height: 190px; }
    .b2b-store-header { margin-top: -54px; padding: 20px; gap: 16px; }
    .b2b-store-logo { width: 84px; height: 84px; margin-top: -54px; }
    .b2b-store-name { font-size: 22px; }
    .b2b-store-headmain { flex-basis: 100%; }
    .b2b-store-headactions { margin-left: 0; width: 100%; }
    .b2b-store-headactions .b2b-btn { flex: 1; }
    .b2b-store-side { flex-direction: column; }
    .b2b-store-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
    .b2b-store-stat strong { font-size: 26px; }
    .b2b-store-fab { width: 54px; padding: 0; justify-content: center; }
    .b2b-store-fab-label { display: none; }
}

/* ============================================ PRODUCT INQUIRY / RFQ MODAL === */
/* The per-product Send-Inquiry (RFQ) modal ships from scale-marketplace with a
   teal palette and is rendered via a direct view() (not theme-overridable), so
   we recolor it to the b2b emerald palette here. b2b.css only loads on the b2b
   theme, so the wholesale fallback keeps its own colours. Higher-specificity
   selectors + !important beat the modal's @once inline <style>. All markup and
   data-inquiry-* / analytics hooks are untouched. */
.wn-product-inquiry .wn-inquiry-trigger,
.wn-inquiry-modal .wn-inquiry-send {
    background: var(--b2b-secondary) !important;
    color: #fff !important;
    border-radius: var(--b2b-radius) !important;
}
.wn-product-inquiry .wn-inquiry-trigger:hover,
.wn-inquiry-modal .wn-inquiry-send:hover { background: #0ea371 !important; color: #fff !important; }
.wn-inquiry-modal .wn-inquiry-modal__dialog { border-radius: var(--b2b-radius-lg) !important; }
.wn-inquiry-modal .wn-inquiry-modal__eyebrow { color: var(--b2b-secondary) !important; }
.wn-inquiry-modal input:focus,
.wn-inquiry-modal textarea:focus {
    outline: 2px solid rgba(16, 185, 129, .22) !important;
    border-color: var(--b2b-secondary) !important;
}
.wn-inquiry-modal .wn-inquiry-suggestions button {
    border-color: #a7f3d0 !important;
    background: #ecfdf5 !important;
    color: #065f46 !important;
    border-radius: var(--b2b-radius-full) !important;
}
.wn-inquiry-modal .wn-inquiry-suggestions button:hover { background: var(--b2b-secondary-container) !important; }
.wn-inquiry-modal .wn-inquiry-product { border-radius: var(--b2b-radius-md) !important; }

/* === B2B:COMPONENTS === */

/* ================================================= PRODUCT DETAILS (B2B) === */
.b2b-product-layout-container {
    width: 100%;
    max-width: 1440px;
    padding-inline: 40px;
}
.b2b-product-layout-container > .row { margin-inline: 0; }
.b2b-product-layout-container > .row > [class*="col-"] { padding-inline: 0; }
.b2b-product-page {
    padding: 16px 0 56px;
    color: var(--b2b-on-surface);
    font-family: var(--b2b-font);
}
.b2b-product-page,
.b2b-product-page * { box-sizing: border-box; }
.b2b-product-page a { text-decoration: none; }
.b2b-product-overview {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr);
    gap: 24px;
    align-items: start;
}
.b2b-product-gallery-panel { position: relative; min-width: 0; }
.b2b-product-gallery-panel .detail-gallery { width: 100%; }
.b2b-product-gallery-panel .bb-product-gallery-wrapper,
.b2b-product-gallery-panel .bb-product-gallery { width: 100%; }
.b2b-product-gallery-panel .bb-product-gallery {
    display: flex !important;
    flex-direction: column;
    gap: 16px;
}
.b2b-product-gallery-panel .bb-product-gallery-images,
.b2b-product-gallery-panel .bb-product-gallery-thumbnails {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}
.b2b-product-gallery-panel .bb-product-gallery-images:not(.slick-initialized) > a:not(:first-child) { display: none; }
.b2b-product-gallery-panel .bb-product-gallery-images .slick-list,
.b2b-product-gallery-panel .bb-product-gallery-images > a {
    overflow: hidden;
    border: 1px solid var(--b2b-outline-variant);
    border-radius: var(--b2b-radius-lg);
    background: var(--b2b-surface-container);
    box-shadow: var(--b2b-shadow-card);
}
.b2b-product-gallery-panel .bb-product-gallery-images a {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.b2b-product-gallery-panel .bb-product-gallery-images img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-height: 100%;
    margin: 0 !important;
    object-fit: cover;
}
.b2b-product-gallery-panel .bb-product-gallery-thumbnails .slick-list { margin-inline: -8px; }
.b2b-product-gallery-panel .bb-product-gallery-thumbnails .slick-slide { padding-inline: 8px; }
.b2b-product-gallery-panel .bb-product-gallery-thumbnails img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 1px solid var(--b2b-outline-variant);
    border-radius: var(--b2b-radius);
    background: var(--b2b-surface-lowest);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
/* Override plugin's fixed `.slick-slide img { height: 70px }` so the 1/1 aspect-ratio wins and thumbnails stay square. */
.b2b-product-gallery-panel .bb-product-gallery-thumbnails .slick-slide img { height: auto; }
.b2b-product-gallery-panel .bb-product-gallery-thumbnails .slick-current img {
    border: 2px solid var(--b2b-primary);
    box-shadow: 0 0 0 1px var(--b2b-primary);
}
.b2b-product-gallery-dots { display: none; }
.b2b-product-verified-overlay,
.b2b-product-verified-inline {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: var(--b2b-radius-full);
    background: var(--b2b-secondary);
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
}
.b2b-product-verified-overlay {
    position: absolute;
    z-index: 4;
    top: 16px;
    left: 16px;
    padding: 8px 14px;
    box-shadow: var(--b2b-shadow-card);
}
.b2b-product-verified-overlay .material-symbols-outlined,
.b2b-product-verified-inline .material-symbols-outlined { font-size: 18px; }
.b2b-product-verified-inline { display: none; }
.b2b-product-summary {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 24px;
}
.b2b-product-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.b2b-product-title-row > div { min-width: 0; }
.b2b-product-page .title-detail {
    margin: 0 0 10px;
    color: var(--b2b-primary);
    font-family: var(--b2b-font);
    font-size: clamp(28px, 2.5vw, 36px);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.12;
}
/* "Sold by <store>" — sits directly under the product name, a step larger than the taxonomy list. */
.b2b-product-page .b2b-product-soldby {
    display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin: 0 0 12px; font-size: 15.5px; line-height: 1.4;
    color: var(--b2b-on-surface-variant); font-weight: 500;
}
.b2b-product-page .b2b-product-soldby .b2b-product-soldby-label { color: var(--b2b-on-surface-variant); }
.b2b-product-page .b2b-product-soldby strong { color: var(--b2b-primary); font-weight: 700; }
.b2b-product-page .b2b-product-soldby:hover strong { text-decoration: underline; }
.b2b-product-page .b2b-product-soldby-row {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 0 0 12px;
}
.b2b-product-page .b2b-product-soldby-row .b2b-product-soldby { margin: 0; }
.b2b-product-page .b2b-product-soldby-row .follow-btn {
    flex: 0 0 auto; padding: 5px 12px; font-size: 13px; line-height: 1.2; min-height: 0;
}
.b2b-product-page .b2b-product-soldby-row .follow-btn .follow-btn__icon { font-size: 16px; }
.b2b-product-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    color: var(--b2b-on-surface-variant);
    font-size: 14px;
}
.b2b-product-meta .product-detail-rating {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--b2b-on-surface-variant);
}
.b2b-product-rating-star {
    color: var(--b2b-secondary);
    font-size: 21px;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.b2b-product-meta-divider { width: 1px; height: 18px; background: var(--b2b-outline-variant); }
.b2b-product-wishlist {
    display: grid;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 50%;
    color: var(--b2b-on-surface-variant) !important;
    transition: border-color .15s, background .15s, color .15s;
}
.b2b-product-wishlist:hover {
    border-color: var(--b2b-outline-variant);
    background: var(--b2b-surface-lowest);
    color: var(--b2b-primary) !important;
}
/* Favorited (in-wishlist) state — mirrors the product-card heart: fill the
   glyph + turn it brand-error red. Keyed off `.js-remove-from-wishlist-button`,
   the hook class the wishlist JS swaps on (add) and off (remove), and that
   product.blade.php renders server-side for already-wishlisted products. */
.b2b-product-wishlist.js-remove-from-wishlist-button { color: var(--b2b-error) !important; }
.b2b-product-wishlist.js-remove-from-wishlist-button .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.b2b-product-order-card {
    padding: 24px;
    border: 1px solid var(--b2b-outline-variant);
    border-radius: var(--b2b-radius-lg);
    background: var(--b2b-surface-lowest);
    box-shadow: var(--b2b-shadow-card);
}
.b2b-product-section-label {
    margin: 0 0 16px;
    color: var(--b2b-on-surface-variant);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.4;
    text-transform: uppercase;
}
.b2b-product-label-mobile { display: none; }
.b2b-product-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 20px;
}
.b2b-product-fact {
    display: flex;
    min-width: 0;
    min-height: 82px;
    flex-direction: column;
    justify-content: center;
    padding: 12px;
    border: 1px solid var(--b2b-outline-variant);
    border-radius: var(--b2b-radius);
    background: var(--b2b-surface-low);
}
.b2b-product-fact-label {
    display: block;
    margin-bottom: 3px;
    color: var(--b2b-on-surface-variant);
    font-size: 11px;
    line-height: 1.35;
}
.b2b-product-fact > strong { color: var(--b2b-on-surface); font-size: 17px; line-height: 1.3; }
.b2b-product-fact--price { border-color: var(--b2b-primary); background: var(--b2b-primary); }
.b2b-product-fact--price .b2b-product-fact-label { color: rgba(255, 255, 255, .72); }
.b2b-product-fact--price .product-price-cover { margin: 0; }
.b2b-product-fact--price .product-price { display: flex; float: none !important; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.b2b-product-fact--price .product-price > span { display: contents; }
.b2b-product-fact--price .current-price {
    color: #fff !important;
    font-size: 20px !important;
    font-weight: 700;
    line-height: 1.2;
}
.b2b-product-fact--price .old-price {
    margin: 0 !important;
    color: rgba(255, 255, 255, .62) !important;
    font-size: 12px !important;
}
.b2b-product-fact--price .save-price { display: none !important; }
.b2b-product-availability > div { margin: 0 !important; }
.b2b-product-availability label { display: none; }
.b2b-product-availability .number-items-available,
.b2b-product-availability .number-items-available span {
    color: var(--b2b-on-surface) !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}
.b2b-product-page .product-tax-description { margin: -8px 0 18px; color: var(--b2b-on-surface-variant); }
.b2b-product-config:empty { display: none; }
.b2b-product-config { margin-bottom: 16px; }
.b2b-product-page .pr_switch_wrap { margin-bottom: 16px; }
.b2b-product-contact-actions:empty { display: none; }
.b2b-product-contact-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.b2b-product-contact-actions .wn-product-inquiry { width: 100%; }

/* ==========================================================================
   Buy-box engagement chips — three-tier hierarchy for the CTAs injected by
   the marketplace subsystems (RFQ, sample, follow, quick-question, WhatsApp,
   price/stock alerts). One height/radius/weight system per tier so eight
   competing buttons read as one composed set.
   Tier 1  Request Quotation        — full-width filled primary hero
   Tier 2  RFQ Basket + Sample      — paired outline pills, theme accent
   Tier 3  everything else          — uniform neutral utility chips
   ========================================================================== */
.b2b-product-contact-actions .rfq-entry-btn,
.b2b-product-contact-actions .rfq-basket-btn,
.b2b-product-contact-actions .qq-btn,
.b2b-product-contact-actions .follow-btn,
.b2b-product-contact-actions .wa-btn,
.b2b-product-contact-actions .pa-btn,
.b2b-product-contact-actions .sa-btn {
    display: inline-flex; align-items: center; justify-content: center;
    margin: 0; line-height: 1.2; text-decoration: none;
    transition: background-color var(--b2b-dur, .15s) var(--b2b-ease, ease),
        border-color var(--b2b-dur, .15s) var(--b2b-ease, ease),
        color var(--b2b-dur, .15s) var(--b2b-ease, ease),
        box-shadow var(--b2b-dur, .15s) var(--b2b-ease, ease);
}
.b2b-product-contact-actions .rfq-entry-btn:focus-visible,
.b2b-product-contact-actions .rfq-basket-btn:focus-visible,
.b2b-product-contact-actions .qq-btn:focus-visible,
.b2b-product-contact-actions .follow-btn:focus-visible,
.b2b-product-contact-actions .wa-btn:focus-visible,
.b2b-product-contact-actions .pa-btn:focus-visible,
.b2b-product-contact-actions .sa-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--b2b-secondary) 30%, transparent);
}

/* --- Tier 1: Request Quotation = the hero action, full width, filled ink --- */
.b2b-product-contact-actions .rfq-entry-btn[data-rfq-entry] {
    flex: 1 1 100%; gap: 9px;
    min-height: 52px; padding: 12px 18px;
    border-radius: var(--b2b-radius-lg); font-size: 15px; font-weight: 700;
    border: 1px solid var(--b2b-primary); background: var(--b2b-primary); color: var(--b2b-on-primary);
    box-shadow: var(--b2b-shadow-card);
}
.b2b-product-contact-actions .rfq-entry-btn[data-rfq-entry]:hover {
    background: var(--b2b-primary-hover, #1e2a44); border-color: var(--b2b-primary-hover, #1e2a44); color: var(--b2b-on-primary);
    box-shadow: var(--b2b-shadow-md);
}
.b2b-product-contact-actions .rfq-entry-btn[data-rfq-entry] .material-symbols-outlined { font-size: 20px; }

/* --- Tier 2: Add to RFQ Basket + Request Sample = paired accent outline pills --- */
.b2b-product-contact-actions .rfq-basket-btn,
.b2b-product-contact-actions .rfq-entry-btn:not([data-rfq-entry]) {
    flex: 1 1 calc(50% - 5px); gap: 8px;
    min-height: 46px; padding: 10px 16px;
    border-radius: var(--b2b-radius-lg); font-size: 14px; font-weight: 700;
    border: 1px solid color-mix(in srgb, var(--b2b-secondary) 45%, var(--b2b-outline-variant));
    background: var(--b2b-surface-lowest); color: var(--b2b-secondary-strong, var(--b2b-on-secondary-container));
}
.b2b-product-contact-actions .rfq-basket-btn:hover,
.b2b-product-contact-actions .rfq-entry-btn:not([data-rfq-entry]):hover {
    background: var(--b2b-secondary-container); border-color: var(--b2b-secondary); color: var(--b2b-secondary-strong, var(--b2b-on-secondary-container));
}
.b2b-product-contact-actions .rfq-basket-btn .material-symbols-outlined,
.b2b-product-contact-actions .rfq-entry-btn:not([data-rfq-entry]) .material-symbols-outlined { font-size: 19px; }

/* --- Tier 3: utility chips (Follow / Ask / WhatsApp / collections / alerts) —
       uniform neutral pills; identity lives in the icon tint only --- */
.b2b-product-contact-actions .qq-btn,
.b2b-product-contact-actions .follow-btn,
.b2b-product-contact-actions .wa-btn,
.b2b-product-contact-actions .pa-btn,
.b2b-product-contact-actions .sa-btn,
.b2b-product-contact-actions .wn-coll-btn {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 1 1 auto; gap: 7px; margin: 0;
    min-height: 40px; padding: 8px 14px;
    border-radius: var(--b2b-radius-full); font-size: 13.5px; font-weight: 600;
    border: 1px solid var(--b2b-outline-variant);
    background: var(--b2b-surface-lowest); color: var(--b2b-on-surface-variant);
}
.b2b-product-contact-actions .qq-btn .material-symbols-outlined,
.b2b-product-contact-actions .follow-btn .material-symbols-outlined,
.b2b-product-contact-actions .wa-btn .material-symbols-outlined,
.b2b-product-contact-actions .pa-btn .material-symbols-outlined,
.b2b-product-contact-actions .sa-btn .material-symbols-outlined,
.b2b-product-contact-actions .wn-coll-btn .material-symbols-outlined { font-size: 18px; color: var(--b2b-secondary); }
.b2b-product-contact-actions .qq-btn:hover,
.b2b-product-contact-actions .follow-btn:hover,
.b2b-product-contact-actions .pa-btn:hover,
.b2b-product-contact-actions .sa-btn:hover,
.b2b-product-contact-actions .wn-coll-btn:hover {
    border-color: color-mix(in srgb, var(--b2b-secondary) 45%, var(--b2b-outline-variant));
    background: color-mix(in srgb, var(--b2b-secondary-container) 55%, var(--b2b-surface-lowest));
    color: var(--b2b-secondary-strong, var(--b2b-on-secondary-container));
}
/* WhatsApp keeps its brand green, but only as a tint — no more solid green slab */
.b2b-product-contact-actions .wa-btn .material-symbols-outlined { color: #22c55e; }
.b2b-product-contact-actions .wa-btn:hover {
    border-color: color-mix(in srgb, #22c55e 55%, var(--b2b-outline-variant));
    background: color-mix(in srgb, #22c55e 10%, var(--b2b-surface-lowest));
    color: color-mix(in srgb, #15803d 80%, var(--b2b-on-surface));
}
/* Following state = quiet rose tint on the same chip skeleton */
.b2b-product-contact-actions .follow-btn.is-following {
    border-color: color-mix(in srgb, #e11d48 35%, var(--b2b-outline-variant));
    background: color-mix(in srgb, #e11d48 7%, var(--b2b-surface-lowest));
    color: color-mix(in srgb, #be123c 85%, var(--b2b-on-surface));
}
.b2b-product-contact-actions .follow-btn.is-following .material-symbols-outlined,
.b2b-product-contact-actions .follow-btn:hover .material-symbols-outlined { color: #e11d48; }
.b2b-product-contact-actions .follow-btn__count {
    font-size: 11.5px; font-weight: 700; padding: 1px 7px;
    background: color-mix(in srgb, currentColor 12%, transparent); color: inherit;
}
/* Stock alert when the product is unavailable = gently emphasised, not shouting */
.b2b-product-contact-actions .sa-btn--emphasis {
    border-color: color-mix(in srgb, var(--b2b-secondary) 45%, var(--b2b-outline-variant));
    background: var(--b2b-secondary-container); color: var(--b2b-on-secondary-container);
}
.b2b-product-contact-actions .sa-btn--emphasis .material-symbols-outlined { color: var(--b2b-secondary-strong, var(--b2b-on-secondary-container)); }

/* Disabled — same treatment across every tier */
.b2b-product-contact-actions .rfq-entry-btn--disabled,
.b2b-product-contact-actions .rfq-entry-btn[disabled],
.b2b-product-contact-actions .rfq-basket-btn--disabled,
.b2b-product-contact-actions .rfq-basket-btn[disabled],
.b2b-product-contact-actions .follow-btn--disabled,
.b2b-product-contact-actions .follow-btn[disabled] {
    opacity: 1; cursor: not-allowed;
    background: var(--b2b-surface-container); border-color: var(--b2b-outline-variant); color: var(--b2b-outline);
    box-shadow: none;
}
@media (max-width: 420px) {
    .b2b-product-contact-actions .rfq-basket-btn,
    .b2b-product-contact-actions .rfq-entry-btn:not([data-rfq-entry]) { flex: 1 1 100%; }
}

/* Cluster the chips into their tiers regardless of the order the subsystem
   filters inject them (info blocks keep order 0 and stay on top). */
.b2b-product-contact-actions .rfq-entry-btn[data-rfq-entry] { order: 1; }
.b2b-product-contact-actions .rfq-basket-btn,
.b2b-product-contact-actions .rfq-entry-btn:not([data-rfq-entry]) { order: 2; }
.b2b-product-contact-actions .qq-btn,
.b2b-product-contact-actions .follow-btn,
.b2b-product-contact-actions .wa-btn,
.b2b-product-contact-actions .pa-btn,
.b2b-product-contact-actions .sa-btn,
.b2b-product-contact-actions .wn-coll-btn { order: 3; }
.b2b-product-contact-actions .wn-inquiry-trigger {
    display: flex !important;
    width: 100%;
    min-height: 54px;
    border-radius: var(--b2b-radius-lg) !important;
    background: var(--b2b-primary) !important;
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
}
.b2b-product-contact-actions .wn-inquiry-trigger:hover { opacity: .9; }
.b2b-product-page .bb-product-detail-actions {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
    margin: 0 !important;
}
.b2b-product-page .detail-qty {
    position: relative;
    display: grid;
    width: 92px !important;
    min-width: 92px;
    height: 54px;
    padding: 0;
    grid-template-columns: 28px 1fr 28px;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--b2b-primary) !important;
    border-radius: var(--b2b-radius-lg) !important;
    background: #fff;
}
.b2b-product-page .detail-qty .qty-down,
.b2b-product-page .detail-qty .qty-up {
    position: static;
    display: grid;
    width: 28px;
    height: 100%;
    place-items: center;
    color: var(--b2b-primary);
}
.b2b-product-page .detail-qty .qty-val {
    width: 100%;
    height: 52px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--b2b-primary);
    font-weight: 700;
    text-align: center;
    box-shadow: none;
    -moz-appearance: textfield;
}
.b2b-product-page .detail-qty .qty-val::-webkit-outer-spin-button,
.b2b-product-page .detail-qty .qty-val::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.b2b-product-page .product-extra-link2 { display: block; width: 100%; }
.b2b-product-page .button-add-to-cart {
    display: flex;
    width: 100%;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 0 !important;
    border: 1px solid var(--b2b-primary) !important;
    border-radius: var(--b2b-radius-lg) !important;
    background: #fff !important;
    color: var(--b2b-primary) !important;
    font-size: 15px;
    font-weight: 700;
}
.b2b-product-page .button-add-to-cart .material-symbols-outlined { font-size: 21px; }
.b2b-product-page .button-add-to-cart:hover:not(.btn-disabled) { background: var(--b2b-surface-low) !important; }
.b2b-product-taxonomy {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 20px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--b2b-outline-variant);
    list-style: none;
}
.b2b-product-taxonomy li {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px 8px;
    color: var(--b2b-on-surface-variant);
    font-size: 12px;
    line-height: 1.45;
}
.b2b-product-taxonomy li > span:first-child { min-width: 72px; font-weight: 600; }
.b2b-product-taxonomy a { color: var(--b2b-secondary); font-weight: 600; }
.b2b-product-vendor-card--mobile { display: none; }
.b2b-product-vendor-card {
    padding: 22px;
    border-radius: var(--b2b-radius-lg);
    background: var(--b2b-surface-high);
}
.b2b-product-vendor-heading { display: flex; align-items: center; gap: 14px; }
.b2b-product-vendor-logo {
    display: block;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    overflow: hidden;
    border: 1px solid var(--b2b-outline-variant);
    border-radius: var(--b2b-radius);
    background: var(--b2b-surface-lowest);
}
.b2b-product-vendor-logo img { width: 100%; height: 100%; object-fit: cover; }
.b2b-product-vendor-copy { min-width: 0; }
.b2b-product-vendor-copy h2 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
}
.b2b-product-vendor-copy h2 a { color: var(--b2b-primary); }
.b2b-product-vendor-copy p {
    margin: 0;
    color: var(--b2b-on-surface-variant);
    font-size: 12px;
    line-height: 1.45;
}
.b2b-product-vendor-copy p span { margin-inline: 3px; }
.b2b-product-vendor-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}
.b2b-product-vendor-stats > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 12px;
    border-radius: var(--b2b-radius);
    background: var(--b2b-surface-lowest);
}
.b2b-product-vendor-stats span { color: var(--b2b-on-surface-variant); font-size: 11px; }
.b2b-product-vendor-stats strong { overflow-wrap: anywhere; color: var(--b2b-primary); font-size: 13px; }
.b2b-product-vendor-profile {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 16px;
    padding: 10px 14px;
    border: 1px solid var(--b2b-primary);
    border-radius: var(--b2b-radius);
    color: var(--b2b-primary) !important;
    font-size: 13px;
    font-weight: 700;
}
.b2b-product-vendor-profile .material-symbols-outlined { font-size: 18px; }
.b2b-product-details-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 24px;
    align-items: stretch;
    margin-top: 64px;
}
.b2b-product-specifications-card,
.b2b-product-shipping-card {
    overflow: hidden;
    border: 1px solid var(--b2b-outline-variant);
    border-radius: var(--b2b-radius-lg);
    background: var(--b2b-surface-lowest);
}
.b2b-product-specifications-card > header {
    padding: 16px 28px;
    border-bottom: 1px solid var(--b2b-outline-variant);
    background: var(--b2b-surface-low);
}
.b2b-product-specifications-card h2,
.b2b-product-shipping-card h2 {
    margin: 0;
    color: var(--b2b-primary);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
}
.b2b-product-specifications-card .wn-product-specifications table,
.b2b-product-fallback-specifications { width: 100%; margin: 0; border-collapse: collapse; }
.b2b-product-specifications-card .wn-product-specifications th,
.b2b-product-specifications-card .wn-product-specifications td,
.b2b-product-fallback-specifications th,
.b2b-product-fallback-specifications td {
    padding: 16px 28px;
    border: 0;
    border-bottom: 1px solid var(--b2b-outline-variant);
    background: transparent;
    color: var(--b2b-on-surface);
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
}
.b2b-product-specifications-card .wn-product-specifications tr:last-child > *,
.b2b-product-fallback-specifications tr:last-child > * { border-bottom: 0; }
.b2b-product-specifications-card .wn-product-specifications th,
.b2b-product-fallback-specifications th {
    width: 34%;
    color: var(--b2b-on-surface-variant);
    font-weight: 600;
}
.b2b-product-specifications-card td a { color: var(--b2b-secondary); font-weight: 600; }
.b2b-product-shipping-card { display: flex; flex-direction: column; padding: 28px; }
.b2b-product-shipping-card h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.b2b-product-shipping-card h2 > .material-symbols-outlined { font-size: 23px; }
.b2b-product-shipping-list { display: flex; flex-direction: column; gap: 18px; }
.b2b-product-shipping-item { display: flex; align-items: flex-start; gap: 14px; }
.b2b-product-shipping-icon {
    display: grid;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 50%;
    background: var(--b2b-secondary-container);
    color: var(--b2b-on-secondary-container);
    font-size: 19px;
}
.b2b-product-shipping-item > span:last-child { min-width: 0; }
.b2b-product-shipping-item strong { display: block; margin-bottom: 2px; color: var(--b2b-primary); font-size: 13px; }
.b2b-product-shipping-item small { display: block; color: var(--b2b-on-surface-variant); font-size: 12px; line-height: 1.45; }
.b2b-product-information-tabs {
    margin-top: 40px;
    padding: 0 !important;
    border: 1px solid var(--b2b-outline-variant) !important;
    border-radius: var(--b2b-radius-lg) !important;
    background: var(--b2b-surface-lowest);
    box-shadow: none !important;
}
.b2b-product-information-tabs .nav-tabs {
    gap: 2px;
    padding: 6px 12px 0;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--b2b-outline-variant);
    background: var(--b2b-surface-low);
    border-radius: var(--b2b-radius-lg) var(--b2b-radius-lg) 0 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}
.b2b-product-information-tabs .nav-tabs::-webkit-scrollbar { display: none; }
/* Kill the base theme's per-tab boxes (.tab-style3 .nav-tabs li.nav-item a — specificity 0,3,2)
   so the tabs read as one flat underline bar seated in the card header. */
.b2b-product-information-tabs .nav-tabs .nav-item { margin: 0 !important; flex: 0 0 auto; }
.b2b-product-information-tabs .nav-tabs .nav-item .nav-link {
    margin: 0 !important;
    padding: 12px 16px !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--b2b-on-surface-variant);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
    transition: color .15s, border-color .15s;
}
.b2b-product-information-tabs .nav-tabs .nav-item .nav-link:hover { color: var(--b2b-primary); }
.b2b-product-information-tabs .nav-tabs .nav-item .nav-link.active {
    border-bottom-color: var(--b2b-primary) !important;
    color: var(--b2b-primary);
    background: var(--b2b-surface-lowest) !important;
}
.b2b-product-information-tabs .tab-content { padding: 26px; }
.b2b-product-information-tabs .vendor-logo img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--b2b-radius); }
.b2b-product-related { margin-top: 48px; }
.b2b-product-related .section-title { margin-bottom: 24px; }
.b2b-product-sidebar-widgets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
    margin-top: 36px;
}
.b2b-product-sidebar-widgets:empty { display: none; }
.b2b-product-sidebar-widgets > * { margin-bottom: 0; }
/* Ads widget renders a bare `.banner-img` (no `.widget-area` wrapper), hidden on
   mobile via `d-none` and unconstrained on desktop. Show it on every breakpoint
   and keep the banner image to a tidy column-sized ratio instead of full size. */
.b2b-product-sidebar-widgets .banner-img {
    display: block !important;
    margin: 0;
}
.b2b-product-sidebar-widgets .banner-img img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
}
.b2b-product-sidebar-widgets .banner-text { padding: 0 24px; }
.b2b-product-mobile-actions { display: none; }

@media (max-width: 1024px) {
    .b2b-product-layout-container { padding-inline: 24px; }
    .b2b-product-overview { grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr); }
    .b2b-product-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .b2b-product-fact--availability { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
    main:has(.b2b-product-page) .breadcrumb-wrap { display: none; }
    .b2b-product-layout-container {
        max-width: none;
        margin-bottom: 0 !important;
        padding-inline: 0;
    }
    .b2b-product-page { padding: 0 0 88px; background: var(--b2b-surface); }
    .b2b-product-overview { display: flex; flex-direction: column; gap: 0; }
    .b2b-product-gallery-panel { width: 100%; }
    .b2b-product-gallery-panel .bb-product-gallery { gap: 0; }
    .b2b-product-gallery-panel .bb-product-gallery-images .slick-list,
    .b2b-product-gallery-panel .bb-product-gallery-images > a {
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .b2b-product-gallery-panel .bb-product-gallery-images a { aspect-ratio: 1 / 1; }
    .b2b-product-gallery-panel .bb-product-gallery-images img { object-fit: cover; }
    .b2b-product-gallery-panel .bb-product-gallery-thumbnails { display: none !important; }
    .b2b-product-gallery-dots {
        position: absolute;
        z-index: 4;
        right: 16px;
        bottom: 16px;
        display: flex;
        align-items: center;
        gap: 7px;
    }
    .b2b-product-gallery-dots button {
        width: 8px;
        height: 8px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, .58);
        box-shadow: 0 0 0 1px rgba(15, 23, 42, .08);
    }
    .b2b-product-gallery-dots button.is-active { background: var(--b2b-primary); }
    .b2b-product-verified-overlay { display: none; }
    .b2b-product-summary { width: 100%; gap: 0; }
    .b2b-product-title-row {
        padding: 18px 16px 16px;
        background: var(--b2b-surface-lowest);
    }
    .b2b-product-page .title-detail {
        margin-bottom: 8px;
        font-size: 24px;
        letter-spacing: -.015em;
        line-height: 1.25;
    }
    .b2b-product-meta { gap: 8px; font-size: 12px; }
    .b2b-product-meta-divider,
    .b2b-product-meta #product-sku { display: none !important; }
    .b2b-product-rating-star { font-size: 17px; }
    .b2b-product-verified-inline {
        display: inline-flex;
        margin-top: 9px;
        padding: 4px 8px;
        border-radius: 4px;
        background: var(--b2b-secondary-container);
        color: var(--b2b-on-secondary-container) !important;
        font-size: 11px;
    }
    .b2b-product-verified-inline .material-symbols-outlined { font-size: 14px; }
    .b2b-product-wishlist { flex-basis: 40px; width: 40px; height: 40px; }
    .b2b-product-order-card {
        padding: 18px 16px 22px;
        border: 0;
        border-radius: 0;
        background: var(--b2b-surface);
        box-shadow: none;
    }
    .b2b-product-section-label { margin-bottom: 14px; }
    .b2b-product-label-desktop { display: none; }
    .b2b-product-label-mobile { display: inline; }
    .b2b-product-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
    .b2b-product-fact { min-height: 96px; padding: 14px 16px; border-radius: var(--b2b-radius-lg); background: var(--b2b-surface-lowest); }
    .b2b-product-fact--price { background: var(--b2b-primary); }
    .b2b-product-fact--availability { grid-column: 1 / -1; min-height: 82px; }
    .b2b-product-fact > strong { font-size: 18px; }
    .b2b-product-fact--price .current-price { font-size: 20px !important; }
    .b2b-product-page .bb-product-detail-actions { grid-template-columns: 88px minmax(0, 1fr); }
    .b2b-product-page .detail-qty { width: 88px !important; min-width: 88px; }
    .b2b-product-taxonomy { margin-top: 18px; }
    .b2b-product-taxonomy li > span:first-child { min-width: 68px; }
    .b2b-product-vendor-card--desktop { display: none; }
    .b2b-product-details-grid { display: flex; flex-direction: column; gap: 0; margin-top: 8px; }
    .b2b-product-specifications-card,
    .b2b-product-shipping-card {
        border: 0;
        border-radius: 0;
        background: var(--b2b-surface-lowest);
    }
    .b2b-product-specifications-card > header { padding: 18px 16px 10px; border: 0; background: transparent; }
    .b2b-product-specifications-card h2,
    .b2b-product-shipping-card h2 {
        color: var(--b2b-on-surface-variant);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }
    .b2b-product-specifications-card .wn-product-specifications th,
    .b2b-product-specifications-card .wn-product-specifications td,
    .b2b-product-fallback-specifications th,
    .b2b-product-fallback-specifications td {
        padding: 14px 16px;
        font-size: 13px;
    }
    .b2b-product-specifications-card .wn-product-specifications th,
    .b2b-product-fallback-specifications th { width: 42%; font-weight: 400; }
    .b2b-product-specifications-card .wn-product-specifications td,
    .b2b-product-fallback-specifications td { font-weight: 600; text-align: right; }
    .b2b-product-shipping-card { margin-top: 8px; padding: 18px 16px 22px; background: var(--b2b-surface); }
    .b2b-product-shipping-card h2 { margin-bottom: 16px; }
    .b2b-product-shipping-card h2 > .material-symbols-outlined { font-size: 19px; }
    .b2b-product-shipping-list {
        gap: 14px;
        padding: 16px;
        border-radius: var(--b2b-radius-lg);
        background: var(--b2b-surface-low);
    }
    .b2b-product-shipping-icon { border-radius: var(--b2b-radius); background: var(--b2b-surface-lowest); color: var(--b2b-primary); }
    .b2b-product-vendor-card--mobile { display: block; padding: 0 16px 26px; background: var(--b2b-surface); }
    .b2b-product-vendor-card { padding: 16px; border: 1px solid var(--b2b-outline-variant); background: var(--b2b-surface-lowest); box-shadow: var(--b2b-shadow-card); }
    .b2b-product-vendor-logo { flex-basis: 56px; width: 56px; height: 56px; border-radius: 50%; }
    .b2b-product-vendor-copy h2 { font-size: 18px; }
    .b2b-product-vendor-stats { padding-top: 14px; border-top: 1px solid var(--b2b-outline-variant); }
    .b2b-product-vendor-stats > div { padding: 0; background: transparent; }
    .b2b-product-vendor-profile { display: flex; }
    .b2b-product-information-tabs {
        margin: 0 16px 28px;
        border-radius: var(--b2b-radius-lg) !important;
    }
    .b2b-product-information-tabs .nav-tabs { flex-wrap: nowrap; overflow-x: auto; padding-inline: 10px; }
    .b2b-product-information-tabs .nav-tabs .nav-link { white-space: nowrap; }
    .b2b-product-information-tabs .tab-content { padding: 18px; }
    .b2b-product-page .ec-upsell-bundle,
    .b2b-product-page .ec-cross-sale-section,
    .b2b-product-related,
    .b2b-product-sidebar-widgets { margin-inline: 16px; }
    .b2b-product-sidebar-widgets { grid-template-columns: 1fr; }
    .b2b-product-mobile-actions {
        position: fixed;
        z-index: 1040;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        gap: 12px;
        align-items: stretch;
        min-height: 76px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--b2b-outline-variant);
        background: var(--b2b-surface-lowest);
        box-shadow: 0 -8px 24px rgba(15, 23, 42, .08);
    }
    .b2b-product-mobile-actions button,
    .b2b-product-mobile-actions a {
        border: 0;
        font-family: var(--b2b-font);
        text-decoration: none;
        cursor: pointer;
    }
    .b2b-product-mobile-chat {
        display: flex;
        flex: 0 0 62px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        background: transparent;
        color: var(--b2b-on-surface-variant);
    }
    .b2b-product-mobile-chat .material-symbols-outlined { font-size: 24px; }
    .b2b-product-mobile-chat small { font-size: 10px; }
    .b2b-product-mobile-inquiry {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 54px;
        border-radius: var(--b2b-radius-lg) !important;
        background: var(--b2b-primary);
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        box-shadow: var(--b2b-shadow-card);
    }
}

/* =========================================================== RFQ WORKSPACE ===
   Buyer RFQ / Deal detail page (customer/rfqs/{id}). Ships as plain Bootstrap
   markup under .rfq-workspace hooks; these rules dress it in the b2b design
   system (cards, tabs, badges, banners) so it reads as native to the site.
   Scoped to .rfq-workspace so nothing else on the storefront is affected. */
.rfq-workspace { color: var(--b2b-on-surface); }
.rfq-workspace h1.h4 { font-weight: 700; letter-spacing: -.01em; color: var(--b2b-on-surface); }
.rfq-workspace .text-muted { color: var(--b2b-on-surface-variant) !important; }

/* header + action buttons */
.rfq-workspace .btn { border-radius: var(--b2b-radius-md); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.rfq-workspace .btn-primary { background: var(--b2b-primary); border-color: var(--b2b-primary); color: var(--b2b-on-primary); }
.rfq-workspace .btn-primary:hover { background: var(--b2b-primary-hover); border-color: var(--b2b-primary-hover); color: var(--b2b-on-primary); }
.rfq-workspace .btn-outline-secondary { border-color: var(--b2b-outline-variant); color: var(--b2b-on-surface); background: var(--b2b-surface-lowest); }
.rfq-workspace .btn-outline-secondary:hover { border-color: var(--b2b-primary); color: var(--b2b-primary); background: var(--b2b-surface-low); }

/* status / priority pills */
.rfq-workspace .badge { font-weight: 600; letter-spacing: .01em; padding: .4em .72em; border-radius: var(--b2b-radius-full); font-size: 12px; }

/* alert banners */
.rfq-workspace .alert { border: 1px solid transparent; border-radius: var(--b2b-radius-lg); padding: 14px 16px; font-size: 14px; margin-bottom: 16px; }
.rfq-workspace .alert-success { background: #ecfdf3; border-color: #abefc6; color: #067647; }
.rfq-workspace .alert-danger { background: #fef3f2; border-color: #fecdca; color: #b42318; }
.rfq-workspace .alert-info { background: #eff8ff; border-color: #b2ddff; color: #175cd3; }
.rfq-workspace .alert-secondary { background: var(--b2b-surface-low); border-color: var(--b2b-outline-variant); color: var(--b2b-on-surface-variant); }
.rfq-workspace .alert ul { margin: 0; padding-inline-start: 18px; }

/* tab bar — clean underline segmented control, like the store in-page tabs */
.rfq-workspace .nav-tabs.rfq-tabs { border-bottom: 1px solid var(--b2b-outline-variant); gap: 2px; }
.rfq-workspace .nav-tabs.rfq-tabs .nav-item { margin: 0; }
.rfq-workspace .nav-tabs.rfq-tabs .nav-link {
    border: 0; border-bottom: 2px solid transparent; border-radius: 0;
    margin-bottom: -1px; padding: 10px 14px; font-size: 14px; font-weight: 600;
    color: var(--b2b-on-surface-variant); background: transparent;
    display: inline-flex; align-items: center; gap: 6px;
}
.rfq-workspace .nav-tabs.rfq-tabs .nav-link:hover { color: var(--b2b-on-surface); border-bottom-color: var(--b2b-outline-variant); }
.rfq-workspace .nav-tabs.rfq-tabs .nav-link.active { color: var(--b2b-primary); background: transparent; border-bottom-color: var(--b2b-primary); }
.rfq-workspace .nav-tabs.rfq-tabs .nav-link .badge { background: var(--b2b-error) !important; color: #fff; }

/* cards */
.rfq-workspace .card { border: 1px solid var(--b2b-outline-variant); border-radius: var(--b2b-radius-lg); background: var(--b2b-surface-lowest); box-shadow: var(--b2b-shadow-sm, 0 1px 2px rgba(16, 24, 40, .05)); }
.rfq-workspace .card-body { padding: 22px; }
.rfq-workspace .card h2.h6 { font-size: 12px; letter-spacing: .06em; color: var(--b2b-on-surface-variant) !important; }
.rfq-workspace .border-bottom { border-color: var(--b2b-outline-variant) !important; }

/* deal-details definition list */
.rfq-workspace dl.row dt { font-weight: 600; color: var(--b2b-on-surface-variant) !important; }
.rfq-workspace dl.row dd { color: var(--b2b-on-surface); font-weight: 500; }