@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");
/* ============================================================
   GlobalLinker — Color Tokens
   Base palette + semantic aliases.
   ============================================================ */
:root {
  /* ---- Brand core ---- */
  --gl-blue: #1372f6; /* Primary brand blue */
  --gl-blue-600: #0f5ed1; /* Hover/pressed blue */
  --gl-blue-700: #0c4ba6;
  --gl-blue-50: #ebf1fa; /* Tinted blue surface */
  --gl-blue-100: #dbe8fc;

  --gl-orange: #f97015; /* Accent orange — CTAs, badges, highlights */
  --gl-orange-600: #e25f08; /* Hover/pressed orange */
  --gl-orange-700: #c14f05;
  --gl-orange-50: #fcf0e8; /* Tinted orange surface */
  --gl-orange-100: #fde2d2;

  /* ---- Neutrals / ink ---- */
  --gl-navy: #021450; /* Deepest background navy (brand) */
  --gl-navy-800: #021450; /* Hero / dark surfaces */
  --gl-ink: #1e293b; /* Default text ink (headings / high-contrast body) */
  --gl-slate-700: #334155;
  --gl-slate-600: #475569; /* Secondary body text */
  --gl-slate-500: #64748b; /* Muted / captions */
  --gl-slate-400: #94a3b8;
  --gl-slate-300: #cbd5e1; /* Borders on dark */
  --gl-slate-200: #e2e8f0; /* Default card border */
  --gl-slate-100: #f1f5f9; /* Subtle fill */
  --gl-slate-50: #f8fafc; /* Page background */
  --gl-white: #ffffff;

  /* ---- Semantic status ---- */
  --gl-success: #16a34a;
  --gl-success-50: #ecfdf5;
  --gl-warning: #d97706;
  --gl-danger: #dc2626;
  --gl-danger-50: #fef2f2;
  --gl-star: #f5a623; /* Rating gold */

  /* ---- Signature gradient ---- */
  --gl-gradient-subtle: linear-gradient(135deg, #ebf1fa 0%, #fcf0e8 100%); /* @kind color */
  --gl-gradient-navy: linear-gradient(135deg, #021450 0%, #021450 100%); /* @kind color */

  /* ============================================================
     SEMANTIC ALIASES
     ============================================================ */
  /* Text */
  --text-strong: var(--gl-ink); /* Headings, high-contrast */
  --text-body: var(--gl-slate-600); /* Body copy */
  --text-muted: var(--gl-slate-500); /* Captions, meta */
  --text-accent: var(--gl-blue); /* Inline emphasis in headings */
  --text-accent-warm: var(--gl-orange);
  --text-on-dark: var(--gl-white);
  --text-on-dark-muted: var(--gl-slate-300);
  --text-link: var(--gl-blue);

  /* Surfaces */
  --surface-page: var(--gl-slate-50);
  --surface-card: var(--gl-white);
  --surface-subtle: var(--gl-slate-100);
  --surface-tint-blue: var(--gl-blue-50);
  --surface-tint-orange: var(--gl-orange-50);
  --surface-dark: var(--gl-navy);
  --surface-dark-soft: var(--gl-navy-800);

  /* Lines */
  --border-card: var(--gl-slate-200);
  --border-strong: var(--gl-slate-300);
  --border-on-dark: rgba(255, 255, 255, 0.12);

  /* Interactive */
  --action-primary: var(--gl-orange); /* Primary CTA */
  --action-primary-hover: var(--gl-orange-600);
  --action-secondary: var(--gl-blue); /* Links / secondary action */
  --action-secondary-hover: var(--gl-blue-600);
  --focus-ring: rgba(19, 114, 246, 0.4);
}

/* ============================================================
   GlobalLinker — Typography Tokens
   Plus Jakarta Sans. Geometric, corporate, high-density.
   ============================================================ */
:root {
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;

  /* ---- Weights ---- */
  --fw-regular: 400;   /* @kind font */
  --fw-medium: 500;    /* @kind font */
  --fw-semibold: 600;  /* @kind font */
  --fw-bold: 700;      /* @kind font */
  --fw-extrabold: 800; /* @kind font */

  /* ---- Type scale (compact, corporate) ---- */
  --fs-display: 48px;   /* Hero headline */
  --fs-h1: 38px;        /* Section super-heading */
  --fs-h2: 30px;        /* Section heading */
  --fs-h3: 22px;        /* Sub-heading / card title */
  --fs-h4: 18px;        /* Small heading / eyebrow-large */
  --fs-lead: 17px;      /* Lead paragraph */
  --fs-body: 15px;      /* Default body */
  --fs-sm: 13px;        /* Secondary / meta */
  --fs-xs: 12px;        /* Badges, labels */
  --fs-eyebrow: 12px;   /* Uppercase eyebrow */

  /* ---- Line heights (tight for density) ---- */
  --lh-tight: 1.1;   /* @kind font */    /* Display + headings */
  --lh-snug: 1.25;   /* @kind font */    /* Sub-headings */
  --lh-normal: 1.55; /* @kind font */    /* Body copy */

  /* ---- Tracking ---- */
  --ls-tight: -0.02em;  /* Large headings @kind font */
  --ls-normal: 0;       /* @kind font */
  --ls-eyebrow: 0.08em; /* Uppercase eyebrows @kind font */

  /* ---- Semantic roles ---- */
  --text-display-size: var(--fs-display);
  --text-display-weight: var(--fw-extrabold); /* @kind font */
  --text-heading-weight: var(--fw-bold);      /* @kind font */
  --text-eyebrow-weight: var(--fw-bold);      /* @kind font */
}

/* ============================================================
   GlobalLinker — Effects: shadows, focus, transitions
   Light, crisp elevation. No heavy/diffuse shadows.
   ============================================================ */
:root {
  /* ---- Shadows (soft, low-spread) ---- */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 12px 28px rgba(16, 24, 40, 0.10);
  --shadow-card-hover: 0 8px 24px rgba(19, 114, 246, 0.12);
  --shadow-cta: 0 6px 16px rgba(249, 112, 21, 0.28);

  /* ---- Focus ---- */
  --ring-focus: 0 0 0 3px var(--focus-ring); /* @kind shadow */

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* @kind other */
  --dur-fast: 120ms;   /* @kind other */
  --dur-base: 200ms;   /* @kind other */
  --dur-slow: 320ms;   /* @kind other */
  --transition-base: all var(--dur-base) var(--ease-standard); /* @kind other */
}

/* ============================================================
   GlobalLinker — Spacing & Layout Tokens
   COMPACT philosophy: tight real estate, no sprawling gaps.
   ============================================================ */
:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;   /* Standard section py */
  --space-16: 64px;   /* MAX hero section py */

  /* ---- Section rhythm (tight determinism) ---- */
  --section-py: 48px;        /* py-12 — standard sections */
  --section-py-hero: 64px;   /* py-16 — hero MAX */
  --section-gap: 16px;       /* gap between grid cards */

  /* ---- Container ---- */
  --container-max: 1200px;
  --container-pad: 24px;

  /* ---- Radii ---- */
  --radius-sm: 6px;
  --radius-md: 10px;    /* Default cards, inputs */
  --radius-lg: 14px;    /* Feature cards, panels */
  --radius-xl: 20px;    /* Hero panels */
  --radius-pill: 999px; /* Badges, micro-chips */

  /* ---- Border widths ---- */
  --bw-hairline: 1px;   /* Ultra-thin card borders @kind spacing */
  --bw-emphasis: 2px;   /* @kind spacing */
}


body {
  margin: 0;
  background: #f4f6f9;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, p, ul, ol {
  margin: 0;
}
*, *::before, *::after {
  box-sizing: border-box;
}
a {
  color: #1372f6;
  text-decoration: none;
}
a:hover {
  color: #0f5ed1;
}
summary {
  list-style: none;
}
summary::-webkit-details-marker {
  display: none;
}
/* Must stay scoped to the open <details>' OWN summary. As a descendant selector
   (`details[open] [data-chev]`) an open outer accordion also rotates the chevrons
   of every nested <details> inside it — e.g. all the FAQ questions point up. */
details[open] > summary [data-chev] {
  transform: rotate(180deg);
}
@keyframes glModalIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes glFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes glStepIn {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

  height: 6px;
  width: 6px;
}
[data-scroll]::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 99px;
}
[data-scroll]::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 99px;
}
@media (min-width: 900px) {
  [data-r="search"] {
    order: 1 !important;
    flex: 1 1 300px !important;
    width: auto !important;
    max-width: 700px !important;
  }
  [data-r="logo"] {
    height: 22px !important;
  }
  [data-r="langlabel"] {
    display: inline !important;
  }
  [data-r="hero"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 28px !important;
    align-items: start !important;
  }
  [data-r="kv"] {
    grid-template-columns: 260px minmax(0, 1fr) !important;
    gap: 20px !important;
    align-items: baseline !important;
  }
  [data-r="dock-thumb"] {
    display: flex !important;
  }
  [data-r="rfqpad"] {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
  [data-r="rfqbody"] {
    padding: 20px 22px !important;
  }
  [data-r="rfqsocial"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  [data-r="sticky"] {
    position: sticky !important;
    top: 82px !important;
  }
  [data-r="grid4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
  [data-r="railwrap"] {
    position: sticky !important;
    top: 82px !important;
    align-self: start !important;
  }
  [data-r="accbody"] {
    padding: 0 24px 26px !important;
  }
  [data-r="accsum"] {
    padding: 20px 24px !important;
  }
}
@media (min-height: 760px) {
  [data-r="rfqbody"] {
    min-height: 356px;
  }
  [data-r="rfqfoot"] {
    padding: 15px 22px !important;
  }
}

.footer_tw {
  padding-bottom: 5rem !important;
}

body,
.font-sans,
.font-serif,
button,
input,
optgroup,
select,
textarea,
.prose {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
}

/* ============================================================
   Product options (variant selector)
   Rendered by product_b2b_v2.js into [data-variant-groups].
   v2 design: "Label: Selected" above a row of pill chips, shown
   inline in the buybox (no expander).
   Attribute selectors beat the utility classes the JS also sets.
   ============================================================ */
/* The collapsed "Customize" trigger. Display lives here, not inline, so the
   .hidden class the JS toggles can actually win (an inline display would beat it). */
[aria-controls="variant-accordion-body"] {
  display: flex;
}
[aria-controls="variant-accordion-body"].hidden {
  display: none;
}
[data-variant-groups] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gl-variant-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gl-variant-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--gl-slate-500);
}
.gl-variant-label strong {
  color: var(--gl-ink);
  font-weight: 800;
}
.gl-variant-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
[data-variant-option] {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--gl-slate-200);
  background: #fff;
  color: var(--gl-slate-600);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.18s;
}
[data-variant-option]:hover:not(:disabled) {
  border-color: var(--gl-slate-300);
}
[data-variant-option][aria-pressed="true"] {
  border-color: var(--gl-navy);
  background: var(--gl-navy);
  color: #fff;
  font-weight: 700;
}
[data-variant-option]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ============================================================
   Product carousels — "More from <seller>" / "More from <brand>"
   product_b2b_v2.js drives these by translating the track, so the
   wrapper clips and the track must NOT be a native scroller.
   Its scroll maths assume a 16px gap (GAP): keep them in sync.
   The arrows must live in the carousel's PARENT — the JS looks them
   up via carousel.parentElement.
   ============================================================ */
