/* ============================================================
   MEPSOUQ Design System — site.css
   B2B Industrial Marketplace
   Token prefix: --mep-* (brand direction: deep engineering blue)
   ============================================================ */

/* ── Design Tokens — Light Theme ─────────────────────────── */
/* --mep-primary and --mep-accent now live in the "Color Schemes" block below, keyed by
   [data-scheme] x [data-theme] -- this block keeps every OTHER token (surfaces, text,
   status colors, shadows) which stay constant across schemes and only flip with mode. */
:root,
[data-theme="light"] {
  --mep-success: #1E8E5A;
  --mep-success-light: #E6F5ED;
  --mep-success-rgb: 30,142,90;
  --mep-warning: #D9A400;
  --mep-warning-light: #FFF8E1;
  --mep-warning-rgb: 217,164,0;
  /* Theme-independent (like --mep-radius/--mep-fs-*, not redeclared per theme): both the light
     and dark --mep-warning shades are light enough that black text clears contrast on either. */
  --mep-text-on-warning: #000000;
  --mep-danger: #C43D3D;
  --mep-danger-light: #FDECEC;
  --mep-danger-rgb: 196,61,61;
  --mep-info: #2E7BB8;
  --mep-info-light: #E8F4FB;
  --mep-info-rgb: 46,123,184;

  --mep-verified: #1A6FBF;
  --mep-verified-light: #E8F4FB;

  --mep-bg: #F7F9FB;
  --mep-bg-secondary: #FFFFFF;
  --mep-bg-tertiary: #F0F3F6;
  --mep-surface: #FFFFFF;
  --mep-surface-alt: #F0F3F6;
  --mep-surface-hover: #E8ECF0;
  --mep-border: #DCE3E9;
  --mep-border-light: #E8EDF2;

  --mep-text: #1A2530;
  --mep-text-secondary: #5B6B79;
  /* Was #8B98A5 (2.94:1 on --mep-surface, 2.79:1 on --mep-bg) — failed WCAG AA's 4.5:1 minimum for
     body-sized text everywhere this token is used (supplier lines on cards, notification timestamps,
     the footer, filter counts). This value clears 4.5:1 against every surface it's actually paired
     with here, including the lightest one (--mep-bg-tertiary, #F0F3F6) which is the binding
     constraint — see README's Phase 88 note before lightening this again. */
  --mep-text-muted: #5E6B77;
  --mep-text-inverse: #FFFFFF;

  --mep-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --mep-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --mep-shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
  --mep-shadow-lg: 0 10px 15px rgba(0,0,0,.1), 0 4px 6px rgba(0,0,0,.05);
  --mep-shadow-xl: 0 20px 25px rgba(0,0,0,.1), 0 10px 10px rgba(0,0,0,.04);

  --mep-radius: .5rem;
  --mep-radius-lg: .75rem;
  --mep-radius-xl: 1rem;
  --mep-radius-full: 9999px;

  /* ── Type scale ─────────────────────────────────────────────
     Replaces ~30 one-off hardcoded font-size values (many a single hundredth of a rem apart with
     no discernible reason) scattered across this file. Doesn't vary by theme/scheme, so it lives
     only here rather than being repeated in the dark-theme block below. Component-level rules
     below should pick the nearest step here rather than inventing a new literal rem value — if
     none fits, that's a signal this scale is missing a real step, not license to hardcode one.
     Plain `1rem` (the <html> root size itself, already responsive via the media queries above)
     is used directly rather than wrapped in a token — it's the baseline everything else is
     relative to, not really "part of" the scale of departures from it. */
  --mep-fs-2xs: .68rem;   /* smallest badges/pips */
  --mep-fs-xs: .75rem;    /* meta text, timestamps, small labels */
  --mep-fs-sm: .8rem;     /* secondary text, counts, table meta */
  --mep-fs-md: .88rem;    /* form inputs, buttons, nav-adjacent labels */
  --mep-fs-base: .9rem;   /* default body-adjacent text (tables, alerts, cards) */
  --mep-fs-lg: .95rem;    /* card/section titles slightly above body text */
  --mep-fs-xl: 1.1rem;    /* icons, small subheadings */
  --mep-fs-2xl: 1.25rem;  /* section titles, stat-card icons */
  --mep-fs-3xl: 1.35rem;  /* navbar brand, small empty-state icons */
  --mep-fs-4xl: 1.5rem;   /* page headers, prominent hero names */
  --mep-fs-5xl: 1.75rem;  /* stat values, mobile hero h1 */
  --mep-fs-6xl: 2rem;     /* empty-state icons */
  --mep-fs-7xl: 2.5rem;   /* desktop hero h1 */

  --mep-transition: 150ms ease;
  --mep-transition-slow: 300ms ease;
  /* Inter (loaded in _Layout.cshtml's <head>) has no Arabic glyphs, so RTL/Arabic text falls
     through to 'Segoe UI'/system-ui automatically per normal CSS font-stack fallback — no separate
     RTL font rule needed. */
  --mep-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mep-font-mono: 'Cascadia Code', 'Fira Code', monospace;
  --mep-navbar-height: 56px;
  --mep-footer-height: 60px;
  --mep-container-max: 1320px;

  /* Shared hover-lift distance — 5 different card components each hand-rolled this same
     transform (see the components below), with two silent inconsistencies (-3px on one,
     var(--mep-shadow) instead of --mep-shadow-md on another) that had no apparent reason. Every
     one of them now references this token + --mep-shadow-md, same as the generic .msq-hover-lift
     utility, so they can never drift apart again. */
  --mep-hover-lift-y: -2px;
}

/* ── Design Tokens — Dark Theme ──────────────────────────── */
[data-theme="dark"] {
  --mep-success: #3FBE85;
  --mep-success-light: #143D28;
  --mep-success-rgb: 63,190,133;
  --mep-warning: #E8C158;
  --mep-warning-light: #3D3514;
  --mep-warning-rgb: 232,193,88;
  --mep-danger: #E36A6A;
  --mep-danger-light: #3D1C1C;
  --mep-danger-rgb: 227,106,106;
  --mep-info: #5BA3D9;
  --mep-info-light: #162D42;
  --mep-info-rgb: 91,163,217;

  --mep-verified: #5BA3D9;
  --mep-verified-light: #162D42;

  --mep-bg: #0F1720;
  --mep-bg-secondary: #1A2530;
  --mep-bg-tertiary: #212E3A;
  --mep-surface: #1A2530;
  --mep-surface-alt: #212E3A;
  --mep-surface-hover: #2A3946;
  --mep-border: #2E3D4A;
  --mep-border-light: #253340;

  --mep-text: #E8EDF2;
  --mep-text-secondary: #A8B5C2;
  /* Was #6F7E8C (3.73:1 on --mep-surface) — same WCAG AA failure as the light-theme value above;
     see that comment for the full rationale. Lightened enough to clear 4.5:1 against
     --mep-bg-tertiary (#212E3A), the binding constraint here since it's slightly lighter than
     --mep-surface in dark mode. */
  --mep-text-muted: #8C9BA8;
  --mep-text-inverse: #1A2530;

  --mep-shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --mep-shadow: 0 1px 3px rgba(0,0,0,.4);
  --mep-shadow-md: 0 4px 6px rgba(0,0,0,.4);
  --mep-shadow-lg: 0 10px 15px rgba(0,0,0,.5);
  --mep-shadow-xl: 0 20px 25px rgba(0,0,0,.5);
}

/* ── Color Schemes ────────────────────────────────────────────
   7 curated schemes (no open color picker, by design) x 2 modes = 14 combinations.
   Each scheme overrides only --mep-primary and --mep-accent (and their -hover/-light/-rgb
   variants) on top of the shared light/dark surface+text tokens above -- everything else
   (buttons, badges, links) is built on those tokens, so a new scheme is just one more pair
   of blocks here. Every primary/accent pair below is WCAG AA-verified (>=4.5:1) against
   every surface it's actually used with: button text (white in light mode /
   --mep-text-inverse in dark mode), the tinted "-light" backgrounds badges use, and the
   plain surface color for text/link usage. Do not change a color here without re-checking
   those pairings (see README). */

/* MEPSouq brand (default) — the colours of the logo sheet: navy #1F3452, cyan #129CC4, white.
   The logo cyan itself is only 3.19:1 against white, so it is NOT used as the accent for text or
   filled buttons; --mep-accent is a darker cyan of the same hue (#0D7595: 5.26:1 white-on-accent,
   4.77:1 on its own tint) and the exact logo cyan is kept in --mep-brand-cyan for decoration only
   (the navbar rule). Dark mode flips to light tints of the same two hues (verified in README). */
:root,
[data-theme="light"][data-scheme="brand"] {
  --mep-primary: #1F3452;
  --mep-primary-hover: #172740;
  --mep-primary-light: #E8EDF3;
  --mep-primary-rgb: 31,52,82;
  --mep-accent: #0D7595;
  --mep-accent-hover: #0A5F7B;
  --mep-accent-light: #EAF6FA;
  --mep-accent-rgb: 13,117,149;
  --mep-brand-cyan: #129CC4;
  --mep-hero-accent: #59C3E6;
}
[data-theme="dark"][data-scheme="brand"] {
  --mep-primary: #2AA9D1;
  --mep-primary-hover: #4DBAE0;
  --mep-primary-light: #12304A;
  --mep-primary-rgb: 42,169,209;
  --mep-accent: #8FB4E3;
  --mep-accent-hover: #A8C4EB;
  --mep-accent-light: #1B2A40;
  --mep-accent-rgb: 143,180,227;
  --mep-brand-cyan: #2AA9D1;
  --mep-hero-accent: #59C3E6;
}

/* Navy (the previous default) */
[data-theme="light"][data-scheme="navy"] {
  --mep-primary: #0B3C5D;
  --mep-primary-hover: #0A2F49;
  --mep-primary-light: #E8F0F5;
  --mep-primary-rgb: 11,60,93;
  --mep-accent: #AE5D10;
  --mep-accent-hover: #96500E;
  --mep-accent-light: #FFFAF5;
  --mep-accent-rgb: 174,93,16;
}
[data-theme="dark"][data-scheme="navy"] {
  --mep-primary: #549AC9;
  --mep-primary-hover: #6BA8D4;
  --mep-primary-light: #0F2A3D;
  --mep-primary-rgb: 84,154,201;
  --mep-accent: #F0994A;
  --mep-accent-hover: #F5AC6B;
  --mep-accent-light: #3D2A14;
  --mep-accent-rgb: 240,153,74;
}

/* Slate */
[data-theme="light"][data-scheme="slate"] {
  --mep-primary: #3D4A5C;
  --mep-primary-hover: #2F3A48;
  --mep-primary-light: #E9EBEE;
  --mep-primary-rgb: 61,74,92;
  --mep-accent: #0E7C7B;
  --mep-accent-hover: #0B6362;
  --mep-accent-light: #EFF8F7;
  --mep-accent-rgb: 14,124,123;
}
[data-theme="dark"][data-scheme="slate"] {
  --mep-primary: #8CA0B8;
  --mep-primary-hover: #A0B2C6;
  --mep-primary-light: #2B3644;
  --mep-primary-rgb: 140,160,184;
  --mep-accent: #3FBFBD;
  --mep-accent-hover: #5ACECC;
  --mep-accent-light: #123030;
  --mep-accent-rgb: 63,191,189;
}

/* Teal */
[data-theme="light"][data-scheme="teal"] {
  --mep-primary: #0D6E6E;
  --mep-primary-hover: #0A5757;
  --mep-primary-light: #E3F3F2;
  --mep-primary-rgb: 13,110,110;
  --mep-accent: #A85A18;
  --mep-accent-hover: #8C4A14;
  --mep-accent-light: #FDF4EC;
  --mep-accent-rgb: 168,90,24;
}
[data-theme="dark"][data-scheme="teal"] {
  --mep-primary: #4FBDBD;
  --mep-primary-hover: #66C9C9;
  --mep-primary-light: #123232;
  --mep-primary-rgb: 79,189,189;
  --mep-accent: #E0954F;
  --mep-accent-hover: #E8A768;
  --mep-accent-light: #3A2712;
  --mep-accent-rgb: 224,149,79;
}

/* Burgundy */
[data-theme="light"][data-scheme="burgundy"] {
  --mep-primary: #7A1F3D;
  --mep-primary-hover: #611830;
  --mep-primary-light: #F5E6EB;
  --mep-primary-rgb: 122,31,61;
  --mep-accent: #A85A18;
  --mep-accent-hover: #8C4A14;
  --mep-accent-light: #FDF4EC;
  --mep-accent-rgb: 168,90,24;
}
[data-theme="dark"][data-scheme="burgundy"] {
  --mep-primary: #D97C99;
  --mep-primary-hover: #E293AC;
  --mep-primary-light: #3A1420;
  --mep-primary-rgb: 217,124,153;
  --mep-accent: #E0954F;
  --mep-accent-hover: #E8A768;
  --mep-accent-light: #3A2712;
  --mep-accent-rgb: 224,149,79;
}

/* Forest */
[data-theme="light"][data-scheme="forest"] {
  --mep-primary: #1E5631;
  --mep-primary-hover: #184527;
  --mep-primary-light: #E6F0E8;
  --mep-primary-rgb: 30,86,49;
  --mep-accent: #A8580E;
  --mep-accent-hover: #8C480B;
  --mep-accent-light: #FDF4EC;
  --mep-accent-rgb: 168,88,14;
}
[data-theme="dark"][data-scheme="forest"] {
  --mep-primary: #5FAE7E;
  --mep-primary-hover: #75BE91;
  --mep-primary-light: #173420;
  --mep-primary-rgb: 95,174,126;
  --mep-accent: #E39B57;
  --mep-accent-hover: #EAAA6D;
  --mep-accent-light: #3A2712;
  --mep-accent-rgb: 227,155,87;
}

/* Graphite — cool steel-grey primary + safety-amber accent, a more literal "industrial
   machinery / hazard signage" pairing than the other 5 schemes' shared blue-or-green + burnt-
   orange formula. Same luminance classes as the existing pairs (verified >=4.5:1 white/inverse
   button text, badge tint, and surface-text usage), only the hue changed. */
[data-theme="light"][data-scheme="graphite"] {
  --mep-primary: #33383D;
  --mep-primary-hover: #24282C;
  --mep-primary-light: #EAEBEC;
  --mep-primary-rgb: 51,56,61;
  --mep-accent: #9C6200; /* was #A66A00: white text on it measured 4.48:1, just under the 4.5:1 minimum; this is 5.05:1 */
  --mep-accent-hover: #8C5900;
  --mep-accent-light: #FDF6E8;
  --mep-accent-rgb: 156,98,0;
}
[data-theme="dark"][data-scheme="graphite"] {
  --mep-primary: #9CA3AA;
  --mep-primary-hover: #ADB4BA;
  --mep-primary-light: #2C3034;
  --mep-primary-rgb: 156,163,170;
  --mep-accent: #E0A526;
  --mep-accent-hover: #E8B547;
  --mep-accent-light: #3D2E0A;
  --mep-accent-rgb: 224,165,38;
}

/* ── Base ─────────────────────────────────────────────────── */
html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
  /* No overflow-x here (deliberately, see body's own rule below): setting it on <html> made
     <html> itself the scrolling ancestor, which broke every `position: sticky` element in the
     portal layouts (.msq-sidebar, .msq-portal-topbar) — confirmed live, they scrolled off-screen
     entirely instead of sticking. body's overflow-x: hidden alone still fully covers the
     off-canvas-drawer horizontal-scroll case below (confirmed: no horizontal overflow at mobile
     widths with the drawer present), so this rule doesn't need its own. */
}
@media (min-width: 768px) { html { font-size: 15px; } }
@media (min-width: 1200px) { html { font-size: 16px; } }

body {
  font-family: var(--mep-font);
  color: var(--mep-text);
  background: var(--mep-bg);
  margin: 0;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Clips the off-canvas mobile nav drawer / portal sidebar's box (both `position: fixed`,
     hidden via `transform: translateX(...)` rather than removed from flow) so it can't widen the
     page's horizontal scroll area while parked off-screen — see html's rule above for why this
     lives only here and not on <html> too. */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--mep-transition), color var(--mep-transition);
}

a { color: var(--mep-primary); text-decoration: none; }
a:hover { color: var(--mep-primary-hover); text-decoration: underline; }

::selection { background: var(--mep-primary); color: var(--mep-text-inverse); }

/* ── Container ────────────────────────────────────────────── */
.container, .container-fluid { max-width: 92%; }

/* Most pages render straight into this element with no .container of their own, so it
   needs to own the responsive width/gutter behavior itself (matching --mep-container-max) —
   pages that DO wrap their own full-width bands (e.g. Home's hero) still nest fine since a
   nested .container simply adds its own gutter on top, it doesn't get clipped. */
.msq-main-content {
  flex: 1 0 auto;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  padding-inline: 1rem;
  padding-block: 1.25rem 2rem;
}
@media (min-width: 576px) { .msq-main-content { padding-inline: 1.5rem; } }
@media (min-width: 992px) { .msq-main-content { padding-inline: 2rem; } }

/* ── Navbar ───────────────────────────────────────────────── */
/* The sticky positioning lives on <header> (the flex item), not .msq-navbar itself — <body> is a
   flex column (display:flex; flex-direction:column;) and <header> is exactly as tall as the navbar
   it wraps, so a sticky .msq-navbar's "room to stick" was bounded by that same tiny box: it would
   lose its stuck position and scroll away the moment the page scrolled past the navbar's own
   height (confirmed live — scrolling ~300px on any page, not just the homepage, left the header
   scrolled fully off-screen instead of staying pinned). Making the FLEX ITEM itself sticky gives it
   the whole page's scroll range to stick within, which is what every page actually needs. */
header { position: sticky; top: 0; z-index: 1030; }

/* Sits above the (sticky) header in normal document flow rather than position:fixed — the sticky
   header then naturally pins itself right below this banner once scrolling starts, with no extra
   top-padding/z-index juggling needed on every page. */
.msq-impersonation-banner {
  background: var(--mep-accent);
  color: #fff;
  padding: .5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  flex-wrap: wrap;
  font-size: .9rem;
  text-align: center;
}
.msq-impersonation-banner .btn-light { padding: .15rem .75rem; }

/* The navbar's own .container intentionally ignores the site's generic 1320px content cap —
   on wide monitors that left ~300px of dead space on each side while the full-bleed hero below
   it (and the site's general widescreen feel) runs edge-to-edge. A fluid width with its own
   scaled-up gutter keeps the brand/links close to the true viewport edge without ever crowding
   them against it. */
.msq-navbar .container {
  max-width: none;
  padding-inline: 1rem;
}
@media (min-width: 576px) { .msq-navbar .container { padding-inline: 1.5rem; } }
@media (min-width: 992px) { .msq-navbar .container { padding-inline: 2rem; } }
@media (min-width: 1400px) { .msq-navbar .container { padding-inline: 3rem; } }

.msq-navbar {
  background: rgba(255,255,255,.92);
  border-bottom: 3px solid var(--mep-accent);
  border-image: linear-gradient(90deg, var(--mep-primary), var(--mep-brand-cyan, var(--mep-accent))) 1;
  box-shadow: var(--mep-shadow-sm);
  padding: .5rem 0;
  backdrop-filter: blur(8px);
  transition: padding var(--mep-transition), box-shadow var(--mep-transition), background var(--mep-transition);
}
[data-theme="dark"] .msq-navbar {
  background: rgba(15,23,32,.92);
}

/* Compact state toggled by navbar-scroll.js once the page scrolls past the top — a lighter,
   denser bar reclaims vertical space without losing the sticky header entirely. */
/* The compact state must not change the bar's height: the header is in the page flow (sticky), so a shorter bar pulled all the content up by
   ~6px the moment the visitor scrolled 12px (and pushed it back down when they returned to the top). Only the shadow changes now. */
.msq-navbar.is-scrolled {
  box-shadow: var(--mep-shadow-md);
}
.msq-navbar.is-scrolled .navbar-brand { font-size: var(--mep-fs-xl); }

.msq-navbar .navbar-brand {
  font-weight: 800;
  font-size: var(--mep-fs-3xl);
  letter-spacing: -.5px;
  background: linear-gradient(135deg, var(--mep-primary), var(--mep-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: font-size var(--mep-transition), transform var(--mep-transition);
  display: inline-flex;
  align-items: center;
}
.msq-navbar .navbar-brand:hover { transform: scale(1.03); }

/* The MEPSouq logo (Views/Shared/_BrandLogo.cshtml; PNGs in wwwroot/images/brand, cut from the brand
   sheet). A colour and a white copy are rendered side by side where the surface can be light or
   dark; the colour one wins on light, the white one on dark (and over the unscrolled homepage hero).
   A lone white copy (sidebar, auth panel) is always shown. */
.msq-logo { display: block; height: 2.1rem; width: auto; flex-shrink: 0; }
.msq-logo-mark-only { height: 1.9rem; }
.msq-logo-stacked { height: 7rem; }
.msq-logo-color ~ .msq-logo-white { display: none; }
[data-theme="dark"] .msq-logo-color { display: none; }
[data-theme="dark"] .msq-logo-color ~ .msq-logo-white { display: block; }
body.msq-homepage-hero .msq-navbar:not(.is-scrolled) .navbar-brand .msq-logo-color { display: none; }
body.msq-homepage-hero .msq-navbar:not(.is-scrolled) .navbar-brand .msq-logo-color ~ .msq-logo-white { display: block; }
.msq-navbar .navbar-brand:hover { opacity: .88; }
.msq-footer h2 .msq-logo { height: 2.4rem; }
.msq-mobile-nav-drawer-brand .msq-logo { height: 1.9rem; }
.msq-topbar-brand .msq-logo { height: 1.8rem; }

/* Login/Register: the stacked logo above the form on small screens, the white one in the side panel. */
.msq-auth-mobile-brand { margin-bottom: .5rem; }
.msq-auth-mobile-brand .msq-logo { margin-inline: auto; }
.msq-auth-logo .msq-logo { height: auto; width: min(15rem, 70%); margin-inline: auto; }

/* #theme-toggle is a plain Bootstrap btn-outline-secondary — every other control in this navbar
   (Login, Register, nav-links) was themed to the app's own navy/accent tokens, but this one was
   left on Bootstrap's flat default gray (#6c757d) in the normal solid navbar, on every single page,
   not just the transparent hero overlay covered separately below. Switching schemes (Slate/Teal/
   Burgundy/...) shifts every other button's color but left this one permanently gray. Selector is
   a bare ID (not scoped under .msq-navbar) because mobile-nav.js relocates the whole drawer —
   #theme-toggle included — to a direct child of <body> below the 992px breakpoint; a `.msq-navbar
   #theme-toggle` descendant selector would stop matching the moment that relocation happens. */
#theme-toggle {
  color: var(--mep-text-secondary);
  border-color: var(--mep-border);
  transition: color var(--mep-transition), border-color var(--mep-transition), background var(--mep-transition);
}
#theme-toggle:hover,
#theme-toggle:focus-visible {
  color: var(--mep-primary);
  border-color: var(--mep-primary);
  background: var(--mep-bg-tertiary);
}

.msq-navbar .nav-link {
  color: var(--mep-text);
  font-weight: 500;
  padding: .5rem .85rem !important;
  border-radius: var(--mep-radius);
  transition: background var(--mep-transition), color var(--mep-transition);
  font-size: var(--mep-fs-base);
  position: relative;
}
.msq-navbar .nav-link:hover,
.msq-navbar .nav-link:focus-visible,
.msq-navbar .nav-link.dropdown-toggle.show { color: var(--mep-primary); background: var(--mep-bg-tertiary); }

/* Animated underline accent — sits under the hover/focus background fill above, purely decorative
   so it never shifts layout (absolutely positioned, ignored by screen readers). */
.msq-navbar .nav-link::after {
  content: '';
  position: absolute;
  left: .85rem;
  right: .85rem;
  bottom: .15rem;
  height: 2px;
  border-radius: 2px;
  background: var(--mep-primary);
  transform: scaleX(0);
  transition: transform var(--mep-transition);
}
.msq-navbar .nav-link:hover::after,
.msq-navbar .nav-link:focus-visible::after,
.msq-navbar .nav-link.dropdown-toggle.show::after,
.msq-navbar .nav-link.msq-nav-active::after { transform: scaleX(1); }
.msq-navbar .nav-link.msq-nav-active { color: var(--mep-primary); }

.msq-navbar .navbar-text { color: var(--mep-text-secondary); }
.msq-navbar .navbar-text .bi { color: var(--mep-text); }

.msq-navbar .navbar-toggler {
  border-color: var(--mep-border);
  color: var(--mep-text);
  padding: .35rem .55rem;
  transition: border-color var(--mep-transition), color var(--mep-transition);
}
/* Bootstrap hides .navbar-toggler above the navbar-expand-lg breakpoint via its own
   `display: none` media rule — an unconditional `display: flex` here (added for a larger mobile
   tap target) has the same specificity and loads after Bootstrap's CSS, so it was winning at
   every width and leaving the hamburger button visible on desktop too. Scoping the touch-target
   sizing to the same max-width Bootstrap itself uses keeps it mobile-only. */
