/* BetInc on BetConstruct turnkey — Web CSS, Plum night (owner, 2026-11-01).
   BC themes through RGB-triplet variables set INLINE on <html>; !important
   is what lets a stylesheet win over them. The choices are the settings page's
   (mockups/plum-settings-2026-11-01.html): logo=light reg=r chip=i menu=i sep=a
   sw=1 sc=a8998a tile=d fixes=bar.banner.small.forms. The bone site this
   replaces is tagged live-before-plum-2026-11-01. */

html {
  /* grounds */
  --b: 28, 17, 23 !important;            /* plum #1c1117 */
  --b-hover: 38, 25, 32 !important;      /* raised #261920 */
  --b-sc: 244, 238, 231 !important;      /* ink #f4eee7 */
  --header: 28, 17, 23 !important;
  --header-hover: 38, 25, 32 !important;
  --header-sc: 244, 238, 231 !important;
  --menu: 28, 17, 23 !important;
  --menu-hover: 38, 25, 32 !important;
  --menu-sc: 244, 238, 231 !important;
  --tab-navigation: 28, 17, 23 !important;
  --tab-navigation-hover: 38, 25, 32 !important;
  --tab-navigation-sc: 244, 238, 231 !important;
  --neutral: 244, 238, 231 !important;   /* BC's text ink, used with alpha */
  --neutral-sc: 28, 17, 23 !important;

  /* the action: Rose AA fill, white ink (4.7:1), the ladder DARKENS on hover */
  --hero: 230, 0, 88 !important;         /* Rose AA     #e60058 */
  --hero-hover: 200, 0, 77 !important;   /* #c8004d, white 5.9:1 */
  --hero-sc: 255, 255, 255 !important;
  --brand: 230, 0, 88 !important;
  --brand-hover: 200, 0, 77 !important;
  --brand-sc: 255, 255, 255 !important;
  --tab-navigation-new-hero: 230, 0, 88 !important;
  --tab-navigation-new-hero-hover: 200, 0, 77 !important;
  --tab-navigation-new-hero-sc: 255, 255, 255 !important;

  /* BC's action colours: the form submit (.btn.a-color), accept buttons, switches,
     checkboxes, links, progress fills. They follow Register (setting 1), as the
     form's Sign in button does on the settings page. */
  --accent: 230, 0, 88 !important;
  --accent-hover: 200, 0, 77 !important;
  --accent-sc: 255, 255, 255 !important;
  --secondary: 230, 0, 88 !important;
  --secondary-hover: 200, 0, 77 !important;
  --secondary-sc: 255, 255, 255 !important;
  --oc-1: 230, 0, 88 !important;
  --oc-1-hover: 200, 0, 77 !important;
  --oc-1-sc: 255, 255, 255 !important;
  --oc-2: 255, 92, 149 !important;       /* odds, scores, tertiary links: #ff5c95, 6.3:1 on plum */
  --oc-2-hover: 255, 122, 169 !important;
  --oc-2-sc: 28, 17, 23 !important;      /* plum ink on it as a fill (betslip pill, filled tab), 6.3:1 */
  --oc-3: 255, 107, 94 !important;       /* error on plum #ff6b5e */
  --oc-3-sc: 28, 17, 23 !important;

  /* status: lighter on plum (6.6 and 8.3:1), plum ink when used as a fill */
  --success: 76, 195, 138 !important;    /* #4cc38a */
  --success-sc: 28, 17, 23 !important;
  --error: 255, 107, 94 !important;      /* #ff6b5e */
  --error-sc: 28, 17, 23 !important;

  --border-radius: 8px !important;
  --font-family: Roboto, system-ui, sans-serif !important;
}

/* ==== PLUM NIGHT: one plum surface, as the bone site had one bone surface;
   hairlines and spacing carry the structure. The ramp on plum #1c1117:
   text #f4eee7 16.0, muted #cfc5ba 10.8, faint #b3a89c 7.9, edge #85797d 4.4,
   chip edge #6a5d63 2.9, hairline #3a3035 1.45; raised #261920 for popovers,
   fields and the bottom bar. On a dark ground depth comes from light edges, not
   shadows, so shadows are kept only where something floats. */

/* ---- links drawn in the action colour: BC colours links and text buttons with
   --hero / --oc-1, which must stay Rose AA for the white-text fills; as text on
   plum that is 3.95:1, so these take the light rose (6.3:1). Before the section
   headings, whose "+N" links keep their own colour. */
