/* ─── Mloun Button — 18 styles (Originkit-accurate) ─────────────────────── */

.mloun-btn-wrap { display: block; }
.mloun-btn-wrap.align-left { text-align: left; }
.mloun-btn-wrap.align-center { text-align: center; }
.mloun-btn-wrap.align-right { text-align: right; }

.mloun-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 600;
  text-decoration: none !important;
  cursor: pointer;
  border: none;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  border-radius: 100px;
  box-sizing: border-box;
}

.mloun-btn__text { position: relative; z-index: 3; }

/* ═══ 01 · Water Button (canvas 水模拟 + 玻璃) ═══ */
.mloun-btn--water {
  background: transparent;
  color: var(--mb-text, #000);
  overflow: hidden;
  isolation: isolate;
  transition: color 0.25s ease;
}
.mloun-btn--water:hover { color: var(--mb-hover-text, #000); }
.mloun-btn--water .mloun-btn__glass {
  position: absolute; inset: 0; border-radius: inherit;
  background: var(--mb-tint, rgba(0,0,0,0.12));
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  z-index: 1; pointer-events: none;
}
.mloun-btn--water .mloun-btn__canvas-wrap {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  z-index: 2; pointer-events: none;
}
.mloun-btn--water .mloun-btn__canvas-wrap canvas {
  display: block; width: 100%; height: 100%;
}
.mloun-btn--water .mloun-btn__text { position: relative; z-index: 3; }

/* ═══ 02 · Magnetic Hover (弹簧磁性 + 圆形 sweep 扩散) ═══ */
.mloun-btn--magnetic-hover {
  background: var(--mb-fill, #fff);
  color: var(--mb-text, #000);
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,0.14);
  transition: box-shadow 0.3s ease, color 0.3s ease;
  will-change: transform;
}
.mloun-btn--magnetic-hover:hover {
  color: var(--mb-sweep-text, #fff);
  box-shadow: 0 16px 40px rgba(0,0,0,0.22);
}
.mloun-btn--magnetic-hover .mloun-btn__sweep {
  position: absolute; border-radius: 50%;
  background: var(--mb-sweep, #0000ff);
  transform: translate(-50%,-50%) scale(0);
  transition: transform 0.35s ease-in-out;
  pointer-events: none; z-index: 1;
}
.mloun-btn--magnetic-hover:hover .mloun-btn__sweep { transform: translate(-50%,-50%) scale(1); }

/* ═══ 03 · Liquid Carve (SVG goo mask，JS 生成) ═══ */
.mloun-btn--liquid-carve {
  background: transparent;
  color: var(--mb-text, #000);
  overflow: hidden;
  transition: color 0.25s ease;
}
.mloun-btn--liquid-carve:hover { color: var(--mb-hover-text, #FF3737); }
.mloun-btn--liquid-carve .mloun-btn__bg {
  position: absolute; inset: 0; z-index: 0;
  background: var(--mb-fill, #fff); border-radius: inherit;
}
.mloun-btn--liquid-carve svg.mloun-btn__goo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; z-index: 1; pointer-events: none;
}
.mloun-btn--liquid-carve .mloun-btn__text { position: relative; z-index: 3; }

/* ═══ 04 · Scan Grid (扫描网格 + 扫描线) ═══ */
.mloun-btn--scan-grid {
  background: var(--mb-fill, #000);
  color: var(--mb-text, #fff);
  border: 1px solid rgba(255,255,255,0.1);
  overflow: hidden;
  transition: color 0.25s ease;
}
.mloun-btn--scan-grid:hover { color: var(--mb-hover-text, #fff); }
.mloun-btn--scan-grid .mloun-btn__scan-grid {
  position: absolute; inset: -50%; z-index: 1;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 8px, var(--mb-grid, rgba(255,255,255,0.12)) 8px, var(--mb-grid, rgba(255,255,255,0.12)) 10px),
    repeating-linear-gradient(90deg, transparent, transparent 8px, var(--mb-grid, rgba(255,255,255,0.12)) 8px, var(--mb-grid, rgba(255,255,255,0.12)) 10px);
  transform: translateY(-100%); opacity: 0;
  transition: transform 0.6s ease, opacity 0.3s ease;
}
.mloun-btn--scan-grid:hover .mloun-btn__scan-grid { transform: translateY(0); opacity: 1; }
.mloun-btn--scan-grid .mloun-btn__scanline {
  position: absolute; left: 0; right: 0; height: 2px; top: -2px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--mb-scan, #FF5722), transparent);
  opacity: 0; transition: opacity 0.3s;
  animation: mbScanLine var(--scan-duration, 2.5s) linear infinite;
}
.mloun-btn--scan-grid:hover .mloun-btn__scanline { opacity: 1; }
@keyframes mbScanLine { 0% { top: -2px; } 100% { top: 100%; } }

/* ═══ 05 · Dotted Offset (偏移 + 硬阴影 + 圆角收缩) ═══ */
.mloun-btn--dotted-offset {
  background: var(--mb-fill, #000);
  color: var(--mb-text, #fff);
  border: var(--mb-border-width, 2px) dashed var(--mb-border, #fff);
  box-shadow: 0 0 0 var(--mb-shadow, #FC731C);
  transition:
    transform 0.35s cubic-bezier(0.34, 1.4, 0.5, 1),
    box-shadow 0.35s cubic-bezier(0.34, 1.4, 0.5, 1),
    border-radius 0.35s ease,
    color 0.25s ease;
}
.mloun-btn--dotted-offset:hover {
  transform: translate(calc(var(--mb-offset, 14px) * -1), calc(var(--mb-offset, 14px) * -1));
  box-shadow: var(--mb-offset, 14px) var(--mb-offset, 14px) 0 var(--mb-shadow, #FC731C);
  border-radius: var(--mb-hover-radius, 25px);
  color: var(--mb-hover-text, #FC731C);
}
.mloun-btn--dotted-offset:active {
  transform: translate(0, 0);
  box-shadow: 0 0 0 var(--mb-shadow, #FC731C);
}

/* ═══ 06 · Emoji Burst (震动 + 重力粒子) ═══ */
.mloun-btn--emoji-burst {
  background: var(--mb-fill, #fff);
  color: var(--mb-text, #111);
  overflow: visible;
  transition: color 0.25s ease, background 0.25s ease;
}
.mloun-btn--emoji-burst:hover {
  color: var(--mb-hover-text, #2563eb);
  background: var(--mb-hover-bg, rgba(37,99,235,0.08));
}
.mloun-emoji-particle {
  position: fixed; pointer-events: none; z-index: 99999;
  line-height: 1; user-select: none; will-change: transform, opacity;
}

/* ═══ 07 · Radial Reveal (鼠标进入点圆形扩散) ═══ */
.mloun-btn--radial-reveal {
  background: var(--mb-fill, #000);
  color: var(--mb-text, #fff);
  border: var(--mb-border-width, 2px) solid var(--mb-border, #008E8E);
  overflow: hidden; transition: color 0.3s ease;
}
.mloun-btn--radial-reveal::before {
  content: ''; position: absolute; z-index: 1;
  left: var(--mx, 50%); top: var(--my, 50%);
  width: 0; height: 0; border-radius: 50%;
  background: var(--mb-hover-fill, #008E8E);
  transform: translate(-50%,-50%);
  transition: width 0.45s ease, height 0.45s ease;
}
.mloun-btn--radial-reveal:hover { color: var(--mb-hover-text, #fff); }
.mloun-btn--radial-reveal:hover::before { width: 280%; padding-bottom: 280%; }

/* ═══ 08 · Prism Ring (彩虹旋转环) ═══ */
.mloun-btn--prism-ring {
  background: var(--mb-fill, #0D0D0D);
  color: var(--mb-text, #fff);
  transition: background-color 0.4s ease, color 0.3s ease;
}
.mloun-btn--prism-ring:hover {
  background: var(--mb-hover-fill, #000);
  color: var(--mb-hover-text, #EDE9FF);
}
.mloun-btn--prism-ring .mloun-btn__prism-ring {
  position: absolute; inset: calc(var(--prism-width, 3px) * -1); border-radius: inherit; z-index: -2;
  padding: var(--prism-width, 3px);
  background: conic-gradient(from 0deg, var(--prism-color-1,#ff2d55), var(--prism-color-2,#ff9500), var(--prism-color-3,#ffe600), var(--prism-color-4,#34c759), var(--prism-color-5,#32ade6), var(--prism-color-6,#5856d6), var(--prism-color-7,#af52de), var(--prism-color-1,#ff2d55));
  animation: mbSpin var(--prism-speed, 2s) linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.mloun-btn--prism-ring::after {
  content: ''; position: absolute; inset: 2px; border-radius: inherit; background: var(--mb-fill,#0D0D0D); z-index: -1;
}
@keyframes mbSpin { to { transform: rotate(360deg); } }

/* ═══ 09 · Light Glass (鼠标光源 + 描边光斑) ═══ */
.mloun-btn--light-glass {
  background: color-mix(in srgb, var(--mb-fill, #fff) 16%, transparent);
  color: var(--mb-text, #fff);
  backdrop-filter: blur(20px) saturate(180%) brightness(108%);
  -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(108%);
  overflow: visible;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  transition: color 0.25s ease;
}
.mloun-btn--light-glass:hover { color: var(--mb-hover-text, #000); }
.mloun-btn--light-glass .mloun-btn__light {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit; opacity: 0; transition: opacity 0.2s;
  background: radial-gradient(circle 140px at var(--mx,50%) var(--my,50%), var(--mb-light, rgba(255,255,255,0.45)) 0%, transparent 65%);
  mix-blend-mode: screen;
}
.mloun-btn--light-glass:hover .mloun-btn__light { opacity: 1; }
.mloun-btn--light-glass .mloun-btn__stroke {
  position: absolute; inset: calc(var(--mb-stroke, 6px) * -1);
  border-radius: calc(100px + var(--mb-stroke, 6px));
  padding: var(--mb-stroke, 6px);
  background: conic-gradient(from calc(var(--la, 0deg) - 30deg), transparent 0deg, var(--mb-light, rgba(255,255,255,0.45)) 30deg, transparent 60deg);
  opacity: var(--stroke-opacity, 0);
  mix-blend-mode: screen; pointer-events: none; z-index: 2;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* ═══ 10 · Link Preview (悬停浮现预览图) ═══ */
.mloun-btn--link-preview {
  background: var(--mb-bg, transparent);
  color: var(--mb-text, #111);
  text-decoration: underline !important;
  text-decoration-color: var(--mb-underline, rgba(17,17,17,0.35)) !important;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1.5px;
  overflow: visible;
  transition: color 0.25s ease, background 0.25s ease;
}
.mloun-btn--link-preview:hover {
  color: var(--mb-hover-text, #2563eb);
  background: var(--mb-hover-bg, rgba(37,99,235,0.08));
}
.mloun-btn--link-preview .mloun-btn__preview {
  position: absolute; left: 50%; bottom: calc(100% + 14px);
  transform: translateX(-50%) translateY(14px) scale(0.92);
  border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.3);
  border: 1px solid rgba(0,0,0,0.06);
  opacity: 0; pointer-events: none; z-index: 10;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.2, 1.2, 0.4, 1);
}
.mloun-btn--link-preview .mloun-btn__preview img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.mloun-btn--link-preview:hover .mloun-btn__preview {
  opacity: 1; transform: translateX(-50%) translateY(0) scale(1);
}

/* ═══ 11 · Neon Glow (霓虹发光 + 旋转光环) ═══ */
.mloun-btn--neon-glow {
  background: transparent;
  color: var(--mb-text, #fff);
  border: 1px solid color-mix(in srgb, var(--mb-glow, #00FFEE) 60%, transparent);
  box-shadow: 0 0 0 transparent;
  overflow: visible;
  transition: color 0.4s ease, transform 0.12s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.mloun-btn--neon-glow:hover {
  color: var(--mb-hover-text, #00FFEE);
  border-color: var(--mb-glow, #00FFEE);
  box-shadow:
    0 0 8px  color-mix(in srgb, var(--mb-glow, #00FFEE) 60%, transparent),
    0 0 18px var(--mb-glow, #00FFEE),
    0 0 40px color-mix(in srgb, var(--mb-glow, #00FFEE) 40%, transparent);
}
.mloun-btn--neon-glow:active { transform: scale(0.97); }

.mloun-btn--neon-glow .mloun-btn__bg {
  position: absolute; inset: 0; z-index: 0;
  background: var(--mb-fill, #010201); border-radius: inherit;
  transition: background-color 0.4s ease;
}
.mloun-btn--neon-glow:hover .mloun-btn__bg { background: var(--mb-hover-fill, #120A1F); }

.mloun-btn--neon-glow .mloun-btn__text { position: relative; z-index: 3; }

.mloun-btn--neon-glow .mloun-btn__ring-simple {
  position: absolute; top: -5px; right: -5px; bottom: -5px; left: -5px;
  border-radius: inherit; pointer-events: none; z-index: -1;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    var(--mb-glow, #00FFEE) 20deg,
    transparent 60deg,
    transparent 180deg,
    var(--mb-glow, #00FFEE) 200deg,
    transparent 300deg
  );
  filter: blur(5px);
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: mbNeonSpin 3.5s linear infinite;
}
.mloun-btn--neon-glow:hover .mloun-btn__ring-simple { opacity: 1; }

@keyframes mbNeonSpin { to { transform: rotate(360deg); } }

/* ═══ 12 · Moving Gradient (旋转 conic 边框) ═══ */
.mloun-btn--moving-gradient {
  background: var(--mb-fill, #000);
  color: var(--mb-text, #fff);
  overflow: visible;
}
.mloun-btn--moving-gradient .mloun-btn__band {
  position: absolute; inset: -6px; border-radius: inherit;
  padding: 6px; z-index: -1; pointer-events: none; overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.mloun-btn--moving-gradient .mloun-btn__band::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 300%; aspect-ratio: 1;
  background: repeating-conic-gradient(from 0deg,
    transparent 0deg, transparent 135deg,
    var(--mb-stroke-c,#3600FF) 160deg,
    var(--mb-head-c,#00FF94) 180deg);
  animation: mbSpin var(--band-speed, 2s) linear infinite;
}

/* ═══ 13 · Slide Fill (方向滑入填充 + 波浪) ═══ */
.mloun-btn--slide-fill {
  background: var(--mb-fill, #D9DADB);
  color: var(--mb-text, #000);
  overflow: hidden; transition: color 0.3s ease;
}
.mloun-btn--slide-fill:hover { color: var(--mb-hover-text, #fff); }
.mloun-btn--slide-fill .mloun-btn__fill {
  position: absolute; inset: 0; z-index: 1;
  background: var(--mb-hover-fill, #0E87CC);
  transform: var(--fill-pos, translateX(-100%));
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
.mloun-btn--slide-fill:hover .mloun-btn__fill { transform: translate(0,0); }
.mloun-btn--slide-fill .mloun-btn__fill svg {
  position: absolute; width: 200%; height: 100%;
  animation: mbWaveX var(--wave-duration, 2s) linear infinite;
}
.mloun-btn--slide-fill[data-direction="up"] .mloun-btn__fill,
.mloun-btn--slide-fill[data-direction="down"] .mloun-btn__fill { transform: var(--fill-pos, translateY(100%)); }
.mloun-btn--slide-fill[data-direction="up"] .mloun-btn__fill svg,
.mloun-btn--slide-fill[data-direction="down"] .mloun-btn__fill svg { animation-name: mbWaveY; height: 200%; width: 100%; }
.mloun-btn--slide-fill .mloun-btn__text { z-index: 2; }
@keyframes mbWaveX { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes mbWaveY { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }

/* ═══ 14 · Orbit Border (彗星轨道边框) ═══ */
.mloun-btn--orbit-border {
  background: transparent;
  color: var(--mb-text, #fff);
  overflow: visible;
  transition: color 0.3s ease;
}
.mloun-btn--orbit-border:hover { color: var(--mb-hover-text, #fff); }
.mloun-btn--orbit-border .mloun-btn__track {
  position: absolute; inset: 0; border-radius: inherit;
  background: var(--mb-fill, #000); z-index: 0;
}
.mloun-btn--orbit-border .mloun-btn__orbit {
  position: absolute; inset: -1px; border-radius: inherit; z-index: -1;
  padding: 1px;
  background: var(--mb-fill, #000);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  overflow: hidden;
}
.mloun-btn--orbit-border .mloun-btn__orbit::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: var(--orbit-side, 150%); aspect-ratio: 1;
  margin: -75% 0 0 -75%;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    transparent calc(360deg - var(--comet-arc, 108deg)),
    var(--mb-stroke, #FC731C) calc(360deg - var(--comet-solid, 48deg)),
    var(--mb-stroke, #FC731C) 360deg
  );
  filter: blur(4px);
  animation: mbOrbitSpin var(--orbit-duration, 3s) linear infinite;
}
.mloun-btn--orbit-border[data-direction="cw"] .mloun-btn__orbit::before { animation-direction: reverse; }
.mloun-btn--orbit-border .mloun-btn__text { z-index: 2; }
@keyframes mbOrbitSpin { to { transform: rotate(360deg); } }

/* ═══ 15 · Arrow Reveal (箭头徽章展开) ═══ */
.mloun-btn--arrow-reveal {
  background: var(--mb-fill, #fff);
  color: var(--mb-text, #000);
  justify-content: space-between;
  gap: var(--mb-gap, 32px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.16);
  overflow: hidden;
  transition: color 0.35s ease;
}
.mloun-btn--arrow-reveal:hover {
  color: var(--mb-hover-text, #fff);
  background: var(--mb-hover-fill, #3600FF);
}
.mloun-btn--arrow-reveal .mloun-btn__text { z-index: 2; transition: transform 0.35s ease; }
.mloun-btn--arrow-reveal:hover .mloun-btn__text { transform: translateX(8px); }
.mloun-btn--arrow-reveal .mloun-btn__badge {
  position: relative;
  width: var(--badge-size, 32px); height: var(--badge-size, 32px);
  border-radius: 50%;
  background: var(--mb-badge-bg, #3600FF);
  color: var(--mb-badge-color, #fff);
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 1; flex: 0 0 auto;
  transition: transform 0.4s cubic-bezier(0.44, 0, 0.56, 1);
}
.mloun-btn--arrow-reveal .mloun-btn__badge i { font-size: 0.55em; transition: transform 0.35s ease; }
.mloun-btn--arrow-reveal:hover .mloun-btn__badge { transform: scale(var(--badge-cover, 6)); }
.mloun-btn--arrow-reveal:hover .mloun-btn__badge i { transform: rotate(45deg); }
.mloun-btn--arrow-reveal .mloun-btn__badge img {
  width: 60%; height: 60%; object-fit: contain; position: relative; z-index: 3;
}

/* ═══ 16 · Tactile (3D 按键) ═══ */
.mloun-btn-wrap--tactile {
  display: inline-block;
  padding-top: max(0px, calc(var(--mb-base-y, 11px) * -1));
  padding-bottom: max(0px, var(--mb-base-y, 11px));
  padding-left: max(0px, calc(var(--mb-base-x, -1px) * -1));
  padding-right: max(0px, var(--mb-base-x, 1px));
}
.mloun-btn--tactile {
  background: transparent;
  padding: 0 !important;
  display: inline-flex;
}
.mloun-btn--tactile .mloun-btn__base {
  position: absolute; inset: 0;
  transform: translate(var(--mb-base-x, -1px), var(--mb-base-y, 11px));
  border-radius: inherit;
  background: var(--mb-base, #3730A3);
  z-index: 0;
}
.mloun-btn--tactile .mloun-btn__cap {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; padding: inherit;
  border-radius: inherit;
  background: var(--mb-fill, #6366F1);
  color: var(--mb-text, #fff);
  transition: transform 0.15s ease-out, background-color 0.25s ease;
}
.mloun-btn--tactile:hover .mloun-btn__cap { background: var(--mb-hover-fill, #FC731C); }
.mloun-btn--tactile:active .mloun-btn__cap,
.mloun-btn--tactile[data-pressed="1"] .mloun-btn__cap {
  transform: translate(var(--mb-base-x, -1px), var(--mb-base-y, 11px));
}

/* ═══ 17 · Cube Flip (3D 立方翻转) ═══ */
.mloun-btn--cube-flip {
  background: transparent;
  perspective: 600px;
  padding: 0 !important;
  display: inline-flex;
}
.mloun-btn--cube-flip .mloun-btn__cube {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.34, 1.4, 0.5, 1);
  display: inline-flex; align-items: center; justify-content: center;
}
.mloun-btn--cube-flip:hover .mloun-btn__cube { transform: var(--cube-turn, rotateX(90deg)); }
.mloun-btn--cube-flip .mloun-btn__face {
  position: absolute; inset: 0;
  display: inline-flex; align-items: center; justify-content: center;
  padding: inherit;
  border-radius: inherit;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  white-space: nowrap;
}
.mloun-btn--cube-flip .mloun-btn__face--front {
  position: relative;
  background: var(--mb-fill, #000);
  color: var(--mb-text, #fff);
  transform: translateZ(var(--cube-half, 25px));
}
.mloun-btn--cube-flip .mloun-btn__face--back {
  background: var(--mb-fill-2, #FC731C);
  color: var(--mb-text-2, #fff);
  transform: var(--cube-back, rotateX(-90deg) translateZ(var(--cube-half, 25px)));
}

/* ═══ 18 · Label Slide (文字滚动 + 徽章图标切换) ═══ */
.mloun-btn--label-slide {
  background: var(--mb-fill, #fff);
  color: var(--mb-text, #000);
  gap: var(--mb-gap, 16px);
  overflow: hidden;
  transition: background-color 0.35s ease, color 0.35s ease;
}
.mloun-btn--label-slide:hover {
  background: var(--mb-hover-fill, #FC731C);
  color: var(--mb-hover-text, #fff);
}
.mloun-btn--label-slide .mloun-btn__label-track {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
}
.mloun-btn--label-slide .mloun-btn__label {
  display: block;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.mloun-btn--label-slide .mloun-btn__label--hover {
  position: absolute; inset: 0;
  transform: translateY(100%);
}
.mloun-btn--label-slide:hover .mloun-btn__label--rest { transform: translateY(-100%); }
.mloun-btn--label-slide:hover .mloun-btn__label--hover { transform: translateY(0); }
.mloun-btn--label-slide .mloun-btn__badge {
  position: relative;
  width: var(--badge-size, 40px); height: var(--badge-size, 40px);
  border-radius: 50%;
  background: var(--mb-badge-bg, #222);
  color: var(--mb-badge-color, #fff);
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
  transition: background-color 0.35s ease, color 0.35s ease;
}
.mloun-btn--label-slide:hover .mloun-btn__badge {
  background: var(--mb-badge-hover-bg, #fff);
  color: var(--mb-badge-hover-color, #000);
}
.mloun-btn--label-slide .mloun-btn__badge i { font-size: 0.65em; }
.mloun-btn--label-slide .mloun-btn__badge img { width: 60%; height: 60%; object-fit: contain; }