@media (max-width: 991.98px) {
  .msq-navbar .navbar-toggler {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.msq-navbar .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(var(--mep-primary-rgb),.15); }
/* Real inline SVG (three independent bars) instead of Bootstrap's single fixed-color mask icon —
   an ID selector doesn't let a single flat shape morph, so hamburger→X needs three elements that
   can each transform on their own. Colored via `stroke: currentColor` + the button's own `color`
   token (not a hardcoded value or a mask-image background-color hack) so it stays theme-aware like
   every other icon in this navbar, including the hero's transparent/white overlay state below. */
.msq-toggler-icon { overflow: visible; }
.msq-toggler-bar {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  transition: transform var(--mep-transition), opacity var(--mep-transition);
}
.msq-toggler-bar-top { transform-origin: 15px 7px; }
.msq-toggler-bar-bottom { transform-origin: 15px 23px; }
/* Hamburger → X: top bar drops to the middle row and rotates 45°, bottom bar rises to meet it and
   rotates the other way, middle bar simply fades — the classic three-bar morph, driven purely off
   the aria-expanded state mobile-nav.js already sets, no extra JS needed. */
.navbar-toggler[aria-expanded="true"] .msq-toggler-bar-top { transform: translateY(8px) rotate(45deg); }
.navbar-toggler[aria-expanded="true"] .msq-toggler-bar-mid { opacity: 0; }
.navbar-toggler[aria-expanded="true"] .msq-toggler-bar-bottom { transform: translateY(-8px) rotate(-45deg); }

.msq-navbar .dropdown-menu {
  border: 1px solid var(--mep-border);
  box-shadow: var(--mep-shadow-md);
  border-radius: var(--mep-radius);
  padding: .35rem;
  animation: msq-navbar-dropdown-in .16s ease;
}
@keyframes msq-navbar-dropdown-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.msq-navbar .dropdown-item {
  border-radius: calc(var(--mep-radius) - 2px);
  padding: .45rem .75rem;
  font-size: var(--mep-fs-md);
  transition: background var(--mep-transition), padding-inline-start var(--mep-transition);
}
.msq-navbar .dropdown-item:hover { background: var(--mep-bg-tertiary); padding-inline-start: .95rem; }

/* Larger touch targets and clearer row separation once the nav collapses into the mobile drawer —
   .85rem/.5rem padding reads fine with a mouse but is too cramped to tap reliably. */
@media (max-width: 991.98px) {
  .msq-mobile-nav-drawer .nav-link,
  .msq-mobile-nav-drawer .dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .msq-mobile-nav-drawer > .navbar-nav.flex-grow-1 > .nav-item {
    border-bottom: 1px solid var(--mep-border);
  }
  .msq-mobile-nav-drawer > .navbar-nav.flex-grow-1 > .nav-item:last-child { border-bottom: none; }
  .msq-navbar .nav-link::after { display: none; }

  /* The action cluster (wishlist/compare/cart/notifications/language/theme-toggle, then either the
     account dropdown or Login+Register) is a second .navbar-nav — Bootstrap collapses every
     .navbar-nav to a column below 992px, so its own align-items-center utility (meant to vertically
     center a row on desktop) instead centered every item in one narrow, disconnected vertical stack
     cutting across the drawer's otherwise full-width, left-aligned rows. Icon-only triggers now wrap
     into a compact horizontal row; the account dropdown and the Login/Register buttons each get
     their own full-width row below it, matching the rest of the drawer.
     Same fix applies to the Admin/Supplier portal's topnav layout (_PortalLayout.cshtml's non-sidebar
     variant, matched via :not(.msq-mobile-nav-drawer) since it shares the plain .navbar-collapse
     class with the public site's drawer) — it hits the exact same column-collapse problem: the
     notification/language/theme/account icon row ended up buried at the bottom of a long, scrollable
     mobile menu, easy to miss entirely (looked like it was silently cut off, or at least easy to
     miss without scrolling all the way down). The portal variant additionally isn't a flex container
     at all on mobile (only Bootstrap's own d-lg-inline-flex, which only takes effect at lg+), so
     `order` below needs its own flex-direction:column declaration to have any effect. */
  .msq-mobile-nav-drawer > .navbar-nav.align-items-center,
  .msq-navbar .navbar-collapse:not(.msq-mobile-nav-drawer) > .navbar-nav.align-items-center {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .75rem;
    padding-top: 1rem;
    margin-top: .5rem;
    border-top: 1px solid var(--mep-border);
  }
  .msq-mobile-nav-drawer > .navbar-nav.align-items-center > .nav-item,
  .msq-navbar .navbar-collapse:not(.msq-mobile-nav-drawer) > .navbar-nav.align-items-center > .nav-item {
    margin-inline-end: 0;
  }
  .msq-mobile-nav-drawer > .navbar-nav.align-items-center > .nav-item:has(> .nav-link.dropdown-toggle),
  .msq-mobile-nav-drawer > .navbar-nav.align-items-center > .nav-item:has(> .btn-outline-primary),
  .msq-mobile-nav-drawer > .navbar-nav.align-items-center > .nav-item:has(> .btn-accent),
  .msq-navbar .navbar-collapse:not(.msq-mobile-nav-drawer) > .navbar-nav.align-items-center > .nav-item:has(> .nav-link.dropdown-toggle),
  .msq-navbar .navbar-collapse:not(.msq-mobile-nav-drawer) > .navbar-nav.align-items-center > .nav-item:has(> .btn-outline-primary),
  .msq-navbar .navbar-collapse:not(.msq-mobile-nav-drawer) > .navbar-nav.align-items-center > .nav-item:has(> .btn-accent) {
    flex-basis: 100%;
  }
  .msq-mobile-nav-drawer > .navbar-nav.align-items-center > .nav-item > .btn-outline-primary,
  .msq-mobile-nav-drawer > .navbar-nav.align-items-center > .nav-item > .btn-accent,
  .msq-navbar .navbar-collapse:not(.msq-mobile-nav-drawer) > .navbar-nav.align-items-center > .nav-item > .btn-outline-primary,
  .msq-navbar .navbar-collapse:not(.msq-mobile-nav-drawer) > .navbar-nav.align-items-center > .nav-item > .btn-accent {
    width: 100%;
  }

  /* The portal topnav's action cluster is the LAST thing in the collapsed mobile menu, after the
     full page-links list — on a long nav (many sidebar-nav sections) it sat far enough down that it
     needed scrolling to reach, which read as "not showing at all". Move it right above the page
     links instead, immediately visible as soon as the menu opens. */
  .msq-navbar .navbar-collapse:not(.msq-mobile-nav-drawer) {
    display: flex;
    flex-direction: column;
  }
  .msq-navbar .navbar-collapse:not(.msq-mobile-nav-drawer) > .navbar-nav.align-items-center {
    order: -1;
    border-top: none;
    border-bottom: 1px solid var(--mep-border);
    padding-top: 0;
    padding-bottom: 1rem;
    margin-top: 0;
    margin-bottom: .5rem;
  }
}

/* ── Homepage full-bleed hero: transparent navbar overlaying the hero, solidifying on scroll ──
   Fixed (not sticky) so it takes no flow space and the hero can start at true y=0 underneath it; navbar-scroll.js's
   .is-scrolled toggle (past a 12px scroll) only changes its look (solid background, shadow). It used to also flip the header
   to position: sticky at that point, which put the bar back into the flow and shoved the whole page down by its height (55px)
   the moment the visitor started scrolling, and back up when they returned to the top. A fixed bar covers the content below it
   exactly like a sticky one does, so it simply stays fixed. */
body.msq-homepage-hero header {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}
body.msq-homepage-hero .msq-navbar {
  /* A bare transparent bar over a photo reads as "unstyled" rather than "designed" — a faint dark
     tint + blur gives it a deliberate frosted-glass presence (readable against any photo, not just
     dark ones) while still clearly showing the hero behind it. */
  background: linear-gradient(rgba(0,0,0,.22), rgba(0,0,0,.05));
  backdrop-filter: blur(6px);
  border-bottom-color: transparent;
  border-image: none;
  box-shadow: none;
}
body.msq-homepage-hero .msq-navbar:not(.is-scrolled) .navbar-toggler { color: #fff; border-color: rgba(255,255,255,.5); }
/* .navbar-brand is never relocated into .msq-mobile-nav-drawer (it stays a direct child of the
   navbar bar at every width — see _Layout.cshtml), so unlike .nav-link/.navbar-text below it needs
   this forced regardless of viewport: without it, a light-theme visitor on any screen narrower than
   992px saw the default dark-theme-token brand text rendered straight on the dark hero photo. */
body.msq-homepage-hero .msq-navbar:not(.is-scrolled) .navbar-brand {
  color: #fff;
  -webkit-text-fill-color: #fff;
}
/* Desktop only (matches navbar-expand-lg's own 992px breakpoint) — below that, these same
   .nav-link/.navbar-text elements live inside .msq-mobile-nav-drawer, which keeps its normal
   solid light background even while collapsed, so white text there would be unreadable. */
@media (min-width: 992px) {
  body.msq-homepage-hero .msq-navbar:not(.is-scrolled) .nav-link,
  body.msq-homepage-hero .msq-navbar:not(.is-scrolled) .navbar-text,
  body.msq-homepage-hero .msq-navbar:not(.is-scrolled) .navbar-text .bi {
    color: #fff;
    -webkit-text-fill-color: #fff;
  }
  body.msq-homepage-hero .msq-navbar:not(.is-scrolled) .nav-link:hover,
  body.msq-homepage-hero .msq-navbar:not(.is-scrolled) .nav-link:focus-visible,
  body.msq-homepage-hero .msq-navbar:not(.is-scrolled) .nav-link.dropdown-toggle.show {
    color: #fff;
    background: rgba(255,255,255,.15);
  }
  /* #theme-toggle and the Login link are plain Bootstrap btn-outline-secondary/btn-outline-primary
     buttons — left at their normal muted gray/blue, they read as unstyled leftovers next to the
     bold white nav-links right beside them. Register stays untouched: it's already a solid
     accent-filled button, so it reads fine against the photo in either state. */
  body.msq-homepage-hero .msq-navbar:not(.is-scrolled) #theme-toggle,
  body.msq-homepage-hero .msq-navbar:not(.is-scrolled) .btn-outline-primary {
    color: #fff;
    border-color: rgba(255,255,255,.6);
  }
  body.msq-homepage-hero .msq-navbar:not(.is-scrolled) #theme-toggle:hover,
  body.msq-homepage-hero .msq-navbar:not(.is-scrolled) .btn-outline-primary:hover {
    color: #fff;
    background: rgba(255,255,255,.15);
    border-color: #fff;
  }
}
body.msq-homepage-hero .msq-navbar.is-scrolled {
  background: rgba(255,255,255,.92);
  border-bottom-color: var(--mep-border);
  box-shadow: var(--mep-shadow-md);
}
[data-theme="dark"] body.msq-homepage-hero .msq-navbar.is-scrolled { background: rgba(15,23,32,.92); }

/* ── Footer ───────────────────────────────────────────────── */
.msq-footer {
  position: relative;
  flex-shrink: 0;
  background: var(--mep-bg-secondary);
  border-top: 1px solid var(--mep-border);
  padding: 2.5rem 0 1.25rem;
  font-size: var(--mep-fs-md);
  color: var(--mep-text-secondary);
}
/* A thin brand-colored cap line gives the footer the same deliberate, designed edge the hero and
   navbar already have, instead of a plain border-top handing off to a flat gray band. */
.msq-footer::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mep-primary), var(--mep-accent));
}
.msq-footer h6,
.msq-footer h2.h6 {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--mep-text);
  font-weight: 700;
  font-size: var(--mep-fs-lg);
  margin-bottom: 1rem;
}
.msq-footer h6 .bi,
.msq-footer h2.h6 .bi { color: var(--mep-primary); font-size: var(--mep-fs-md); }
.msq-footer a {
  color: var(--mep-text-secondary);
  transition: color var(--mep-transition), padding-inline-start var(--mep-transition);
}
/* Mirrors the nav-link hover treatment (color shift + motion) without copying it outright — an
   arrow-style nudge reads as "footer navigation" rather than a duplicate of the top nav's underline. */
.msq-footer ul a {
  display: inline-block;
  position: relative;
}
.msq-footer ul a:hover {
  color: var(--mep-primary);
  text-decoration: none;
  padding-inline-start: .6rem;
}
.msq-footer ul a::before {
  content: "\f285";
  font-family: "bootstrap-icons", sans-serif;
  position: absolute;
  inset-inline-start: 0;
  opacity: 0;
  font-size: .65em;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity var(--mep-transition);
}
.msq-footer ul a:hover::before { opacity: 1; }
.msq-footer .msq-footer-bottom {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--mep-border-light);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem;
  font-size: var(--mep-fs-sm);
  color: var(--mep-text-muted);
}
/* Brand column: the description, then the one thing a visitor is most likely to want next, and the address to write to. */
.msq-footer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.msq-footer .msq-footer-actions .btn-cta, .msq-footer .msq-footer-actions .btn-cta:hover { color: var(--mep-text-inverse); }
.msq-footer .msq-footer-mail { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.msq-footer .msq-footer-mail:hover { color: var(--mep-primary); }
/* The site's own social pages (Admin > Social Links): round icon buttons under the description. The generic footer list-link effect (arrow and nudge) is switched off for them. */
.msq-footer .msq-footer-social { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; padding: 0; }
.msq-footer .msq-footer-social a {
  display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; padding: 0; border-radius: 50%;
  background: var(--mep-surface); border: 1px solid var(--mep-border); color: var(--mep-text-secondary); font-size: 1.1rem;
  transition: color var(--mep-transition), border-color var(--mep-transition), background var(--mep-transition), transform var(--mep-transition);
}
.msq-footer .msq-footer-social a::before { content: none; }
.msq-footer .msq-footer-social a:hover { padding: 0; color: #fff; background: var(--mep-primary); border-color: var(--mep-primary); transform: translateY(-2px); }
.msq-footer .msq-footer-social a:focus-visible { outline: 2px solid var(--mep-primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .msq-footer .msq-footer-social a, .msq-footer .msq-footer-social a:hover { transition: none; transform: none; } }
.msq-footer-top {
  display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .85rem; border: 1px solid var(--mep-border); border-radius: 999px;
  background: var(--mep-surface); color: var(--mep-text-secondary); font-size: var(--mep-fs-sm); font-weight: 600;
  transition: color var(--mep-transition), border-color var(--mep-transition);
}
.msq-footer-top:hover { color: var(--mep-primary); border-color: var(--mep-primary); }

/* ── Header Chrome (language dropdown, account dropdown) ──── */
.msq-lang-dropdown { min-width: 180px; }
.msq-lang-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.25rem;
  padding: 0 .3rem;
  border-radius: var(--mep-radius);
  background: var(--mep-primary-light);
  color: var(--mep-primary);
  font-size: var(--mep-fs-2xs);
  font-weight: 700;
  letter-spacing: .03em;
}

.msq-account-avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--mep-border);
}
.msq-account-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msq-role-badge {
    background: var(--mep-bg-tertiary);
    color: var(--mep-text-secondary);
    font-weight: 600;
    font-size: var(--mep-fs-2xs);
}
.msq-portal-badge {
  background: var(--mep-accent-light);
  color: var(--mep-accent-hover);
  font-weight: 600;
  font-size: var(--mep-fs-xs);
  padding: .3rem .6rem;
  border-radius: var(--mep-radius-full);
}
.msq-nav-badge {
  background: var(--mep-danger);
  color: var(--mep-text-inverse);
  font-size: var(--mep-fs-2xs);
  font-weight: 700;
  border-radius: var(--mep-radius-full);
  padding: .2rem .45rem;
}

/* ── Portal Sidebar Layout (Admin/Supplier, NavigationLayout=Sidebar) ── */
.msq-portal-shell {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* Recolored onto --mep-primary (the same token the public navbar's gradient wordmark is built
   from) with a subtle diagonal light/dark overlay for depth, instead of the plain light surface
   this used to share with the page body next to it — a sidebar that reads as an admin-template
   default rather than this site's own identity was the actual complaint driving this pass.
   Light-theme --mep-primary is a deep, near-black-on-blue tone in every color scheme (by design,
   it's the color the public navbar's white wordmark text sits on), so it doubles as a panel
   background safely there. Dark theme's --mep-primary is the OPPOSITE — every scheme deliberately
   lightens it there so it still reads as text/accent color against a dark surface — so reusing it
   as the panel background itself in dark mode would put white nav text on a light-ish panel
   (measured ~2.6:1 contrast, failing WCAG AA's 3:1 floor even for large text). See the
   [data-theme="dark"] override below. */
.msq-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--mep-primary);
  background-image: linear-gradient(165deg, rgba(255,255,255,.08) 0%, rgba(0,0,0,.24) 100%);
  border-inline-end: none;
  box-shadow: var(--mep-shadow-lg);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  transition: width var(--mep-transition-slow);
  z-index: 1040;
}

.msq-sidebar-brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.msq-sidebar-brand-link {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 800;
  font-size: var(--mep-fs-xl);
  color: #FFFFFF;
  flex-grow: 1;
  overflow: hidden;
}
.msq-sidebar-brand-link:hover { text-decoration: none; }
/* The sidebar is dark in every scheme and theme, so it always gets the white lockup; collapsed to
   the 68px icon rail it shows the mark alone. */
.msq-sidebar-brand-link .msq-logo { height: 1.9rem; }
.msq-sidebar-brand-link .msq-logo-mark-only { display: none; height: 1.75rem; }
.msq-sidebar-collapsed .msq-sidebar-brand-link .msq-logo-full { display: none; }
.msq-sidebar-collapsed .msq-sidebar-brand-link .msq-logo-mark-only { display: block; }
/* the 68px rail has no room beside the toggle, so the mark sits above it */
.msq-sidebar-collapsed .msq-sidebar-brand { flex-direction: column; padding: .75rem .25rem; }
.msq-sidebar-collapsed .msq-sidebar-brand-link { flex-grow: 0; justify-content: center; }
.msq-sidebar-collapse-btn {
  border: none;
  background: transparent;
  color: rgba(255,255,255,.65);
  flex-shrink: 0;
  transition: color var(--mep-transition);
}
.msq-sidebar-collapse-btn:hover { color: #FFFFFF; }
.msq-sidebar-portal-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
  color: rgba(255,255,255,.72);
  font-weight: 700;
  font-size: var(--mep-fs-sm);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.msq-sidebar-nav { padding: .5rem 0; flex-grow: 1; }
.msq-sidebar-section-title {
  padding: .9rem 1rem .3rem;
  font-size: var(--mep-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgba(255,255,255,.5);
}
/* Pill-shaped rows with a small icon "chip" instead of the old flat row + thin left border — the
   active state fills solid with --mep-accent (a real highlight against the dark panel) rather than
   a barely-there tinted background that depended on the sidebar being light to read at all. */
.msq-sidebar-link {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .5rem .75rem;
  margin: .15rem .75rem;
  border-radius: var(--mep-radius-full);
  color: rgba(255,255,255,.82);
  font-size: var(--mep-fs-md);
  font-weight: 500;
  transition: background var(--mep-transition), color var(--mep-transition);
}
.msq-sidebar-link .bi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  font-size: 1rem;
  transition: background var(--mep-transition);
}
.msq-sidebar-link:hover { background: rgba(255,255,255,.1); color: #FFFFFF; text-decoration: none; }
.msq-sidebar-link:hover .bi { background: rgba(255,255,255,.16); }
.msq-sidebar-link.active { background: var(--mep-accent); color: #FFFFFF; font-weight: 700; box-shadow: 0 2px 10px rgba(0,0,0,.3); }
.msq-sidebar-link.active .bi { background: rgba(255,255,255,.22); }

/* See the long comment on .msq-sidebar above — anchors the panel on the theme's own genuinely
   dark background instead of the (in dark mode, light-tinted) --mep-primary token, keeping the
   same brand-colored feel via a primary-tinted gradient overlay instead of a solid primary fill.
   White nav text now measures ~14-19:1 against --mep-bg across every color scheme, comfortably
   clearing WCAG AA. */
[data-theme="dark"] .msq-sidebar {
  background: var(--mep-bg);
  background-image: linear-gradient(165deg, rgba(var(--mep-primary-rgb), .4) 0%, rgba(0,0,0,.35) 100%);
}

/* Icon-collapse mode — text hides, icons + badges remain, tooltip via title attr */
.msq-sidebar-collapsed .msq-sidebar { width: 68px; }
.msq-sidebar-collapsed .msq-sidebar-brand-text { display: none; }
.msq-sidebar-collapsed .msq-sidebar-collapse-btn .bi::before { content: "\f284"; } /* chevron-double-right */
.msq-sidebar-collapsed .msq-sidebar-link { justify-content: center; }
.msq-sidebar-collapsed .msq-sidebar-portal-label { justify-content: center; }

.msq-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 1039;
}

.msq-portal-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
/* A thin brand-gradient underline (same primary→accent pair as the public navbar's wordmark and
   the sidebar's accent highlight) ties the portal's own header back to the rest of the site,
   replacing a border-bottom that was indistinguishable from any other admin template's. */
.msq-portal-topbar {
  display: flex;
  align-items: center;
  padding: .6rem 1rem;
  background: var(--mep-surface);
  border-bottom: 3px solid var(--mep-accent);
  border-image: linear-gradient(90deg, var(--mep-primary), var(--mep-accent)) 1;
  box-shadow: var(--mep-shadow-sm);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.msq-sidebar-toggle-mobile { border: none; background: transparent; color: var(--mep-text); display: none; }
/* With the sidebar off-canvas (hidden until the hamburger opens it) below 992px, the topbar was the
   ONLY thing on screen — and it carried no brand mark at all, just the hamburger + utility icons.
   Hidden on desktop since the sidebar itself already shows the brand there permanently. */
.msq-topbar-brand {
  display: none;
  align-items: center;
  gap: .4rem;
  font-weight: 800;
  font-size: var(--mep-fs-lg);
  color: var(--mep-text);
}
.msq-topbar-brand:hover { text-decoration: none; color: var(--mep-text); }
@media (max-width: 991.98px) {
  .msq-topbar-brand { display: inline-flex; }
}
.msq-portal-footer {
  flex-shrink: 0;
  padding: 1rem;
  text-align: center;
  font-size: var(--mep-fs-sm);
  color: var(--mep-text-muted);
  border-top: 1px solid var(--mep-border-light);
}

/* Off-canvas below tablet breakpoint regardless of collapse preference */
@media (max-width: 991.98px) {
  .msq-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    transform: translateX(-100%);
    transition: transform .3s ease;
    width: 260px !important;
    box-shadow: var(--mep-shadow-xl);
  }
  [dir="rtl"] .msq-sidebar { transform: translateX(100%); }
  .msq-sidebar-collapsed .msq-sidebar-brand-text { display: inline; }
  .msq-sidebar-collapsed .msq-sidebar-brand-link .msq-logo-full { display: block; }
  .msq-sidebar-collapsed .msq-sidebar-brand-link .msq-logo-mark-only { display: none; }
  .msq-sidebar-collapsed .msq-sidebar-brand { flex-direction: row; padding: 1rem; }
  .msq-sidebar-collapsed .msq-sidebar-brand-link { flex-grow: 1; justify-content: flex-start; }
  .msq-sidebar-collapsed .msq-sidebar-link { justify-content: flex-start; }
  .msq-sidebar-collapse-btn { display: none; }
  .msq-sidebar-toggle-mobile { display: inline-block; }
  .msq-sidebar-open .msq-sidebar { transform: translateX(0); }
  .msq-sidebar-open .msq-sidebar-backdrop { display: block; }
}

/* ── Portal TopNav Layout — Mobile Off-Canvas Drawer ──────────────────────────────────────────
   The TopNav layout's mobile menu used to be a plain Bootstrap inline collapse (data-bs-toggle,
   pushes the page content down) while the Sidebar layout and the public site both already had a
   proper slide-in drawer — the one genuinely unfinished-looking spot once the rest of the portal
   picked up its own identity. Reuses mobile-nav.js verbatim (same ids/classes it already drives
   for the public header) since _PortalLayout and _Layout never render on the same page, then
   recolors the drawer to match .msq-sidebar's dark, brand-forward panel instead of leaving it on
   .msq-mobile-nav-drawer's light default — so both ways of navigating the portal (top nav vs.
   sidebar) converge on the same dark slide-in panel once the screen is too narrow for either to
   stay permanently on-screen. */
@media (max-width: 991.98px) {
  body.msq-portal-topnav .msq-mobile-nav-drawer {
    background: var(--mep-primary);
    background-image: linear-gradient(165deg, rgba(255,255,255,.08) 0%, rgba(0,0,0,.24) 100%);
  }
  [data-theme="dark"] body.msq-portal-topnav .msq-mobile-nav-drawer {
    background: var(--mep-bg);
    background-image: linear-gradient(165deg, rgba(var(--mep-primary-rgb), .4) 0%, rgba(0,0,0,.35) 100%);
  }
  body.msq-portal-topnav .msq-mobile-nav-drawer .nav-link,
  body.msq-portal-topnav .msq-mobile-nav-drawer .dropdown-toggle {
    color: rgba(255,255,255,.85);
  }
  body.msq-portal-topnav .msq-mobile-nav-drawer .nav-link:hover,
  body.msq-portal-topnav .msq-mobile-nav-drawer .nav-link:focus-visible,
  body.msq-portal-topnav .msq-mobile-nav-drawer .dropdown-toggle:hover,
  body.msq-portal-topnav .msq-mobile-nav-drawer .dropdown-toggle.show {
    color: #FFFFFF;
    background: rgba(255,255,255,.1);
  }
  body.msq-portal-topnav .msq-mobile-nav-drawer .nav-link.msq-nav-active {
    background: var(--mep-accent);
    color: #FFFFFF;
    font-weight: 700;
  }
  body.msq-portal-topnav .msq-mobile-nav-drawer > .navbar-nav.flex-grow-1 > .nav-item {
    border-bottom-color: rgba(255,255,255,.14);
  }
  /* The "Menu" grid dropdown (and every icon dropdown alongside it — notifications, language,
     account) is a floating light popover by default, which would sit awkwardly on top of a dark
     off-canvas panel instead of feeling like part of it — inlined flush with the drawer's own flow
     instead, mirroring how the public drawer already inlines its own mega-menu on mobile. */
  body.msq-portal-topnav .msq-mobile-nav-drawer .dropdown-menu {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 100%;
    max-width: 100%;
    margin: 0;
    background: rgba(0,0,0,.18);
    border: none;
    box-shadow: none;
    color: #FFFFFF;
  }
  body.msq-portal-topnav .msq-mobile-nav-drawer .dropdown-item {
    color: rgba(255,255,255,.85);
  }
  body.msq-portal-topnav .msq-mobile-nav-drawer .dropdown-item:hover,
  body.msq-portal-topnav .msq-mobile-nav-drawer .dropdown-item:focus-visible {
    background: rgba(255,255,255,.12);
    color: #FFFFFF;
  }
  body.msq-portal-topnav .msq-mobile-nav-drawer .dropdown-header { color: rgba(255,255,255,.5); }
  body.msq-portal-topnav .msq-mobile-nav-drawer hr.dropdown-divider { border-color: rgba(255,255,255,.14); }
  body.msq-portal-topnav .msq-mobile-nav-drawer #theme-toggle {
    color: rgba(255,255,255,.85);
    border-color: rgba(255,255,255,.3);
    background: transparent;
  }
  body.msq-portal-topnav .msq-mobile-nav-drawer #theme-toggle:hover {
    color: #FFFFFF;
    border-color: #FFFFFF;
    background: rgba(255,255,255,.1);
  }
  body.msq-portal-topnav .msq-mobile-nav-drawer .msq-role-badge {
    background: rgba(255,255,255,.16);
    color: #FFFFFF;
  }
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn { border-radius: var(--mep-radius); font-weight: 500; transition: color var(--mep-transition), background-color var(--mep-transition), border-color var(--mep-transition), box-shadow var(--mep-transition), transform var(--mep-transition), opacity var(--mep-transition); font-size: var(--mep-fs-base); }
.btn:active { transform: scale(.98); }

/* --mep-text-inverse (not a hardcoded #fff) since dark mode's brighter primary/accent need
   dark text to clear WCAG AA -- see the "Color Schemes" comment above for the verified pairs. */
.btn-primary { background: var(--mep-primary); border-color: var(--mep-primary); color: var(--mep-text-inverse); }
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--mep-primary-hover);
  border-color: var(--mep-primary-hover);
  box-shadow: 0 0 0 3px rgba(var(--mep-primary-rgb),.15);
}

.btn-accent {
  background: var(--mep-accent);
  border-color: var(--mep-accent);
  color: var(--mep-text-inverse);
  font-weight: 600;
}
.btn-accent:hover, .btn-accent:focus-visible {
  background: var(--mep-accent-hover);
  border-color: var(--mep-accent-hover);
  color: var(--mep-text-inverse);
  box-shadow: 0 0 0 3px rgba(var(--mep-accent-rgb),.2);
}

.btn-success { background: var(--mep-success); border-color: var(--mep-success); }
.btn-danger { background: var(--mep-danger); border-color: var(--mep-danger); }
.btn-warning { color: var(--mep-text-on-warning); background: var(--mep-warning); border-color: var(--mep-warning); }

.btn-cta {
  background: linear-gradient(135deg, var(--mep-accent), var(--mep-accent-hover));
  border: none;
  color: var(--mep-text-inverse);
  padding: .75rem 2rem;
  font-weight: 600;
  border-radius: var(--mep-radius);
  box-shadow: 0 2px 8px rgba(var(--mep-accent-rgb),.3);
  transition: color var(--mep-transition), background-color var(--mep-transition), border-color var(--mep-transition), box-shadow var(--mep-transition), transform var(--mep-transition), opacity var(--mep-transition);
}
.btn-cta:hover {
  color: var(--mep-text-inverse);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--mep-accent-rgb),.4);
  text-decoration: none;
}

.btn-outline-primary {
  border-color: var(--mep-primary);
  color: var(--mep-primary);
}
.btn-outline-primary:hover {
  background: var(--mep-primary);
  border-color: var(--mep-primary);
  color: var(--mep-text-inverse);
}

/* ── Cards ────────────────────────────────────────────────── */
.card {
  background: var(--mep-surface);
  border: 1px solid var(--mep-border);
  border-radius: var(--mep-radius-lg);
  box-shadow: var(--mep-shadow-sm);
  transition: box-shadow var(--mep-transition), transform var(--mep-transition), border-color var(--mep-transition);
}
.card-header {
  background: var(--mep-bg-secondary);
  border-bottom: 1px solid var(--mep-border-light);
  font-weight: 600;
}

