/* ===== Hero background slideshow (4 slides, 24s cycle) ===== */
.mb2b-hero-slides{position:absolute;inset:0;z-index:0}
.mb2b-hero-slide{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  animation:mb2b-hero-fade 24s linear infinite;
  will-change:opacity,transform;
  transform:scale(1.05);
}
.mb2b-hero-slide:nth-child(1){animation-delay:0s}
.mb2b-hero-slide:nth-child(2){animation-delay:6s}
.mb2b-hero-slide:nth-child(3){animation-delay:12s}
.mb2b-hero-slide:nth-child(4){animation-delay:18s}

@keyframes mb2b-hero-fade{
  /* Each slide is visible for 25% of the cycle (6s of 24s), with 1s cross-fade. */
  0%   {opacity:0; transform:scale(1.08)}
  4%   {opacity:1; transform:scale(1.05)}
  25%  {opacity:1; transform:scale(1.00)}
  29%  {opacity:0; transform:scale(1.00)}
  100% {opacity:0; transform:scale(1.00)}
}

/* Slide indicator dots */
.mb2b-hero-dot{
  width:40px;height:3px;
  background:rgba(255,255,255,.3);
  display:inline-block;
  position:relative;
  overflow:hidden;
}
.mb2b-hero-dot::after{
  content:"";
  position:absolute;inset:0;
  background:#ea580c;
  transform:translateX(-100%);
  animation:mb2b-hero-dot-fill 24s linear infinite;
}
.mb2b-hero-dot:nth-child(1)::after{animation-delay:0s}
.mb2b-hero-dot:nth-child(2)::after{animation-delay:6s}
.mb2b-hero-dot:nth-child(3)::after{animation-delay:12s}
.mb2b-hero-dot:nth-child(4)::after{animation-delay:18s}
@keyframes mb2b-hero-dot-fill{
  0%   {transform:translateX(-100%)}
  25%  {transform:translateX(0)}
  29%  {transform:translateX(0)}
  30%  {transform:translateX(100%)}
  100% {transform:translateX(100%)}
}

