/* TMS Cards shared stylesheet v1. Written and served by the WPCode
   snippet TMS Card Components; loads ONLY on pages that render cards. */

/* =========================================================
   RANKINGS STRIP + POPOVER
   A bare tier-coloured Overall bar under the metrics row is
   the tap target; it opens an in-card panel with all five
   ranking dimensions as named bars, no numbers. Fills reuse
   the Best Overall card's tier gradients.
   ========================================================= */
.breakdance .miner-card__ranks-toggle,
.miner-card__ranks-toggle {
  position: relative !important;
  z-index: 5 !important;
  display: block !important;
  width: calc(100% - 28px) !important;
  margin: 0 14px 12px !important;
  padding: 2px 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px !important;
  cursor: pointer !important;
}

/* Invisible expanded hit area: the strip stays visually slim but the tap
   target spans 24px+ (WCAG 2.5.8). */
.breakdance .miner-card__ranks-toggle::after,
.miner-card__ranks-toggle::after {
  content: "" !important;
  position: absolute !important;
  inset: -8px 0 -4px !important;
}

.breakdance .miner-card__ranks-toggle:focus-visible,
.miner-card__ranks-toggle:focus-visible {
  outline: 3px solid #d97200 !important;
  outline-offset: 3px !important;
}

.breakdance .miner-card__rankbar,
.miner-card__rankbar {
  display: block !important;
  overflow: hidden !important;
  background: rgba(21, 25, 35, 0.12) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 2px rgba(21, 25, 35, 0.16) !important;
}

.breakdance .miner-card__rankbar--strip,
.miner-card__rankbar--strip {
  width: 100% !important;
  height: 8px !important;
  position: relative !important;
  overflow: visible !important;
}

.breakdance .miner-card__ranks-toggle:hover .miner-card__rankbar--strip,
.miner-card__ranks-toggle:hover .miner-card__rankbar--strip {
  background: rgba(21, 25, 35, 0.2) !important;
}