/* ── Product Card ─────────────────────────────────────────── */
.msq-product-card {
  border-radius: var(--mep-radius-lg);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.msq-product-card:hover {
  box-shadow: var(--mep-shadow-md);
  transform: translateY(var(--mep-hover-lift-y));
  border-color: var(--mep-primary);
  text-decoration: none;
}
.msq-product-card .card-img-top {
  height: 200px;
  /* The whole picture, never a cropped part of it (a tall or wide product photo used to lose its top and sides in the grid): scaled to fit, on white like most product photos. */
  object-fit: contain;
  background: #fff;
  padding: .4rem;
  display: block;
}
.msq-product-card .card-body { flex: 1; display: flex; flex-direction: column; padding: 1rem; }

/* "Add to Cart"/"Add to RFQ" action row. The base .card-body rule keeps it flex-direction:
   column, so in grid view the buttons stack full-width as one organized control (a lone button
   spans the full width too), pinned to the card bottom. The Bootstrap flex-grow-1 utilities would
   otherwise spread the stacked pair apart vertically, so their grow is neutralized here. */
.msq-product-card .msq-card-actions { justify-content: flex-end; }
.msq-product-card .msq-card-actions > form,
.msq-product-card .msq-card-actions > a,
.msq-product-card .msq-card-actions > button { flex: 0 1 auto !important; }

/* Wide list view: the pair sits side-by-side instead, splitting the row evenly. */
.msq-catalog-list .msq-product-card .msq-card-actions { flex-direction: row; }
.msq-catalog-list .msq-product-card .msq-card-actions > form,
.msq-catalog-list .msq-product-card .msq-card-actions > a,
.msq-catalog-list .msq-product-card .msq-card-actions > button { flex: 1 1 0 !important; }

/* Media wrapper lets Wishlist/Compare float over the image as small circular buttons instead of
   competing with "Add to Cart"/"Add to RFQ" for space in the action row below — on a narrow card,
   flex-grow-1 on the primary CTA left nothing for icon buttons to sit beside, forcing each onto its
   own full-width row and roughly doubling the card's height. */
.msq-product-card .msq-card-media,
.msq-home-product-card .msq-card-media { position: relative; }
.msq-product-card .msq-card-quick-actions {
  position: absolute;
  top: .5rem;
  inset-inline-end: .5rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.msq-quick-action-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--mep-radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mep-surface);
  border: 1px solid var(--mep-border-light);
  color: var(--mep-text-secondary);
  box-shadow: var(--mep-shadow-sm);
  transition: transform .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.msq-quick-action-btn:hover {
  color: var(--mep-primary);
  border-color: var(--mep-primary);
  box-shadow: var(--mep-shadow);
  transform: scale(1.08);
}
@media (max-width: 767.98px) {
  .msq-quick-action-btn { width: 38px; height: 38px; }
}
.msq-product-card .card-title {
  font-size: var(--mep-fs-lg);
  font-weight: 600;
  margin-bottom: .35rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.msq-product-card .msq-card-meta { font-size: var(--mep-fs-sm); color: var(--mep-text-secondary); margin-bottom: .5rem; }
.msq-product-card .msq-card-supplier,
.msq-home-product-card .msq-card-supplier {
  font-size: var(--mep-fs-sm);
  color: var(--mep-text-muted);
  margin-top: auto;
  padding-top: .5rem;
  border-top: 1px solid var(--mep-border-light);
  display: flex;
  align-items: center;
  gap: .3rem;
}
.msq-product-card .msq-card-badges,
.msq-home-product-card .msq-card-badges { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }

/* List view (see wwwroot/js/site.js — the Catalog/Brand grid↔list toggle): the card switches to a
   horizontal layout, media pinned to the inline-start side with content and actions stacked beside
   it. The grid honors the writing direction, so it mirrors correctly in RTL/Arabic. */
.msq-catalog-list { --msq-card-list-media: 220px; }
.msq-catalog-list .msq-product-card {
  display: grid;
  grid-template-columns: var(--msq-card-list-media) 1fr;
  grid-template-rows: 1fr auto;
}
.msq-catalog-list .msq-card-media {
  grid-row: 1 / -1;
  grid-column: 1;
  position: relative;
}
.msq-catalog-list .msq-card-media > a { display: block; height: 100%; }
.msq-catalog-list .msq-card-media .card-img-top { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 575.98px) {
  .msq-catalog-list { --msq-card-list-media: 150px; }
}

/* ── Catalog Table view (expert/procurement layout) ───────── */
.msq-catalog-summary { font-size: var(--mep-fs-sm); color: var(--mep-text-secondary); }
.msq-catalog-table { width: 100%; }
.msq-catalog-table thead th { font-size: var(--mep-fs-xs); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.msq-catalog-table tbody tr { vertical-align: middle; }
.msq-catalog-table-thumb {
  width: 48px; height: 48px; object-fit: cover; border-radius: var(--mep-radius);
  background: var(--mep-bg-tertiary); flex: 0 0 auto;
}
.msq-catalog-table-name { max-width: 320px; }
.msq-catalog-table .msq-col-product { min-width: 240px; }
.msq-catalog-table .msq-col-price { white-space: nowrap; }
.msq-catalog-table .msq-col-delivery { white-space: nowrap; }
.msq-catalog-table .msq-col-actions { white-space: nowrap; }
@media (max-width: 991.98px) {
  .msq-catalog-table .msq-col-supplier, .msq-catalog-table .msq-col-delivery { display: none; }
}

/* Card image: gentle zoom on hover (clipped by the card's overflow:hidden). */
.msq-product-card .msq-card-media img { transition: transform .35s ease; }
.msq-product-card:hover .msq-card-media img { transform: scale(1.05); }

/* Discount badge over the image — inline-start so it never collides with the wishlist/compare
   quick actions (which sit on the inline-end). */
.msq-card-discount {
  position: absolute;
  inset-inline-start: .5rem;
  top: .5rem;
  z-index: 2;
  background: var(--mep-danger);
  color: var(--mep-text-inverse);
  font-size: var(--mep-fs-xs);
  font-weight: 700;
  padding: .3em .6em;
  border-radius: var(--mep-radius-full);
  box-shadow: var(--mep-shadow-sm);
}

/* Price legibility: the current price leads in primary with the old price as a muted
   strikethrough; tabular numerals keep digits aligned on a grid row. */
.msq-product-card .msq-card-price,
.msq-home-product-card .msq-card-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .35rem;
  font-variant-numeric: tabular-nums;
}
.msq-product-card .msq-card-price-now,
.msq-home-product-card .msq-card-price-now { color: var(--mep-primary); font-size: 1.05rem; font-weight: 700; }
.msq-product-card .msq-card-price-old,
.msq-home-product-card .msq-card-price-old { color: var(--mep-text-muted); font-size: var(--mep-fs-sm); text-decoration: line-through; }

/* "Price on Request" placeholder keeps the price row balanced for RFQ-only cards. */
.msq-product-card .msq-card-price-request,
.msq-home-product-card .msq-card-price-request { color: var(--mep-text-secondary); font-size: var(--mep-fs-sm); }

/* Title reacts to card hover so the whole card reads as clickable. */
.msq-product-card .card-title { transition: color var(--mep-transition); }
.msq-product-card:hover .card-title { color: var(--mep-primary); }

/* ── Homepage Featured Cards ──────────────────────────────── */
.msq-home-product-card {
  border-radius: var(--mep-radius-lg);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: box-shadow var(--mep-transition), transform var(--mep-transition), border-color var(--mep-transition);
}
.msq-home-product-card:hover {
  box-shadow: var(--mep-shadow-md);
  transform: translateY(var(--mep-hover-lift-y));
  border-color: var(--mep-primary);
  text-decoration: none;
}
.msq-home-product-card .card-img-top {
  height: 180px;
  object-fit: cover;
  background: var(--mep-bg-tertiary);
  transition: transform .35s ease;
}
.msq-home-product-card:hover .card-img-top { transform: scale(1.07); }
.msq-home-product-card .card-body { padding: .85rem; }
.msq-home-product-card .card-title {
  font-size: var(--mep-fs-md);
  font-weight: 600;
  margin-bottom: .25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.msq-home-product-card .msq-card-meta { font-size: var(--mep-fs-sm); color: var(--mep-text-secondary); }

/* ── Homepage Category Card ───────────────────────────────── */
.msq-category-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--mep-border);
  border-radius: var(--mep-radius-lg);
  background: var(--mep-surface);
  transition: color var(--mep-transition), background-color var(--mep-transition), border-color var(--mep-transition), box-shadow var(--mep-transition), transform var(--mep-transition), opacity var(--mep-transition);
  text-decoration: none;
  color: var(--mep-text);
  height: 100%;
}
.msq-category-card:hover {
  border-color: var(--mep-primary);
  box-shadow: var(--mep-shadow-md);
  transform: translateY(var(--mep-hover-lift-y));
  text-decoration: none;
  color: var(--mep-text);
}
.msq-category-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--mep-radius);
  background: var(--mep-primary-light);
  color: var(--mep-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--mep-fs-2xl);
  flex-shrink: 0;
  transition: background var(--mep-transition), color var(--mep-transition);
}
.msq-category-card:hover .msq-category-icon {
  background: var(--mep-primary);
  color: var(--mep-text-inverse);
  transform: rotate(15deg) scale(1.08);
}
.msq-category-name { font-weight: 600; font-size: var(--mep-fs-base); }
.msq-category-count { font-size: var(--mep-fs-sm); color: var(--mep-text-secondary); }

/* ── Homepage Supplier Card ───────────────────────────────── */
.msq-supplier-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem 1rem;
  border: 1px solid var(--mep-border);
  border-radius: var(--mep-radius-lg);
  background: var(--mep-surface);
  transition: color var(--mep-transition), background-color var(--mep-transition), border-color var(--mep-transition), box-shadow var(--mep-transition), transform var(--mep-transition), opacity var(--mep-transition);
  text-decoration: none;
  color: var(--mep-text);
  height: 100%;
}
.msq-supplier-card:hover {
  border-color: var(--mep-primary);
  box-shadow: var(--mep-shadow-md);
  transform: translateY(var(--mep-hover-lift-y));
  text-decoration: none;
  color: var(--mep-text);
}
.msq-supplier-logo {
  width: 64px;
  height: 64px;
  border-radius: var(--mep-radius-lg);
  /* contain + padding, not cover — same reasoning as .msq-hero-logo/.msq-brand-hero: a non-square
     company/brand logo must read in full here too, not get cropped to fill the tile. */
  object-fit: contain;
  padding: .35rem;
  background: var(--mep-bg-tertiary);
  margin-bottom: .75rem;
  border: 2px solid var(--mep-border);
  box-sizing: border-box;
}
.msq-supplier-card .msq-supplier-name {
  font-weight: 600;
  font-size: var(--mep-fs-lg);
  margin-bottom: .25rem;
}
.msq-supplier-card .msq-supplier-products {
  font-size: var(--mep-fs-sm);
  color: var(--mep-text-secondary);
}
.msq-supplier-card-badge { margin-bottom: .35rem; }
.msq-supplier-card .msq-supplier-rating {
  font-size: var(--mep-fs-sm);
  color: var(--mep-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  margin-bottom: .15rem;
}
.msq-supplier-card .msq-supplier-rating .bi-star { color: var(--mep-border); }
.msq-supplier-card-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .3rem;
  margin-top: .5rem;
}
.msq-supplier-card .msq-supplier-sales {
  font-size: var(--mep-fs-sm);
  color: var(--mep-primary);
  font-weight: 600;
  margin-top: .2rem;
}
.msq-supplier-card .msq-supplier-overview {
  font-size: var(--mep-fs-sm);
  color: var(--mep-text-muted);
  margin-top: .5rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Accessibility: contrast and focus (WCAG 1.4.3, 1.4.1, 2.4.7) ─────────────────────────────
   Bootstrap's .text-secondary is a fixed #6c757d, which measured 4.44:1 on the page background in the light theme and
   3.3-3.8:1 in the dark one. It is used about 400 times, so it is re-pointed at the site's own token (5.2:1 light, ~8:1 dark). */
.text-secondary { color: var(--mep-text-secondary) !important; }
/* Bootstrap's outline-secondary button is the same fixed #6c757d (4.44:1 on the page background). */
.btn-outline-secondary { --bs-btn-color: var(--mep-text-secondary); --bs-btn-border-color: var(--mep-text-secondary); }

/* A link inside a sentence must not be told apart from the text by colour alone (the navy of the links is 1.35:1 against the body
   text colour, so without an underline it is invisible to a colour-blind reader). Buttons and nav-style links keep their look. */
main :is(p, small, label, .form-text, .text-secondary, .alert) a:not(.btn):not([class*="btn-"]):not(.stretched-link):not(.msq-hero-link) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* One visible keyboard focus ring everywhere (:where keeps it at zero specificity, so every component that already styles its own
   focus keeps winning). Browser default rings on links were an orange 2.3:1 on the light background, and the checkbox/toggler/close
   button only got Bootstrap's pale blue glow (1.45:1). The primary colour flips to a light tone in the dark theme, so the ring
   follows the theme; on the dark hero and footer it is white. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--mep-primary);
  outline-offset: 2px;
}
:where(.msq-hero, .msq-footer) :focus-visible { outline-color: #fff; }
.form-check-input:focus-visible,
.navbar-toggler:focus-visible,
.btn-close:focus-visible {
  outline: 2px solid var(--mep-primary);
  outline-offset: 2px;
  box-shadow: none;
}
.msq-hero .navbar-toggler:focus-visible, .msq-hero .btn-close:focus-visible { outline-color: #fff; }

/* Status badges: the pale background + same-hue text pairs measured 3.7:1 (green), 4.0:1 (blue), 2.1:1 (amber). Darker text of the same hue in the
   light theme (5.2 / 5.7 / 6.0:1); the dark theme uses lighter text on dark pills and already passed. */
[data-theme="light"] :is(.badge-status-approved, .badge-status-resolvedpending, .badge-status-resolved, .badge-stock-in) { color: #16734A; }
[data-theme="light"] :is(.badge-status-open, .badge-status-submitted, .badge-status-new, .badge-stock-made) { color: #1F6396; }
[data-theme="light"] :is(.badge-status-pending, .badge-status-modification, .badge-status-underreview, .badge-status-inprogress, .badge-stock-order, .badge-priority-high) { color: #7A5A00; }
[data-theme="light"] .badge-priority-medium { color: #1F6396; }
/* Bootstrap's bright cyan / amber badges were given white text (1.95:1 and 1.63:1); they need dark text. */
.badge.bg-info, .badge.bg-warning { color: #1A2530 !important; }
/* Outline-danger buttons: #dc3545 is 4.28:1 on the page background; the site's own danger token is 4.9:1. */
.btn-outline-danger { --bs-btn-color: var(--mep-danger); --bs-btn-border-color: var(--mep-danger); }

/* Bootstrap's coloured text utilities on the light page background: success 4.29:1, danger 4.28:1, warning 1.6:1, info 1.8:1. Same hues, darker (5.3 to 6.1:1).
   The dark theme keeps Bootstrap's own light tints, which already pass on dark. */
[data-theme="light"] .text-success { color: #16734A !important; }
[data-theme="light"] .text-danger { color: #C43D3D !important; }
/* Bootstrap's pale-red "subtle" pill with red text: use the darker red on it too. */
[data-theme="light"] .bg-danger-subtle.text-danger { color: #A52F2F !important; }
/* Bootstrap blue on its pale-blue pill (3.4:1) and on the page background as a link-style button (4.3:1): the site primary instead. */
[data-theme="light"] .bg-primary-subtle.text-primary { color: var(--mep-primary) !important; }
.btn-link { --bs-btn-color: var(--mep-primary); --bs-btn-hover-color: var(--mep-primary-hover); }
[data-theme="light"] .text-warning { color: #7A5A00 !important; }
[data-theme="light"] .text-info { color: #0A6C85 !important; }
[data-theme="light"] .btn-outline-success { --bs-btn-color: #16734A; --bs-btn-border-color: #16734A; }

/* Bootstrap colours inline <code> pink (#d63384, 4.2:1 on the page background); in this UI it holds ids and SKUs. */
code { color: var(--mep-text); }

/* A real <label> above a filter control looks like the old title <div>. */
label.msq-filter-group-title { display: block; }

/* ── Badges ───────────────────────────────────────────────── */
/* Uses the same pill token every other badge-like element in this app already does
   (.msq-role-badge, .msq-verified-badge, .msq-nav-badge, .msq-filter-chip, etc. — Phase 90) —
   the plain Bootstrap .badge was the one holdout still on a bare hardcoded value. */
.badge { font-weight: 500; font-size: var(--mep-fs-xs); padding: .3em .6em; border-radius: var(--mep-radius-full); letter-spacing: .01em; }

.badge-stock-in { background: var(--mep-success-light); color: var(--mep-success); }
/* #1E8E5A on the pale green measured 3.68:1; this green is 5.2:1 (the dark theme has its own, lighter pair and already passed). */
[data-theme="light"] .badge-stock-in { color: #16734A; }
.badge-stock-out { background: var(--mep-danger-light); color: var(--mep-danger); }
.badge-stock-order { background: var(--mep-warning-light); color: var(--mep-warning); }
.badge-stock-made { background: var(--mep-info-light); color: var(--mep-info); }

.badge-moq, .badge-leadtime {
  background: var(--mep-bg-tertiary);
  color: var(--mep-text-secondary);
  font-weight: 500;
}

.badge-status-pending { background: var(--mep-warning-light); color: var(--mep-warning); }
.badge-status-approved { background: var(--mep-success-light); color: var(--mep-success); }
.badge-status-rejected { background: var(--mep-danger-light); color: var(--mep-danger); }
.badge-status-modification { background: var(--mep-warning-light); color: var(--mep-warning); }
.badge-status-draft { background: var(--mep-bg-tertiary); color: var(--mep-text-secondary); }
.badge-status-suspended { background: var(--mep-danger-light); color: var(--mep-danger); }
.badge-status-archived { background: var(--mep-bg-tertiary); color: var(--mep-text-secondary); }
.badge-status-open { background: var(--mep-info-light); color: var(--mep-info); }
.badge-status-closed { background: var(--mep-bg-tertiary); color: var(--mep-text-secondary); }
.badge-status-submitted { background: var(--mep-info-light); color: var(--mep-info); }

/* Complaints & Suggestions — badge-status-closed/rejected above are reused as-is since their
   names already match this module's status vocabulary exactly. */
.badge-status-new { background: var(--mep-info-light); color: var(--mep-info); }
.badge-status-underreview { background: var(--mep-warning-light); color: var(--mep-warning); }
.badge-status-inprogress { background: var(--mep-warning-light); color: var(--mep-warning); }
.badge-status-resolvedpending { background: var(--mep-success-light); color: var(--mep-success); }
.badge-status-resolved { background: var(--mep-success-light); color: var(--mep-success); }
.badge-status-reopened { background: var(--mep-danger-light); color: var(--mep-danger); }

.badge-priority-low { background: var(--mep-bg-tertiary); color: var(--mep-text-secondary); }
.badge-priority-medium { background: var(--mep-info-light); color: var(--mep-info); }
.badge-priority-high { background: var(--mep-warning-light); color: var(--mep-warning); }
.badge-priority-critical { background: var(--mep-danger-light); color: var(--mep-danger); }

/* ── Responsive Data Table (card fallback) ───────────────── */
/* Plain Bootstrap .table-responsive only adds horizontal scroll — on a narrow phone the columns
   still shrink to fit instead of actually scrolling, since most cells hold wrapping-prone text
   (product/company names), so the table just squeezes into severely wrapped, cramped cells instead
   (confirmed live on the Quotation/Bulk Purchase Request lists at 375px: a product name wrapped
   across 5+ lines and the status badge's text was clipped). Opt a <table> into this with
   class="msq-responsive-table" and add data-label="..." (matching each column's own <th> text) to
   every <td> that should show as a labeled row on mobile; a <td> with no data-label (an icon-only
   cell, or the empty-state placeholder) is left alone. Every direction-sensitive rule here is
   flex justify-content, which already reverses under dir="rtl" on its own — no logical properties
   needed, unlike the left/right positioning bugs found earlier this session. */
@media (max-width: 767.98px) {
  .msq-responsive-table thead { display: none; }
  .msq-responsive-table, .msq-responsive-table tbody, .msq-responsive-table tr, .msq-responsive-table td {
    display: block;
    width: 100%;
  }
  .msq-responsive-table tr {
    border: 1px solid var(--mep-border);
    border-radius: var(--mep-radius-lg);
    margin-bottom: .75rem;
    padding: .75rem 1rem;
  }
  .msq-responsive-table td {
    padding: .3rem 0;
    border: none !important;
  }
  .msq-responsive-table td[data-label] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
  }
  .msq-responsive-table td[data-label]::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: var(--mep-fs-sm);
    color: var(--mep-text-secondary);
    flex-shrink: 0;
  }
  .msq-responsive-table .msq-table-icon-cell { display: none; }
  .msq-responsive-table .msq-table-action-cell {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid var(--mep-border-light) !important;
  }
  .msq-responsive-table .msq-table-action-cell .btn { flex: 1 1 auto; width: auto; }
  .msq-responsive-table .msq-table-action-cell form { flex: 1 1 auto; margin: 0; }
  .msq-responsive-table .msq-table-action-cell form .btn { width: 100%; }
  /* a second button cell (Addresses: "Make default" and "Remove") joins the first row of buttons */
  .msq-responsive-table .msq-table-action-cell + .msq-table-action-cell { margin-top: 0; padding-top: 0; border-top: 0 !important; }
  /* a note under a row (a return's admin note) sits against the card above it */
  .msq-responsive-table tr.msq-table-note { margin-top: -.6rem; border-top-style: dashed; background: var(--mep-bg-secondary); font-size: var(--mep-fs-sm); }
  .msq-responsive-table tr.msq-table-note:only-child { margin-top: 0; border-top-style: solid; background: transparent; }
  /* tighter cards so a page of twenty rows is not nine thousand pixels tall */
  .msq-responsive-table tr { padding: .6rem .9rem; margin-bottom: .6rem; }
  .msq-responsive-table td { padding: .2rem 0; }
  .msq-responsive-table td:empty { display: none; }
}

/* ── Filter Sidebar ───────────────────────────────────────── */
.msq-filter-sidebar {
  position: sticky;
  top: calc(var(--mep-navbar-height) + 1rem);
  max-height: calc(100vh - var(--mep-navbar-height) - 2rem);
  overflow-y: auto;
  padding-inline-end: .5rem;
}
.msq-filter-sidebar::-webkit-scrollbar { width: 4px; }
.msq-filter-sidebar::-webkit-scrollbar-thumb { background: var(--mep-border); border-radius: 4px; }

/* Below md, the "Filters" toggle button (#msq-filter-toggle, site.js) already exists and already
   toggles a `.show` class on this element. This used to be a plain display:none/block reveal — now
   a real off-canvas drawer, mirroring .msq-mobile-nav-drawer's exact mechanism (same fixed+transform+
   backdrop+z-index shape, see site.css:1928 and its RTL-flip comment) rather than the simpler collapse
   this page used before Phase 53. Sticky positioning is desktop-only, turned off here. Kept
   `display: flex` at all times (never display:none) so the transform transition has a "from" state to
   animate — a display:none→block swap on the same click as the transform change would just pop into
   view instantly with no slide-in. */
@media (max-width: 767.98px) {
  .msq-filter-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    height: 100vh;
    width: min(85vw, 320px);
    max-height: none;
    background: var(--mep-surface);
    box-shadow: var(--mep-shadow-xl);
    transform: translateX(-100%);
    visibility: hidden; /* see .msq-mobile-nav-drawer: off screen is not enough, it must also leave the Tab order while closed */
    transition: transform .3s ease, visibility 0s linear .3s;
    z-index: 1045;
    padding: 1.25rem;
    display: flex !important;
    flex-direction: column;
    overflow-y: auto;
  }
  [dir="rtl"] .msq-filter-sidebar { transform: translateX(100%); }
  .msq-filter-sidebar.show { transform: translateX(0); visibility: visible; transition: transform .3s ease, visibility 0s; }

  .msq-filter-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    z-index: 1044;
  }
  .msq-filter-backdrop.show { display: block; }
  body.msq-filter-open { overflow: hidden; }
}
/* .msq-filter-backdrop has no rule at all above 767.98px (a raw <div>'s browser-default display is
   block), so it must be explicitly forced hidden here — same reason .msq-mobile-nav-backdrop has an
   identical override at its own >=992px boundary. Without this, "collapsing" the desktop filter
   sidebar (where `.show` means collapsed, not open — see the min-width:768px rule below) would also
   flip the backdrop's class and, without this rule, cover the whole desktop page in a dark overlay. */
@media (min-width: 768px) {
  .msq-filter-backdrop { display: none; }
}

/* At/above md, the sidebar is visible by default (the rule above this comment) — the SAME `#msq-
   filter-toggle` button/`.show` class is reused here too (site.js needs no changes), but with
   inverted meaning: `.show` means "expanded" on mobile, but "collapsed" here, since desktop's
   default (no class) is already expanded. */
@media (min-width: 768px) {
  .msq-filter-sidebar.show {
    display: none;
  }
}

/* Icon-only .btn-sm instances (no visible text) render at ~30px — below the ~44px touch-target
   guideline. Text+icon buttons using the same base classes are wider/more forgiving and are left
   alone; this class is applied only to markup where the button's whole content is a single <i>. */
@media (max-width: 767.98px) {
  .msq-icon-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

.msq-filter-group { margin-bottom: 1.25rem; }
.msq-filter-group-title {
  font-size: var(--mep-fs-sm); font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--mep-text-secondary); margin-bottom: .5rem;
}
.msq-filter-option {
  display: flex; align-items: center; justify-content: space-between;
  padding: .35rem .5rem; border-radius: var(--mep-radius);
  font-size: var(--mep-fs-md); cursor: pointer;
  transition: background var(--mep-transition); text-decoration: none; color: var(--mep-text);
}
.msq-filter-option:hover { background: var(--mep-bg-tertiary); text-decoration: none; }
.msq-filter-option.active { background: var(--mep-primary-light); color: var(--mep-primary); font-weight: 600; }
.msq-filter-count {
  font-size: var(--mep-fs-xs); color: var(--mep-text-muted);
  background: var(--mep-bg-tertiary); padding: .1rem .45rem; border-radius: var(--mep-radius-full);
}

.msq-filter-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.msq-filter-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--mep-primary-light); color: var(--mep-primary);
  padding: .25rem .65rem; border-radius: var(--mep-radius-full); font-size: var(--mep-fs-sm); font-weight: 500; text-decoration: none;
}
.msq-filter-chip:hover { text-decoration: none; opacity: .8; }
.msq-filter-chip .bi { font-size: var(--mep-fs-2xs); }

/* ── Product Detail ───────────────────────────────────────── */
.msq-product-gallery {
  position: relative; border-radius: var(--mep-radius-lg);
  overflow: hidden; background: var(--mep-bg-tertiary);
}
.msq-product-gallery .msq-gallery-main {
  width: 100%; aspect-ratio: 4/3; object-fit: contain;
  cursor: zoom-in; transition: transform .2s ease;
}
.msq-product-gallery:hover .msq-gallery-main { transform: scale(1.02); }
.msq-product-gallery .msq-gallery-thumb-strip {
  display: flex; gap: .5rem; padding: .75rem; overflow-x: auto;
  background: var(--mep-surface); border-top: 1px solid var(--mep-border-light);
}
.msq-product-gallery .msq-gallery-thumb {
  width: 64px; height: 64px; object-fit: cover; border-radius: var(--mep-radius);
  cursor: pointer; border: 2px solid transparent;
  transition: border-color var(--mep-transition), opacity var(--mep-transition);
  opacity: .7; flex-shrink: 0;
}
.msq-product-gallery .msq-gallery-thumb.active,
.msq-product-gallery .msq-gallery-thumb:hover { border-color: var(--mep-primary); opacity: 1; }

.msq-sub-orders-table { border-inline-start: 3px solid var(--mep-accent); border-radius: var(--mep-radius); overflow: hidden; }

.msq-specs-table { width: 100%; }
.msq-specs-table tr { border-bottom: 1px solid var(--mep-border-light); }
.msq-specs-table th {
  font-weight: 500; color: var(--mep-text-secondary);
  padding: .65rem 1rem; width: 40%; font-size: var(--mep-fs-base); background: var(--mep-bg-secondary);
}
.msq-specs-table td { padding: .65rem 1rem; font-size: var(--mep-fs-base); }
.msq-specs-table tr:last-child { border-bottom: none; }

.msq-doc-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .65rem 1.15rem; border: 1px solid var(--mep-border);
  border-radius: var(--mep-radius); font-size: var(--mep-fs-md); font-weight: 500;
  color: var(--mep-text); background: var(--mep-surface);
  transition: color var(--mep-transition), background-color var(--mep-transition), border-color var(--mep-transition), box-shadow var(--mep-transition), transform var(--mep-transition), opacity var(--mep-transition); text-decoration: none;
}
.msq-doc-btn:hover {
  border-color: var(--mep-primary); color: var(--mep-primary);
  background: var(--mep-primary-light); text-decoration: none; box-shadow: var(--mep-shadow-sm);
}
.msq-doc-btn .bi { font-size: var(--mep-fs-xl); }

.msq-supplier-mini-card {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem; border: 1px solid var(--mep-border);
  border-radius: var(--mep-radius-lg); background: var(--mep-surface);
  transition: box-shadow var(--mep-transition), transform var(--mep-transition), border-color var(--mep-transition);
}
.msq-supplier-mini-card:hover { box-shadow: var(--mep-shadow-md); transform: translateY(var(--mep-hover-lift-y)); border-color: var(--mep-primary); text-decoration: none; }
.msq-supplier-mini-card img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--mep-radius); }
.msq-supplier-mini-card .msq-supplier-name { font-weight: 600; font-size: var(--mep-fs-lg); margin-bottom: .15rem; }
.msq-supplier-mini-card .msq-supplier-meta { font-size: var(--mep-fs-sm); color: var(--mep-text-secondary); }

/* ── Supplier Public Profile ──────────────────────────────── */
/* .msq-brand-hero reuses this exact treatment (background/border/padding/logo/name/meta) so Brand's
   profile page reads at the same polish level as Supplier's, per the Brand/Category SEO parity work. */
.msq-supplier-hero, .msq-brand-hero {
  background: var(--mep-bg-secondary); border: 1px solid var(--mep-border);
  border-radius: var(--mep-radius-lg); padding: 2rem; margin-bottom: 1.5rem;
}
.msq-supplier-hero .msq-hero-logo, .msq-page-header .msq-hero-logo, .msq-brand-hero .msq-hero-logo {
  width: 80px; height: 80px; object-fit: cover; border-radius: var(--mep-radius-lg);
  border: 3px solid var(--mep-surface); box-shadow: var(--mep-shadow);
}
.msq-supplier-hero .msq-hero-name, .msq-brand-hero .msq-hero-name { font-size: var(--mep-fs-4xl); font-weight: 700; margin-bottom: .25rem; }
.msq-supplier-hero .msq-hero-meta, .msq-brand-hero .msq-hero-meta { font-size: var(--mep-fs-base); color: var(--mep-text-secondary); }

/* Brand and Supplier profile heroes: compact stat chips and clickable keyword tags, plus a padded
   logo tile so transparent/irregular (non-square) logo files still read in full instead of being
   cropped by the shared 80x80 object-fit:cover box above. */
.msq-supplier-hero .msq-hero-logo, .msq-brand-hero .msq-hero-logo { object-fit: contain; background: var(--mep-surface); padding: .4rem; }
.msq-hero-stats { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: .15rem; }
.msq-hero-stat { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--mep-fs-sm); color: var(--mep-text-secondary); }
.msq-hero-stat i { color: var(--mep-primary); }
.msq-hero-stat strong { color: var(--mep-text); font-weight: 700; }
.msq-brand-keywords { display: flex; flex-wrap: wrap; gap: .35rem; }
.msq-tag {
  display: inline-flex; align-items: center;
  background: var(--mep-primary-light); color: var(--mep-primary);
  font-size: var(--mep-fs-xs); font-weight: 600;
  padding: .3em .7em; border-radius: var(--mep-radius-full);
  text-decoration: none;
  transition: background var(--mep-transition), color var(--mep-transition);
}
.msq-tag:hover { background: var(--mep-primary); color: var(--mep-text-inverse); }

/* Brand banner: a decorative cover strip above the hero box, only rendered when the Admin has
   uploaded one (BrandFormViewModel.BannerImageFile) — falls back to a tertiary bg color while the
   image itself loads so there's no flash of blank white/black. */
.msq-brand-banner {
  height: 200px; background-size: cover; background-position: center;
  border-radius: var(--mep-radius-lg); background-color: var(--mep-bg-tertiary);
  position: relative; overflow: hidden;
  animation: msq-banner-zoom 1.1s ease-out backwards;
}
.msq-brand-banner::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.28));
}
/* When no banner image is uploaded, show a branded gradient with a subtle watermark so the
   profile page always opens with a visual top edge. */
.msq-brand-banner-fallback {
  background: linear-gradient(135deg, var(--mep-primary), var(--mep-accent));
  display: flex; align-items: center; justify-content: center;
}
.msq-brand-banner-fallback > i { font-size: 4rem; color: var(--mep-text-inverse); opacity: .4; }
.msq-brand-banner-fallback::after { display: none; }
@keyframes msq-banner-zoom {
  from { transform: scale(1.12); }
  to { transform: scale(1); }
}
@media (max-width: 767.98px) {
  .msq-brand-banner { height: 130px; }
}
/* Same reasoning as .msq-home-banner-img: a flat height that's fine on a phone/tablet container
   turns into an over-cropped strip once the container widens past ~1200px, so scale it up there. */
@media (min-width: 1200px) {
  .msq-brand-banner { height: 280px; }
}
.msq-verified-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--mep-verified-light); color: var(--mep-verified);
  padding: .2rem .6rem; border-radius: var(--mep-radius-full); font-size: var(--mep-fs-xs); font-weight: 600;
}