/* ===== Pagination (archive pages) ===== */
.mb2b-pagination .page-numbers{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.mb2b-pagination .page-numbers li{list-style:none}
.mb2b-pagination a.page-numbers,
.mb2b-pagination span.page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;height:44px;padding:0 14px;
  border:1px solid #e5e7eb;background:#fff;color:#0f172a;
  text-transform:uppercase;letter-spacing:.05em;font-weight:700;
  text-decoration:none;transition:all .2s ease;
}
.mb2b-pagination a.page-numbers:hover{border-color:#ea580c;color:#ea580c}
.mb2b-pagination span.page-numbers.current{background:#0f172a;color:#fff;border-color:#0f172a}

/* ===== Product card: image <-> specs flip on hover ===== */
.mb2b-product-media{position:relative}
.mb2b-product-img{transform:scale(1);transition:transform .5s ease,opacity .4s ease}
.group:hover .mb2b-product-img{opacity:0;transform:scale(1.04)}
.group:hover .mb2b-product-specs{opacity:1;pointer-events:auto}

/* Style any <table> the user pastes into the excerpt / content */
.mb2b-product-specs table{
  width:100%;
  border-collapse:collapse;
  font-family:"Work Sans","Inter",sans-serif;
}
.mb2b-product-specs thead th,
.mb2b-product-specs thead td{
  background:#0f172a;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:11px;
  padding:10px 12px;
  text-align:left;
  border:1px solid #0f172a;
}
.mb2b-product-specs tbody td{
  border:1px solid #e5e7eb;
  padding:8px 12px;
  font-size:13px;
  vertical-align:top;
}
.mb2b-product-specs tbody tr:nth-child(even) td{background:#fafafa}
.mb2b-product-specs tbody tr:hover td{background:#fff7ed}
.mb2b-product-specs b,.mb2b-product-specs strong{color:#0f172a;font-weight:700}
/* Strip stray math/LaTeX spans if content came from a doc editor */
.mb2b-product-specs .math-inline{font-family:"JetBrains Mono",monospace;font-style:italic;color:#ea580c}
.mb2b-product-specs p{margin:.4em 0}

/* ===== Primary navigation (applies to WP-generated <li>/<a>) ===== */
.mb2b-primary-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:2.5rem;align-items:center;height:100%}
.mb2b-primary-nav li{list-style:none;margin:0;padding:0}
.mb2b-primary-nav li::marker{content:""}
.mb2b-primary-nav a{
  font-family:"Inter",sans-serif;
  font-size:1.05rem;          /* ~17px — enlarged */
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:#404040;               /* neutral-700 */
  text-decoration:none;
  padding:.25rem 0;
  transition:color .2s ease, border-color .2s ease;
  border-bottom:2px solid transparent;
}
.mb2b-primary-nav a:hover,
.mb2b-primary-nav .current-menu-item > a,
.mb2b-primary-nav .current_page_item > a{
  color:#ea580c;               /* orange-600 */
  border-bottom-color:#ea580c;
}
@media (min-width:1280px){
  .mb2b-primary-nav a{font-size:1.15rem}   /* ~18.4px on large screens */
}

/* ===== Sales-network map: animated location pins ===== */
.mb2b-sales-map{position:relative}
.mb2b-pin{
  position:absolute;
  width:14px;height:14px;
  margin:-7px 0 0 -7px;
  background:#ea580c;
  border:2px solid #fff;
  border-radius:9999px;
  box-shadow:0 0 0 0 rgba(234,88,12,.7);
  animation:mb2b-pulse 2.2s ease-out infinite;
  z-index:2;
  cursor:pointer;
}
.mb2b-pin:nth-child(2){animation-delay:.3s}
.mb2b-pin:nth-child(3){animation-delay:.6s}
.mb2b-pin:nth-child(4){animation-delay:.9s}
.mb2b-pin:nth-child(5){animation-delay:1.2s}
.mb2b-pin:nth-child(6){animation-delay:1.5s}
.mb2b-pin::before{
  content:"";
  position:absolute;
  inset:-4px;
  border:1px solid rgba(234,88,12,.5);
  border-radius:9999px;
  animation:mb2b-ring 2.2s ease-out infinite;
  pointer-events:none;
}
.mb2b-pin::after{
  content:attr(data-label);
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%) translateY(4px);
  white-space:nowrap;
  background:#ea580c;
  color:#fff;
  font:600 10px/1 "Work Sans",sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:4px 8px;
  opacity:0;
  transition:opacity .2s, transform .2s;
  pointer-events:none;
}
.mb2b-pin:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}
@keyframes mb2b-pulse{
  0%{box-shadow:0 0 0 0 rgba(234,88,12,.75)}
  70%{box-shadow:0 0 0 22px rgba(234,88,12,0)}
  100%{box-shadow:0 0 0 0 rgba(234,88,12,0)}
}
@keyframes mb2b-ring{
  0%{transform:scale(.6);opacity:.9}
  80%{transform:scale(3);opacity:0}
  100%{transform:scale(3);opacity:0}
}

/* Scroll reveal & interaction animations (non-structural, additive only) */
.mb2b-reveal{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}
.mb2b-reveal.is-visible{opacity:1;transform:none}
.mb2b-reveal[data-delay="100"]{transition-delay:.1s}
.mb2b-reveal[data-delay="200"]{transition-delay:.2s}
.mb2b-reveal[data-delay="300"]{transition-delay:.3s}
.mb2b-reveal[data-delay="400"]{transition-delay:.4s}

/* Subtle header shadow on scroll */
header.mb2b-scrolled{box-shadow:0 2px 18px rgba(0,0,0,.06)}

/* Button ripple */
.mb2b-ripple{position:relative;overflow:hidden}
.mb2b-ripple::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--x,50%) var(--y,50%),rgba(255,255,255,.35) 0%,transparent 60%);opacity:0;transition:opacity .6s}
.mb2b-ripple:active::after{opacity:1;transition:opacity 0s}