.ds-link.ds-link-color--primary, .ds-link.ds-link-color--secondary,
.ds-btn.ds-btn-appearance--text.ds-btn-variant--primary, .ds-btn.ds-btn-appearance--text.ds-btn-variant--secondary,
.sdr-inner-html-bc a, .content a, .btn.a-outline.a-color { color: #ff5c95 !important; }

/* ---- header: page-coloured, one hairline (the reference's .hdr).
   The Thread belongs under the ACTIVE tab, not across the whole header. */
.header-bc {
  background: #1c1117 !important;
  border-bottom: 1px solid #3a3035;
  position: relative;
}
/* No backdrop-filter here: it makes the header the containing block of every
   position:fixed element inside it, and BC's scroll-to-top button lives in the
   header, so it was pinned 90px above the header's bottom: half off-screen. */

/* ---- top nav: base text tabs, muted at rest, ink and bold when current with
   the Thread under it. (Burgundy text, the bone site's current tab, is 1.6:1
   on plum.) BC's .active painted a box behind the text, so its background is
   cleared outright. The product row (Casino / Games / Live casino) is then
   restyled as icon pills further down; the sub-row and the drop-down keep
   these text tabs. */
.nav-content-bc, .nav-content-menu, .header-navigation, .nav-menu {
  background: transparent !important;
  border-radius: 0 !important;
}
.nav-menu-item {
  position: relative;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #cfc5ba !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.nav-menu-item > .CMSIconSVGWrapper, .nav-menu-item > i:not(.nav-menu-sub-arrow) { display: none !important; }
.nav-menu-item::before { display: none !important; }
.nav-menu-item:hover { color: #f4eee7 !important; background: transparent !important; }
.nav-menu-item.active { color: #f4eee7 !important; font-weight: 700 !important; background: transparent !important; }
.nav-menu-item.active::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #720039 18%, #ff0062 50%, #720039 82%, transparent);
}
/* Both rows start on the logo's left edge (owner, 2026-10-29). BC centres the
   product pages' sub-row (Home / Tournaments / Jackpots) under a left-aligned
   product row; the -12px takes back the tabs' own padding so the first label,
   not its box, lines up with the logo. The sub-row is the lesser row: 14px,
   medium weight, a hairline above it so the product tabs sit on a line. */
.nav-content-bc .nav-menu { justify-content: flex-start !important; margin-left: -12px !important; }
.nav-content-bc > .header-navigation { box-shadow: inset 0 1px 0 #3a3035; }
.nav-content-bc > .header-navigation .nav-menu > li { margin: 0 !important; }   /* BC spaces its items 30px apart; the product row has none */
.nav-content-bc > .header-navigation .nav-menu-item, .nav-menu-sub .nav-menu-item { font-size: 14px !important; font-weight: 500 !important; }
.nav-content-bc > .header-navigation .nav-menu-item.active { font-weight: 700 !important; }
/* the hover drop-down under a product tab: a raised popover with a light edge.
   Off under every product tab (owner, 2026-11-01; first only under the
   current one): the product's sub-row (Home / Tournaments / Jackpots) carries
   those links once you are in it. The popover style stays for any other
   BC drop-down. */
.nav-content-menu > .header-navigation > .nav-menu > li > .nav-menu-sub { display: none !important; }
.nav-menu-sub { background: #261920 !important; border: 1px solid rgba(244, 238, 231, 0.14); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.30), 0 24px 56px rgba(0, 0, 0, 0.45); }

/* ---- product row: icon pills, one row with the logo (owner, 2026-11-01:
   mockups/desktop-menu-2026-11-01.html option C). Mobile's switcher carried
   over: the same glyphs (CSS masks keyed on the link's href, as mobile.css),
   mobile's burgundy fill on the current product, a press state, and the sub-row
   (Home / Tournaments / Jackpots) as text tabs with the Thread. BC renders the
   row's own icons; they stay hidden (above) so ours are the only ones. A link
   with no glyph of its own gets the plain ring, never a filled square. */
.nav-content-menu > .header-navigation > .nav-menu > li > .nav-menu-item {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3C/svg%3E");
  display: inline-flex !important; align-items: center; gap: 8px;
  height: 40px !important; padding: 0 14px !important; border-radius: 10px !important;
  font-size: 15px !important; font-weight: 600 !important; white-space: nowrap; color: #cfc5ba !important;
}
.nav-content-menu > .header-navigation > .nav-menu > li > .nav-menu-item[href*="/casino/slots"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M12 3C9.5 6.5 5 8.5 5 12.5A4 4 0 0 0 11 16l-1 5h4l-1-5a4 4 0 0 0 6-3.5C18.9 8.5 14.5 6.5 12 3z'/%3E%3C/svg%3E"); }
.nav-content-menu > .header-navigation > .nav-menu > li > .nav-menu-item[href*="/games"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='3' y='8' width='18' height='9' rx='4.2'/%3E%3Cpath d='M8 12.5h2.4M9.2 11.3v2.4M15.4 11.6h.01M17.2 13.3h.01'/%3E%3C/svg%3E"); }
.nav-content-menu > .header-navigation > .nav-menu > li > .nav-menu-item[href*="/live-casino"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M10.5 9l4.5 3-4.5 3z'/%3E%3C/svg%3E"); }
.nav-content-menu > .header-navigation > .nav-menu > li > .nav-menu-item[href*="/promotions"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M20 12v8H4v-8M2 7.5h20V12H2zM12 7.5v12M12 7.5S10.5 3.5 7.5 3.5 4 7.5 4 7.5M12 7.5s1.5-4 4.5-4 3.5 4 3.5 4'/%3E%3C/svg%3E"); }
.nav-content-menu > .header-navigation > .nav-menu > li > .nav-menu-item[href*="/tournaments"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M8 4h8v5a4 4 0 0 1-8 0z'/%3E%3Cpath d='M8 6H5a3 3 0 0 0 3 3.5M16 6h3a3 3 0 0 1-3 3.5M12 13v3M9 20h6M10 16h4v4h-4z'/%3E%3C/svg%3E"); }
.nav-content-menu > .header-navigation > .nav-menu > li > .nav-menu-item[href*="/jackpot"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5v9M9.5 10a2.5 2 0 0 1 5 0c0 2.5-5 1.5-5 4a2.5 2 0 0 0 5 0'/%3E%3C/svg%3E"); }
.nav-content-menu > .header-navigation > .nav-menu > li > .nav-menu-item::before {
  content: "" !important; display: block !important; position: static !important;
  flex: 0 0 20px; width: 20px; height: 20px; background: currentColor !important;
  -webkit-mask: var(--ic) center / 20px 20px no-repeat; mask: var(--ic) center / 20px 20px no-repeat;
}
.nav-content-menu > .header-navigation > .nav-menu > li > .nav-menu-item:hover { background: rgba(244, 238, 231, 0.06) !important; color: #f4eee7 !important; }
.nav-content-menu > .header-navigation > .nav-menu > li > .nav-menu-item:not(.active):active { background: rgba(244, 238, 231, 0.08) !important; }
.nav-content-menu > .header-navigation > .nav-menu > li > .nav-menu-item.active {
  background: #720039 !important; color: #ffffff !important;
  box-shadow: none !important;   /* no rose edge or glow (owner, 2026-11-01): the fill alone marks it */
}
.nav-content-menu > .header-navigation > .nav-menu > li > .nav-menu-item.active::after { display: none !important; }
.nav-content-menu > .header-navigation > .nav-menu > li > .nav-menu-item:focus-visible { outline: 2px solid #f4eee7; outline-offset: 2px; }
.nav-content-menu > .header-navigation, .nav-content-menu > .header-navigation > .nav-menu { height: auto !important; min-width: 0; }
.nav-content-menu > .header-navigation > .nav-menu { gap: 4px; align-items: center; flex-wrap: nowrap; margin-left: 0 !important; }
/* Below 1280px the pills keep BC's own second row: one row needs about 1060px
   signed out (BC's desktop minimum is 1020) and more once the signed-in
   buttons replace Sign in / Register. */
.nav-content-bc, .nav-content-menu { height: auto !important; }
.nav-content-menu > .header-navigation { padding: 6px 0 8px; }
/* From 1280px: one row. The header becomes a grid and its two inner rows
   dissolve into it (display: contents), so the product row gets a real cell
   between the logo and the buttons rather than floating over them: logo |
   product row | Sign in, Register, language, clock, menu (whatever BC puts
   there, each in its own auto column). The sub-row and BC's scroll-to-top
   button span the full width below. The cell clips sideways only, so the
   drop-down still opens downwards. Measured: header 93 -> 57px on the home
   page, 94 on product pages (with the sub-row); no movement while BC's
   header animates on entering a product page. */
@media (min-width: 1280px) {
  .header-bc { display: grid !important; grid-template-columns: auto minmax(0, 1fr) repeat(6, auto); align-items: center; }
  .hdr-main-content-bc, .nav-content-bc { display: contents !important; }
  .hdr-main-content-bc > * { grid-row: 1; }
  .hdr-main-content-bc > .logo-container { grid-column: 1; flex: 0 0 auto !important; width: auto !important; height: 56px; }
  .nav-content-menu { grid-row: 1; grid-column: 2; min-width: 0; height: 56px !important; display: flex !important; align-items: center; padding: 0 16px 0 28px; overflow-x: clip; }
  .nav-content-menu > .header-navigation { padding: 0; box-shadow: none !important; }
  .nav-content-bc > .header-navigation { grid-row: 2; grid-column: 1 / -1; }
  .header-bc > .center-bottom-btn { grid-row: 3; grid-column: 1 / -1; }
}

/* ---- logo: the brand logo for dark (light lettering, rose dot), with the
   reference's home button beside the wordmark; the whole image links home, as
   BC's logo does. Desktop draws it 36px tall in BC's 56px logo row (owner
   2026-10-28). The box is 180 x 36, sized to the Plum night logo file (360x72,
   mockups/src/logo-plum-night.png); object-fit keeps any other ratio
   undistorted. The width is explicit because desktop's flex sizing resolved
   width:auto to 75px. */
.hdr-logo-bc { height: 36px !important; width: 180px !important; min-width: 180px !important; max-width: none !important; flex: 0 0 auto !important; object-fit: contain; object-position: left center; }
.logo-container .logo, a.logo { display: flex !important; align-items: center !important; width: auto !important; }

/* ---- buttons: 40px, sentence case, as ours (BC ships 28px uppercase) */
.hdr-user-bc { gap: 8px; }
.hdr-user-bc .btn {
  height: 40px !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
/* setting 1: Rose AA */
.btn.register {
  background: #e60058 !important;
  color: #ffffff !important;
  border: 1px solid #e60058 !important;
  border-radius: 8px !important;
  font-weight: 600;
}
.btn.register:hover { background: #c8004d !important; border-color: #c8004d !important; }
.btn.sign-in {
  background: transparent !important;
  color: #f4eee7 !important;
  border: 1px solid #85797d !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  font-weight: 600;
}

/* ---- section headings: 19px semibold, the "+N" link in burgundy (the links
   fix is off in the chosen settings), and the separator: 1px taupe, fading at
   both ends, across the full row. BC caps .sectionTitle at 32px, so the cap goes
   before the padding is added. */
.sectionTitle {
  position: relative;
  align-items: center;
  height: auto !important;
  max-height: none !important;
  padding: 0 14px 10px !important;
  margin-bottom: 12px !important;
}
.sectionTitle::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #a8998a 18%, #a8998a 82%, transparent);
}
.sectionTitle .typography-heading, .sectionTitle .sectionTitleText {
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: #f4eee7 !important;
  height: auto !important;
}
.sectionTitle .ds-link, .sectionTitle .ds-link .link__label, .sectionTitle .link__label {
  color: #720039 !important; font-size: 13px !important; font-weight: 700 !important;
}
.sectionTitle .ds-link .link__icon { color: #720039 !important; }

/* ---- filter chips: on the page, an edge one step stronger than the hairline,
   8px corners; selected is a plain burgundy fill (the soft halo's rose edge and
   glow removed, owner 2026-11-01), a selection rather than a call to action */
.ds-chip {
  background: transparent !important;
  border: 1px solid #6a5d63 !important;
  border-radius: 8px !important;
  color: #cfc5ba !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.ds-chip--selected {
  background: #720039 !important;
  border-color: #720039 !important;   /* the fill's own colour: no rose edge, */
  color: #ffffff !important;
  box-shadow: none !important;        /* and no glow (owner, 2026-11-01) */
}
.ds-chip * { color: inherit !important; }

/* ---- game tiles: card radius, the rim light (a faint light rim, a brighter top
   edge and a soft inner shade, drawn inside the tile on its unused ::after;
   taps pass through), and the hover lift. */
.casinoGameItem, .casinoGameImageV2Holder, .casinoGameImageV2 { border-radius: 8px !important; }
.casinoGameItem {
  border: 0;
  overflow: hidden;
  transition: transform 200ms cubic-bezier(0.2, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.2, 0, 0.2, 1);
}
.casinoGameItem::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -18px 18px -14px rgba(0, 0, 0, 0.45);
}
@media (hover: hover) {
  .casinoGameItem:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.30), 0 24px 56px rgba(0, 0, 0, 0.45);
  }
}
@media (prefers-reduced-motion: reduce) {
  .casinoGameItem { transition: none; }
  .casinoGameItem:hover { transform: none; }
}

/* ---- hero, with a light hairline: the banner's dark edge ran into the page.
   NOT .product-banner-bc: overflow:hidden on those links leaves their
   lazy-loaded images at 0px and they never load. */
.slider-bc, .slider-bc .swiper { border-radius: 12px !important; overflow: hidden; }
.slider-bc .swiper { border: 1px solid rgba(244, 238, 231, 0.18); }
/* Home banner ratio, owner's choice (13/2.5, for 1300x250 artwork; 13/3 earlier
   the same day; mockups/desktop-banner-ratio-2026-11-01.html). The
   published layout writes aspect-ratio inline (211/71, from the last builder
   save; the builder derives it from the largest banner), hence !important.
   Home page only: the casino landing pages have their own ratios. */
.layout-bc.is-home-page .slider-bc .sdr-item-holder-bc { aspect-ratio: 26 / 5 !important; }

/* ---- footer: left-aligned column groups under small-caps headings, hairline
   above, as the reference's site-foot */
.footerContainerWrapper {
  background: #1c1117 !important;
  border-top: 1px solid #3a3035;
}
.footerLinkCols { justify-content: flex-start !important; gap: 20px 64px !important; padding: 0 14px; }
.footerLinkCol { margin: 0 !important; padding: 0 !important; text-align: left !important; }
.footerLinkColTitle { justify-content: flex-start !important; text-align: left !important; margin: 0 0 8px !important; }
.footerLinkColTitle .footerLinkColText {
  font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.12em; text-transform: uppercase;
}
.footerLinkColLinks { align-items: flex-start !important; gap: 7px; }
.footerLinkColEl .footerLinkColText { font-size: 13px !important; }
.footerWarningAge { color: #cfc5ba !important; border-color: #cfc5ba !important; }   /* the 18+ mark */

/* ---- faint text. BC draws secondary text as --b-sc at 40-60% alpha; each
   takes a fixed ink from the ramp instead, so it holds on every surface. */
.footerLinkColTitle .footerLinkColText { color: #cfc5ba !important; }   /* muted */
.footerLinkColEl .footerLinkColText { color: #b3a89c !important; }      /* faint */
.footerLinkColEl a:hover .footerLinkColText { color: #ff5c95 !important; }
.footerCopyrights { color: #b3a89c !important; }                        /* faint */
.infoTime, .casinoTopWinnersWidgetNoData, .sg-n-text-row-1-bc,
.form-control-title-bc { color: #cfc5ba !important; }

/* ---- form fields: a raised field with the control edge (4.4:1; a field's
   edge needs 3:1 to read as one), and a light focus ring */
.form-control-input-bc {
  background: #261920 !important;
  border: 1px solid #85797d !important;
}
.form-control-input-bc:focus-within { outline: 2px solid #f4eee7; outline-offset: 2px; }

/* ---- payments strip: absent, not empty. BetConstruct renders the PAYMENTS
   heading even with no methods configured; it returns when one is added. */
.sliderGroup:has(.horizontalSliderRow:empty) { display: none; }

/* ---- scroll-to-top: BC centres a 56px grey disc over the content. Here it is
   a 40px raised control at the bottom right, a light edge like the menus.
   BC still decides when it shows (.nav-floating-btn-hide on its holder). */
.layout-bc .nav-floating-btn {
  position: fixed !important; top: auto !important; left: auto !important; right: 24px !important; bottom: 24px !important;
  width: 40px !important; height: 40px !important; min-width: 0 !important; padding: 0 !important;
  background: rgba(37, 25, 32, 0.94) !important; color: #cfc5ba !important;
  border: 1px solid rgba(244, 238, 231, 0.14) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.30), 0 12px 32px rgba(0, 0, 0, 0.40);
}
.layout-bc .nav-floating-btn:hover { color: #ff5c95 !important; }

/* ---- the sports widget gets a frame: a hairline card with its own heading and
   separator, so it reads as a new section rather than starting cold after the
   casino rows (feedback on live, 2026-10-28). BC renders it with no title. */
.sp-new-top-matches {
  background: #1c1117 !important; border: 1px solid #3a3035; border-radius: 12px;
  margin: 24px 0 8px !important; padding-top: 12px; overflow: hidden;
}
.sp-new-top-matches::before {
  content: "Top matches"; display: block; padding: 0 14px 10px; margin-bottom: 4px;
  font-size: 19px; font-weight: 600; line-height: 1.2; color: #f4eee7;
  background: linear-gradient(90deg, transparent, #a8998a 18%, #a8998a 82%, transparent) left bottom / 100% 1px no-repeat;
}