.msq-cert-card {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1rem; border: 1px solid var(--mep-border);
  border-radius: var(--mep-radius); background: var(--mep-surface);
  transition: box-shadow var(--mep-transition);
}
.msq-cert-card:hover { box-shadow: var(--mep-shadow-sm); }
.msq-cert-icon {
  width: 40px; height: 40px; background: var(--mep-primary-light);
  color: var(--mep-primary); border-radius: var(--mep-radius);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--mep-fs-xl); flex-shrink: 0;
}
.msq-cert-info .msq-cert-name { font-weight: 500; font-size: var(--mep-fs-base); }
.msq-cert-info .msq-cert-meta { font-size: var(--mep-fs-sm); color: var(--mep-text-secondary); }

/* ── Stat Cards ───────────────────────────────────────────── */
.msq-stat-card {
  background: var(--mep-surface); border: 1px solid var(--mep-border);
  border-radius: var(--mep-radius-lg); padding: 1.25rem;
  transition: box-shadow var(--mep-transition);
}
.msq-stat-card:hover { box-shadow: var(--mep-shadow); }
.msq-stat-card .msq-stat-icon {
  width: 48px; height: 48px; border-radius: var(--mep-radius);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--mep-fs-2xl); margin-bottom: .75rem;
}
.msq-stat-card .msq-stat-value {
  font-size: var(--mep-fs-5xl); font-weight: 700; line-height: 1.2; margin-bottom: .15rem;
}
.msq-stat-card .msq-stat-label {
  font-size: var(--mep-fs-sm); color: var(--mep-text-secondary); font-weight: 500;
}

/* ── Wizard ───────────────────────────────────────────────── */
.msq-wizard { margin-bottom: 2rem; }
.msq-wizard-steps {
  display: flex; align-items: center; gap: 0; margin-bottom: 2rem;
  padding: 0; list-style: none; counter-reset: step;
}
.msq-wizard-step { flex: 1; text-align: center; position: relative; padding-top: 2.5rem; }
.msq-wizard-step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--mep-bg-tertiary); color: var(--mep-text-muted);
  border: 2px solid var(--mep-border);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--mep-fs-sm); font-weight: 600; z-index: 1;
}
.msq-wizard-step::after {
  content: ''; position: absolute; top: 15px;
  left: calc(50% + 20px); right: calc(-50% + 20px);
  height: 2px; background: var(--mep-border);
}
.msq-wizard-step:last-child::after { display: none; }
.msq-wizard-step.active::before {
  background: var(--mep-primary); color: var(--mep-text-inverse); border-color: var(--mep-primary);
}
.msq-wizard-step.completed::before {
  background: var(--mep-success); color: var(--mep-text-inverse); border-color: var(--mep-success); content: '\2713';
}
.msq-wizard-step.completed::after { background: var(--mep-success); }
.msq-wizard-step .msq-wizard-label { font-size: var(--mep-fs-sm); font-weight: 500; color: var(--mep-text-secondary); }
.msq-wizard-step.active .msq-wizard-label { color: var(--mep-primary); font-weight: 600; }
.msq-wizard-step { cursor: pointer; }
.msq-wizard-step:not(.locked):not(.active):hover .msq-wizard-label { color: var(--mep-primary); }
.msq-wizard-step.locked { cursor: not-allowed; }
.msq-wizard-step.locked .msq-wizard-label { opacity: .55; }
.msq-wizard-progress-label {
  text-align: center; font-size: var(--mep-fs-sm); font-weight: 500;
  color: var(--mep-text-secondary); margin-top: -1.25rem; margin-bottom: 1.5rem;
}
.msq-wizard-mobile { margin-bottom: 1.25rem; }
.msq-wizard-mobile-label { font-size: var(--mep-fs-md); font-weight: 600; color: var(--mep-text); margin-bottom: .4rem; }
.msq-wizard-mobile-bar { height: 6px; border-radius: var(--mep-radius-full); background: var(--mep-bg-tertiary); overflow: hidden; }
.msq-wizard-mobile-bar-fill { height: 100%; width: 0; background: var(--mep-primary); transition: width var(--mep-transition-slow); }

.msq-wizard-checklist { list-style: none; padding: 0; margin: 0; }
.msq-wizard-checklist-item {
  display: flex; align-items: flex-start; gap: .5rem; padding: .4rem 0;
  font-size: var(--mep-fs-md); border-bottom: 1px dashed var(--mep-border-light);
}
.msq-wizard-checklist-item:last-child { border-bottom: none; }
.msq-wizard-checklist-item i { margin-top: .15rem; flex-shrink: 0; }
.msq-wizard-checklist-item.required.pending i { color: var(--mep-danger); }
.msq-wizard-checklist-item.required.done i { color: var(--mep-success); }
.msq-wizard-checklist-item.recommended.pending i { color: var(--mep-warning); }
.msq-wizard-checklist-item.recommended.done i { color: var(--mep-success); }
.msq-wizard-checklist-item.recommended .msq-wizard-checklist-text { color: var(--mep-text-secondary); }
.msq-wizard-checklist-badge {
  font-size: var(--mep-fs-2xs); text-transform: uppercase; letter-spacing: .03em;
  padding: .1rem .4rem; border-radius: var(--mep-radius-full); margin-inline-start: .4rem;
  background: var(--mep-bg-tertiary); color: var(--mep-text-muted);
}

/* ── Admin Approval Cards ─────────────────────────────────── */
.msq-approval-card {
  border-left: 4px solid var(--mep-border);
  border-radius: var(--mep-radius-lg); margin-bottom: 1rem;
  transition: box-shadow var(--mep-transition);
}
.msq-approval-card:hover { box-shadow: var(--mep-shadow); }
.msq-approval-card.status-pending { border-left-color: var(--mep-warning); }
.msq-approval-card.status-approved { border-left-color: var(--mep-success); }
.msq-approval-card.status-rejected { border-left-color: var(--mep-danger); }
.msq-approval-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ── Quotation Comparison Table ───────────────────────────── */
.msq-comparison-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--mep-border); border-radius: var(--mep-radius-lg); overflow: hidden;
}
.msq-comparison-table th {
  background: var(--mep-bg-secondary); padding: .75rem 1rem; font-size: var(--mep-fs-sm);
  font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  color: var(--mep-text-secondary); border-bottom: 2px solid var(--mep-border); text-align: left; white-space: nowrap;
}
.msq-comparison-table td {
  padding: .75rem 1rem; border-bottom: 1px solid var(--mep-border-light); font-size: var(--mep-fs-base); vertical-align: middle;
}
.msq-comparison-table tr:last-child td { border-bottom: none; }
.msq-comparison-table tr:hover td { background: var(--mep-surface-hover); }

/* ── Quotation Request Form Context ───────────────────────── */
.msq-qr-context {
  display: flex; align-items: center; gap: 1rem; padding: 1rem;
  background: var(--mep-bg-secondary); border: 1px solid var(--mep-border-light);
  border-radius: var(--mep-radius-lg); margin-bottom: 1.5rem;
}
.msq-qr-context img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--mep-radius); flex-shrink: 0; }
.msq-qr-context .msq-qr-product-name { font-weight: 600; font-size: var(--mep-fs-lg); }
.msq-qr-context .msq-qr-product-meta { font-size: var(--mep-fs-sm); color: var(--mep-text-secondary); }

/* ── Breadcrumbs ──────────────────────────────────────────── */
.msq-breadcrumb { background: transparent; padding: .75rem 0; margin-bottom: .5rem; }
.msq-breadcrumb .breadcrumb { background: transparent; padding: 0; margin: 0; font-size: var(--mep-fs-md); }
.msq-breadcrumb .breadcrumb-item a { color: var(--mep-text-secondary); transition: color var(--mep-transition); }
.msq-breadcrumb .breadcrumb-item a:hover { color: var(--mep-primary); }
.msq-breadcrumb .breadcrumb-item.active { color: var(--mep-text); font-weight: 500; }
/* The page loads the left-to-right Bootstrap build, whose divider floats left with its spacing on the right: in Arabic the "/" ended up after the
   last item instead of between the items. Mirrored here. */
html[dir="rtl"] .breadcrumb-item + .breadcrumb-item { padding-left: 0; padding-right: .5rem; }
html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { float: right; padding-right: 0; padding-left: .5rem; }

/* ── Empty States ─────────────────────────────────────────── */
.msq-empty-state { text-align: center; padding: 3rem 1.5rem; animation: msq-empty-fade-in .4s ease; }
.msq-empty-state .msq-empty-icon {
  width: 80px; height: 80px; margin: 0 auto 1.25rem;
  background: var(--mep-bg-tertiary); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--mep-fs-6xl); color: var(--mep-text-muted);
  animation: msq-empty-icon-pop .45s ease .15s backwards;
}
@keyframes msq-empty-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes msq-empty-icon-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes msq-empty-icon-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.msq-empty-state .msq-empty-icon { animation: msq-empty-icon-pop .45s ease .15s backwards, msq-empty-icon-breathe 3s ease-in-out 1s infinite; }
.msq-empty-state h5,
.msq-empty-state h2.h5 { font-weight: 600; margin-bottom: .5rem; }
.msq-empty-state p { color: var(--mep-text-secondary); font-size: var(--mep-fs-base); max-width: 360px; margin: 0 auto 1.25rem; }
.msq-empty-state-sm { padding: 2rem 1rem; }
.msq-empty-state-sm .msq-empty-icon { width: 48px; height: 48px; margin-bottom: .75rem; font-size: var(--mep-fs-3xl); }
.msq-empty-state-sm p { font-size: var(--mep-fs-sm); margin: 0 auto; }

/* ── CMS Content / Expandable Description ─────────────────── */
.msq-cms-content { line-height: 1.7; color: var(--mep-text-secondary); }
.msq-cms-content h1, .msq-cms-content h2, .msq-cms-content h3,
.msq-cms-content h4, .msq-cms-content h5, .msq-cms-content h6 { color: var(--mep-text); font-weight: 600; }
.msq-cms-expandable { position: relative; }
.msq-cms-expandable .msq-cms-content { max-height: 280px; overflow: hidden; position: relative; transition: max-height .4s ease; }
.msq-cms-expandable.msq-cms-expanded .msq-cms-content { max-height: none; }
.msq-cms-expandable:not(.msq-cms-expanded) .msq-cms-content::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 80px;
  background: linear-gradient(to bottom, transparent, var(--mep-bg));
  pointer-events: none;
}
.msq-cms-toggle-btn {
  display: block; width: 100%; margin-top: .25rem;
  background: none; border: none; color: var(--mep-primary);
  font-size: var(--mep-fs-sm); font-weight: 600; cursor: pointer;
  padding: .35rem 0; transition: color var(--mep-transition);
}
.msq-cms-toggle-btn:hover { color: var(--mep-accent); }

/* ── Chips (Browse in Catalog, etc.) ──────────────────────── */
.msq-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4em .9em; border-radius: var(--mep-radius-full);
  font-size: var(--mep-fs-sm); font-weight: 600; text-decoration: none;
  transition: background var(--mep-transition), color var(--mep-transition), border-color var(--mep-transition);
}
.msq-chip-outline {
  background: transparent; color: var(--mep-primary);
  border: 1.5px solid var(--mep-primary);
}
.msq-chip-outline:hover { background: var(--mep-primary); color: var(--mep-text-inverse); }

/* ── Skeleton Loaders ─────────────────────────────────────── */
@keyframes msq-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.msq-skeleton {
  background: linear-gradient(90deg, var(--mep-bg-tertiary) 25%, var(--mep-border-light) 50%, var(--mep-bg-tertiary) 75%);
  background-size: 800px 100%; animation: msq-shimmer 1.5s infinite linear; border-radius: var(--mep-radius);
}
.msq-skeleton-text { height: 14px; margin-bottom: .5rem; }
.msq-skeleton-text.w-75 { width: 75%; }
.msq-skeleton-text.w-50 { width: 50%; }
.msq-skeleton-text.w-25 { width: 25%; }
.msq-skeleton-img { aspect-ratio: 4/3; width: 100%; }
.msq-skeleton-avatar { width: 56px; height: 56px; border-radius: var(--mep-radius); }

/* ── Tables ───────────────────────────────────────────────── */
.table { --bs-table-bg: transparent; font-size: var(--mep-fs-base); }
.table thead th {
  font-weight: 600; font-size: var(--mep-fs-sm); text-transform: uppercase;
  letter-spacing: .04em; color: var(--mep-text-secondary);
  border-bottom-width: 2px; padding: .75rem .75rem;
}
.table tbody td { padding: .65rem .75rem; vertical-align: middle; }
.table tbody tr { transition: background var(--mep-transition); }
.card.msq-product-card .table tbody tr:hover > * { background-color: var(--mep-bg-tertiary); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--mep-bg-secondary); }

/* Compare-group best-price row: subtle green left accent + badge instead of full-row wash. */
.card.msq-product-card .table > tbody > tr.table-success > * { background-color: var(--mep-success-light); }
.msq-best-price-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  background: var(--mep-success-light); color: var(--mep-success);
  font-size: var(--mep-fs-xs); font-weight: 700;
  padding: .2em .55em; border-radius: var(--mep-radius-full);
}
/* Digits line up in a column instead of each row's width drifting with its own glyphs — pair with
   Bootstrap's text-end (not a hardcoded text-align: right, so it still reads correctly under RTL)
   on any column of money/counts. */
.msq-tabular-nums { font-variant-numeric: tabular-nums; }

/* ── Pagination ───────────────────────────────────────────── */
.pagination .page-link {
  border-radius: var(--mep-radius); margin: 0 .15rem; font-size: var(--mep-fs-md);
  border: 1px solid var(--mep-border); color: var(--mep-text-secondary); transition: color var(--mep-transition), background-color var(--mep-transition), border-color var(--mep-transition), box-shadow var(--mep-transition), transform var(--mep-transition), opacity var(--mep-transition);
}
.pagination .page-item.active .page-link { background: var(--mep-primary); border-color: var(--mep-primary); color: var(--mep-text-inverse); }
.pagination .page-link:hover:not(.active) { background: var(--mep-bg-tertiary); color: var(--mep-text); }
/* A long list of pages wraps instead of running off the side (pagination.js also shortens it); the "…" is not a link. */
.pagination { flex-wrap: wrap; row-gap: .35rem; }
.pagination .msq-page-gap .page-link { background: transparent; border-color: transparent; pointer-events: none; }
@media (max-width: 575.98px) {
  .pagination .page-link { min-width: 2.5rem; padding-inline: .5rem; text-align: center; margin: 0 .1rem; }
}

/* ── Forms ────────────────────────────────────────────────── */
.form-control, .form-select {
  border-radius: var(--mep-radius); border-color: var(--mep-border);
  font-size: var(--mep-fs-base); transition: border-color var(--mep-transition), box-shadow var(--mep-transition);
}
.form-control:focus, .form-select:focus {
  border-color: var(--mep-primary);
  box-shadow: 0 0 0 3px rgba(var(--mep-primary-rgb),.12);
}
.form-label { font-weight: 500; font-size: var(--mep-fs-md); margin-bottom: .3rem; color: var(--mep-text); }

/* ── Tabs ─────────────────────────────────────────────────── */
.nav-tabs .nav-link {
  border: none; border-bottom: 2px solid transparent;
  color: var(--mep-text-secondary); font-weight: 500;
  padding: .65rem 1.15rem; transition: color var(--mep-transition), background-color var(--mep-transition), border-color var(--mep-transition), box-shadow var(--mep-transition), transform var(--mep-transition), opacity var(--mep-transition);
  border-radius: var(--mep-radius) var(--mep-radius) 0 0;
}
.nav-tabs .nav-link:hover { color: var(--mep-text); background: var(--mep-bg-tertiary); }
.nav-tabs .nav-link.active { color: var(--mep-primary); border-bottom-color: var(--mep-primary); background: transparent; }
.tab-content {
  border: 1px solid var(--mep-border-light) !important;
  border-top: none !important;
  border-radius: 0 0 var(--mep-radius-lg) var(--mep-radius-lg);
  padding: 1.5rem !important;
}

/* ── Alerts ───────────────────────────────────────────────── */
.alert { border-radius: var(--mep-radius); border-width: 1px; font-size: var(--mep-fs-base); }

/* ── Image Zoom Modal ─────────────────────────────────────── */
.msq-zoom-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.85);
  z-index: 2000; display: none; align-items: center;
  justify-content: center; cursor: zoom-out;
}
.msq-zoom-overlay.show { display: flex; }
.msq-zoom-overlay img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: var(--mep-radius); }

/* ── Sticky CTA (Mobile) ──────────────────────────────────── */
.msq-sticky-cta {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--mep-surface); border-top: 1px solid var(--mep-border);
  padding: .75rem 1rem; z-index: 1020;
  box-shadow: 0 -2px 8px rgba(0,0,0,.1); display: none;
}
@media (max-width: 767.98px) {
  .msq-sticky-cta { display: block; }
  body { padding-bottom: 80px; }
}

/* ── Status Indicator Dot ─────────────────────────────────── */
.msq-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block; margin-right: .35rem;
}
.msq-status-dot.online { background: var(--mep-success); }
.msq-status-dot.pending { background: var(--mep-warning); }
.msq-status-dot.offline { background: var(--mep-text-muted); }

/* ── Page Header ──────────────────────────────────────────── */
/* Same primary→accent gradient rule already used on the public navbar and portal topbar — this is
   the one page-chrome element that hadn't picked it up, despite being the single most-repeated
   piece of UI in the whole portal (every Admin/Supplier/Marketplace list, detail, and edit page,
   including the Dashboard itself, opens with one). Left on a flat neutral border, it read as the
   one remaining "generic admin template" surface in an otherwise re-themed portal. */
.msq-page-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem;
  padding-bottom: 1rem; border-bottom: 3px solid var(--mep-accent);
  border-image: linear-gradient(90deg, var(--mep-primary), var(--mep-accent)) 1;
}
.msq-page-header h1 { font-size: var(--mep-fs-4xl); font-weight: 700; margin: 0; }

/* ── Section Headers ──────────────────────────────────────── */
.msq-section-title {
  font-size: var(--mep-fs-xl); font-weight: 700; margin-bottom: 1rem;
  padding-bottom: .5rem; border-bottom: 2px solid var(--mep-border-light);
}

/* ── Drawer / Side Panel ──────────────────────────────────── */
.msq-drawer-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.4);
  z-index: 1040; opacity: 0; visibility: hidden;
  transition: opacity var(--mep-transition), visibility var(--mep-transition);
}
.msq-drawer-backdrop.show { opacity: 1; visibility: visible; }
.msq-drawer {
  position: fixed; top: 0; right: 0; width: 520px; max-width: 90vw;
  height: 100vh; background: var(--mep-surface);
  border-left: 1px solid var(--mep-border); z-index: 1050;
  transform: translateX(100%); visibility: hidden; /* closed: out of the Tab order and the accessibility tree, not just off screen */
  transition: transform .25s ease, visibility 0s linear .25s;
  overflow-y: auto; box-shadow: var(--mep-shadow-lg);
}
.msq-drawer.show { transform: translateX(0); visibility: visible; transition: transform .25s ease, visibility 0s; }
.msq-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--mep-border);
  position: sticky; top: 0; background: var(--mep-surface); z-index: 1;
}
.msq-drawer-body { padding: 1.25rem; }
.msq-drawer-footer {
  padding: 1rem 1.25rem; border-top: 1px solid var(--mep-border);
  position: sticky; bottom: 0; background: var(--mep-surface);
}

/* ── Homepage Hero ────────────────────────────────────────── */
.msq-hero {
  /* Was a hardcoded navy mid-stop (#15436A) regardless of the chosen --mep-scheme, so every
     scheme's hero looked the same blue no matter which of the 5 (now 6) palettes was active —
     only the buttons below it actually changed color. Now genuinely scheme-reactive: a
     primary -> primary-hover -> primary sweep, still dark enough in every scheme for the white
     hero text (all --mep-primary values are the same low-luminance class per the schemes block's
     own WCAG-AA note above). */
  background: linear-gradient(135deg, var(--mep-primary) 0%, var(--mep-primary-hover) 50%, var(--mep-primary) 100%);
  /* Always #fff, not --mep-text-inverse: this gradient stays dark in both themes (it doesn't
     flip brightness the way --mep-primary itself does), so the text must stay light too. */
  color: #fff;
  padding: 4rem 0 3.5rem;
  position: relative;
  overflow: hidden;
  /* The hero is as tall as its content (title, search, buttons) plus the padding around it, not a
     full first screen: the old 100svh height left a large empty band of photo under the buttons,
     which pushed the real content of the page below the fold. */
  display: flex;
  flex-direction: column;
  /* Extra top room so the centered content clears the transparent overlay navbar (see the
     body.msq-homepage-hero header rules below) instead of sitting directly under the brand/menu. */
  padding-top: 5.5rem;
  /* True full-bleed: <section class="msq-hero"> is rendered via the "FullBleedHero" Razor section
     in _Layout.cshtml, as a sibling of .msq-main-content rather than nested inside it — so it
     naturally spans the real body width with no max-width/padding to fight and no viewport-unit
     math needed (a 100vw + negative-margin breakout was tried first, but 100vw includes the
     vertical scrollbar's own width, which left a several-px gap on one edge on any page with a
     scrollbar — confirmed live via scrollWidth/clientWidth, not just visually). */
}
[data-theme="dark"] .msq-hero {
  /* Dark mode's --mep-primary flips to a LIGHT tone (for button/text use), so the hero can't
     reuse it directly for a dark backdrop the way light mode does — --mep-primary-light is the
     one scheme-tinted token that's still genuinely dark in dark mode (e.g. Graphite's #2C3034,
     Navy's #0F2A3D), swept against the shared neutral --mep-bg for depth. */
  background: linear-gradient(135deg, var(--mep-primary-light) 0%, var(--mep-bg) 50%, var(--mep-primary-light) 100%);
}
.msq-hero-main.container {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
}
/* Bootstrap's .row has no width of its own — as a normal block child it simply fills its parent,
   but making the parent `display: flex` (above, to vertically center short hero text inside the
   tall full-bleed section) turns .row into a flex item instead, and a flex item's default
   `flex: 0 1 auto` sizing shrinks it to its own content width rather than stretching to fill the
   main axis. .row's "content width" is then whatever its %-based columns resolve to in an
   intrinsic-sizing pass — which is language-dependent (Arabic text produced a visibly narrower
   .row than English text at the same viewport, confirmed live: 652px vs 1004px at 1600px wide) —
   so col-lg-7, and everything inside it including .msq-hero-search, ended up narrower than its own
   max-width could actually reach, on every screen size and in both languages. */
.msq-hero-main.container > .row {
  width: 100%;
}

/* Large outline-only echo of the header's own brand mark (the logo mark, _BrandLogo.cshtml) —
   an ambient watermark tying the full-bleed hero back to the same gear+hub identity, instead of
   the hero being just a stock photo with no visual link to the brand. Bottom-right, clear of the
   category strip below it: the strip's own height plus the hero's 3.5rem bottom padding measured
   ~140px live, so `bottom: 150px` here keeps the shape's box entirely above that band regardless of
   viewport height (the strip's height is content-driven, not viewport-driven, so this clearance
   stays valid whether the hero is short or tall) — an earlier attempt anchored flush to the hero's
   own bottom edge and visibly crossed the strip's icons instead. Horizontally safe from the text
   column (col-lg-7, ~58% width) simply by being right-anchored. .08 opacity (the very first value
   tried) turned out to be all but invisible against a busy photo — confirmed live by comparing a
   screenshot at .08 against one with opacity forced to 1 — so it's raised to .22, still translucent
   enough to read as background texture rather than a shape competing with the photo, but now
   actually visible instead of defeating the point of a watermark meant to be seen.
   `bottom: 150px` alone still clipped into the strip at some points in the rotation — a square
   rotating around its own center sweeps a bounding box as large as its diagonal (320px * sqrt(2) ≈
   452px) at 45°/135°/etc, ~66px taller/wider than the static 320px box on each side, not just at
   the corners. Confirmed live by sampling the box mid-animation. The extra clearance below accounts
   for that full rotation envelope, not just the shape's own resting size.
   `right: -70px` (physical) was wrong once the .row width fix above let col-lg-7 reach its real
   width: col-lg-7 sits on the row's START side, which is the LEFT in LTR but the RIGHT in RTL — so
   a hardcoded `right` anchor sits beside the text in English but directly on TOP of it in Arabic
   once the column is wide enough (confirmed live: the subtitle, search box and CTA row all
   overlapped the watermark's box in Arabic at 1600px wide). `inset-inline-end` resolves to `right`
   under LTR and `left` under RTL, so it always lands on whichever side is actually empty. */
.msq-hero-watermark {
  position: absolute;
  bottom: 40px;
  inset-inline-end: -70px;
  width: 320px;
  height: auto;
  opacity: .10;
  pointer-events: none;
}
/* Below lg (992px) the hero's two-column row collapses to one full-width column (col-lg-7's
   sibling is d-none below lg, and col-lg-7 itself is just a full-width block until lg), so ANY
   corner placement narrow enough to fit ends up crossing the eyebrow/title text instead of sitting
   beside it — confirmed live at both 375px (overlapped .msq-hero-eyebrow) and 850px, a tablet
   width still well below the 992px column breakpoint (overlapped both the eyebrow AND the title).
   The cutoff has to match that same 991.98px breakpoint, not an earlier one, or the tablet range
   in between still hits the bug. Rather than chase a cramped spot that still clashes at some
   rotation angle, it's simplest to drop the ambient watermark wherever a safe empty zone stops
   existing; the header/footer brand mark still carries the same identity on every screen size. */
@media (max-width: 991.98px) {
  .msq-hero-watermark { display: none; }
}

/* Admin-uploaded full-bleed hero photo (opt-in — set via Admin > Homepage Hero Content). The
   gradient above stays as the fallback when no photo is configured. A dark scrim keeps the
   overlaid white title/search readable over any photo without needing per-image tuning. */
.msq-hero.msq-hero-has-image {
  /* Tinted with the active scheme's own primary color (not a flat black filter) so an uploaded
     photo reads as "this brand's hero", not a generic dark overlay stamped on any photo. */
  background-image:
    linear-gradient(to bottom, rgba(var(--mep-primary-rgb),.7) 0%, rgba(4,10,18,.4) 45%, rgba(4,10,18,.8) 100%),
    var(--msq-hero-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
[data-theme="dark"] .msq-hero.msq-hero-has-image { background-image:
    linear-gradient(to bottom, rgba(var(--mep-primary-rgb),.7) 0%, rgba(4,10,18,.4) 45%, rgba(4,10,18,.8) 100%),
    var(--msq-hero-bg-image);
}
/* Phones: the optional portrait photo (falls back to the main one when none was uploaded). Same scrim as above. */
@media (max-width: 767.98px) {
  .msq-hero.msq-hero-has-image,
  [data-theme="dark"] .msq-hero.msq-hero-has-image {
    background-image:
      linear-gradient(to bottom, rgba(var(--mep-primary-rgb),.7) 0%, rgba(4,10,18,.4) 45%, rgba(4,10,18,.8) 100%),
      var(--msq-hero-bg-image-mobile, var(--msq-hero-bg-image));
  }
}
.msq-hero.msq-hero-has-image::before { display: none; }
.msq-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: .5;
}
[data-theme="dark"] .msq-hero::before { opacity: .8; }
[data-theme="dark"] .msq-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 15% 20%, rgba(var(--mep-primary-rgb),.35), transparent 55%),
              radial-gradient(circle at 85% 75%, rgba(var(--mep-accent-rgb),.15), transparent 50%);
}
.msq-hero .container { position: relative; z-index: 1; }
.msq-hero-eyebrow {
  font-size: var(--mep-fs-sm);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .85;
  margin-bottom: .75rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.msq-hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--mep-accent);
}
.msq-hero h1 { font-size: var(--mep-fs-7xl); font-weight: 800; letter-spacing: -.5px; margin-bottom: .75rem; overflow-wrap: break-word; }
.msq-hero p { font-size: var(--mep-fs-xl); opacity: .9; max-width: 600px; margin-bottom: 2rem; overflow-wrap: break-word; }