[data-carousel] {
  position: relative;
  overflow: hidden;
}
[data-carousel-track] {
  display: flex;
  gap: 16px;
  transition: transform var(--dur-slow) var(--ease-out);
  will-change: transform;
}
[data-carousel-track] > * {
  flex: 0 0 210px;
  min-width: 0;
}
.gl-carousel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--gl-slate-200);
  color: var(--gl-slate-500);
  cursor: pointer;
  transition: 0.18s;
}
.gl-carousel-btn:hover:not(:disabled) {
  border-color: var(--gl-slate-300);
  color: var(--gl-ink);
}
.gl-carousel-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
[data-gallery-lightbox-viewport]::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
[data-gallery-lightbox-viewport]::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}
[data-gallery-lightbox-viewport]::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}
[data-gallery-lightbox-viewport]::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}
[data-gallery-lightbox-viewport] {
  scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
  scrollbar-width: thin;
}
.error_msg,
.success_msg {
  position: fixed;
  top: 0;
  z-index: 999999;
  width: 100%;
  padding: 13px;
  font-size: 14px;
  margin-bottom: 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-30%);
  transition: all 0.3s ease 0s;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60px;
}
.success_msg {
  background-color: #d4edda !important;
  color: #155724;
}
.error_msg {
  background-color: #f8d7da !important;
  color: #4d080f;
}
.error_msg.animate,
.success_msg.animate {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/* The Tailwind Play CDN script (cdn.tailwindcss.com) below injects its
         own stylesheet after this page loads, on top of bootstrap_bs5.min.css.
         That strips Bootstrap's floating/positioned look off .tooltip (it
         renders as plain in-flow text instead of an absolutely-positioned,
         dark pill) since nothing here re-asserts it afterward. Force the
         properties Bootstrap's JS-generated tooltip markup depends on. */
.tooltip {
  position: absolute !important;
  z-index: 1080 !important;
  display: block !important;
  margin: 0 !important;
  font-size: 13px !important;
}
.tooltip .tooltip-inner {
  background-color: #212529 !important;
  color: #fff !important;
  padding: 3px 7px !important;
  border-radius: 5px !important;
  max-width: 160px !important;
  font-size: 13px !important;
  text-align: center !important;
}
/* Tailwind's reset zeroes border-width globally, which is also what
         shapes the arrow's triangle (asymmetric border-widths) - restoring
         only the color (as before) left it invisible. Sized down to match
         the smaller tooltip-inner above. data-bs-placement="top" is only a
         preference - Popper flips it to bottom-placement when there isn't
         room above (e.g. the "my account" icon sits right in the top
         navbar), so both directions are covered instead of just one. */
.tooltip .tooltip-arrow {
  position: absolute !important;
  display: block !important;
  width: 0.6rem !important;
  height: 0.3rem !important;
}
.tooltip .tooltip-arrow::before {
  position: absolute !important;
  content: "" !important;
  border-style: solid !important;
}
.bs-tooltip-top .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow {
  bottom: -0.3rem !important;
}
.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
  top: -1px !important;
  border-width: 0.3rem 0.3rem 0 !important;
  border-color: #212529 transparent transparent !important;
}
.bs-tooltip-bottom .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow {
  top: -0.3rem !important;
}
.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
  bottom: -1px !important;
  border-width: 0 0.3rem 0.3rem !important;
  border-color: transparent transparent #212529 !important;
}

.text-background { background-color: #21242c; }