.breakdance .miner-card__rankbar-fill,
.miner-card__rankbar-fill {
  display: block !important;
  height: 100% !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

.breakdance .miner-card__ranks-toggle:hover .miner-card__rankbar-fill,
.miner-card__ranks-toggle:hover .miner-card__rankbar-fill,
.breakdance .miner-card__ranks-toggle:focus-visible .miner-card__rankbar-fill,
.miner-card__ranks-toggle:focus-visible .miner-card__rankbar-fill {
  filter: brightness(1.07) !important;
}

.breakdance .miner-card__rankbar-fill--hi,
.miner-card__rankbar-fill--hi   { background: linear-gradient(90deg, #178a43, #1fae52) !important; }

.breakdance .miner-card__rankbar-fill--good,
.miner-card__rankbar-fill--good { background: linear-gradient(90deg, #5f8f1c, #7cab26) !important; }

.breakdance .miner-card__rankbar-fill--mid,
.miner-card__rankbar-fill--mid  { background: linear-gradient(90deg, #b97b00, #d99312) !important; }

.breakdance .miner-card__rankbar-fill--low,
.miner-card__rankbar-fill--low  { background: linear-gradient(90deg, #c25e10, #e07016) !important; }

.breakdance .miner-card__ranks-panel,
.miner-card__ranks-panel {
  position: absolute !important;
  z-index: auto !important;
  top: 10px !important;
  right: 14px !important;
  left: 14px !important;
  width: auto !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 14px !important;
  padding: 10px 16px 10px !important;
  background:
    radial-gradient(circle at 84% -8%, rgba(255, 153, 0, 0.12), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, #f2f3f5 100%) !important;
  border: 1px solid rgba(239, 147, 36, 0.4) !important;
  border-radius: 0 0 14px 14px !important;
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.3) !important;
}

.breakdance .miner-card__ranks-panel[hidden],
.miner-card__ranks-panel[hidden] {
  display: none !important;
}

.breakdance .miner-card__ranks-head,
.miner-card__ranks-head {
  grid-column: 1 / -1 !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 0 0 10px !important;
  padding: 0 0 8px !important;
  border-bottom: 1px solid rgba(21, 25, 35, 0.1) !important;
}

.breakdance .miner-card__ranks-title,
.miner-card__ranks-title {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: #151923 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}

.breakdance .miner-card__ranks-chip,
.miner-card__ranks-chip {
  display: grid !important;
  place-items: center !important;
  min-width: 34px !important;
  width: auto !important;
  height: 26px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border-radius: 9px !important;
  background: linear-gradient(180deg, #ff9900, #ff7a00) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  box-shadow: 0 6px 14px rgba(255, 153, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

.breakdance .miner-card__ranks-row,
.miner-card__ranks-row {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 0 9px !important;
  position: relative !important;
  color: inherit !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.breakdance .miner-card__ranks-row:hover .miner-card__ranks-name,
.miner-card__ranks-row:hover .miner-card__ranks-name {
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

.breakdance .miner-card__ranks-row--overall,
.miner-card__ranks-row--overall {
  grid-column: 1 / -1 !important;
  margin-top: 0 !important;
  padding-top: 9px !important;
  border-top: 1px solid rgba(21, 25, 35, 0.12) !important;
}

.breakdance .miner-card__ranks-name,
.miner-card__ranks-name {
  margin: 0 !important;
  color: #2e3748 !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

.breakdance .miner-card__ranks-row--overall .miner-card__ranks-name,
.miner-card__ranks-row--overall .miner-card__ranks-name {
  color: #9a4e00 !important;
}

.breakdance .miner-card__rankbar--panel,
.miner-card__rankbar--panel {
  flex: 1 1 auto !important;
  height: 7px !important;
}

.breakdance .miner-card__ranks-row--overall .miner-card__rankbar--panel,
.miner-card__ranks-row--overall .miner-card__rankbar--panel {
  height: 10px !important;
}

/* Stylesheet upgrades over the inline fallbacks (the couk output filter
   allows only a small inline property set, and a stale CSS layer must not
   leave the feature invisible - inline keeps it working, this polishes). */
/* The card base rule gives every direct child z-index 1, so a later sibling
   (price + CTA footer) painted after the ranks slot was covering the open
   panel. The slot rides above its siblings; the whole-card overlay (z2 in
   the CTA context) stays below the strip button (slot z8 wins). */
.breakdance .miner-card > .miner-card__ranks-slot,
.miner-card > .miner-card__ranks-slot {
  z-index: 8 !important;
}

@keyframes tms-ranks-slide {
  from { transform: translateY(-14px); opacity: 0.4; }
  to { transform: translateY(0); opacity: 1; }
}

.breakdance .miner-card__ranks-panel:not([hidden]),
.miner-card__ranks-panel:not([hidden]) {
  animation: tms-ranks-slide 200ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .breakdance .miner-card__ranks-panel:not([hidden]),
  .miner-card__ranks-panel:not([hidden]) {
    animation: none !important;
  }
}

.breakdance .miner-card__ranks-row:focus-visible,
.miner-card__ranks-row:focus-visible {
  outline: 2px solid #d97200 !important;
  outline-offset: 2px !important;
  border-radius: 6px !important;
}

.breakdance .miner-card__ranks-row[data-tip]:hover::after,
.miner-card__ranks-row[data-tip]:hover::after,
.breakdance .miner-card__ranks-row[data-tip]:focus::after,
.miner-card__ranks-row[data-tip]:focus::after {
  content: attr(data-tip) !important;
  position: absolute !important;
  left: 0 !important;
  bottom: calc(100% + 7px) !important;
  z-index: 6 !important;
  width: max-content !important;
  max-width: 210px !important;
  padding: 7px 9px !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  line-height: 1.25 !important;
  text-transform: none !important;
  white-space: pre-line !important;
  text-align: left !important;
  pointer-events: none !important;
  border: 1px solid rgba(100, 116, 139, 0.2) !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.18) !important;
}

.breakdance .miner-card__ranks-row[data-tip]:hover::before,
.miner-card__ranks-row[data-tip]:hover::before,
.breakdance .miner-card__ranks-row[data-tip]:focus::before,
.miner-card__ranks-row[data-tip]:focus::before {
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  bottom: calc(100% + 3px) !important;
  z-index: 7 !important;
  width: 8px !important;
  height: 8px !important;
  background: #ffffff !important;
  transform: rotate(45deg) !important;
  border-right: 1px solid rgba(100, 116, 139, 0.2) !important;
  border-bottom: 1px solid rgba(100, 116, 139, 0.2) !important;
  pointer-events: none !important;
}

.breakdance .miner-card__ranks-row:nth-of-type(2n)[data-tip]:hover::after,
.miner-card__ranks-row:nth-of-type(2n)[data-tip]:hover::after,
.breakdance .miner-card__ranks-row:nth-of-type(2n)[data-tip]:focus::after,
.miner-card__ranks-row:nth-of-type(2n)[data-tip]:focus::after {
  left: auto !important;
  right: 0 !important;
}

.breakdance .miner-card__ranks-row:nth-of-type(2n)[data-tip]:hover::before,
.miner-card__ranks-row:nth-of-type(2n)[data-tip]:hover::before,
.breakdance .miner-card__ranks-row:nth-of-type(2n)[data-tip]:focus::before,
.miner-card__ranks-row:nth-of-type(2n)[data-tip]:focus::before {
  left: auto !important;
  right: 12px !important;
}

.breakdance .miner-card__ranks-panel::before,
.miner-card__ranks-panel::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background-image:
    linear-gradient(180deg, rgba(21, 25, 35, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 25, 35, 0.03) 1px, transparent 1px) !important;
  background-size: 26px 26px, 26px 26px !important;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0, 0, 0, 0.35) 80%, transparent 98%) !important;
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0, 0, 0, 0.35) 80%, transparent 98%) !important;
}

.breakdance .miner-card__ranks-toprow,
.miner-card__ranks-toprow {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  margin: 0 0 3px !important;
}

.breakdance .miner-card__ranks-pct,
.miner-card__ranks-pct {
  color: #263041 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
}

.breakdance .miner-card__ranks-row--overall .miner-card__ranks-pct,
.miner-card__ranks-row--overall .miner-card__ranks-pct {
  color: #9a4e00 !important;
  font-size: 11px !important;
}

.breakdance .miner-card__ranks-toggle:hover .miner-card__rankbar--strip[data-tip]::after,
.miner-card__ranks-toggle:hover .miner-card__rankbar--strip[data-tip]::after,
.breakdance .miner-card__ranks-toggle:focus-visible .miner-card__rankbar--strip[data-tip]::after,
.miner-card__ranks-toggle:focus-visible .miner-card__rankbar--strip[data-tip]::after {
  content: attr(data-tip) !important;
  position: absolute !important;
  left: 50% !important;
  bottom: calc(100% + 9px) !important;
  transform: translateX(-50%) !important;
  z-index: 6 !important;
  width: max-content !important;
  max-width: 210px !important;
  padding: 7px 9px !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  line-height: 1.25 !important;
  text-align: left !important;
  pointer-events: none !important;
  border: 1px solid rgba(100, 116, 139, 0.2) !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.18) !important;
  overflow: visible !important;
}

.breakdance .miner-card__ranks-toggle:hover .miner-card__rankbar--strip[data-tip]::before,
.miner-card__ranks-toggle:hover .miner-card__rankbar--strip[data-tip]::before,
.breakdance .miner-card__ranks-toggle:focus-visible .miner-card__rankbar--strip[data-tip]::before,
.miner-card__ranks-toggle:focus-visible .miner-card__rankbar--strip[data-tip]::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: calc(100% + 5px) !important;
  z-index: 7 !important;
  width: 8px !important;
  height: 8px !important;
  margin-left: -4px !important;
  background: #ffffff !important;
  transform: rotate(45deg) !important;
  border-right: 1px solid rgba(100, 116, 139, 0.2) !important;
  border-bottom: 1px solid rgba(100, 116, 139, 0.2) !important;
  pointer-events: none !important;
}

.breakdance .miner-card__ranks-toggle[aria-expanded="true"] .miner-card__rankbar--strip::after,
.miner-card__ranks-toggle[aria-expanded="true"] .miner-card__rankbar--strip::after,
.breakdance .miner-card__ranks-toggle[aria-expanded="true"] .miner-card__rankbar--strip::before,
.miner-card__ranks-toggle[aria-expanded="true"] .miner-card__rankbar--strip::before {
  content: none !important;
}

.breakdance .miner-card__ranks-chip[data-tip]:hover::after,
.miner-card__ranks-chip[data-tip]:hover::after {
  content: attr(data-tip) !important;
  position: absolute !important;
  right: 0 !important;
  bottom: calc(100% + 7px) !important;
  z-index: 6 !important;
  width: max-content !important;
  max-width: 210px !important;
  padding: 7px 9px !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  line-height: 1.25 !important;
  text-align: left !important;
  text-transform: none !important;
  pointer-events: none !important;
  border: 1px solid rgba(100, 116, 139, 0.2) !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.18) !important;
}

.breakdance .miner-card__ranks-chip[data-tip]:hover::before,
.miner-card__ranks-chip[data-tip]:hover::before {
  content: "" !important;
  position: absolute !important;
  right: 12px !important;
  bottom: calc(100% + 3px) !important;
  z-index: 7 !important;
  width: 8px !important;
  height: 8px !important;
  background: #ffffff !important;
  transform: rotate(45deg) !important;
  border-right: 1px solid rgba(100, 116, 139, 0.2) !important;
  border-bottom: 1px solid rgba(100, 116, 139, 0.2) !important;
  pointer-events: none !important;
}

.breakdance .miner-card__rank-flags,
.miner-card__rank-flags {
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: calc(100% + 8px) !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  margin: 0 !important;
  pointer-events: none !important;
}

.breakdance .miner-card__rank-flag,
.miner-card__rank-flag {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  height: 22px !important;
  margin: 0 !important;
  padding: 0 9px !important;
  color: #ffffff !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 14px rgba(5, 6, 8, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  pointer-events: none !important;
}

.breakdance .miner-card__rank-flag--overall,
.miner-card__rank-flag--overall {
  background: linear-gradient(180deg, #ff9900, #ff7a00) !important;
  box-shadow: 0 6px 14px rgba(255, 153, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

.breakdance .miner-card__rank-flag--efficiency,
.miner-card__rank-flag--efficiency {
  background: linear-gradient(180deg, #178a43, #1fae52) !important;
}

.breakdance .miner-card__rank-flag--earnings,
.miner-card__rank-flag--earnings {
  background: linear-gradient(180deg, #b97b00, #d99312) !important;
}

.breakdance .miner-card__rank-flag--roi,
.miner-card__rank-flag--roi {
  background: linear-gradient(180deg, #182338, #0b1220) !important;
}

.breakdance .miner-card__rank-flag--value,
.miner-card__rank-flag--value {
  background: linear-gradient(180deg, #5f8f1c, #7cab26) !important;
}

.breakdance .miner-card__ranks-cta,
.miner-card__ranks-cta {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-height: 30px !important;
  margin: 2px 0 0 !important;
  padding: 2px 0 !important;
  color: #ff9900 !important;
  -webkit-text-fill-color: #ff9900 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.breakdance .miner-card__ranks-cta::before,
.miner-card__ranks-cta::before {
  content: "" !important;
  flex: 1 1 auto !important;
  min-width: 18px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, rgba(255, 153, 0, 0.08) 16%, rgba(255, 153, 0, 0.32) 68%, rgba(255, 153, 0, 0.6)) !important;
}

.breakdance .miner-card__ranks-cta:hover,
.miner-card__ranks-cta:hover,
.breakdance .miner-card__ranks-cta:focus-visible,
.miner-card__ranks-cta:focus-visible {
  color: #ffb84d !important;
  -webkit-text-fill-color: #ffb84d !important;
  background: transparent !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.breakdance .miner-card__ranks-cta:hover .miner-card__ranks-cta-arrow,
.miner-card__ranks-cta:hover .miner-card__ranks-cta-arrow,
.breakdance .miner-card__ranks-cta:focus-visible .miner-card__ranks-cta-arrow,
.miner-card__ranks-cta:focus-visible .miner-card__ranks-cta-arrow {
  color: #ffb84d !important;
  -webkit-text-fill-color: #ffb84d !important;
  transform: translateX(2px) !important;
}

.breakdance .miner-card__ranks-cta:focus-visible,
.miner-card__ranks-cta:focus-visible {
  outline: 2px solid #d97200 !important;
  outline-offset: 2px !important;
}

.breakdance .miner-card__ranks-cta-arrow,
.miner-card__ranks-cta-arrow {
  display: inline-block !important;
  color: #ff9900 !important;
  -webkit-text-fill-color: #ff9900 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  transform: none !important;
  transition: transform 160ms ease !important;
}

@media (prefers-reduced-motion: reduce) {
  .breakdance .miner-card__ranks-cta-arrow,
  .miner-card__ranks-cta-arrow {
    transition: none !important;
    transform: none !important;
  }
}

/* While a rankings panel is open, the owning card and its wrapper (shop grid
   cell, loop item, slider slide) rise above neighbouring cards so the panel
   always renders in front. The card also stops clipping for as long as the
   panel is open: cards without a price row are about 30px shorter, so the
   panel's last row would otherwise be sliced off at the card's rounded
   bottom edge. Everything settles back on close. */
.breakdance .miner-card:has(.miner-card__ranks-panel:not([hidden])),
.miner-card:has(.miner-card__ranks-panel:not([hidden])) {
  z-index: 30 !important;
  overflow: visible !important;
}

li.product:has(.miner-card__ranks-panel:not([hidden])),
.bde-loop-item:has(.miner-card__ranks-panel:not([hidden])),
.swiper-slide:has(.miner-card__ranks-panel:not([hidden])) {
  position: relative !important;
  z-index: 30 !important;
}

/* Constant-height pill row directly under the rankings bar. Rank pills
   when the miner earns them, the stock status pill when it does not, and
   the row keeps its height either way so every card matches. */
.miner-card__rank-flags--bar,
.breakdance .miner-card__rank-flags--bar {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  min-height: 22px !important;
  height: 22px !important;
  margin: 8px 0 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.miner-card__stock-pill--instock,
.breakdance .miner-card__stock-pill--instock { background: linear-gradient(180deg, #178a43, #1fae52) !important; }

.miner-card__stock-pill--futures,
.breakdance .miner-card__stock-pill--futures { background: linear-gradient(180deg, #182338, #0b1220) !important; }

.miner-card__stock-pill--coming,
.breakdance .miner-card__stock-pill--coming { background: linear-gradient(180deg, #b97b00, #d99312) !important; }

.miner-card__stock-pill--backorder,
.breakdance .miner-card__stock-pill--backorder { background: linear-gradient(180deg, #c25e10, #e07016) !important; }

.miner-card__stock-pill--oos,
.breakdance .miner-card__stock-pill--oos,
.miner-card__stock-pill--disc,
.breakdance .miner-card__stock-pill--disc,
.miner-card__stock-pill--other,
.breakdance .miner-card__stock-pill--other { background: linear-gradient(180deg, #263041, #151923) !important; }

/* invisible hover target sitting on the corner rank number */
.miner-card__pos-tip,
.breakdance .miner-card__pos-tip {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  width: 38px !important;
  height: 38px !important;
  z-index: 8 !important;
  display: block !important;
  background: transparent !important;
  border-radius: 10px !important;
  pointer-events: auto !important;
}

.miner-card__pos-tip[data-tip]:hover::after,
.breakdance .miner-card__pos-tip[data-tip]:hover::after {
  content: attr(data-tip) !important;
  position: absolute !important;
  left: 0 !important;
  top: calc(100% + 7px) !important;
  z-index: 9 !important;
  width: max-content !important;
  max-width: 230px !important;
  padding: 7px 9px !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  line-height: 1.25 !important;
  text-transform: none !important;
  white-space: pre-line !important;
  text-align: left !important;
  pointer-events: none !important;
  border: 1px solid rgba(100, 116, 139, 0.2) !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.18) !important;
}

.miner-card__pos-tip[data-tip]:hover::before,
.breakdance .miner-card__pos-tip[data-tip]:hover::before {
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  top: calc(100% + 3px) !important;
  z-index: 10 !important;
  width: 8px !important;
  height: 8px !important;
  background: #ffffff !important;
  transform: rotate(45deg) !important;
  border-left: 1px solid rgba(100, 116, 139, 0.2) !important;
  border-top: 1px solid rgba(100, 116, 139, 0.2) !important;
  pointer-events: none !important;
}

/* pills answer on hover: enable the pointer and the downward bubble */
.miner-card__rank-flag[data-tip],
.breakdance .miner-card__rank-flag[data-tip] {
  position: relative !important;
  pointer-events: auto !important;
}

.miner-card__rank-flag[data-tip]:hover::after,
.breakdance .miner-card__rank-flag[data-tip]:hover::after {
  content: attr(data-tip) !important;
  position: absolute !important;
  left: 0 !important;
  top: calc(100% + 7px) !important;
  z-index: 9 !important;
  width: max-content !important;
  max-width: 230px !important;
  padding: 7px 9px !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  line-height: 1.25 !important;
  text-transform: none !important;
  white-space: pre-line !important;
  text-align: left !important;
  pointer-events: none !important;
  border: 1px solid rgba(100, 116, 139, 0.2) !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.18) !important;
}

.miner-card__rank-flag[data-tip]:hover::before,
.breakdance .miner-card__rank-flag[data-tip]:hover::before {
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  top: calc(100% + 3px) !important;
  z-index: 10 !important;
  width: 8px !important;
  height: 8px !important;
  background: #ffffff !important;
  transform: rotate(45deg) !important;
  border-left: 1px solid rgba(100, 116, 139, 0.2) !important;
  border-top: 1px solid rgba(100, 116, 139, 0.2) !important;
  pointer-events: none !important;
}

/* Free Shipping ghost pill: white with the money green edge */
.miner-card__pill-ghost,
.breakdance .miner-card__pill-ghost {
  background: #ffffff !important;
  color: #197327 !important;
  border: 1px solid rgba(23, 138, 67, 0.55) !important;
  box-shadow: 0 6px 14px rgba(5, 6, 8, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

/* the Overall card's single perk pill: centred under the money pair */
.miner-card__rank-flags--perk,
.breakdance .miner-card__rank-flags--perk {
  position: static !important;
  order: 4 !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 22px !important;
  /* the media column already inserts its 16px flex gap; minus six nets
     exactly 10px between the money pair and this pill */
  margin: -6px 0 0 !important;
  pointer-events: none !important;
}

/* the Overall card's perk pill sits at the card's bottom edge and the card
   clips overflow, so its bubble opens upward and centred instead of the
   downward image-overlay default */
.miner-card__rank-flags--perk .miner-card__rank-flag[data-tip]:hover::after,
.breakdance .miner-card__rank-flags--perk .miner-card__rank-flag[data-tip]:hover::after {
  top: auto !important;
  bottom: calc(100% + 7px) !important;
  left: 0 !important;
  right: auto !important;
  transform: none !important;
}
.miner-card__rank-flags--perk .miner-card__rank-flag[data-tip]:hover::before,
.breakdance .miner-card__rank-flags--perk .miner-card__rank-flag[data-tip]:hover::before {
  top: auto !important;
  bottom: calc(100% + 3px) !important;
  left: 50% !important;
  right: auto !important;
  margin-left: -4px !important;
  border-left: none !important;
  border-top: none !important;
  border-right: 1px solid rgba(100, 116, 139, 0.2) !important;
  border-bottom: 1px solid rgba(100, 116, 139, 0.2) !important;
}

/* The Overall card's CTA stretches an invisible click overlay across the
   whole body column (its ::after, inset 0, z-index 2) so the card is
   clickable anywhere. That overlay also swallowed hover on the stat bars,
   so their tooltips never fired: the bars now sit one level above it and
   answer the pointer. The footer script forwards a click on a bar to the
   card's own link, so the card stays clickable across its full face. */
.tms-ocard__bar,
.breakdance .tms-ocard__bar {
  position: relative !important;
  z-index: 4 !important;
  cursor: pointer !important;
}

/* the perk pill lives in the Overall card's media column, which clips its own
   overflow, so its bubble is capped to the column width and wraps instead */
.miner-card__rank-flags--perk .miner-card__rank-flag[data-tip]:hover::after,
.breakdance .miner-card__rank-flags--perk .miner-card__rank-flag[data-tip]:hover::after {
  max-width: 170px !important;
}

/* The ROI row's orange position chip is a CSS counter on the row's own
   ::before, which cannot carry a tooltip, so this invisible pad sits over it
   and holds one. The row is 66px tall and clips its overflow, so the bubble
   opens to the right and centres on the chip rather than dropping below. */
.miner-card__pos-tip--roi,
.breakdance .miner-card__pos-tip--roi {
  top: 50% !important;
  left: 18px !important;
  width: 44px !important;
  height: 40px !important;
  z-index: 5 !important;
  transform: translateY(-50%) !important;
}
.miner-card__pos-tip--roi[data-tip]:hover::after,
.breakdance .miner-card__pos-tip--roi[data-tip]:hover::after {
  top: 50% !important;
  left: calc(100% + 7px) !important;
  max-width: 210px !important;
  transform: translateY(-50%) !important;
}
.miner-card__pos-tip--roi[data-tip]:hover::before,
.breakdance .miner-card__pos-tip--roi[data-tip]:hover::before {
  top: 50% !important;
  left: calc(100% + 3px) !important;
  margin-top: -4px !important;
  border-left: 1px solid rgba(100, 116, 139, 0.2) !important;
  border-top: none !important;
  border-bottom: 1px solid rgba(100, 116, 139, 0.2) !important;
}

/* the rightmost pill opens its bubble right-anchored so the card edge
   cannot clip it */
.miner-card__rank-flags:not(.miner-card__rank-flags--perk) .miner-card__rank-flag[data-tip]:last-child:hover::after,
.breakdance .miner-card__rank-flags:not(.miner-card__rank-flags--perk) .miner-card__rank-flag[data-tip]:last-child:hover::after {
  left: auto !important;
  right: 0 !important;
}
.miner-card__rank-flags:not(.miner-card__rank-flags--perk) .miner-card__rank-flag[data-tip]:last-child:hover::before,
.breakdance .miner-card__rank-flags:not(.miner-card__rank-flags--perk) .miner-card__rank-flag[data-tip]:last-child:hover::before {
  left: auto !important;
  right: 12px !important;
}

/* while the rankings panel is open it owns that zone: the bar pill row
   steps aside entirely and returns on close */
.miner-card__ranks-slot:has(.miner-card__ranks-panel:not([hidden])) .miner-card__rank-flags--bar:not(.miner-card__rank-flags--bar-top),
.breakdance .miner-card__ranks-slot:has(.miner-card__ranks-panel:not([hidden])) .miner-card__rank-flags--bar:not(.miner-card__rank-flags--bar-top) {
  visibility: hidden !important;
}

/* bar mode, swapped: the pill row sits ABOVE the strip so it flips its
   margin, and the panel opens 30px lower (22px row + 8px gap) so it still
   slides out of the bar. Pills no longer collide with the open panel, so
   the hide-while-open rule above exempts this variant. */
.miner-card__rank-flags--bar-top,
.breakdance .miner-card__rank-flags--bar-top {
  margin: 0 0 8px !important;
}
.miner-card__ranks-slot .miner-card__rank-flags--bar-top ~ .miner-card__ranks-panel,
.breakdance .miner-card__ranks-slot .miner-card__rank-flags--bar-top ~ .miner-card__ranks-panel {
  top: 38px !important;
}

/* a hovered pill row lifts above the strip button (toggle z5) so downward
   tooltip bubbles are never sliced by the bar. The bar-mode rows are static,
   so they hover to relative with every offset pinned to auto - identical
   layout, they only gain a stacking level. */
.miner-card__rank-flags:hover,
.breakdance .miner-card__rank-flags:hover {
  z-index: 12 !important;
}
.miner-card__rank-flags--bar.miner-card__rank-flags--bar:hover,
.breakdance .miner-card__rank-flags--bar.miner-card__rank-flags--bar:hover {
  position: relative !important;
  z-index: 12 !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
}