.msq-hero-search {
  background: var(--mep-surface);
  border: 1px solid transparent;
  border-radius: var(--mep-radius-lg);
  padding: .5rem;
  display: flex;
  gap: .5rem;
  box-shadow: var(--mep-shadow-lg);
  width: 100%;
  max-width: 640px;
  transition: border-color var(--mep-transition), box-shadow var(--mep-transition), max-width var(--mep-transition);
}
/* Now that the .row width fix above lets col-lg-7 actually reach its full ~58% share of the
   container (was silently capped far narrower — see the .msq-hero-main.container > .row comment),
   there's real room to grow this beyond the original flat 640px on wider screens instead of
   leaving 150-200px of the column empty next to it. */
@media (min-width: 1200px) {
  .msq-hero-search { max-width: 720px; }
}
@media (min-width: 1400px) {
  .msq-hero-search { max-width: 800px; }
}
[data-theme="dark"] .msq-hero-search {
  background: rgba(232,237,242,.1);
  border-color: rgba(232,237,242,.18);
  backdrop-filter: blur(10px);
}
/* Same site-wide focus glow as every other .form-control (site.css:1533), applied to the whole
   pill via :focus-within instead of each child's own hard-edged outline — the category select and
   the text input previously each drew their own disconnected rectangle. */
.msq-hero-search:focus-within {
  border-color: var(--mep-primary);
  box-shadow: var(--mep-shadow-lg), 0 0 0 3px rgba(var(--mep-primary-rgb), .18);
}
.msq-hero-search .form-select {
  border: none;
  background: var(--mep-bg-tertiary);
  font-weight: 500;
  min-width: 140px;
  color: var(--mep-text);
}
[data-theme="dark"] .msq-hero-search .form-select { background: rgba(15,23,32,.6); color: var(--mep-text); }
.msq-hero-search .form-control {
  border: none;
  background: transparent;
  color: var(--mep-text);
}
[data-theme="dark"] .msq-hero-search .form-control { color: var(--mep-text); }
[data-theme="dark"] .msq-hero-search .form-control::placeholder { color: rgba(232,237,242,.55); }
.msq-hero-search .form-control:focus,
.msq-hero-search .form-select:focus { box-shadow: none; outline: none; }
.msq-hero-search .btn { padding: .6rem 1.5rem; }