/* Image parallax zoom on hover (safe addition) */
.mb2b-imgzoom img{transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.mb2b-imgzoom:hover img{transform:scale(1.04)}

/* Count up styling placeholder */
.mb2b-count{display:inline-block}

/* Floating action button breathing */
@keyframes mb2b-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.mb2b-breathe{animation:mb2b-breathe 3.2s ease-in-out infinite}

/* Smooth anchor scrolling */
html{scroll-behavior:smooth}

/* ===== Single product: description / prose content ===== */
.mb2b-product-content{
  font-family:"Inter","Work Sans",sans-serif;
  color:#404040;
  font-size:15px;
  line-height:1.8;
}
.mb2b-product-content > *:first-child{margin-top:0}
.mb2b-product-content > *:last-child{margin-bottom:0}
.mb2b-product-content p{margin:0 0 1.1em 0}
.mb2b-product-content h1,
.mb2b-product-content h2,
.mb2b-product-content h3,
.mb2b-product-content h4{
  color:#0f172a;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;
  margin:1.8em 0 .7em 0;
  padding-left:14px;border-left:4px solid #ea580c;
}
.mb2b-product-content h2{font-size:1.25rem}
.mb2b-product-content h3{font-size:1.1rem}
.mb2b-product-content h4{font-size:1rem}
.mb2b-product-content strong,.mb2b-product-content b{color:#0f172a;font-weight:700}
.mb2b-product-content a{color:#ea580c;text-decoration:none;border-bottom:1px solid #fdba74}
.mb2b-product-content a:hover{color:#c2410c;border-bottom-color:#ea580c}
.mb2b-product-content ul,.mb2b-product-content ol{margin:0 0 1.2em 1.4em;padding:0}
.mb2b-product-content li{margin:.35em 0}
.mb2b-product-content ul li{list-style:none;position:relative;padding-left:1em}
.mb2b-product-content ul li::before{content:"";position:absolute;left:0;top:.75em;width:6px;height:6px;background:#ea580c}
.mb2b-product-content blockquote{
  margin:1.4em 0;padding:1em 1.3em;
  background:#fff7ed;border-left:4px solid #ea580c;
  color:#7c2d12;font-style:italic;
}
.mb2b-product-content pre,
.mb2b-product-content code{
  font-family:"JetBrains Mono","Consolas",monospace;
  font-size:13px;background:#0f172a;color:#f8fafc;
}
.mb2b-product-content pre{
  padding:1.2em 1.4em;margin:1.2em 0;overflow-x:auto;
  border-left:4px solid #ea580c;white-space:pre;line-height:1.6;
}
.mb2b-product-content code{padding:2px 6px;border-radius:2px}
.mb2b-product-content pre code{padding:0;background:none;color:inherit}

/* Tables inside description */
.mb2b-product-content table{
  width:100%;border-collapse:collapse;margin:1.4em 0;
  font-size:13.5px;background:#fff;
  box-shadow:0 2px 12px -4px rgba(0,0,0,.08);
}
.mb2b-product-content thead th,
.mb2b-product-content thead td{
  background:#0f172a;color:#fff;
  text-transform:uppercase;letter-spacing:.08em;
  font-size:11px;font-weight:700;
  padding:12px 14px;text-align:left;
  border:1px solid #0f172a;
}
.mb2b-product-content tbody td,
.mb2b-product-content tbody th{
  border:1px solid #e5e7eb;padding:10px 14px;
  vertical-align:top;text-align:left;
}
.mb2b-product-content tbody tr:nth-child(even) td{background:#fafafa}
.mb2b-product-content tbody tr:hover td{background:#fff7ed}

/* Heuristic: if author pasted tabular rows as plain text (多个空格对齐),
   wrap them in a mono block via <pre> in editor. This helper class can be
   added to a paragraph manually: class="mb2b-tabular"  */
.mb2b-product-content .mb2b-tabular{
  font-family:"JetBrains Mono","Consolas",monospace;
  white-space:pre;overflow-x:auto;
  background:#f8fafc;border-left:4px solid #ea580c;
  padding:1em 1.2em;font-size:13px;line-height:1.7;
  color:#0f172a;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .mb2b-reveal{opacity:1;transform:none;transition:none}
  .mb2b-breathe{animation:none}
}