.msq-hero-ctas { display: flex; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; align-items: center; }
/* The third, quietest action next to the two buttons ("Become a Supplier") - a text link, so the hero has one main call to action. */
.msq-hero-link { color: #fff; opacity: .85; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; padding: .4rem .25rem; }
.msq-hero-link:hover { color: #fff; opacity: 1; }

/* ── Hero Industrial Motif ────────────────────────────────── */
.msq-hero-visual { position: relative; width: 300px; height: 300px; }
.msq-hero-orbit {
  position: absolute;
  inset: -8px;
  border: 2px dashed rgba(255,255,255,.14);
  border-radius: 50%;
  animation: msq-spin-cw 40s linear infinite;
}
.msq-gear {
  position: absolute;
  display: flex;
  line-height: 1;
  color: rgba(255,255,255,.16);
  will-change: transform;
}
.msq-gear-lg { font-size: 200px; top: -6px; left: -6px; animation: msq-spin-cw 26s linear infinite; }
.msq-gear-md {
  font-size: 118px;
  bottom: -4px;
  right: 4px;
  color: rgba(255,255,255,.24);
  animation: msq-spin-ccw 17s linear infinite;
}
.msq-gear-sm {
  font-size: 56px;
  top: 6px;
  right: -6px;
  color: rgba(var(--mep-accent-rgb),.6);
  animation: msq-spin-cw 11s linear infinite;
}
.msq-hero-bolt {
  position: absolute;
  bottom: 22px;
  left: 18px;
  font-size: 34px;
  color: rgba(var(--mep-accent-rgb),.75);
  animation: msq-float 3.4s ease-in-out infinite;
}
@keyframes msq-spin-cw { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes msq-spin-ccw { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes msq-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ── Scroll Reveal (see wwwroot/js/home-animations.js) — only .msq-reveal-armed carries the
   hidden pre-reveal state, added by JS right before observing, so content already renders
   fully visible if the script never runs (no-JS / unsupported browser). ─────────────────── */
.msq-reveal-armed { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.msq-reveal-armed.msq-in-view { opacity: 1; transform: translateY(0); }

/* ── Auth Pages (Login/Register) — reuses .msq-hero's gradient + the homepage gear motif so
   the first-impression pages share the same visual identity ─────────────────────────────── */
.msq-auth-shell { border-radius: var(--mep-radius-lg); overflow: hidden; box-shadow: var(--mep-shadow-lg); }
.msq-auth-visual { padding: 3rem 2rem; }
.msq-auth-visual .msq-hero-visual { transform: scale(.7); }
.msq-auth-tagline { color: #5BD5D5; font-size: 1.15rem; font-weight: 500; margin-bottom: 1rem; }
.msq-auth-rule { width: 100%; max-width: 340px; margin: 0 auto 1.5rem; border-color: rgba(255,255,255,.35); opacity: 1; }
.msq-auth-copy { max-width: 340px; margin: 0 auto 1rem; opacity: .85; line-height: 1.6; }
.msq-auth-form-panel { background: var(--mep-surface); }

/* Sign-up and verification are used by people who are not comfortable with web forms: bigger fields, bigger touch
   targets, more air between them. */
.msq-auth-form-panel .form-control,
.msq-auth-form-panel .form-select { min-height: 3rem; font-size: 1.05rem; }
.msq-auth-form-panel .form-label { font-weight: 600; margin-bottom: .35rem; }
.msq-auth-form-panel .btn { min-height: 3rem; font-size: 1.05rem; }
.msq-auth-form-panel .form-check-input { width: 1.25rem; height: 1.25rem; }

/* Account-type picker: three big cards instead of a dropdown. */
.msq-type-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
@media (max-width: 767.98px) { .msq-type-cards { grid-template-columns: 1fr; } }
.msq-type-card { display: block; cursor: pointer; margin: 0; }
.msq-type-card input { position: absolute; opacity: 0; pointer-events: none; }
.msq-type-card-body {
  display: flex; gap: .75rem; align-items: flex-start; height: 100%;
  padding: .9rem 1rem; border: 2px solid var(--mep-border); border-radius: var(--mep-radius-lg);
  background: var(--mep-surface); transition: border-color .15s ease, box-shadow .15s ease;
}
.msq-type-card-body > i { font-size: 1.6rem; color: var(--mep-primary, #1b4f8a); }
.msq-type-card:hover .msq-type-card-body { border-color: var(--mep-primary, #1b4f8a); }
.msq-type-card input:checked + .msq-type-card-body { border-color: var(--mep-primary, #1b4f8a); box-shadow: 0 0 0 3px rgba(27, 79, 138, .18); }
.msq-type-card input:focus-visible + .msq-type-card-body { outline: 3px solid var(--mep-primary, #1b4f8a); outline-offset: 2px; }

/* Photo / scan picker used by the document uploads (js/doc-upload.js). */
.msq-doc-status { font-size: .9rem; margin-top: .35rem; }

/* ── Trust Bar ────────────────────────────────────────────── */
.msq-trust-bar {
  background: var(--mep-surface);
  border: 1px solid var(--mep-border);
  border-radius: var(--mep-radius-lg);
  padding: 1.5rem;
  margin-top: -1.75rem;
  position: relative;
  z-index: 2;
  box-shadow: var(--mep-shadow-md);
}
/* Banner ad above the bar: no pull-up, or the bar covers the bottom of the ad. */
.msq-trust-bar.msq-trust-bar-flat { margin-top: 0; }
.msq-trust-stat {
  text-align: center;
  padding: .5rem;
  transition: transform .2s ease;
}
.msq-trust-stat:hover { transform: translateY(-3px); }
.msq-trust-icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--mep-primary-light);
  color: var(--mep-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  margin: 0 auto .6rem;
  transition: transform .2s ease;
}
.msq-trust-stat:hover .msq-trust-icon-circle { transform: scale(1.1); }
.msq-trust-stat .msq-trust-value {
  font-size: var(--mep-fs-5xl);
  font-weight: 800;
  color: var(--mep-primary);
  line-height: 1.2;
}
.msq-trust-stat .msq-trust-label {
  font-size: var(--mep-fs-sm);
  color: var(--mep-text-secondary);
  font-weight: 500;
}
@media (min-width: 768px) {
  .msq-trust-stat-divider { border-inline-start: 1px solid var(--mep-border); }
}

/* ── How It Works ─────────────────────────────────────────── */
.msq-how-step {
  text-align: center;
  padding: 1.5rem;
}
.msq-how-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--mep-primary-light);
  color: var(--mep-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--mep-fs-5xl);
  margin: 0 auto 1rem;
  position: relative;
  z-index: 1;
}
.msq-how-step h3 { font-weight: 700; margin-bottom: .35rem; }
.msq-how-step p { font-size: var(--mep-fs-md); color: var(--mep-text-secondary); }

/* Connects the 3 step icons with a single line reading as one left-to-right process rather than
   3 disconnected cards — desktop only (matches the 3-column row layout, meaningless once the
   columns stack). The icon's own opaque background sits above this via z-index, so the line
   visually passes "through" each circle rather than overlapping its icon glyph. */
.msq-how-steps { position: relative; }
.msq-how-steps::before {
  content: '';
  position: absolute;
  top: 60px;
  left: 16.6667%;
  right: 16.6667%;
  height: 2px;
  background: var(--mep-border);
}
@media (max-width: 767.98px) {
  .msq-how-steps::before { display: none; }
}

/* ── Homepage Banner Ad (single or carousel) ─────────────────────────────────────────────
   A frame + shadow + hover-lift so the ad reads as a deliberate, polished card rather than a
   bare stretched image — matching the treatment every other homepage section (trust bar,
   product cards) already gets. */
.msq-home-banner-card {
  border-radius: var(--mep-radius-lg);
  overflow: hidden;
  border: 1px solid var(--mep-border);
  box-shadow: var(--mep-shadow-md);
  position: relative;
}
/* Small disclosure label so a paid placement never reads as organic editorial content — sits
   above both the single-image and carousel markup alike since both share this same card class. */
.msq-ad-badge {
  position: absolute;
  top: .6rem;
  inset-inline-end: .6rem;
  z-index: 3;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: var(--mep-fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: .25rem .65rem;
  border-radius: var(--mep-radius-full);
  backdrop-filter: blur(4px);
  pointer-events: none;
}
/* A fixed 180px cap looks fine on a narrow mobile container, but on a large-screen container
   (up to ~1140px+) it turns the banner into an extremely wide, thin strip — scale the cap up at
   wider breakpoints so the image keeps a reasonable aspect ratio instead of being over-cropped
   by object-fit:cover. */
.msq-home-banner-img { max-height: 180px; object-fit: cover; }
/* A phone version of the ad was uploaded: show it whole at its own proportions instead of cropping it to the wide strip's cap. */
@media (max-width: 767.98px) {
  .msq-home-banner-img-has-phone { max-height: none; object-fit: contain; }
}
/* Pause / play for the auto-advancing banner carousel (bottom corner, away from the Sponsored badge and the arrows). */
.msq-carousel-toggle {
  position: absolute;
  bottom: .6rem;
  inset-inline-start: .6rem;
  z-index: 4;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--mep-radius-full);
  background: rgba(0,0,0,.55);
  color: #fff;
  backdrop-filter: blur(4px);
  cursor: pointer;
}
.msq-carousel-toggle:hover { background: rgba(0,0,0,.75); }
.msq-carousel-toggle[hidden] { display: none; }
@media (pointer: coarse) { .msq-carousel-toggle { width: 2.75rem; height: 2.75rem; } }
@media (min-width: 768px) { .msq-home-banner-img { max-height: 260px; } }
/* Past 1200px there's enough room to show the whole ad artwork within a fixed 300px band instead
   of cropping it to fill — object-fit:contain scales the image down to fit, with a neutral fill
   behind any letterboxing (an ad's own design rarely matches the section's exact aspect ratio). */
@media (min-width: 1200px) {
  .msq-home-banner-img { height: 300px; max-height: none; object-fit: contain; background: var(--mep-bg-tertiary); }
}

/* ── Homepage Showcase Panels (Category / Featured Products / Top Suppliers) ─────────────
   Shared "elevated card" treatment + a two-tone diagonal-stripe SVG corner accent, using the
   active color scheme's own --mep-primary/--mep-accent pair (see #msqDiagonalStripes, defined
   once in Home/Index.cshtml and referenced via url(#msqDiagonalStripes) from each section) so
   the accent always matches the current theme instead of a hardcoded color. Gives these 3 grid
   sections the same visual weight as the Brands/Trust-bar/Newsletter panels below/above them. */
.msq-stripe-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.msq-showcase-panel {
  position: relative;
  overflow: hidden;
  background: var(--mep-surface);
  border: 1px solid var(--mep-border);
  border-radius: var(--mep-radius-lg);
  padding: 2rem;
  box-shadow: var(--mep-shadow-md);
}
.msq-showcase-stripe-corner {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  width: 130px;
  height: 130px;
  opacity: .1;
  pointer-events: none;
}
.msq-showcase-stripe-corner-bottom {
  top: auto;
  bottom: 0;
  inset-inline-end: auto;
  inset-inline-start: 0;
}
/* inset-inline-end/-start correctly move the corner itself to the opposite physical side under
   RTL, but the triangle drawn INSIDE the SVG is a fixed set of coordinates that still leans
   toward its original (LTR) corner — without this, the stripe ends up floating away from the
   panel's true corner instead of hugging it. Mirroring the whole SVG re-orients the triangle to
   hug whichever physical corner it's now sitting in. Covers both the top and -bottom variant,
   since every usage in Home/Index.cshtml applies this base class either way. */
[dir="rtl"] .msq-showcase-stripe-corner {
  transform: scaleX(-1);
}
.msq-showcase-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.msq-showcase-title { font-size: var(--mep-fs-4xl); font-weight: 800; margin-bottom: 0; }
.msq-showcase-body { position: relative; z-index: 1; }

/* "View All" links nudge their arrow forward on hover — a small, cheap motion cue that a click
   goes somewhere. margin-inline-start (not a transform) so it nudges the correct direction under
   RTL automatically instead of needing a mirrored rule. */
.msq-showcase-header .btn .bi-arrow-right,
.msq-brands-header .btn .bi-arrow-right {
  display: inline-block;
  transition: margin-inline-start .2s ease;
}
.msq-showcase-header .btn:hover .bi-arrow-right,
.msq-brands-header .btn:hover .bi-arrow-right {
  margin-inline-start: .35rem;
}
/* The glyph itself is a fixed rightward arrow — margin-inline-start above already nudges it the
   correct physical direction on hover under RTL, but the icon still visually points right at rest,
   the wrong way for a "continue reading this direction" cue in RTL. Mirrors it, same technique as
   .msq-showcase-stripe-corner above. */
[dir="rtl"] .msq-showcase-header .btn .bi-arrow-right,
[dir="rtl"] .msq-brands-header .btn .bi-arrow-right {
  transform: scaleX(-1);
}
@media (max-width: 767.98px) {
  .msq-showcase-panel { padding: 1.25rem; }
  .msq-showcase-title { font-size: var(--mep-fs-2xl); }
  .msq-showcase-stripe-corner { width: 90px; height: 90px; }
}

/* ── Homepage "Shop by Brand" ─────────────────────────────────────────────────────────────
   Split layout: a decorative orbiting-icon panel on one side, the real brand-logo grid on the
   other, over a faint animated canvas network (see wwwroot/js/home-brands-canvas.js) plus the
   same gear watermark motif used in the hero, for a consistent "industrial network" identity. */
.msq-brands-section {
  position: relative;
  overflow: hidden;
  background: var(--mep-surface);
  border: 1px solid var(--mep-border);
  border-radius: var(--mep-radius-lg);
  padding: 2.5rem 2rem;
  box-shadow: var(--mep-shadow-md);
}
/* Shared by every showcase panel's <canvas class="msq-network-canvas"> — see
   wwwroot/js/home-network-canvas.js, which drives one independent animation per canvas found. */
.msq-network-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.msq-brands-decor {
  position: absolute;
  top: -50px;
  inset-inline-end: -50px;
  width: 220px;
  height: auto;
  opacity: .07;
  pointer-events: none;
}
.msq-brands-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.msq-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--mep-fs-sm);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mep-primary);
  margin-bottom: .5rem;
}
.msq-brands-title { font-size: var(--mep-fs-4xl); font-weight: 800; margin-bottom: .35rem; }
.msq-brands-subtitle { color: var(--mep-text-secondary); max-width: 520px; margin-bottom: 0; }

.msq-brands-body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (max-width: 767.98px) {
  .msq-brands-body { grid-template-columns: 1fr; }
}

/* Decorative left panel: a central "trusted brand" badge with 3 orbiting spec icons — same
   orbit/float mechanics as .msq-hero-visual's gears, themed for brands instead of machinery. */
.msq-brands-visual { position: relative; width: 100%; max-width: 200px; aspect-ratio: 1; margin: 0 auto; }
@media (max-width: 767.98px) {
  .msq-brands-visual { max-width: 140px; margin-bottom: .5rem; }
}
.msq-brands-orbit {
  position: absolute;
  inset: 0;
  border: 2px dashed var(--mep-border);
  border-radius: 50%;
  animation: msq-spin-cw 50s linear infinite;
}
.msq-brands-visual-core {
  position: absolute;
  inset: 24%;
  border-radius: 50%;
  background: var(--mep-primary-light);
  color: var(--mep-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.25rem;
  box-shadow: var(--mep-shadow);
}
.msq-brands-tag {
  position: absolute;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--mep-surface);
  border: 1px solid var(--mep-border);
  color: var(--mep-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: var(--mep-shadow-sm);
  animation: msq-float 4s ease-in-out infinite;
}
.msq-brands-tag:nth-child(2) { top: -4px; left: 50%; transform: translateX(-50%); animation-delay: 0s; }
.msq-brands-tag:nth-child(3) { bottom: 4%; right: -6px; animation-delay: .8s; }
.msq-brands-tag:nth-child(4) { bottom: 4%; left: -6px; animation-delay: 1.6s; }

/* Right panel: the actual brand grid */
.msq-brands-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 1rem;
}
/* One tile per row below md, matching the Category/Featured Products/Top Suppliers grids above,
   which all switch from their desktop column counts to full-width at the same breakpoint. */
@media (max-width: 767.98px) {
  .msq-brands-grid { grid-template-columns: 1fr; }
}
.msq-brand-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  padding: 1.25rem 1rem;
  border: 1px solid var(--mep-border);
  border-radius: var(--mep-radius-lg);
  background: var(--mep-surface);
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.msq-brand-tile:hover {
  transform: translateY(var(--mep-hover-lift-y));
  box-shadow: var(--mep-shadow-md);
  border-color: var(--mep-primary);
  text-decoration: none;
  color: inherit;
}
.msq-brand-tile img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: grayscale(1) opacity(.75);
  transition: transform .2s ease, filter .25s ease;
}
.msq-brand-tile:hover img { transform: scale(1.08); filter: grayscale(0) opacity(1); }
.msq-brand-tile-name {
  font-size: var(--mep-fs-sm);
  font-weight: 600;
  text-align: center;
  color: var(--mep-text);
}
.msq-brand-tile-count {
  font-size: var(--mep-fs-xs);
  color: var(--mep-text-secondary);
  margin-top: -.2rem;
}
.msq-brand-tile-badge {
  position: absolute;
  top: .5rem;
  inset-inline-end: .5rem;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--mep-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .6rem;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .2s ease, transform .2s ease;
}
.msq-brand-tile:hover .msq-brand-tile-badge { opacity: 1; transform: scale(1); }

/* ── Value Props Section ──────────────────────────────────── */
.msq-value-props {
  position: relative;
  overflow: hidden;
  background: var(--mep-bg-secondary);
  border-radius: var(--mep-radius-xl);
  padding: 3rem;
  border: 1px solid var(--mep-border);
}
/* Excludes the stripe-corner SVG: it needs position:absolute (set on .msq-showcase-stripe-corner
   itself) to sit pinned in the box's corner — this blanket rule was overriding that back to
   relative for any direct child, same specificity + later in the cascade, which collapsed both
   the "For Contractors" and "For Suppliers" stripes to the same wrong spot regardless of which
   corner variant each one used. */
.msq-value-props > *:not(.msq-showcase-stripe-corner) { position: relative; z-index: 1; }
.msq-value-props h2 { font-weight: 700; margin-bottom: .5rem; }
.msq-value-props .lead { color: var(--mep-text-secondary); }
.msq-value-props ul { list-style: none; padding: 0; }
.msq-value-props li {
  padding: .5rem 0;
  font-size: var(--mep-fs-base);
  color: var(--mep-text-secondary);
}
.msq-value-props li::before {
  content: '\2713';
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mep-success-light);
  color: var(--mep-success);
  font-size: var(--mep-fs-xs);
  font-weight: 700;
  text-align: center;
  line-height: 22px;
  margin-inline-end: .5rem;
}

/* ── Newsletter ───────────────────────────────────────────── */
.msq-newsletter {
  /* Same fix as .msq-hero above: was hardcoded to a fixed navy regardless of --mep-scheme. */
  background: linear-gradient(135deg, var(--mep-primary), var(--mep-primary-hover));
  border-radius: var(--mep-radius-xl);
  padding: 3rem;
  position: relative;
  overflow: hidden;
  /* Always #fff, not --mep-text-inverse — same reasoning as .msq-hero above. */
  color: #fff;
}
[data-theme="dark"] .msq-newsletter {
  background: linear-gradient(135deg, var(--mep-primary-light), var(--mep-bg));
}
[data-theme="dark"] .msq-newsletter::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 10%, rgba(var(--mep-accent-rgb),.18), transparent 55%),
              radial-gradient(circle at 5% 95%, rgba(var(--mep-primary-rgb),.3), transparent 50%);
}
.msq-newsletter-icon {
  position: absolute;
  top: -1.25rem;
  inset-inline-end: -1rem;
  font-size: 10rem;
  opacity: .08;
  transform: rotate(-12deg);
  pointer-events: none;
}
.msq-newsletter > .row { position: relative; z-index: 1; }
.msq-newsletter h2 { font-weight: 700; margin-bottom: .5rem; }
.msq-newsletter p { opacity: .85; margin-bottom: 1.25rem; }
.msq-newsletter .form-control {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
}
.msq-newsletter .form-control::placeholder { color: rgba(255,255,255,.6); }
.msq-newsletter .form-control:focus {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.4);
  box-shadow: 0 0 0 3px rgba(255,255,255,.1);
  color: #fff;
}

/* ── Style Guide Page ─────────────────────────────────────── */
.msq-scheme-dot {
  display: inline-block;
  width: .85rem;
  height: .85rem;
  border-radius: 50%;
  margin-inline-end: .35rem;
  vertical-align: middle;
  border: 1px solid rgba(0,0,0,.15);
}
.msq-scheme-swatch-btn.active {
  background: var(--mep-primary-light);
  border-color: var(--mep-primary);
  color: var(--mep-primary);
  font-weight: 600;
}

/* Profile swatch picker — each button previews its OWN scheme's true colors regardless of the
   page's current data-scheme, so hex values are hardcoded here rather than via --mep-* vars. */
.msq-scheme-swatch {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 2px solid var(--mep-border);
  cursor: pointer;
  position: relative;
}
.msq-scheme-swatch[data-scheme="Brand"] { background: linear-gradient(135deg, #1F3452 50%, #129CC4 50%); }
.msq-scheme-swatch[data-scheme="Navy"] { background: linear-gradient(135deg, #0B3C5D 50%, #AE5D10 50%); }
.msq-scheme-swatch[data-scheme="Slate"] { background: linear-gradient(135deg, #3D4A5C 50%, #0E7C7B 50%); }
.msq-scheme-swatch[data-scheme="Teal"] { background: linear-gradient(135deg, #0D6E6E 50%, #A85A18 50%); }
.msq-scheme-swatch[data-scheme="Burgundy"] { background: linear-gradient(135deg, #7A1F3D 50%, #A85A18 50%); }
.msq-scheme-swatch[data-scheme="Forest"] { background: linear-gradient(135deg, #1E5631 50%, #A8580E 50%); }
.msq-scheme-swatch[data-scheme="Graphite"] { background: linear-gradient(135deg, #33383D 50%, #9C6200 50%); }
.msq-scheme-swatch.active { border-color: var(--mep-primary); box-shadow: 0 0 0 3px rgba(var(--mep-primary-rgb),.25); }
.msq-scheme-swatch.active::after {
  content: '\f26e';
  font-family: 'bootstrap-icons';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-shadow: 0 0 3px rgba(0,0,0,.6);
  font-size: 1rem;
}
.msq-swatch {
  width: 100%;
  height: 64px;
  border-radius: var(--mep-radius);
  display: flex;
  align-items: flex-end;
  padding: .5rem;
  font-size: var(--mep-fs-xs);
  font-family: var(--mep-font-mono);
  color: #fff;
  box-shadow: var(--mep-shadow-sm);
}
.msq-swatch-label {
  font-size: var(--mep-fs-sm);
  font-weight: 500;
  margin-top: .35rem;
  color: var(--mep-text-secondary);
  text-align: center;
}

/* ── Micro-interactions ───────────────────────────────────── */
.fade-in { animation: msq-fadeIn .3s ease; }
@keyframes msq-fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Product-card entrance cascade (see wwwroot/js/site.js) — JS arms each .msq-product-card with
   .msq-fade-armed right before observing (no-JS safe) and sets --msq-fade-delay per card, so a
   whole grid row fades in as one organized wave instead of every card popping at once. */
.msq-product-card.msq-fade-armed { opacity: 0; transform: translateY(8px); }
.msq-product-card.fade-in {
  animation: msq-fadeIn .45s ease backwards;
  animation-delay: var(--msq-fade-delay, 0ms);
  opacity: 1;
  transform: translateY(0);
}
.msq-hover-lift { transition: transform var(--mep-transition), box-shadow var(--mep-transition); }
.msq-hover-lift:hover { transform: translateY(var(--mep-hover-lift-y)); box-shadow: var(--mep-shadow-md); }

/* Dashboard widget full-screen mode (see wwwroot/js/dashboard-widgets.js) */
.msq-widget-fullscreen { background: var(--mep-surface); padding: 2rem; display: flex; flex-direction: column; justify-content: center; }
.msq-widget-fullscreen canvas { max-height: 70vh !important; }

/* ── Notification Bell (see wwwroot/js/notifications.js) ─────────────── */
@keyframes msq-bell-ring {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(14deg); }
  30% { transform: rotate(-10deg); }
  45% { transform: rotate(8deg); }
  60% { transform: rotate(-6deg); }
  75% { transform: rotate(3deg); }
}
.msq-bell-pulse .bi-bell {
  display: inline-block;
  transform-origin: top center;
  animation: msq-bell-ring .6s ease-in-out;
}
.msq-notification-menu {
  padding: 0;
  overflow: hidden;
  width: 340px;
}
.msq-notification-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem .9rem;
  border-bottom: 1px solid var(--mep-border);
  font-weight: 600;
  font-size: var(--mep-fs-base);
}
.msq-notification-list {
  max-height: 360px;
  overflow-y: auto;
}
.msq-notification-item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .6rem .9rem;
  white-space: normal;
}
.msq-notification-item.unread { background: var(--mep-bg-tertiary); }
.msq-notification-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mep-surface-alt);
  color: var(--mep-text-secondary);
  font-size: var(--mep-fs-base);
}
.msq-notification-item.unread .msq-notification-icon { background: var(--mep-primary); color: var(--mep-text-inverse); }
.msq-notification-skeleton-avatar { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; }
.msq-notification-content { flex: 1 1 auto; min-width: 0; }
.msq-notification-title { font-weight: 600; display: flex; align-items: center; gap: .35rem; }
.msq-notification-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mep-danger); flex: 0 0 auto; }
.msq-notification-text {
  display: block;
  font-size: var(--mep-fs-sm);
  color: var(--mep-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msq-notification-time { display: block; font-size: var(--mep-fs-xs); color: var(--mep-text-muted); margin-top: .15rem; }
.msq-notification-footer { border-top: 1px solid var(--mep-border); }

/* ── Chat Bubbles (shared by Chat/Conversation + Admin/Marketplace Complaints Details —
   previously duplicated inline in all three views, two of them with hardcoded #fff/#fff3cd
   colors that broke dark mode; consolidated here on the same --mep-* tokens Chat/Conversation
   was already correctly using). .official and .internal are the same highlighted-bubble
   treatment under two different names (Chat vs. Complaints call it differently). ────────── */
.msq-chat-messages { max-height: 55vh; overflow-y: auto; padding: 1rem; background: var(--mep-bg-tertiary); border-radius: .5rem; }
.msq-chat-bubble { max-width: 70%; padding: .5rem .85rem; border-radius: .9rem; margin-bottom: .5rem; }
.msq-chat-bubble.mine { background: var(--mep-accent); color: var(--mep-text-inverse); margin-inline-start: auto; }
.msq-chat-bubble.theirs { background: var(--mep-surface); border: 1px solid var(--mep-border); }
.msq-chat-bubble.official, .msq-chat-bubble.internal { background: var(--mep-warning-light); border: 1px solid var(--mep-warning); }
.msq-chat-meta { font-size: .72rem; opacity: .75; margin-top: .15rem; }
.msq-sla-bar { display: flex; gap: 1.5rem; flex-wrap: wrap; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* Top padding must still clear the fixed overlay navbar: the hero is no longer a full-height block
     with its content centered, so there is no spare room above the eyebrow line to hide that. */
  .msq-hero { padding: 5rem 0 2rem; }
  .msq-hero h1 { font-size: var(--mep-fs-5xl); }
  .msq-hero p { font-size: 1rem; }
  /* Two rows instead of three stacked ones: the text box and the Search button share the first, the category picker sits under
     them. The picker comes first in the markup, so order moves it to the end. */
  .msq-hero-search { flex-wrap: wrap; }
  .msq-hero-search .form-control { order: 1; flex: 1 1 0; min-width: 0; }
  .msq-hero-search .btn { order: 2; flex: 0 0 auto; padding: .6rem 1rem; }
  .msq-hero-search .form-select { order: 3; flex: 1 1 100%; min-width: 100%; }
  /* The label would otherwise wrap onto two lines at 375px. */
  .msq-hero-eyebrow { letter-spacing: .06em; font-size: var(--mep-fs-xs); }
  .msq-hero-eyebrow::before { display: none; }
  .msq-product-card .card-img-top { height: 160px; }
  .msq-supplier-hero, .msq-brand-hero { padding: 1.25rem; }
  .msq-supplier-hero .msq-hero-name, .msq-brand-hero .msq-hero-name { font-size: var(--mep-fs-2xl); }
  .msq-drawer { width: 100vw; max-width: 100vw; }
  .msq-comparison-table { font-size: var(--mep-fs-sm); }
  .msq-comparison-table th, .msq-comparison-table td { padding: .5rem; }
  .msq-value-props { padding: 2rem 1.5rem; }
  .msq-newsletter { padding: 2rem 1.5rem; }
}
@media (max-width: 575.98px) {
  .msq-page-header { flex-direction: column; align-items: flex-start; }
  .msq-page-header h1 { font-size: var(--mep-fs-2xl); }
  .msq-trust-stat .msq-trust-value { font-size: var(--mep-fs-3xl); }

  /* The portal topbar (.msq-portal-topbar, both its Sidebar- and Navbar-layout variants) has no
     Bootstrap collapse — its account-name + role-badge pair (~250px combined with the
     notification/language/theme icons already in the row) push the row past a 375px viewport,
     forcing the whole page to scroll horizontally. Collapsing to an icon-only avatar toggle here
     keeps the row inside the viewport; the account dropdown menu itself (name/role are absent
     from it too, but every action inside is still reachable) opens exactly the same either way.
     Scoped to .msq-portal-topbar specifically — _AccountDropdown.cshtml is shared with the public
     site's own off-canvas mobile drawer (_Layout.cshtml), which has the full drawer width to work
     with and no such cramping, so an unscoped rule was hiding the name/role badge there too for no
     reason (confirmed live: both were `display: none` even though the drawer had ~240px of empty
     room next to them). */
  .msq-portal-topbar .msq-account-name,
  .msq-portal-topbar .msq-role-badge {
    display: none;
  }
}

/* ── Focus States (Accessibility) ─────────────────────────── */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.nav-link:focus-visible,
.page-link:focus-visible,
.msq-filter-option:focus-visible,
.msq-doc-btn:focus-visible {
  outline: 2px solid var(--mep-primary);
  outline-offset: 2px;
}

/* ── Print ────────────────────────────────────────────────── */
@media print {
  .msq-navbar, .msq-footer, .msq-sticky-cta, .msq-filter-sidebar,
  .btn-cta, .msq-drawer, .msq-drawer-backdrop,
  .msq-breadcrumb, .msq-print-hide, .btn, .dropdown, form:not(.msq-print-show) { display: none !important; }
  body { margin: 0; background: #fff; color: #000; }
  .card { box-shadow: none; border: 1px solid #ddd; }
  a[href]::after { content: ""; }

  /* Named-page CSS (Chrome/Edge) — apply `page: msq-landscape;` or `page: msq-letter;` via the
     matching class below on a printable container (e.g. a wide comparison table) to switch that
     section's physical sheet size/orientation; anything without one of these classes prints on
     the default @page below (A4 portrait). */
  @page msq-landscape { size: A4 landscape; margin: 1.5cm; }
  @page msq-letter { size: letter portrait; margin: 1.5cm; }
  .msq-print-landscape { page: msq-landscape; }
  .msq-print-letter { page: msq-letter; }
}

/* ── Reduced Motion (blanket override — see wwwroot/js/reduced-motion.js for the JS-side flag
   used by code that decides whether to run a transition at all, e.g. the progress bar) ────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Top Progress Bar (see wwwroot/js/progress-bar.js) ────────────────────────────────────── */
#msq-progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: var(--mep-primary);
  z-index: 2100;
  opacity: 0;
  transition: opacity .15s ease;
}
#msq-progress-bar.msq-progress-active { opacity: 1; }
#msq-progress-bar.msq-progress-grow { width: 80%; transition: width 8s cubic-bezier(.1,.5,.1,1); }
#msq-progress-bar.msq-progress-done { width: 100%; transition: width .2s ease, opacity .25s ease .1s; opacity: 0; }

/* ── Button loading state (see wwwroot/js/form-loading.js) ────────────────────────────────── */
.msq-btn-loading { cursor: wait; pointer-events: none; }
.msq-btn-loading .spinner-border { margin-inline-end: .4rem; vertical-align: -2px; }

/* ── Header Search + Autocomplete ─────────────────────────────────────────────────────────── */
.msq-header-search {
  flex: 1 1 auto;
  max-width: 420px;
  margin-inline: 1rem;
  align-items: stretch;
  background: var(--mep-surface);
  border: 1px solid var(--mep-border);
  border-radius: var(--mep-radius);
  transition: border-color var(--mep-transition), box-shadow var(--mep-transition);
}
/* A soft glow on the whole pill on :focus-within, matching every other .form-control's own focus
   treatment sitewide (site.css:1533) — the input previously had its own hard 2px outline instead,
   which only traced the input's rounded-left corners and butted squarely against the search
   button, reading as a mismatched rectangle rather than the rest of the site's consistent glow. */
.msq-header-search:focus-within {
  border-color: var(--mep-primary);
  box-shadow: 0 0 0 3px rgba(var(--mep-primary-rgb), .12);
}
/* Corner clipping lives on the input/button themselves (not the form) so the
   absolutely-positioned suggestions dropdown below isn't clipped by overflow:hidden.
   Logical (start/end) radii, not left/right — the form is a flex row, and `flex-direction: row`
   visually reverses under dir="rtl" (input ends up on the right, button on the left), but a plain
   physical `border-radius: Xpx 0 0 Xpx` doesn't reverse with it. Confirmed live in Arabic: the
   input kept rounding its LEFT corners and the button its RIGHT corners even after the button
   visually swapped to the left side, so the pill's rounded outer edge no longer lined up with
   either child's own corner. */
.msq-header-search .form-control {
  border: none;
  box-shadow: none;
  background: transparent;
  border-start-start-radius: var(--mep-radius);
  border-end-start-radius: var(--mep-radius);
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.msq-header-search .form-control:focus { box-shadow: none; }
.msq-header-search .btn {
  border: none;
  color: var(--mep-text-secondary);
  background: var(--mep-surface-alt);
  border-start-end-radius: var(--mep-radius);
  border-end-end-radius: var(--mep-radius);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  transition: color var(--mep-transition), background var(--mep-transition);
}
.msq-header-search .btn:hover, .msq-header-search .btn:focus-visible {
  color: var(--mep-primary);
  background: var(--mep-bg-tertiary);
}
.msq-header-search-mobile { max-width: none; margin-inline: 0; }
.msq-search-suggestions {
  position: absolute;
  top: 100%; left: 0; right: 0;
  margin-top: .35rem;
  background: var(--mep-surface);
  border: 1px solid var(--mep-border);
  border-radius: var(--mep-radius);
  box-shadow: var(--mep-shadow-lg);
  z-index: 1060;
  overflow: hidden;
}
.msq-search-suggestion {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .8rem;
  color: var(--mep-text);
  text-decoration: none;
  font-size: var(--mep-fs-md);
}
.msq-search-suggestion:hover, .msq-search-suggestion:focus-visible, .msq-search-suggestion.is-active {
  background: var(--mep-bg-tertiary);
  outline: none;
}
.msq-search-suggestion i { color: var(--mep-text-muted); }

/* ── Category Mega-Menu ────────────────────────────────────────────────────────────────────── */
.msq-mega-menu-wrapper { position: static; }
.msq-mega-menu {
  width: min(90vw, 760px);
  padding: 1.25rem;
  border: 1px solid var(--mep-border);
  box-shadow: var(--mep-shadow-lg);
}
.msq-mega-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem 1.25rem;
  max-height: 60vh;
  overflow-y: auto;
}
.msq-mega-menu-col-title {
  display: block;
  font-weight: 600;
  color: var(--mep-text);
  text-decoration: none;
  margin-bottom: .4rem;
  padding-bottom: .3rem;
  border-bottom: 2px solid var(--mep-primary-light, var(--mep-border));
}
.msq-mega-menu-col-title:hover { color: var(--mep-primary); }
.msq-mega-menu-col ul li { margin-bottom: .3rem; }
.msq-mega-menu-col ul li a {
  color: var(--mep-text-secondary);
  text-decoration: none;
  font-size: var(--mep-fs-md);
}
.msq-mega-menu-col ul li a:hover { color: var(--mep-primary); text-decoration: underline; }
.msq-mega-menu-footer {
  margin-top: 1rem;
  padding-top: .75rem;
  border-top: 1px solid var(--mep-border);
  text-align: center;
}
.msq-mega-menu-footer a { color: var(--mep-primary); text-decoration: none; font-weight: 500; font-size: var(--mep-fs-base); }

.msq-mega-menu-col-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.msq-mega-menu-col-header .msq-mega-menu-col-title { flex: 1 1 auto; margin-bottom: 0; }
.msq-mega-menu-col-toggle {
  background: none;
  border: none;
  color: var(--mep-text-secondary);
  padding: .25rem .4rem;
  line-height: 1;
  transition: transform var(--mep-transition);
}
.msq-mega-menu-col-toggle[aria-expanded="true"] { transform: rotate(180deg); }

/* ── Public Header Off-Canvas Mobile Nav (mirrors .msq-sidebar's off-canvas pattern) ──────── */
@media (max-width: 991.98px) {
  .msq-mobile-nav-drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    height: 100vh;
    /* 100vh is the LAYOUT viewport, which on a real phone browser is taller than what's actually
       visible while the address bar/toolbar chrome is showing — the drawer's bottom group (language/
       theme/Login) sits at the end of a flex-grow-1 column, so under plain 100vh it renders below
       that chrome, off the visible screen, until the page is scrolled and the chrome collapses
       (confirmed live via a phone screenshot: the drawer opened with a large empty gap before
       Login, which was pushed to the very bottom edge). 100dvh tracks the actually-visible viewport
       instead and is simply ignored by browsers too old to parse it, leaving 100vh as their fallback.
       overflow-y:auto below still lets a very long drawer scroll on top of this on any browser. */
    height: 100dvh;
    /* mobile-nav.js relocates this drawer to a direct child of <body>, so it paints in the ROOT
       stacking context at its own z-index (1045) — while the toggler stays a descendant of
       <header>, which is capped inside header's OWN stacking context (z-index: 1030) no matter
       what z-index the toggler itself declares. On phones under ~387px wide, 85vw alone reaches
       (or on smaller phones, well past) the toggler's screen position, so the open drawer visibly
       painted over part of the hamburger/close icon — confirmed live via getBoundingClientRect on
       a 375px viewport (drawer right edge at 318.75px vs. the toggler's left edge at 317px), worse
       on narrower devices. The third min() term reserves a fixed clearance from the viewport's
       inline-end edge (toggler width + its padding/gap) so the drawer can never reach it. */
    width: min(85vw, 320px, calc(100vw - 68px));
    background: var(--mep-surface);
    box-shadow: var(--mep-shadow-xl);
    transform: translateX(-100%);
    /* Closed = also hidden from the keyboard and screen readers (visibility), not just moved off screen: otherwise Tab walks into
       a dozen invisible links. The visibility change waits for the slide-out to finish, and is immediate on opening. */
    visibility: hidden;
    transition: transform .3s ease, visibility 0s linear .3s;
    z-index: 1045;
    overflow-y: auto;
    padding: 1.5rem 1.25rem;
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
  }
  /* The base rule's inset-inline-start:0 already means "physical right" under RTL by definition
     (logical properties flip with direction automatically) — no override needed for that half.
     Only the closed-state transform needs a sign flip: translateX is a physical-axis operation, so
     the base rule's translateX(-100%) (hide by moving further left, correct for the LTR/left-docked
     case) would leave an RTL right-docked drawer only partially off-screen to the left instead of
     fully hidden. This was previously ALSO overriding the inset, which forced the drawer to dock at
     the physical left even in RTL — opposite of the reading-direction convention Arabic users
     expect (a menu panel should open from the right, matching where RTL content visually
     originates), confirmed via live testing after a user report ("toggle nav مش مظبوط في العربي"). */
  [dir="rtl"] .msq-mobile-nav-drawer { transform: translateX(100%); }
  body.msq-mobile-nav-open .msq-mobile-nav-drawer { transform: translateX(0); visibility: visible; transition: transform .3s ease, visibility 0s; }
  .msq-mobile-nav-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 1044;
  }
  body.msq-mobile-nav-open .msq-mobile-nav-backdrop { display: block; }
  body.msq-mobile-nav-open { overflow: hidden; }
  .msq-mobile-nav-drawer .msq-mega-menu { width: 100%; box-shadow: none; border: none; padding: .5rem 0 .5rem 1rem; }
  .msq-mega-menu-grid { grid-template-columns: 1fr; max-height: none; overflow: visible; }

  /* Collapsed-by-default accordion: a catalog with dozens of categories dumped fully open would be
     a very long scroll inside an already-narrow drawer. */
  .msq-mega-menu-col > ul { display: none; }
  .msq-mega-menu-col.is-expanded > ul { display: block; }

  /* Drawer header (brand + close) — previously the drawer opened straight into "Home" with no
     identity or way to close it besides re-tapping the hamburger (now covered too, see close()
     wiring in mobile-nav.js) or the backdrop. */
  .msq-mobile-nav-drawer-header {
    padding-bottom: 1rem;
    margin-bottom: .75rem;
    border-bottom: 1px solid var(--mep-border);
  }
  .msq-mobile-nav-drawer-brand {
    display: inline-flex;
    align-items: center;
    font-weight: 800;
    font-size: var(--mep-fs-xl);
    background: linear-gradient(135deg, var(--mep-primary), var(--mep-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .msq-mobile-nav-drawer-brand:hover { text-decoration: none; }

  /* Icon-chip pills for the drawer's top-level rows (Home/Catalog/Brands/Admin/Supplier/My
     Requests) — previously plain text rows with a bare icon glyph, inconsistent with the chip
     treatment the portal sidebar already uses for its own nav. Scoped to DIRECT children only so
     nested dropdown-menu items (mega-menu categories, admin section links, etc.) keep their own,
     lighter row style instead of inheriting an oversized chip. */
  .msq-mobile-nav-drawer > .navbar-nav.flex-grow-1 > .nav-item > .nav-link > .bi,
  .msq-mobile-nav-drawer > .navbar-nav.flex-grow-1 > .nav-item > .dropdown-toggle > .bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--mep-primary-light);
    color: var(--mep-primary);
    font-size: 1rem;
    margin-inline-end: .5rem;
    transition: background var(--mep-transition), color var(--mep-transition);
  }
  .msq-mobile-nav-drawer > .navbar-nav.flex-grow-1 > .nav-item > .nav-link.msq-nav-active {
    background: var(--mep-primary-light);
    color: var(--mep-primary);
    font-weight: 700;
    border-radius: var(--mep-radius);
  }
  .msq-mobile-nav-drawer > .navbar-nav.flex-grow-1 > .nav-item > .nav-link.msq-nav-active > .bi {
    background: var(--mep-primary);
    color: #FFFFFF;
  }
}
@media (min-width: 992px) {
  .msq-mobile-nav-backdrop { display: none; }
}

/* msq-location-picker — map-based delivery location (Leaflet/OpenStreetMap) */
.msq-location-picker-map {
  border-radius: .5rem;
  border: 1px solid var(--mep-border, #dee2e6);
  overflow: hidden;
}
.msq-location-picker-address {
  min-height: 1.2rem;
}
.msq-location-picker .leaflet-control-attribution {
  font-size: var(--mep-fs-2xs);
}

/* request-attachments — upload zone, drafts, and displayed attachment rows (BOQ / spec / drawing) */
.msq-upload-zone {
  border: 2px dashed var(--mep-border, #dce3e9);
  border-radius: .75rem;
  background: var(--mep-bg-tertiary, #f0f3f6);
  padding: 2rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.msq-upload-zone:hover,
.msq-upload-zone-dragover {
  border-color: var(--mep-primary);
  background: var(--mep-primary-light);
}
.msq-upload-zone-icon {
  font-size: 1.75rem;
  color: var(--mep-primary);
  margin-bottom: .35rem;
}
.msq-upload-zone-text { font-weight: 600; margin-bottom: .15rem; }

.msq-attachment-draft {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .75rem;
  border: 1px solid var(--mep-border, #dce3e9);
  border-radius: .5rem;
  margin-bottom: .5rem;
  background: var(--mep-bg-secondary, #fff);
}
.min-width-0 { min-width: 0; }

.msq-attachment-row {
  padding: .65rem .75rem;
  border: 1px solid var(--mep-border-light, #e8edf2);
  border-radius: .5rem;
  margin-bottom: .5rem;
}
.msq-attachment-icon {
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .5rem;
  background: var(--mep-primary-light);
  color: var(--mep-primary);
  font-size: 1.2rem;
}

.msq-boq-importzone { border-left: 3px solid var(--mep-primary); }

/* Order tracking visual timeline (Orders/Details.cshtml) — a horizontal stepper across the
   happy-path OrderStatus sequence; terminal off-path statuses (Cancelled/Refunded/Returned)
   render an alert banner instead, not this component. */
.msq-order-timeline {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  padding: .5rem 0;
}
.msq-timeline-step {
  flex: 1 0 auto;
  min-width: 5.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}
.msq-timeline-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.1rem;
  left: 55%;
  width: 90%;
  height: 2px;
  background: var(--mep-border);
  z-index: 0;
}
.msq-timeline-step.is-reached:not(:last-child)::after {
  background: var(--mep-success);
}
.msq-timeline-dot {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mep-border-light);
  color: var(--mep-text-secondary);
  border: 2px solid var(--mep-border);
  z-index: 1;
  font-size: .95rem;
}
.msq-timeline-step.is-reached .msq-timeline-dot {
  background: var(--mep-success-light);
  color: var(--mep-success);
  border-color: var(--mep-success);
}
.msq-timeline-step.is-current .msq-timeline-dot {
  background: var(--mep-success);
  color: #fff;
  box-shadow: 0 0 0 3px var(--mep-success-light);
}
.msq-timeline-label {
  margin-top: .4rem;
  font-size: .75rem;
  line-height: 1.2;
  color: var(--mep-text-secondary);
}
.msq-timeline-step.is-reached .msq-timeline-label {
  color: var(--mep-text);
  font-weight: 600;
}
.msq-timeline-label small {
  display: block;
  color: var(--mep-text-secondary);
  font-weight: 400;
}

@media (max-width: 767.98px) {
  .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    padding-right: 0;
    padding-left: 0;
  }
}

@page { size: A4 portrait; margin: 1.5cm; }

/* ── Accessibility: skip link + main landmark ───────────────────────────────────────────── */
.msq-skip-link {
  position: fixed; /* fixed, so a focused link is visible wherever the page is scrolled */
  inset-inline-start: .75rem;
  top: -4rem;
  z-index: 3000;
  padding: .6rem 1rem;
  border-radius: var(--mep-radius);
  background: var(--mep-primary);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: top .15s ease;
}
.msq-skip-link:focus { top: .75rem; color: #fff; }
main:focus { outline: none; }

/* ── Touch targets: public pages only (the portals keep their dense, desktop-first controls). ──
   WCAG 2.5.5 / Material ask for ~44px; links, buttons and fields on the public site were 20–31px on a phone. */
@media (pointer: coarse), (max-width: 767.98px) {
  body:not(.msq-portal) .btn,
  body:not(.msq-portal) .msq-chip { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  body:not(.msq-portal) .form-control,
  body:not(.msq-portal) .form-select { min-height: 44px; }
  body:not(.msq-portal) .msq-footer a { display: inline-block; padding: .85rem 0; }
  body:not(.msq-portal) .msq-navbar .nav-link { min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  body:not(.msq-portal) .navbar-brand { min-height: 44px; display: inline-flex; align-items: center; }
  body:not(.msq-portal) .btn-close { min-width: 44px; min-height: 44px; }
  body:not(.msq-portal) .msq-hero-link { min-height: 44px; display: inline-flex; align-items: center; }
}

/* On a phone the two round help buttons (WhatsApp, assistant) float over the sign-up / sign-in fields and hide the start of the
   labels as you scroll. While filling in a form on those pages (sign-up / sign-in, document upload, a quotation request) they
   step aside; they stay on every other page. */
@media (max-width: 767.98px) {
  body:has(.msq-auth-shell) .msq-whatsapp-toggle,
  body:has(.msq-auth-shell) .msq-assistant-toggle,
  body:has([data-doc-upload]) .msq-whatsapp-toggle,
  body:has([data-doc-upload]) .msq-assistant-toggle,
  body:has(#quotation-request-form) .msq-whatsapp-toggle,
  body:has(#quotation-request-form) .msq-assistant-toggle { display: none; }
}

/* "Install MEPSOUQ on your phone" (Views/Shared/_InstallApp.cshtml, js/install-app.js): a slim bar fixed to the bottom of the screen.
   Fixed rather than at the top of the page because the home page's header floats over the hero; it sits below the two round help buttons,
   which are raised on phones (96px / 160px), and above the page content (not above a modal). */
.msq-install-bar {
  position: fixed; inset-inline: .75rem; bottom: .75rem; z-index: 1040;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18); border-radius: var(--mep-radius-lg, .75rem);
}

/* ═══ Home page refresh: rails, hero tabs, wave bands, timeline, phone bar ═══════════════════════════════════════════════
   Featured products, suppliers and brands used to be full grids (brands alone were 3,100px tall on a 12,000px page); they are now
   horizontally scrolling rails (scroll-snap, arrows on desktop, swipe on phones). See js/home-rails.js. */
.msq-rail-wrap { position: relative; z-index: 1; }
.msq-rail {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  padding: .25rem .25rem 1rem;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.msq-rail:focus-visible { outline: 2px solid var(--mep-primary); outline-offset: 2px; border-radius: var(--mep-radius); }
.msq-rail-item { flex: 0 0 min(78%, 270px); scroll-snap-align: start; display: flex; }
.msq-rail-item > .card, .msq-rail-item > .msq-supplier-card { width: 100%; height: 100%; }
.msq-rail-item-sm { flex-basis: min(82%, 300px); }
@media (min-width: 992px) { .msq-rail-item { flex-basis: 270px; } .msq-rail-item-sm { flex-basis: 300px; } }

.msq-rail-btn {
  position: absolute;
  top: 42%;
  z-index: 3;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--mep-border);
  background: var(--mep-surface);
  color: var(--mep-primary);
  box-shadow: var(--mep-shadow-md);
  display: grid;
  place-items: center;
  transition: opacity var(--mep-transition), transform var(--mep-transition), background-color var(--mep-transition), color var(--mep-transition);
}
.msq-rail-prev { inset-inline-start: -.4rem; }
.msq-rail-next { inset-inline-end: -.4rem; }
.msq-rail-btn:hover:not(:disabled) { background: var(--mep-primary); color: #fff; transform: scale(1.06); }
.msq-rail-btn:disabled { opacity: 0; pointer-events: none; }
.msq-rail-wrap.is-static .msq-rail-btn { display: none; }
html[dir="rtl"] .msq-rail-btn i { transform: scaleX(-1); }
@media (hover: none) { .msq-rail-btn { display: none; } }

/* Brands: two rows of tiles that scroll sideways. */
/* The animated visual (orbit, floating tags) sits beside the brands, as before; the brands are a two-row rail so they stay compact.
   min-width: 0 lets the rail shrink to its grid column and scroll inside it instead of stretching the page. */
.msq-brands-body-rail > .msq-rail-wrap { min-width: 0; }
.msq-rail-brands {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  grid-auto-columns: minmax(124px, 140px);
  gap: .85rem;
}
.msq-rail-brands .msq-brand-tile { scroll-snap-align: start; }

/* Hero: Search products / Request quotes */
.msq-hero-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.msq-hero-tab {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 40px;
  padding: .35rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.1);
  color: #fff;
  font-weight: 600;
  font-size: var(--mep-fs-md);
  backdrop-filter: blur(6px);
  transition: background-color var(--mep-transition), color var(--mep-transition), border-color var(--mep-transition);
}
.msq-hero-tab:hover { background: rgba(255,255,255,.2); }
.msq-hero-tab.is-active { background: var(--mep-accent); border-color: var(--mep-accent); color: #fff; }
.msq-hero-tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.msq-hero-search[hidden] { display: none; }
.msq-hero-quick { flex-wrap: wrap; }
.msq-hero-quick .msq-quick-what { flex: 1 1 230px; min-width: 0; }
.msq-hero-quick .msq-quick-qty { flex: 0 0 88px; text-align: center; }
.msq-hero-quick .msq-quick-brand { flex: 1 1 170px; }
.msq-hero-quick .btn { flex: 1 1 auto; }
.msq-hero-assurances {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.1rem;
  padding: 0;
  margin: .9rem 0 0;
  color: rgba(255,255,255,.88);
  font-size: var(--mep-fs-sm, .85rem);
}
.msq-hero-assurances i { color: var(--mep-accent); margin-inline-end: .25rem; }

/* Wave-edged band behind Shop by Brand and How MEPSOUQ Works, so the long page has a change of rhythm. */
.msq-band {
  position: relative;
  margin-top: 4rem;
  padding: 3.5rem 0 2.5rem;
  background: var(--mep-surface-alt);
}
.msq-band::before, .msq-band::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  height: 40px;
  background: var(--mep-surface-alt);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'><path d='M0 40V22C240 0 480 0 720 18S1200 36 1440 12V40Z'/></svg>") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'><path d='M0 40V22C240 0 480 0 720 18S1200 36 1440 12V40Z'/></svg>") center / 100% 100% no-repeat;
  pointer-events: none;
}
.msq-band::before { bottom: calc(100% - 1px); }
.msq-band::after { top: calc(100% - 1px); transform: scaleY(-1); }
.msq-band > section:first-child { margin-top: 0 !important; }

/* How it works: numbered steps on a line; vertical on phones (the line used to disappear there). */
.msq-how-num {
  position: absolute;
  top: -4px;
  inset-inline-end: -4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--mep-accent);
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  border: 2px solid var(--mep-surface);
}
@media (max-width: 767.98px) {
  .msq-how-steps::before {
    display: block;
    left: 50%;
    right: auto;
    top: 60px;
    bottom: 90px;
    width: 2px;
    height: auto;
    transform: translateX(-1px);
  }
}

/* Category tiles */
.msq-category-card .msq-category-icon { transition: background-color var(--mep-transition), color var(--mep-transition), transform var(--mep-transition); }
.msq-category-card:hover .msq-category-icon { background: var(--mep-primary); color: #fff; transform: scale(1.08) rotate(-4deg); }

/* Phones: the two things a visitor comes to do, pinned to the bottom once the hero has scrolled away. */
.msq-sticky-cta {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 1030;
  display: flex;
  gap: .5rem;
  padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom, 0px));
  background: var(--mep-surface);
  border-top: 1px solid var(--mep-border);
  box-shadow: 0 -6px 20px rgba(0,0,0,.12);
}
.msq-sticky-cta[hidden] { display: none; }
.msq-sticky-cta .btn { flex: 1 1 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
body.msq-has-sticky-cta { padding-bottom: 76px; }
@media (min-width: 768px) {
  .msq-sticky-cta { display: none !important; }
  body.msq-has-sticky-cta { padding-bottom: 0; }
}
body:has(.msq-install-bar.d-flex) .msq-sticky-cta { display: none; }

/* Phones: the category tiles were twelve full-width rows in a column; now three rows that swipe sideways. */
@media (max-width: 767.98px) {
  .msq-cat-grid.row {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
    grid-auto-columns: 82%;
    gap: .75rem;
    margin: 0;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    padding-bottom: .75rem;
    scrollbar-width: thin;
  }
  .msq-cat-grid.row > * { width: auto; max-width: none; padding: 0; margin: 0; scroll-snap-align: start; }
}

/* ═══ Home page: brand marquee, project tiles, brand spotlight, animated route, pipe-network hero ═════════════════════════ */

/* Brand logos drifting past. The set is rendered twice and the track slides by half its width, so the loop has no seam. */
.msq-marquee-section { padding: 2.25rem 0 .25rem; }
.msq-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.msq-marquee-track { display: flex; width: max-content; animation: msq-marquee 55s linear infinite; }
.msq-marquee-set { display: flex; align-items: center; gap: 3rem; padding-inline-end: 3rem; }
.msq-marquee-item { display: inline-flex; align-items: center; opacity: .75; filter: grayscale(1); transition: opacity var(--mep-transition), filter var(--mep-transition), transform var(--mep-transition); }
.msq-marquee-item img { height: 40px; width: auto; max-width: 140px; object-fit: contain; }
.msq-marquee-item:hover, .msq-marquee-item:focus-visible { opacity: 1; filter: none; transform: scale(1.08); }
.msq-marquee:hover .msq-marquee-track, .msq-marquee:focus-within .msq-marquee-track { animation-play-state: paused; }
html[dir="rtl"] .msq-marquee-track { animation-name: msq-marquee-rtl; }
@keyframes msq-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes msq-marquee-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) {
  .msq-marquee { overflow-x: auto; }
  .msq-marquee-track { animation: none; }
  .msq-marquee-set[aria-hidden="true"] { display: none; }
}

/* What are you building? */
.msq-project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
/* Phones: two compact tiles per row (name and icon only) so six project types take three short rows instead of a long column. */
@media (max-width: 575.98px) {
  .msq-project-tile { padding: .9rem; }
  .msq-project-items, .msq-project-go { display: none; }
}
@media (min-width: 576px) { .msq-project-grid { gap: 1rem; } }
@media (min-width: 992px) { .msq-project-grid { grid-template-columns: repeat(3, 1fr); } }
.msq-project-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
  padding: 1.25rem;
  text-align: start;
  background: var(--mep-surface);
  color: var(--mep-text);
  border: 1px solid var(--mep-border);
  border-radius: var(--mep-radius-lg);
  box-shadow: var(--mep-shadow-sm);
  transition: transform var(--mep-transition), border-color var(--mep-transition), box-shadow var(--mep-transition);
}
.msq-project-tile:hover, .msq-project-tile:focus-visible { transform: translateY(-4px); border-color: var(--mep-accent); box-shadow: var(--mep-shadow-md); }
.msq-project-ico {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem;
  color: var(--mep-primary); background: var(--mep-primary-light); margin-bottom: .35rem;
  transition: background-color var(--mep-transition), color var(--mep-transition), transform var(--mep-transition);
}
.msq-project-tile:hover .msq-project-ico { background: var(--mep-primary); color: #fff; transform: rotate(-6deg) scale(1.06); }
.msq-project-name { font-weight: 700; font-size: var(--mep-fs-lg, 1.05rem); }
.msq-project-items { font-size: var(--mep-fs-md); color: var(--mep-text-secondary); }
.msq-project-go { margin-top: .5rem; font-weight: 600; font-size: var(--mep-fs-md); color: var(--mep-primary); display: inline-flex; align-items: center; gap: .35rem; }
.msq-project-go i { transition: margin-inline-start var(--mep-transition); margin-inline-start: 0; }
.msq-project-tile:hover .msq-project-go i { margin-inline-start: .4rem; }
html[dir="rtl"] .msq-project-go i { transform: scaleX(-1); }

/* Brand in the spotlight */
.msq-spotlight { position: relative; border-radius: var(--mep-radius-lg); overflow: hidden; border: 1px solid var(--mep-border); background: var(--mep-surface); box-shadow: var(--mep-shadow-md); }
.msq-spot-slides { display: grid; }
.msq-spot-slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(240px, 5fr) 7fr;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility 0s linear .5s;
}
.msq-spot-slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.msq-spot-media {
  position: relative;
  min-height: 300px;
  background-size: cover;
  background-position: center;
  background-color: var(--mep-primary);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 1.25rem;
}
.msq-spot-media-plain { background-image: linear-gradient(140deg, #0f2a3d 0%, var(--mep-primary) 100%); }
.msq-spot-media::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.45)); }
.msq-spot-shape {
  position: absolute; width: 360px; height: 360px; border-radius: 50%; inset-inline-end: -140px; top: -120px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), rgba(255,255,255,0) 65%);
  border: 1px solid rgba(255,255,255,.18);
  transform: scale(.8); opacity: 0;
}
.msq-spot-slide.is-active .msq-spot-shape { animation: msq-spot-shape 1.2s ease .1s forwards; }
@keyframes msq-spot-shape { to { transform: scale(1); opacity: 1; } }
.msq-spot-logo { position: relative; z-index: 1; width: 96px; height: 96px; object-fit: contain; padding: .6rem; background: #fff; border-radius: 18px; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.msq-spot-body { padding: 2rem 2rem 4.25rem; display: flex; flex-direction: column; justify-content: center; gap: .5rem; }
.msq-spot-slide.is-active .msq-spot-body > * { animation: msq-fadeIn .6s ease both; }
.msq-spot-slide.is-active .msq-spot-body > *:nth-child(2) { animation-delay: .08s; }
.msq-spot-slide.is-active .msq-spot-body > *:nth-child(3) { animation-delay: .16s; }
.msq-spot-slide.is-active .msq-spot-body > *:nth-child(4) { animation-delay: .24s; }
.msq-spot-slide.is-active .msq-spot-body > *:nth-child(5) { animation-delay: .32s; }
.msq-spot-title { font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2.1rem); margin: 0; }
.msq-spot-text { color: var(--mep-text-secondary); font-size: var(--mep-fs-lg, 1.05rem); margin: 0; max-width: 60ch; }
.msq-spot-meta { color: var(--mep-text-secondary); font-size: var(--mep-fs-md); }
.msq-spot-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .5rem; }
.msq-spot-controls { position: absolute; inset-inline-end: 1rem; bottom: 1rem; display: flex; align-items: center; gap: .4rem; z-index: 2; }
.msq-spot-btn {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--mep-surface); color: var(--mep-primary); border: 1px solid var(--mep-border);
  transition: background-color var(--mep-transition), color var(--mep-transition);
}
.msq-spot-btn:hover { background: var(--mep-primary); color: #fff; }
.msq-spot-btn[hidden] { display: none; }
html[dir="rtl"] .msq-spot-btn .bi-chevron-left, html[dir="rtl"] .msq-spot-btn .bi-chevron-right { transform: scaleX(-1); }
.msq-spot-dots { display: flex; gap: .35rem; padding: 0 .4rem; }
.msq-spot-dot { position: relative; width: 10px; height: 10px; padding: 0; border-radius: 99px; border: 0; background: var(--mep-border); overflow: hidden; transition: width var(--mep-transition), background-color var(--mep-transition); }
.msq-spot-dot.is-active { width: 34px; }
.msq-spot-dot.is-active::after { content: ''; position: absolute; inset: 0; background: var(--mep-accent); transform-origin: left center; transform: scaleX(0); }
html[dir="rtl"] .msq-spot-dot.is-active::after { transform-origin: right center; }
.msq-spotlight.is-playing .msq-spot-dot.is-active::after { animation: msq-spot-progress 8s linear forwards; }
.msq-spotlight:not(.is-playing) .msq-spot-dot.is-active::after { transform: scaleX(1); }
@keyframes msq-spot-progress { to { transform: scaleX(1); } }
@media (max-width: 767.98px) {
  .msq-spot-slide { grid-template-columns: 1fr; }
  .msq-spot-media { min-height: 170px; }
  .msq-spot-body { padding: 1.25rem 1.25rem 4.5rem; }
  .msq-spot-controls { inset-inline: 1rem; justify-content: center; }
}

/* How it works: the route is drawn in and a dot travels along it. Desktop only; phones keep the vertical line. */
.msq-how-path { display: none; }
@media (min-width: 768px) {
  .msq-how-steps:has(.msq-how-path)::before { display: none; }
  .msq-how-path { display: block; position: absolute; top: 48px; inset-inline: 16.6667%; width: 66.6667%; height: 24px; overflow: visible; pointer-events: none; z-index: 0; }
  .msq-how-path path { fill: none; stroke: var(--mep-primary); stroke-opacity: .55; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 100; }
  .msq-in-view .msq-how-path path { animation: msq-how-draw 1.6s ease .3s forwards; }
  .msq-how-dot { fill: var(--mep-accent); opacity: 0; filter: drop-shadow(0 0 6px var(--mep-accent)); }
  .msq-in-view .msq-how-dot { animation: msq-how-dot-in .4s ease 1.9s forwards; }
  html[dir="rtl"] .msq-how-path { transform: scaleX(-1); }
}
@keyframes msq-how-draw { to { stroke-dashoffset: 0; } }
@keyframes msq-how-dot-in { to { opacity: 1; } }
@keyframes msq-how-pop { from { transform: scale(.55); opacity: .15; } to { transform: scale(1); opacity: 1; } }
.msq-in-view .msq-how-step .msq-how-icon { animation: msq-how-pop .55s cubic-bezier(.2,.9,.3,1.3) both; }
.msq-in-view .msq-how-steps .col-md-4:nth-child(1) .msq-how-icon { animation-delay: .15s; }
.msq-in-view .msq-how-steps .col-md-4:nth-child(2) .msq-how-icon { animation-delay: .85s; }
.msq-in-view .msq-how-steps .col-md-4:nth-child(3) .msq-how-icon { animation-delay: 1.55s; }

/* Hero: a small MEP circuit instead of the gears - chilled water out, warm water back, a fan turning, a valve pulsing. */
.msq-hero-pipes { position: relative; width: min(440px, 100%); height: auto; aspect-ratio: 1; }
/* The outline gear texture would overlap the circuit; it stays for the plain hero on screens where the circuit is not shown. */
@media (min-width: 992px) { .msq-hero:has(.msq-hero-pipes) .msq-hero-watermark { display: none; } }
.msq-hero-pipes svg { width: 100%; height: 100%; display: block; overflow: visible; }
.msq-hp-plate { fill: rgba(255,255,255,.04); stroke: rgba(255,255,255,.14); stroke-width: 1.5; }
.msq-hp-pipe { stroke: rgba(255,255,255,.16); stroke-width: 14; }
.msq-hp-flow { stroke-width: 4; stroke-dasharray: 2 16; animation: msq-hp-flow 1.4s linear infinite; }
.msq-hp-flow-cold { stroke: url(#msqPipeCold); }
.msq-hp-flow-hot { stroke: var(--mep-accent); }
@keyframes msq-hp-flow { to { stroke-dashoffset: -36; } }
.msq-hp-unit rect { fill: rgba(255,255,255,.08); stroke: rgba(255,255,255,.3); stroke-width: 2; }
.msq-hp-unit circle { fill: none; stroke: var(--mep-accent); stroke-width: 3; }
.msq-hp-fan-ring { fill: rgba(15,42,61,.55); stroke: rgba(255,255,255,.4); stroke-width: 2; }
.msq-hp-fan path { fill: #fff; opacity: .9; }
.msq-hp-fan-spin { transform-box: fill-box; transform-origin: center; animation: msq-spin-cw 2.4s linear infinite; }
.msq-hp-valve-x { stroke: rgba(255,255,255,.7); stroke-width: 4; stroke-linecap: round; }
.msq-hp-valve-core { fill: var(--mep-accent); transform-box: fill-box; transform-origin: center; animation: msq-hp-pulse 2.2s ease-in-out infinite; }
@keyframes msq-hp-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .65; } }
.msq-hp-nodes circle { fill: var(--mep-accent); opacity: .9; }

/* Shop by Brand, tightened: smaller tiles so the two rows are about as tall as the animated visual beside them, and on phones the visual is dropped
   (it only pushed the brands a screen down) and the rail fades out at its edge to show that it scrolls. */
/* Columns are 1fr: with few brands the tiles stretch to fill the row (no empty half), with many they stay at the 120px minimum and the rail scrolls. */
.msq-rail-brands { grid-auto-columns: minmax(120px, 1fr); gap: .7rem; padding-top: .4rem; }
.msq-rail-brands .msq-brand-tile { padding: 1rem .6rem; gap: .45rem; justify-content: flex-start; }
.msq-rail-brands .msq-brand-tile img { width: 56px; height: 56px; }
@media (max-width: 767.98px) {
  .msq-brands-body-rail .msq-brands-visual { display: none; }
  .msq-brands-body-rail { gap: 0; }
  .msq-rail-wrap:not(.is-static) .msq-rail-brands {
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
    mask-image: linear-gradient(to right, #000 88%, transparent);
  }
  html[dir="rtl"] .msq-rail-wrap:not(.is-static) .msq-rail-brands {
    -webkit-mask-image: linear-gradient(to left, #000 88%, transparent);
    mask-image: linear-gradient(to left, #000 88%, transparent);
  }
}

/* ═══ Home page: live ticker, brand network canvas, trending chips, regional supplier map ═════════════════════════════════ */

/* Ticker: one line at a time (all lines stacked in the same cell, the active one visible). */
.msq-ticker-wrap { margin-top: 1.25rem; }
.msq-ticker {
  display: flex; align-items: center; gap: .85rem; padding: .55rem 1rem;
  background: var(--mep-surface); border: 1px solid var(--mep-border); border-radius: 999px; box-shadow: var(--mep-shadow-sm);
  overflow: hidden;
}
.msq-ticker-live { display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mep-accent); flex-shrink: 0; }
.msq-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mep-accent); box-shadow: 0 0 0 0 rgba(240,153,74,.6); animation: msq-live-pulse 1.8s ease-out infinite; }
@keyframes msq-live-pulse { 0% { box-shadow: 0 0 0 0 rgba(240,153,74,.6); } 80%, 100% { box-shadow: 0 0 0 10px rgba(240,153,74,0); } }
.msq-ticker-list { list-style: none; margin: 0; padding: 0; display: grid; flex: 1 1 auto; min-width: 0; }
.msq-ticker-item {
  grid-area: 1 / 1; display: flex; align-items: center; gap: .6rem; min-width: 0;
  opacity: 0; transform: translateY(8px); visibility: hidden;
  transition: opacity .4s ease, transform .4s ease, visibility 0s linear .4s;
  font-size: var(--mep-fs-md); color: var(--mep-text);
}
.msq-ticker-item.is-active { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.msq-ticker-item > i { color: var(--mep-primary); flex-shrink: 0; }
.msq-ticker-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.msq-ticker-time { margin-inline-start: auto; color: var(--mep-text-secondary); font-size: var(--mep-fs-sm, .85rem); white-space: nowrap; flex-shrink: 0; }

/* Brand network: a simple grid of brand cards with icons */
.msq-bn-panel {
  display: grid; grid-template-columns: minmax(220px, 3fr) 9fr; gap: 1.5rem; align-items: center; padding: 1.75rem;
  background: var(--mep-surface); border: 1px solid var(--mep-border); border-radius: var(--mep-radius-lg); box-shadow: var(--mep-shadow-md);
}
.msq-bn-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .75rem; }
.msq-bn-item {
  display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: .85rem .6rem; height: 100%; text-align: center; text-decoration: none; color: var(--mep-text);
  background: var(--mep-bg); border: 1px solid var(--mep-border); border-radius: var(--mep-radius-lg);
  transition: transform var(--mep-transition), box-shadow var(--mep-transition), border-color var(--mep-transition);
}
.msq-bn-item:hover { text-decoration: none; color: var(--mep-text); transform: translateY(-2px); box-shadow: var(--mep-shadow-md); border-color: rgba(var(--mep-primary-rgb), .45); }
.msq-bn-item:focus-visible { outline: 2px solid var(--mep-primary); outline-offset: 2px; }
.msq-bn-logo { width: 3.6rem; height: 3.6rem; border-radius: .9rem; background: #fff; border: 1px solid var(--mep-border-light, var(--mep-border)); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; color: var(--mep-primary); font-size: 1.6rem; }
.msq-bn-logo img { max-width: 82%; max-height: 82%; object-fit: contain; }
.msq-bn-name { font-weight: 700; font-size: var(--mep-fs-sm); line-height: 1.25; overflow-wrap: anywhere; }
.msq-bn-meta { display: flex; gap: .75rem; justify-content: center; font-size: var(--mep-fs-xs, .78rem); color: var(--mep-text-secondary); }
.msq-bn-meta i { color: var(--mep-primary); }
@media (max-width: 991.98px) {
  .msq-bn-panel { grid-template-columns: 1fr; padding: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .msq-bn-item, .msq-bn-item:hover { transition: none; transform: none; }
}

/* Trending and map cards */
.msq-pulse-card { padding: 1.5rem; background: var(--mep-surface); border: 1px solid var(--mep-border); border-radius: var(--mep-radius-lg); box-shadow: var(--mep-shadow-sm); }
.msq-pulse-title { font-weight: 800; font-size: 1.35rem; margin: .1rem 0 1rem; }
.msq-pulse-label { font-weight: 700; font-size: var(--mep-fs-sm, .85rem); text-transform: uppercase; letter-spacing: .06em; color: var(--mep-text-secondary); margin: .9rem 0 .4rem; }
.msq-pulse-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.msq-pulse-chip {
  display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .5rem .35rem .85rem; border-radius: 999px;
  background: var(--mep-bg-tertiary); color: var(--mep-text); border: 1px solid var(--mep-border); text-decoration: none; font-weight: 600; font-size: var(--mep-fs-md);
  transition: background-color var(--mep-transition), color var(--mep-transition), border-color var(--mep-transition), transform var(--mep-transition);
}
.msq-pulse-chip span { min-width: 1.6rem; padding: .05rem .45rem; border-radius: 999px; background: var(--mep-accent); color: #fff; font-size: .78rem; font-weight: 800; text-align: center; }
a.msq-pulse-chip:hover { background: var(--mep-primary); color: #fff; border-color: var(--mep-primary); transform: translateY(-2px); }
.msq-pulse-chip-static { padding-inline-end: .4rem; }
.msq-pulse-note { margin: 1rem 0 0; font-size: var(--mep-fs-sm, .85rem); color: var(--mep-text-secondary); }

.msq-mena-wrap { position: relative; }
.msq-mena { display: block; width: 100%; height: auto; }
.msq-mena-land path { fill: var(--mep-bg-tertiary); stroke: var(--mep-border); stroke-width: .8; transition: fill var(--mep-transition); }
.msq-mena-land path.is-active { fill: color-mix(in srgb, var(--mep-primary) 22%, var(--mep-bg-tertiary)); stroke: var(--mep-primary); stroke-width: 1.1; }
.msq-mena-dot { fill: var(--mep-accent); stroke: var(--mep-surface); stroke-width: 2; }
.msq-mena-pulse { fill: var(--mep-accent); opacity: .5; transform-box: fill-box; transform-origin: center; animation: msq-mena-pulse 2.4s ease-out infinite; }
@keyframes msq-mena-pulse { 0% { transform: scale(.8); opacity: .55; } 100% { transform: scale(4); opacity: 0; } }
.msq-mena-list { margin-top: 1rem; }
@media (prefers-reduced-motion: reduce) {
  .msq-ticker-item { transition: none; }
  .msq-live-dot, .msq-mena-pulse { animation: none; }
}
.msq-ticker-recent .msq-live-dot { animation: none; background: var(--mep-text-secondary); box-shadow: none; }
.msq-ticker-recent { color: var(--mep-text-secondary); }

/* ═══ Request a Quotation form: numbered steps, brand chips, product lines that become cards on phones ═══════════════════ */
.msq-qr-lead { margin: .35rem 0 0; color: var(--mep-text-secondary); max-width: 62ch; }
.msq-qr-form { max-width: 960px; }
.msq-qr-step { margin-bottom: 1.75rem; }
.msq-qr-step-head { display: flex; align-items: center; gap: .65rem; margin-bottom: .6rem; padding-bottom: .5rem; border-bottom: 2px solid var(--mep-border-light); }
.msq-qr-step-no {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--mep-primary); color: #fff; font-weight: 700; font-size: .85rem;
}
.msq-qr-step-title { font-size: var(--mep-fs-xl); font-weight: 700; margin: 0; }
.msq-qr-step-hint { color: var(--mep-text-secondary); font-size: var(--mep-fs-sm); margin-bottom: .75rem; }
.msq-qr-picked { margin-inline-start: auto; font-size: var(--mep-fs-sm); font-weight: 600; color: var(--mep-primary); }

/* Brands: the chosen ones as removable chips, the rest in a searchable list that opens under the box. The list items are real checkboxes (the form fields). */
.msq-brand-picker { position: relative; }
.msq-brand-chosen { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; }
.msq-brand-chosen:empty { display: none; }
.msq-brand-chip {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; padding-block: .25rem; padding-inline: .85rem .35rem;
  border-radius: 999px; background: var(--mep-primary); color: #fff; font-weight: 600; font-size: .9rem;
}
.msq-brand-chip button {
  display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; padding: 0;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.22); color: inherit; font-size: .7rem; cursor: pointer;
}
.msq-brand-chip button:hover { background: rgba(255,255,255,.4); }
.msq-brand-chip button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.msq-brand-search { position: relative; }
.msq-brand-search > .bi { position: absolute; inset-inline-start: .9rem; top: 50%; transform: translateY(-50%); color: var(--mep-text-secondary); pointer-events: none; }
.msq-brand-search .form-control { padding-inline-start: 2.5rem; min-height: 46px; }
.msq-brand-menu {
  position: absolute; z-index: 20; inset-inline: 0; margin-top: .25rem; max-height: 260px; overflow-y: auto; padding: .25rem;
  background: var(--mep-surface); border: 1px solid var(--mep-border); border-radius: var(--mep-radius); box-shadow: var(--mep-shadow-md);
}
.msq-brand-option {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 0; padding: .6rem .75rem;
  border-radius: 6px; cursor: pointer; font-weight: 500;
}
.msq-brand-option input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.msq-brand-option .bi { visibility: hidden; color: var(--mep-primary); }
.msq-brand-option:hover, .msq-brand-option:has(input:focus-visible) { background: var(--mep-surface-hover); }
.msq-brand-option:has(input:focus-visible) { outline: 2px solid color-mix(in srgb, var(--mep-accent) 60%, transparent); outline-offset: -2px; }
.msq-brand-option:has(input:checked) { font-weight: 700; }
.msq-brand-option:has(input:checked) .bi { visibility: visible; }
.msq-brand-option-disabled, .msq-brand-option-disabled input { cursor: not-allowed; }
.msq-brand-option-disabled { opacity: .45; }
.msq-brand-empty { padding: .75rem; text-align: center; color: var(--mep-text-secondary); }
.msq-brand-option[hidden], .msq-brand-menu[hidden], .msq-brand-empty[hidden] { display: none !important; }

/* Product lines of the bulk purchase form: a search box that opens a list of matching products (picture, name, code, brand), then the chosen product in its place. */
.msq-prod-picker { position: relative; min-width: 0; }
.msq-prod-search { position: relative; }
.msq-prod-search > .bi { position: absolute; inset-inline-start: .9rem; top: 50%; transform: translateY(-50%); color: var(--mep-text-secondary); pointer-events: none; }
.msq-prod-search .form-control { padding-inline-start: 2.5rem; min-height: 46px; }
.msq-prod-chosen {
  display: flex; align-items: center; gap: .75rem; min-height: 56px; padding: .35rem .5rem .35rem .6rem;
  border: 1px solid var(--mep-border); border-radius: var(--mep-radius); background: var(--mep-surface-alt);
}
.msq-prod-thumb { flex-shrink: 0; width: 44px; height: 44px; object-fit: cover; border-radius: 6px; background: var(--mep-surface); border: 1px solid var(--mep-border-light); }
.msq-prod-info { display: flex; flex-direction: column; min-width: 0; flex: 1; text-align: start; }
.msq-prod-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msq-prod-meta { font-size: var(--mep-fs-sm); color: var(--mep-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msq-prod-change {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--mep-text-secondary); cursor: pointer;
}
.msq-prod-change:hover { background: var(--mep-surface-hover); color: var(--mep-text); }
.msq-prod-menu {
  position: absolute; z-index: 30; inset-inline: 0; margin-top: .25rem; max-height: 320px; overflow-y: auto; padding: .25rem;
  background: var(--mep-surface); border: 1px solid var(--mep-border); border-radius: var(--mep-radius); box-shadow: var(--mep-shadow-md);
}
.msq-prod-option {
  display: flex; align-items: center; gap: .75rem; width: 100%; padding: .5rem .6rem; border: 0; border-radius: 6px;
  background: transparent; color: inherit; text-align: start; cursor: pointer;
}
.msq-prod-option:hover:not(:disabled), .msq-prod-option:focus-visible { background: var(--mep-surface-hover); outline: none; }
.msq-prod-option:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--mep-accent) 60%, transparent); }
.msq-prod-option:disabled { opacity: .5; cursor: not-allowed; }
.msq-prod-empty { padding: .75rem; text-align: center; color: var(--mep-text-secondary); }
.msq-prod-chosen[hidden], .msq-prod-search[hidden], .msq-prod-menu[hidden] { display: none !important; }
/* Searchable dropdowns (wwwroot/js/searchable-select.js): the native select is kept but hidden; a button opens a list with a search box, placed over the page so a scrolling table cannot clip it. */
.msq-ss { position: relative; }
.msq-ss-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.msq-ss-toggle { display: block; width: 100%; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msq-ss-toggle.msq-ss-placeholder { color: var(--mep-text-secondary); }
.msq-ss-menu {
  position: fixed; z-index: 1080; max-width: calc(100vw - 16px); padding: .4rem;
  background: var(--mep-surface); border: 1px solid var(--mep-border); border-radius: var(--mep-radius); box-shadow: var(--mep-shadow-md);
}
.msq-ss-list { max-height: 240px; overflow-y: auto; margin-top: .4rem; }
.msq-ss-option {
  display: block; width: 100%; padding: .45rem .6rem; border: 0; border-radius: 6px; background: transparent; color: inherit; text-align: start; cursor: pointer;
}
.msq-ss-option:hover:not(:disabled), .msq-ss-option:focus-visible { background: var(--mep-surface-hover); outline: none; }
.msq-ss-option:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--mep-accent) 60%, transparent); }
.msq-ss-option[aria-selected="true"] { font-weight: 700; }
.msq-ss-option-empty { color: var(--mep-text-secondary); }
.msq-ss-option:disabled { opacity: .5; cursor: not-allowed; }
.msq-ss-empty { padding: .6rem; text-align: center; color: var(--mep-text-secondary); }
.msq-ss-option[hidden], .msq-ss-menu[hidden], .msq-ss-empty[hidden] { display: none !important; }

/* The list opens over the rows below the line, so this table must not clip it (a scrolling wrapper would). */
.msq-qr-lines-2.table-responsive { overflow: visible; }

.msq-qr-actions { display: flex; flex-wrap: wrap; gap: .6rem; padding-top: 1.25rem; border-top: 1px solid var(--mep-border-light); }

/* Product lines on phones: each line is a small card (description on top, quantity and unit side by side) instead of a squeezed table. */
@media (max-width: 767.98px) {
  .msq-qr-lines thead { display: none; }
  .msq-qr-lines table, .msq-qr-lines tbody { display: block; }
  .msq-qr-lines tbody tr {
    display: grid; grid-template-columns: 1fr 1fr auto; gap: .6rem; align-items: end;
    padding: .85rem; margin-bottom: .75rem; border: 1px solid var(--mep-border); border-radius: var(--mep-radius-lg); background: var(--mep-bg-secondary);
  }
  .msq-qr-lines tbody td { display: block; padding: 0; border: 0; background: transparent; }
  /* nth-of-type, not first-child: the script puts a hidden key input in front of the first cell. */
  .msq-qr-lines tbody td:nth-of-type(1) { grid-column: 1 / -1; }
  .msq-qr-lines tbody td[data-label]::before { content: attr(data-label); display: block; margin-bottom: .2rem; font-size: .75rem; font-weight: 600; color: var(--mep-text-secondary); }
  .msq-qr-lines .msq-qr-remove { align-self: end; }
  .msq-qr-lines-2 tbody tr { grid-template-columns: 1fr auto; }
  .msq-qr-actions .btn { flex: 1 1 100%; }
}

/* ═══ Phones: cart lines, one-line filter strips, floating help buttons, a shorter home page ══════════════════════════════ */

/* Cart: on a wide screen the line stays one row (image, name, quantity, price, links); on a phone it becomes a small card. */
.msq-cart-line .msq-cart-img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--mep-radius); flex-shrink: 0; }
.msq-cart-price { min-width: 100px; }
@media (max-width: 767.98px) {
  .msq-cart-line {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas: "img info" "img price" "qty qty" "act act";
    gap: .35rem .85rem !important;
    align-items: start !important;
  }
  .msq-cart-line .msq-cart-img { grid-area: img; }
  .msq-cart-info { grid-area: info; }
  .msq-cart-price { grid-area: price; min-width: 0; text-align: start !important; }
  .msq-cart-qty { grid-area: qty; padding-top: .35rem; }
  .msq-cart-actions { grid-area: act; flex-direction: row !important; gap: 1.25rem !important; }
}

/* A row of filter buttons that would wrap into three lines scrolls sideways in one line on phones, with the last one fading out. */
@media (max-width: 767.98px) {
  .msq-chip-strip {
    flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-inline: -.25rem; padding: .1rem .25rem;
    -webkit-mask-image: linear-gradient(to right, #000 90%, transparent); mask-image: linear-gradient(to right, #000 90%, transparent);
  }
  html[dir="rtl"] .msq-chip-strip { -webkit-mask-image: linear-gradient(to left, #000 90%, transparent); mask-image: linear-gradient(to left, #000 90%, transparent); }
  .msq-chip-strip::-webkit-scrollbar { display: none; }
  .msq-chip-strip .btn { flex: 0 0 auto; white-space: nowrap; }
}

/* The two round help buttons: smaller and lower on phones, and out of the way while scrolling down (js/float-buttons.js adds .msq-fab-away).
   They are raised only when a bar is fixed to the bottom of the screen (the product page's buy bar, the install bar). */
@media (max-width: 767.98px) {
  body .msq-assistant-toggle, body .msq-whatsapp-toggle {
    width: 46px; height: 46px; font-size: 1.25rem; right: 14px;
    transition: transform .25s ease, opacity .25s ease;
  }
  body .msq-assistant-toggle { bottom: 16px; }
  body .msq-whatsapp-toggle { bottom: 70px; }
  body .msq-assistant-panel { bottom: 72px; max-height: calc(100vh - 100px); }
  body:has(.msq-sticky-cta:not([hidden])) .msq-assistant-toggle, body:has(.msq-install-bar.d-flex) .msq-assistant-toggle { bottom: 96px; }
  body:has(.msq-sticky-cta:not([hidden])) .msq-whatsapp-toggle, body:has(.msq-install-bar.d-flex) .msq-whatsapp-toggle { bottom: 150px; }
  body:has(.msq-sticky-cta:not([hidden])) .msq-assistant-panel, body:has(.msq-install-bar.d-flex) .msq-assistant-panel { bottom: 162px; max-height: calc(100vh - 192px); }
  body.msq-fab-away .msq-assistant-toggle, body.msq-fab-away .msq-whatsapp-toggle { opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none; }
}

/* Home page on phones: the brand-network canvas needs a pointer to hover (the same brands are in "Shop by Brand" above it) and the
   regional map repeats the country list under it, so both are left out and the page is about 1,500px shorter. */
@media (max-width: 767.98px) {
  section[aria-labelledby="msq-net-title"] { display: none; }
  .msq-mena-wrap { display: none; }
}

/* Compact cards (class msq-rt-compact next to msq-responsive-table): two fields per line, the label above its value, instead of one field
   per line — a page of twenty rows was over seven thousand pixels tall on a phone. The first labelled cell (order number, product name)
   takes the whole first line, buttons take the last. */
@media (max-width: 767.98px) {
  .msq-rt-compact tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem .9rem; align-items: start; }
  .msq-rt-compact td { min-width: 0; overflow-wrap: anywhere; }
  .msq-rt-compact td[data-label] { display: block; padding: 0; }
  .msq-rt-compact td[data-label]::before { display: block; margin-bottom: .1rem; font-size: .72rem; }
  .msq-rt-compact td.msq-table-title { grid-column: 1 / -1; font-weight: 600; }
  .msq-rt-compact td.msq-table-action-cell, .msq-rt-compact tr.msq-table-note td, .msq-rt-compact td[colspan] { grid-column: 1 / -1; }
  .msq-rt-compact td.msq-table-action-cell { margin-top: .15rem; }
}

/* ═══ Start a New Request: one card per way to ask, the whole card is the link ═══════════════════════════════════════════ */
.msq-path-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.msq-path-grid-single { grid-template-columns: minmax(0, 520px); }
.msq-path-card {
  --path-color: var(--mep-primary); --path-tint: var(--mep-primary-light); --path-text: var(--mep-primary); --path-on: #fff;
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .55rem;
  padding: 1.35rem; border: 1px solid var(--mep-border); border-top: 4px solid var(--path-color); border-radius: var(--mep-radius-lg);
  background: var(--mep-surface); color: var(--mep-text); text-decoration: none; box-shadow: var(--mep-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.msq-path-success { --path-color: var(--mep-success); --path-tint: var(--mep-success-light); --path-text: #146C43; }
.msq-path-warning { --path-color: var(--mep-warning); --path-tint: var(--mep-warning-light); --path-text: #8A6100; }
/* text and the hover fill use --path-text (the light-theme yellow and green are too pale for text on white); in the dark theme the bright colours are right for text and the label on a filled button is the dark ink */
[data-theme="dark"] .msq-path-card { --path-on: var(--mep-text-inverse); }
[data-theme="dark"] .msq-path-success { --path-text: var(--mep-success); }
[data-theme="dark"] .msq-path-warning { --path-text: var(--mep-warning); }
.msq-path-card:hover { transform: translateY(-3px); box-shadow: var(--mep-shadow-md); color: var(--mep-text); text-decoration: none; }
.msq-path-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--mep-accent) 60%, transparent); outline-offset: 2px; }
.msq-path-ico { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--path-tint); color: var(--path-text); font-size: 1.4rem; }
.msq-path-best { font-size: .75rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--path-text); }
.msq-path-title { font-size: var(--mep-fs-xl); font-weight: 700; margin: 0; }
.msq-path-text { flex-grow: 1; margin: 0; color: var(--mep-text-secondary); font-size: var(--mep-fs-sm); line-height: 1.6; }
.msq-path-go {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .35rem; padding: .5rem 1rem; border-radius: 999px;
  border: 1px solid var(--path-text); color: var(--path-text); font-weight: 600; font-size: .9rem;
  transition: background-color .18s ease, color .18s ease;
}
.msq-path-card:hover .msq-path-go { background: var(--path-text); color: var(--path-on); }
html[dir="rtl"] .msq-path-go .bi-arrow-right { transform: scaleX(-1); }
.msq-path-tip { display: flex; align-items: flex-start; gap: .75rem; padding: .9rem 1.1rem; border-radius: var(--mep-radius-lg); background: var(--mep-primary-light); color: var(--mep-text); font-size: var(--mep-fs-sm); }
.msq-path-tip .bi { margin-top: .15rem; color: var(--mep-primary); }
@media (prefers-reduced-motion: reduce) { .msq-path-card { transition: none; } .msq-path-card:hover { transform: none; } }

/* Footer on phones: the two short link lists sit side by side (they were five stacked sections, about 1,150px), and the link rows keep a
   comfortable tap height without the 0.85rem padding the global touch rule gives each link. */
@media (max-width: 767.98px) {
  .msq-footer { padding-top: 2rem; }
  body:not(.msq-portal) .msq-footer ul a { padding: .55rem 0; }
  .msq-footer .msq-footer-actions .btn-cta { padding: .6rem 1.1rem; }
  .msq-footer .msq-footer-bottom { justify-content: center; text-align: center; }
}

/* ═══ Header on laptop and tablet widths ═══════════════════════════════════════════════════════════════════════════════
   Signed in as a buyer the header holds the brand, the search, four menus, six icons and the account (name + role badge). Measured: at 1280px
   the search field was 36px wide, at 1200px and below it was 16px (a search icon and nothing to type in) and the row ran past the edge of
   the screen (28px at 1200, 160px at 992), pushing the account menu out of sight. It sheds the least useful things first as the screen
   narrows; above 1536px nothing changes. The hamburger breakpoint (992px) is untouched, many rules and js/mobile-nav.js share it. */
.msq-account-menu-head { display: none; }
@media (min-width: 992px) { .msq-navbar .nav-link { white-space: nowrap; } }
.msq-header-search { min-width: 0; }
.msq-header-search .form-control { min-width: 0; }
@media (min-width: 992px) and (max-width: 1535.98px) {
  /* the name and role move into the top of the account menu (below); the avatar (or person icon) and the title on hover stay in the bar */
  .msq-navbar .msq-account-name, .msq-navbar .msq-role-badge { display: none; }
  .msq-navbar .msq-account-menu-head { display: block; border-bottom: 1px solid var(--mep-border-light); margin-bottom: .25rem; }
  .msq-navbar .msq-header-search { flex: 1 1 160px; min-width: 150px; margin-inline: .75rem; }
}
@media (min-width: 992px) and (max-width: 1279.98px) {
  .msq-navbar .container { padding-inline: 1rem; }
  .msq-navbar .navbar-nav.flex-grow-1 .nav-link > i { display: none; }
  .msq-navbar .navbar-nav.align-items-center > .nav-item.me-2 { margin-inline-end: .1rem !important; }
  .msq-navbar .nav-link { padding-inline: .5rem; }
}
@media (min-width: 992px) and (max-width: 1099.98px) {
  /* the tightest range: Arabic labels are longer than English ones */
  .msq-navbar .msq-header-search { flex-basis: 110px; min-width: 100px; margin-inline: .5rem; }
  .msq-navbar .nav-link { padding-inline: .2rem; font-size: .9rem; }
  /* the word MEPSOUQ next to the mark is the one thing that can go here without losing a function (the link keeps its name for screen readers) */
  .msq-navbar .navbar-brand .msq-logo { height: 1.7rem; }
  .msq-navbar .navbar-brand { margin-inline-end: 0; font-size: 1.05rem; }
  .msq-navbar .container { padding-inline: .6rem; }
}

/* Dark theme: the primary colour is light there, so white on it (step numbers, chosen brand chips) is too faint; use the dark ink. */
[data-theme="dark"] .msq-qr-step-no, [data-theme="dark"] .msq-brand-chip { color: var(--mep-text-inverse); }
.msq-account-menu-head .dropdown-header { color: var(--mep-text-secondary); }
/* Same reason: white on the light accent (skip link, the active hero tab) and Bootstrap's red link text were under 4.5:1 in the dark theme. */
[data-theme="dark"] .msq-skip-link, [data-theme="dark"] .msq-hero-tab.is-active { color: var(--mep-text-inverse); }
[data-theme="dark"] .text-danger { color: var(--mep-danger) !important; }

/* Mobile filter panel: a title bar with a close button that stays at the top while the filters scroll. */
.msq-filter-drawer-head {
  position: sticky; top: -1.25rem; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin: -1.25rem -1.25rem 1rem; padding: 1rem 1.25rem .75rem;
  background: var(--mep-surface); border-bottom: 1px solid var(--mep-border-light);
}
.msq-filter-drawer-head .btn-close { min-width: 44px; min-height: 44px; }

/* The cart's pinned bar: the total on one side, the checkout button filling the rest. */
.msq-cart-bar { align-items: center; }
.msq-cart-bar .msq-cart-bar-total { display: flex; flex-direction: column; line-height: 1.2; flex: 0 0 auto; padding-inline-end: .25rem; }
.msq-cart-bar .btn.disabled { pointer-events: none; opacity: .55; }

/* ═══ Home page on phones: three long sections made shorter ═══════════════════════════════════════════════════════════════
   "How it works" (about 930px): each step is the icon beside its text with the line running down the icon column, not an icon, a title and a
   paragraph stacked in the middle of the screen. The two value cards (about 1,100px): at most four bullets each and no corner decoration.
   Testimonials (about 850px): the cards swipe sideways in one row. */
@media (max-width: 767.98px) {
  .msq-how-step { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: .9rem; align-items: start; text-align: start; padding: .6rem .25rem; }
  .msq-how-step .msq-how-icon { grid-row: 1 / span 2; width: 56px; height: 56px; font-size: 1.5rem; margin: 0; }
  .msq-how-step h3 { grid-column: 2; font-size: 1.05rem; margin: 0 0 .15rem; }
  .msq-how-step p { grid-column: 2; margin: 0; font-size: .875rem; }
  .msq-how-steps::before { left: auto; inset-inline-start: 31px; top: 44px; bottom: 44px; transform: none; }

  .msq-value-props { padding: 1.5rem 1.25rem; }
  .msq-value-props .lead { font-size: 1rem; }
  .msq-value-props li:nth-child(n+5) { display: none; }
  .msq-value-props .msq-showcase-stripe-corner { display: none; }

  .msq-rail-phone { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: .5rem; }
  .msq-rail-phone::-webkit-scrollbar { display: none; }
  .msq-rail-phone > * { flex: 0 0 84%; max-width: 84%; scroll-snap-align: center; }
}

/* Rows past the first few on a phone (js/responsive-tables.js) and the button that reveals the next ones. */
.msq-row-collapsed { display: none !important; }
.msq-show-more[hidden] { display: none; }
@media (min-width: 768px) { .msq-show-more { display: none; } }

/* Dark theme, back office: the active sidebar entry was white on the light accent (2.2:1), and Bootstrap's "dark" outline button is dark text
   on a dark surface (the Review / Update buttons inside the dashboard alerts, 1.2:1). */
[data-theme="dark"] .msq-sidebar-link.active { color: var(--mep-text-inverse); }
[data-theme="dark"] .msq-sidebar-link.active .bi { background: rgba(0,0,0,.14); }
[data-theme="dark"] .btn-outline-dark { color: var(--mep-text); border-color: var(--mep-text-secondary); }
[data-theme="dark"] .btn-outline-dark:hover, [data-theme="dark"] .btn-outline-dark:focus-visible { color: var(--mep-text-inverse); background: var(--mep-text); border-color: var(--mep-text); }

/* Dark theme: Bootstrap's coloured table rows (below the reorder level, overdue ...) stay pale yellow/red/green with black text, a bright strip
   across a dark page; they take the theme's dark tints and light text. Also two Bootstrap defaults that fell under 4.5:1 on a dark surface. */
[data-theme="dark"] .table-warning > *, [data-theme="dark"] .table-danger > *, [data-theme="dark"] .table-success > *, [data-theme="dark"] .table-info > * { color: var(--mep-text); }
[data-theme="dark"] .table-warning > * { --bs-table-bg: var(--mep-warning-light); --bs-table-accent-bg: var(--mep-warning-light); --bs-table-bg-type: var(--mep-warning-light); --bs-table-bg-state: var(--mep-warning-light); --bs-table-color: var(--mep-text); }
[data-theme="dark"] .table-danger > * { --bs-table-bg: var(--mep-danger-light); --bs-table-accent-bg: var(--mep-danger-light); --bs-table-bg-type: var(--mep-danger-light); --bs-table-bg-state: var(--mep-danger-light); --bs-table-color: var(--mep-text); }
[data-theme="dark"] .table-success > * { --bs-table-bg: var(--mep-success-light); --bs-table-accent-bg: var(--mep-success-light); --bs-table-bg-type: var(--mep-success-light); --bs-table-bg-state: var(--mep-success-light); --bs-table-color: var(--mep-text); }
[data-theme="dark"] .table-info > * { --bs-table-bg: var(--mep-info-light); --bs-table-accent-bg: var(--mep-info-light); --bs-table-bg-type: var(--mep-info-light); --bs-table-bg-state: var(--mep-info-light); --bs-table-color: var(--mep-text); }
[data-theme="dark"] .badge.bg-primary-subtle { color: var(--mep-primary); }
[data-theme="dark"] .btn-outline-success { color: var(--mep-success); border-color: var(--mep-success); }
[data-theme="dark"] .btn-outline-success:hover { color: var(--mep-text-inverse); background: var(--mep-success); }

/* A card's button row (Continue / Manage, pause, delete) could be a few pixels wider than the card and made the list scroll sideways. */
@media (max-width: 767.98px) {
  .msq-rt-compact td.msq-table-action-cell { width: auto; max-width: 100%; }
}

/* Product with more than one category: removable chips in the product form, link chips on the product page. */
.msq-pick-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.msq-pick-chips:empty { display: none; }
.msq-pick-chip {
  display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .4rem .25rem .8rem; border: 1px solid var(--mep-primary); border-radius: 999px;
  background: var(--mep-primary-light); color: var(--mep-primary); font-weight: 600; font-size: .875rem;
}
.msq-pick-chip .btn-close { width: .55rem; height: .55rem; padding: .35rem; margin: 0; }
.msq-cat-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.msq-cat-chip {
  display: inline-block; padding: .2rem .75rem; border: 1px solid var(--mep-border); border-radius: 999px; background: var(--mep-surface);
  color: var(--mep-text); font-size: .875rem; font-weight: 600; text-decoration: none;
  transition: border-color var(--mep-transition), color var(--mep-transition);
}
.msq-cat-chip:hover { border-color: var(--mep-primary); color: var(--mep-primary); text-decoration: none; }

/* ── Category pictures ─────────────────────────────────────── */
.msq-category-icon.msq-category-photo { background: var(--mep-surface-alt, var(--mep-primary-light)); overflow: hidden; padding: 0; }
.msq-category-icon.msq-category-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.msq-category-card:hover .msq-category-icon.msq-category-photo { background: var(--mep-surface-alt, var(--mep-primary-light)); transform: scale(1.08); }
.msq-mega-menu-thumb { width: 28px; height: 28px; object-fit: cover; border-radius: 6px; margin-inline-end: .5rem; vertical-align: middle; }
.msq-category-intro { display: flex; align-items: center; gap: 1rem; }
.msq-category-intro-img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--mep-radius-lg); border: 1px solid var(--mep-border); flex-shrink: 0; }
@media (max-width: 575.98px) { .msq-category-intro-img { width: 72px; height: 72px; } }
.msq-cat-thumb { width: 32px; height: 32px; object-fit: cover; border-radius: 6px; margin-inline-end: .5rem; vertical-align: middle; }

/* ── Home: hero touches + browse block + network card + value strip ──────────────────────────
   Hero: the second half of the title is lit in a light accent (readable on the dark hero in every
   scheme: --mep-hero-accent is set for the brand scheme, other schemes fall back to soft amber),
   and the search is one field with a round arrow button. */
.msq-hero-accent { color: var(--mep-hero-accent, #FFD27F); }
.msq-hero-search-go { flex: 0 0 auto; width: 2.9rem; height: 2.9rem; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--mep-radius); font-size: 1.15rem; }
[dir="rtl"] .msq-hero-search-go .bi-arrow-right, [dir="rtl"] .msq-hb-flip { transform: scaleX(-1); }

.msq-home-browse { margin-top: 2.25rem; }
.msq-hb-group + .msq-hb-group { margin-top: 1.9rem; }
.msq-hb-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; }
.msq-hb-title { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: var(--mep-fs-xl); font-weight: 700; color: var(--mep-text); }
.msq-hb-title i { color: var(--mep-primary); font-size: 1.3em; }
.msq-hb-all { font-size: var(--mep-fs-sm); font-weight: 600; white-space: nowrap; }
.msq-hb-all i { font-size: .9em; margin-inline-start: .15rem; }
.msq-hb-grid { display: grid; gap: .75rem; }

.msq-net-cta:focus-visible { outline: 2px solid var(--mep-primary); outline-offset: 2px; }
.msq-hb-arrow { position: absolute; inset-inline-end: .75rem; bottom: .6rem; font-size: .85rem; color: var(--mep-primary); transition: transform var(--mep-transition); }

/* white glyph on each: >= 3:1 (red 4.5, blue 3.9, green 3.5, amber 3.5, purple 6) */
.msq-tone-fire { background: linear-gradient(135deg, #E4504F, #C93433); }
.msq-tone-cool { background: linear-gradient(135deg, #2F9BE3, #1A7FC9); }
.msq-tone-water { background: linear-gradient(135deg, #2DB473, #1B9459); }
.msq-tone-power { background: linear-gradient(135deg, #E69210, #C27300); }
.msq-tone-other { background: linear-gradient(135deg, #8A63E0, #6F44CC); }



/* The three browse rows (category, product, brand) share one card: a picture / logo / icon box, the name, a count */
.msq-hb-grid-uniform { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 1rem; }
.msq-hb-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .85rem .85rem 1.9rem; min-height: 11.5rem; text-align: center;
  background: var(--mep-surface); border: 1px solid var(--mep-border); border-radius: var(--mep-radius-lg); color: var(--mep-text); text-decoration: none;
  transition: transform var(--mep-transition), box-shadow var(--mep-transition), border-color var(--mep-transition);
}
.msq-hb-card:hover { text-decoration: none; color: var(--mep-text); transform: translateY(-2px); box-shadow: var(--mep-shadow-md); border-color: rgba(var(--mep-primary-rgb), .45); }
.msq-hb-card:focus-visible { outline: 2px solid var(--mep-primary); outline-offset: 2px; }
.msq-hb-card:hover .msq-hb-arrow { transform: translateX(3px); }
[dir="rtl"] .msq-hb-card:hover .msq-hb-arrow { transform: scaleX(-1) translateX(3px); }
.msq-hb-media { width: 100%; height: 6rem; border-radius: .8rem; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: .2rem; }
.msq-hb-media:not(.msq-hb-media-tone) { background: var(--mep-bg-tertiary); }
.msq-hb-media img { width: 100%; height: 100%; object-fit: cover; }
.msq-hb-media-logo { background: #fff; padding: .5rem; }
.msq-hb-media-logo img { object-fit: contain; }
.msq-hb-media-tone { color: #fff; font-size: 2.4rem; }
.msq-hb-card-name { font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.msq-hb-card-count { font-size: var(--mep-fs-xs); color: var(--mep-text-secondary); }
@media (max-width: 575.98px) {
  .msq-hb-grid-uniform { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .msq-hb-card { min-height: 10rem; }
  .msq-hb-media { height: 4.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .msq-hb-card, .msq-hb-card:hover { transition: none; transform: none; }
}

/* Our Network */
.msq-net-card { background: var(--mep-surface); border: 1px solid var(--mep-border); border-radius: var(--mep-radius-lg); padding: 1rem; box-shadow: var(--mep-shadow-sm); position: sticky; top: 5.5rem; }
.msq-net-head { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .9rem; flex-wrap: wrap; }
.msq-net-head-icon { font-size: 1.7rem; color: var(--mep-primary); line-height: 1; }
.msq-net-head-text { flex: 1 1 8rem; min-width: 0; }
.msq-net-title { font-size: var(--mep-fs-xl); font-weight: 700; margin: 0; }
.msq-net-sub { margin: .1rem 0 0; font-size: var(--mep-fs-sm); color: var(--mep-text-secondary); }
.msq-net-total { font-size: var(--mep-fs-sm); color: var(--mep-text-secondary); border: 1px solid var(--mep-border); border-radius: 999px; padding: .15rem .7rem; white-space: nowrap; background: var(--mep-bg); }
.msq-net-total strong { color: var(--mep-primary); font-size: 1.1em; }
.msq-net-rows { list-style: none; margin: 0 0 .9rem; padding: 0; display: grid; gap: .6rem; }
.msq-net-row { padding: .8rem .7rem; border: 1px solid var(--mep-border-light); border-radius: var(--mep-radius); background: var(--mep-bg); }
.msq-net-row-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.msq-net-row-main { min-width: 0; }
.msq-net-row-title { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.05rem; color: var(--mep-text); }
.msq-net-row-title i { font-size: 1.4rem; color: var(--mep-primary); line-height: 1; }
.msq-net-row-subtitle { font-size: var(--mep-fs-xs); color: var(--mep-text-secondary); margin-top: .1rem; }
.msq-net-row-value { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.1; }
.msq-net-row-value i { color: var(--mep-primary); font-size: 1.05rem; }
.msq-net-row-value strong { font-size: 1.45rem; color: var(--mep-text); }
.msq-net-row-value small { font-size: .68rem; color: var(--mep-text-secondary); }
/* the five most active members: logo or initials in a circle, company name under it (two lines at most, full name on hover) */
.msq-net-chips { list-style: none; margin: .65rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .3rem; }
.msq-net-chips li { display: flex; flex-direction: column; align-items: center; gap: .25rem; min-width: 0; }
.msq-net-chip { width: 2.3rem; height: 2.3rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--mep-primary-light); color: var(--mep-primary); font-size: var(--mep-fs-xs); font-weight: 700; overflow: hidden; border: 1px solid var(--mep-border-light); }
.msq-net-chip img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.msq-net-chips small { font-size: .62rem; line-height: 1.2; color: var(--mep-text-secondary); text-align: center; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
/* the marketplace in numbers: products, categories, brands */
.msq-net-stats { list-style: none; margin: 0 0 .9rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.msq-net-stats a { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .7rem .35rem; border: 1px solid var(--mep-border-light); border-radius: var(--mep-radius); background: var(--mep-bg); color: var(--mep-text); text-decoration: none; text-align: center; height: 100%; transition: border-color var(--mep-transition), box-shadow var(--mep-transition); }
.msq-net-stats a:hover { text-decoration: none; color: var(--mep-text); border-color: rgba(var(--mep-primary-rgb), .45); box-shadow: var(--mep-shadow-sm); }
.msq-net-stats a:focus-visible { outline: 2px solid var(--mep-primary); outline-offset: 2px; }
.msq-net-stats i { font-size: 1.15rem; color: var(--mep-primary); line-height: 1; }
.msq-net-stats strong { font-size: 1.35rem; line-height: 1.1; }
.msq-net-stats span { font-size: .72rem; line-height: 1.2; color: var(--mep-text-secondary); overflow-wrap: anywhere; }
.msq-net-cta { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .8rem 1rem; border-radius: var(--mep-radius); background: linear-gradient(135deg, var(--mep-primary), var(--mep-primary-hover)); color: var(--mep-text-inverse); text-decoration: none; }
.msq-net-cta:hover { color: var(--mep-text-inverse); text-decoration: none; filter: brightness(1.06); }
.msq-net-cta strong { display: block; }
.msq-net-cta small { display: block; opacity: .9; font-size: var(--mep-fs-xs); }
.msq-net-cta i { font-size: 1.6rem; }
@media (max-width: 991.98px) { .msq-net-card { position: static; } }

/* Reasons to trust the site, one band under the browse block */
.msq-home-values { margin-top: 2.5rem; padding: 1.4rem 0; background: var(--mep-bg-secondary); border-block: 1px solid var(--mep-border); }
.msq-hv-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.1rem 1.5rem; }
.msq-hv-list li { display: flex; align-items: flex-start; gap: .8rem; }
.msq-hv-list li > i { font-size: 1.9rem; color: var(--mep-primary); line-height: 1; flex: 0 0 auto; }
.msq-hv-list strong { display: block; color: var(--mep-text); }
.msq-hv-list span { display: block; font-size: var(--mep-fs-sm); color: var(--mep-text-secondary); line-height: 1.45; }
/* Supplier "needs your attention" strip */
.msq-attention { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .6rem .9rem; margin-bottom: 1rem; border: 1px solid var(--mep-border); border-inline-start: 4px solid var(--mep-accent); border-radius: var(--mep-radius); background: var(--mep-surface); }
.msq-attention-title { font-weight: 700; color: var(--mep-text); margin-inline-end: .25rem; }
.msq-attention-item { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem; border-radius: 999px; background: var(--mep-accent-light); color: var(--mep-text); text-decoration: none; font-size: var(--mep-fs-sm); border: 1px solid rgba(var(--mep-accent-rgb), .35); }
.msq-attention-item:hover { text-decoration: none; color: var(--mep-text); border-color: var(--mep-accent); }
.msq-attention-item strong { color: var(--mep-accent); }

/* Admin quick search (Ctrl+K) */
.msq-palette-open kbd, .msq-palette-head kbd, .msq-palette-foot kbd { font-size: .68rem; padding: .1rem .35rem; border: 1px solid var(--mep-border); border-radius: .3rem; background: var(--mep-bg-tertiary); color: var(--mep-text-secondary); box-shadow: none; }
.msq-palette-dialog { max-width: 40rem; align-items: flex-start; }
.msq-palette-dialog .modal-content { border-radius: var(--mep-radius-lg); overflow: hidden; background: var(--mep-surface); }
.msq-palette-head { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid var(--mep-border); }
.msq-palette-head > i { font-size: 1.1rem; color: var(--mep-text-secondary); }
.msq-palette-head input { flex: 1 1 auto; border: 0; outline: 0; background: transparent; color: var(--mep-text); font-size: 1rem; min-width: 0; }
.msq-palette-list { max-height: 55vh; overflow-y: auto; padding: .35rem; }
.msq-palette-group { display: flex; align-items: center; gap: .45rem; padding: .55rem .65rem .25rem; font-size: var(--mep-fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mep-text-secondary); }
.msq-palette-item { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .55rem .65rem; border-radius: var(--mep-radius); color: var(--mep-text); text-decoration: none; }
.msq-palette-item:hover { text-decoration: none; color: var(--mep-text); }
.msq-palette-item.is-active { background: var(--mep-primary-light); color: var(--mep-text); outline: 1px solid rgba(var(--mep-primary-rgb), .35); }
.msq-palette-title { font-weight: 600; overflow-wrap: anywhere; }
.msq-palette-sub { font-size: var(--mep-fs-xs); color: var(--mep-text-secondary); text-align: end; overflow-wrap: anywhere; }
.msq-palette-empty { padding: 1.25rem; text-align: center; color: var(--mep-text-secondary); }
.msq-palette-foot { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding: .55rem 1rem; border-top: 1px solid var(--mep-border); font-size: var(--mep-fs-xs); color: var(--mep-text-secondary); background: var(--mep-bg); }

/* Tutorials page: a grid of video cards, grouped by who the video is for */
.msq-tut-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.msq-tut-filter .btn { display: inline-flex; align-items: center; gap: .4rem; }
.msq-tut-group { margin-bottom: 2rem; }
.msq-tut-group[hidden] { display: none; }
.msq-tut-group-title { display: flex; align-items: center; gap: .6rem; font-size: var(--mep-fs-xl); font-weight: 700; margin: 0 0 .9rem; }
.msq-tut-group-title i { color: var(--mep-primary); }
.msq-tut-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.msq-tut-card { background: var(--mep-surface); border: 1px solid var(--mep-border); border-radius: var(--mep-radius-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--mep-shadow-sm); }
.msq-tut-video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #0F1720; }
.msq-tut-body { padding: .85rem 1rem 1rem; }
.msq-tut-title { font-size: var(--mep-fs-lg); font-weight: 700; margin: 0 0 .35rem; display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; line-height: 1.3; }
.msq-tut-time { flex: 0 0 auto; font-size: var(--mep-fs-xs); font-weight: 600; color: var(--mep-text-secondary); white-space: nowrap; padding-top: .15rem; }
.msq-tut-desc { margin: 0; color: var(--mep-text-secondary); font-size: var(--mep-fs-sm); line-height: 1.55; }
.msq-tut-card:target { outline: 3px solid rgba(var(--mep-primary-rgb), .45); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .msq-hb-arrow { transition: none; }
}