/* The sticky rule applies only to the page-level B88 banner, never section headers. */
body>header{position:sticky;top:0;z-index:100;height:96px!important;padding:0 0 0 2.4vw!important;display:flex;align-items:center;background:#050505!important;border-bottom:1px solid #2a2a2a;box-shadow:0 8px 22px rgba(0,0,0,.23);backdrop-filter:blur(12px)}
body>header .logo img,body>header>a:first-child img{width:112px!important}
/* Brand-colour treatment keeps every footer social icon aligned and recognisable. */
footer .b88-footer-social nav,footer .home-footer-social nav{align-items:center}footer .b88-footer-social a,footer .home-footer-social a{overflow:hidden}footer .b88-footer-social a:nth-child(1),footer .home-footer-social a:nth-child(1){border-color:#1877f2!important;background:#1877f21c!important;color:#1877f2!important}footer .b88-footer-social a:nth-child(2),footer .home-footer-social a:nth-child(2){border-color:#e1306c!important;background:linear-gradient(135deg,#f9ce34,#ee2a7b 55%,#6228d7)!important;color:#fff!important}footer .b88-footer-social a:nth-child(3),footer .home-footer-social a:nth-child(3){border-color:#ff0000!important;background:#ff00001c!important;color:#ff0000!important}footer .b88-footer-social a:nth-child(2) svg,footer .home-footer-social a:nth-child(2) svg{fill:none!important;stroke:currentColor!important}footer .b88-footer-social svg,footer .home-footer-social svg{display:block}
footer .b88-footer-social,footer .home-footer-social{text-align:center}footer .b88-footer-social{align-items:center!important;flex-direction:column;gap:0!important}footer .b88-footer-social b,footer .home-footer-social>b{display:block;text-align:center}footer .b88-footer-social nav,footer .home-footer-social nav{justify-content:center;margin-top:12px!important}
@media(max-width:760px){footer.b88-site-footer{flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:18px!important;padding:22px 24px!important}footer.b88-site-footer .b88-footer-logo{flex:0 0 auto}footer.b88-site-footer .b88-footer-logo img{width:92px!important;height:52px!important}footer.b88-site-footer .b88-footer-social{flex:0 1 auto;align-self:auto!important;gap:0!important}footer.b88-site-footer .b88-footer-social b{font-size:.78rem!important}footer.b88-site-footer .b88-footer-social nav{gap:8px!important;margin-top:9px!important}footer.b88-site-footer .b88-footer-social a{width:34px!important;height:34px!important}}
body>header .logo img[src$="b88-sports-logo-hd.jpg"],body>header>a:first-child img[src$="b88-sports-logo-hd.jpg"],.topbar .shell.nav .logo img[src$="b88-sports-logo-hd.jpg"]{height:64px!important;object-fit:cover;object-position:center 52%}
body>header>nav{position:absolute;left:50%;display:flex;align-items:center;gap:44px!important;margin:0!important;transform:translateX(-50%)}
body>header nav a{font:700 18px "Barlow Condensed",Impact,sans-serif!important;letter-spacing:.02em;text-transform:uppercase}
body>header>nav a[href*="#badminton-news"]::after{content:"⌄";display:inline-block;margin-left:12px;font:700 1rem/1 "DM Sans";transform:translateY(-1px)}
body>header nav .header-social{display:none!important}
body>header>.header-social{display:flex;align-items:center;gap:11px;margin-left:auto;margin-right:18px}
body>header>.header-social a{display:grid;place-items:center;width:42px;height:42px;border:1px solid #404040;border-radius:4px;transition:transform .18s ease,filter .18s ease}
body>header>.header-social a:hover{transform:translateY(-2px);filter:brightness(1.12)}
body>header>.header-social a:nth-child(1){color:#1877f2;border-color:#1877f2;background:#1877f218}
body>header>.header-social a:nth-child(2){color:#ff0000;border-color:#ff0000;background:#ff000018}
body>header>.header-social a:nth-child(3){color:#fff;border-color:transparent;background:linear-gradient(135deg,#f9ce34,#ee2a7b 55%,#6228d7)}
body>header>.header-social svg{width:19px;height:19px;fill:currentColor;stroke:none}
body>header>.header-social a:last-child svg{fill:none;stroke:currentColor;stroke-width:2}
body>header>.subscribe,body>header>.shop{position:static!important;right:auto!important;margin-left:0!important;min-width:196px;min-height:74px;padding:15px 22px!important;background:#fae12c!important;color:#080808!important;font:800 18px "Barlow Condensed",Impact,sans-serif!important;letter-spacing:.03em;text-transform:uppercase}
.topbar .shell.nav{width:100%;max-width:none;height:100%;margin:0;display:flex;align-items:center}.topbar .shell.nav>.header-social{display:flex;align-items:center;gap:11px;margin-left:auto;margin-right:15px}.topbar .shell.nav>.header-social a{display:grid;place-items:center;width:42px;height:42px;border:1px solid #404040;border-radius:4px;transition:transform .18s ease,filter .18s ease}.topbar .shell.nav>.header-social a:hover{transform:translateY(-2px);filter:brightness(1.12)}.topbar .shell.nav>.header-social a:nth-child(1){color:#1877f2;border-color:#1877f2;background:#1877f218}.topbar .shell.nav>.header-social a:nth-child(2){color:#ff0000;border-color:#ff0000;background:#ff000018}.topbar .shell.nav>.header-social a:nth-child(3){color:#fff;border-color:transparent;background:linear-gradient(135deg,#f9ce34,#ee2a7b 55%,#6228d7)}.topbar .shell.nav>.header-social svg{width:19px;height:19px}.topbar .shell.nav>.subscribe-trigger{margin-left:0!important;min-width:196px;min-height:74px;padding:15px 22px!important;font-size:18px!important}
footer .foot-logo img[src$="b88-sports-logo-hd.jpg"],footer .logo img[src$="b88-sports-logo-hd.jpg"],footer .footer-logo img[src$="b88-sports-logo-hd.jpg"]{height:58px;object-fit:cover;object-position:center 52%}
footer.b88-site-footer{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:32px;min-height:128px;margin-top:64px!important;padding:30px max(32px,calc((100% - 1240px)/2))!important;border-top:1px solid #282828!important;background:#050505!important}footer.b88-site-footer .b88-footer-logo img{display:block;width:108px;height:60px;object-fit:cover;object-position:center 52%}footer.b88-site-footer .b88-footer-social{display:flex;align-items:center;gap:18px}footer.b88-site-footer .b88-footer-social b{color:#fff;font:800 .84rem/1 "DM Sans",sans-serif;letter-spacing:0;text-transform:none}footer.b88-site-footer .b88-footer-social nav{display:flex;gap:10px}footer.b88-site-footer .b88-footer-social a{display:grid;place-items:center;width:38px;height:38px;border:1px solid #fff;border-radius:50%;color:#fff;transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease}footer.b88-site-footer .b88-footer-social a:hover{border-color:#fae12c;background:#fae12c;color:#080808;transform:translateY(-2px)}footer.b88-site-footer .b88-footer-social svg{width:16px;height:16px;fill:currentColor;stroke:currentColor}footer.b88-site-footer .b88-footer-social .instagram svg{fill:none;stroke-width:1.9}footer.b88-site-footer .b88-footer-social a:last-child svg{display:none}footer.b88-site-footer .b88-footer-social a:last-child::before{content:"▶";font-size:.78rem;line-height:1}
@media(max-width:760px){.topbar .shell.nav>.header-social{display:none!important}.topbar .shell.nav>.subscribe-trigger{min-width:0;min-height:auto;padding:11px 13px!important;font-size:14px!important}}
@media(max-width:760px){body>header{height:68px!important;padding:0 20px!important}body>header .logo img,body>header>a:first-child img{width:76px!important}body>header .logo img[src$="b88-sports-logo-hd.jpg"],body>header>a:first-child img[src$="b88-sports-logo-hd.jpg"],.topbar .shell.nav .logo img[src$="b88-sports-logo-hd.jpg"]{height:44px!important}body>header>nav,body>header>.header-social{display:none!important}body>header>.subscribe,body>header>.shop{min-width:0;min-height:auto;padding:11px 13px!important;font-size:14px!important}footer.b88-site-footer{align-items:flex-start!important;flex-direction:column;gap:20px;min-height:0;margin-top:42px!important;padding:28px 24px!important}footer.b88-site-footer .b88-footer-social{align-items:center;align-self:center;flex-direction:column;gap:12px}}

/* Shared footer rail: every section keeps the brand and social lock-up in one zone. */
/* Subscription is intentionally unavailable until the email service is connected. */
header>.subscribe,
header>.shop,
header .subscribe-trigger{display:none!important}

footer.b88-site-footer{
  box-sizing:border-box!important;
  min-height:146px!important;
  padding:34px max(32px,calc((100% - 1240px)/2))!important;
}
footer.b88-site-footer .b88-footer-logo{
  display:grid!important;
  place-items:center!important;
  width:110px!important;
  min-width:110px!important;
}
footer.b88-site-footer .b88-footer-logo img{width:108px!important;height:60px!important}
footer.b88-site-footer .b88-footer-social{
  display:flex!important;
  flex:0 0 144px!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}
footer.b88-site-footer .b88-footer-social b{display:block!important;margin:0!important}
footer.b88-site-footer .b88-footer-social nav{margin-top:11px!important}
@media(max-width:760px){
  footer.b88-site-footer{
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
    min-height:112px!important;
    gap:20px!important;
    padding:24px!important;
  }
  footer.b88-site-footer .b88-footer-logo{width:92px!important;min-width:92px!important}
  footer.b88-site-footer .b88-footer-logo img{width:92px!important;height:52px!important}
  footer.b88-site-footer .b88-footer-social{flex:0 0 128px!important;align-self:auto!important}
  footer.b88-site-footer .b88-footer-social b{font-size:.78rem!important}
  footer.b88-site-footer .b88-footer-social nav{gap:8px!important;margin-top:9px!important}
  footer.b88-site-footer .b88-footer-social a{width:34px!important;height:34px!important}
}

/* Universal B88 masthead: one fixed desktop banner on every page type. */
body>header,
#top>header,
header.topbar{
  box-sizing:border-box!important;
  position:sticky!important;
  top:0!important;
  z-index:100!important;
  height:96px!important;
  padding:0 max(32px,2.4vw)!important;
  background:#050505!important;
  border-bottom:1px solid #2a2a2a!important;
  box-shadow:0 8px 22px rgba(0,0,0,.23)!important;
}
#top>header,
header.topbar{display:flex!important;align-items:center!important}
#top>header .logo img,
header.topbar .logo img{width:112px!important;height:64px!important;object-fit:cover!important;object-position:center 52%!important}
#top>header>nav,
.topbar .shell.nav>nav{
  position:absolute!important;
  left:50%!important;
  display:flex!important;
  align-items:center!important;
  gap:44px!important;
  margin:0!important;
  transform:translateX(-50%)!important;
}
#top>header nav>a,
#top>header .nav-trigger,
.topbar .shell.nav>nav>a,
.topbar .shell.nav>.navlinks .nav-trigger{font-size:18px!important}
#top>header nav .header-social{display:none!important}
#top>header>.header-social,
.topbar .shell.nav>.header-social{
  display:flex!important;
  align-items:center!important;
  gap:11px!important;
  margin-left:auto!important;
  margin-right:0!important;
}
#top>header>.header-social a,
.topbar .shell.nav>.header-social a{width:42px!important;height:42px!important}
@media(max-width:760px){
  body>header,
  #top>header,
  header.topbar{height:68px!important;padding:0 20px!important}
  #top>header .logo img,
  header.topbar .logo img{width:76px!important;height:44px!important}
  #top>header>nav,
  .topbar .shell.nav>nav,
  #top>header>.header-social,
  .topbar .shell.nav>.header-social{display:none!important}
}

@media(max-width:760px){
  body>header>.menu,
  #top>header>.menu{margin-left:auto!important}
}

/* Keep compact card CTAs clear and readable at every viewport. */
.b88-read,
.feature-read,
.news-read,
.month-details,
.badminton-news-actions a,
.badminton-news-meta a,
.readmore{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  min-width:max-content!important;
  white-space:nowrap!important;
}

/* Mobile social links belong inside the opened navigation, never as a floating stack. */
.mobile-follow-label{display:none}
.b88-mobile-menu{display:none!important}
@media(max-width:760px){
  body>header>.header-social,
  #top>header>.header-social,
  .topbar .shell.nav>.header-social{display:none!important}
  body>header>.b88-mobile-menu,
  .topbar .shell.nav>.b88-mobile-menu{
    display:grid!important;
    place-items:center!important;
    width:42px!important;
    height:42px!important;
    margin-left:auto!important;
    border:0!important;
    padding:0!important;
    background:transparent!important;
    color:#fff!important;
    font-size:1.6rem!important;
    cursor:pointer!important;
  }
  body>header>nav.is-mobile-open,
  .topbar .shell.nav>nav.is-mobile-open{
    position:absolute!important;
    top:68px!important;
    right:0!important;
    left:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:0!important;
    margin:0!important;
    padding:8px 20px 17px!important;
    border-bottom:1px solid #2b2b2b!important;
    background:#080808!important;
    box-shadow:0 12px 22px rgba(0,0,0,.28)!important;
    transform:none!important;
  }
  body>header>nav.is-mobile-open>a,
  body>header>nav.is-mobile-open>.nav-dropdown,
  body>header>nav.is-mobile-open>.category-dropdown,
  .topbar .shell.nav>nav.is-mobile-open>a,
  .topbar .shell.nav>nav.is-mobile-open>.nav-dropdown{width:100%!important;border-bottom:1px solid #242424!important}
  body>header>nav.is-mobile-open>a,
  .topbar .shell.nav>nav.is-mobile-open>a{padding:14px 0!important;font-size:18px!important}
  body>header>nav.is-mobile-open .header-social,
  .topbar .shell.nav>nav.is-mobile-open .header-social{
    display:flex!important;
    visibility:visible!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:center!important;
    gap:12px!important;
    width:100%!important;
    margin:0!important;
    padding:18px 0 4px!important;
  }
  body>header>nav.is-mobile-open .mobile-follow-label,
  .topbar .shell.nav>nav.is-mobile-open .mobile-follow-label{
    display:block!important;
    flex:0 0 100%!important;
    width:100%!important;
    margin-bottom:1px!important;
    color:#fff!important;
    font:800 .78rem/1 "DM Sans",sans-serif!important;
    text-align:center!important;
  }
  body>header>nav.is-mobile-open .header-social a,
  .topbar .shell.nav>nav.is-mobile-open .header-social a{
    display:grid!important;
    place-items:center!important;
    flex:0 0 38px!important;
    width:38px!important;
    height:38px!important;
    margin:0!important;
    border:1px solid #fff!important;
    border-radius:50%!important;
  }
  body>header>nav.is-mobile-open .header-social a:nth-of-type(1),
  .topbar .shell.nav>nav.is-mobile-open .header-social a:nth-of-type(1){border-color:#1877f2!important;background:#1877f21c!important;color:#1877f2!important}
  body>header>nav.is-mobile-open .header-social a:nth-of-type(2),
  .topbar .shell.nav>nav.is-mobile-open .header-social a:nth-of-type(2){border-color:#ff0000!important;background:#ff00001c!important;color:#ff0000!important}
  body>header>nav.is-mobile-open .header-social a:nth-of-type(3),
  .topbar .shell.nav>nav.is-mobile-open .header-social a:nth-of-type(3){border-color:#e1306c!important;background:linear-gradient(135deg,#f9ce34,#ee2a7b 55%,#6228d7)!important;color:#fff!important}
  body>header>nav.is-mobile-open .header-social svg,
  .topbar .shell.nav>nav.is-mobile-open .header-social svg{display:block!important;width:17px!important;height:17px!important;fill:currentColor!important;stroke:currentColor!important}
  body>header>nav.is-mobile-open .header-social a:nth-of-type(3) svg,
  .topbar .shell.nav>nav.is-mobile-open .header-social a:nth-of-type(3) svg{fill:none!important;stroke-width:1.9!important}
}

/* Social destinations stay in the footer on phones; never float over page content. */
@media(max-width:760px){
  body>header .header-social,
  .topbar .shell.nav .header-social{display:none!important}
  /* Covers legacy header markup as well as the shared social component. */
  body>header a[href*="facebook.com"],
  body>header a[href*="instagram.com"],
  body>header a[href*="youtube.com"],
  #top>header a[href*="facebook.com"],
  #top>header a[href*="instagram.com"],
  #top>header a[href*="youtube.com"],
  header.topbar a[href*="facebook.com"],
  header.topbar a[href*="instagram.com"],
  header.topbar a[href*="youtube.com"]{display:none!important}
}

/* Every footer keeps the full Follow us action row visible below its label. */
footer .home-footer-social nav,
footer .b88-footer-social nav,
footer .foot-social nav{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
}
footer .home-footer-social nav a,
footer .b88-footer-social nav a,
footer .foot-social nav a{
  display:grid!important;
  visibility:visible!important;
  place-items:center!important;
  flex:0 0 38px!important;
  width:38px!important;
  height:38px!important;
}
footer .home-footer-social nav svg,
footer .b88-footer-social nav svg,
footer .foot-social nav svg{display:block!important}
@media(max-width:760px){
  footer .home-footer-social nav,
  footer .b88-footer-social nav,
  footer .foot-social nav{margin-top:9px!important}
  footer .home-footer-social nav a,
  footer .b88-footer-social nav a,
  footer .foot-social nav a{flex-basis:34px!important;width:34px!important;height:34px!important}
}

/* Legacy page shells switch to their mobile menu before 760px; hide their header socials too. */
@media(max-width:900px){
  header .header-social{display:none!important}
}

/* Give every non-home footer enough room for the labelled social row on mobile/tablet. */
@media(max-width:900px){
  footer.b88-site-footer{
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
    min-height:122px!important;
    gap:18px!important;
    padding:24px!important;
    overflow:visible!important;
  }
  footer.b88-site-footer .b88-footer-logo{flex:0 0 auto!important}
  footer.b88-site-footer .b88-footer-social{
    display:flex!important;
    flex:0 0 128px!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:visible!important;
  }
  footer.b88-site-footer .b88-footer-social nav{display:flex!important;position:relative!important;min-height:34px!important}
}

/* A single high-contrast YouTube mark keeps the footer icons legible. */
footer .home-footer-social nav a:nth-of-type(3),
footer .b88-footer-social nav a:nth-of-type(3),
footer .foot-social nav a:nth-of-type(3){
  border-color:#ff0000!important;
  background:#ff0000!important;
  color:#fff!important;
}
footer .home-footer-social nav a:nth-of-type(3) svg,
footer .b88-footer-social nav a:nth-of-type(3) svg,
footer .foot-social nav a:nth-of-type(3) svg{display:none!important}
footer .home-footer-social nav a:nth-of-type(3)::before,
footer .b88-footer-social nav a:nth-of-type(3)::before,
footer .foot-social nav a:nth-of-type(3)::before{
  content:"▶";
  display:block;
  color:#fff;
  font-size:.72rem;
  line-height:1;
  transform:translateX(1px);
}

/* FAQ and article pages use a dedicated footer icon row, immune to generic nav rules. */
footer .b88-footer-social .b88-footer-icons{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  margin-top:9px!important;
  min-height:34px!important;
}
footer .b88-footer-social .b88-footer-icons a{
  display:grid!important;
  visibility:visible!important;
  opacity:1!important;
  place-items:center!important;
  width:34px!important;
  height:34px!important;
  border:1px solid #fff!important;
  border-radius:50%!important;
}
footer .b88-footer-social .b88-footer-icons svg{display:block!important;width:16px!important;height:16px!important;fill:currentColor!important;stroke:currentColor!important}
footer .b88-footer-social .b88-footer-icons a:nth-of-type(1){border-color:#1877f2!important;background:#1877f21c!important;color:#1877f2!important}
footer .b88-footer-social .b88-footer-icons a:nth-of-type(2){border-color:#e1306c!important;background:linear-gradient(135deg,#f9ce34,#ee2a7b 55%,#6228d7)!important;color:#fff!important}
footer .b88-footer-social .b88-footer-icons a:nth-of-type(2) svg{fill:none!important;stroke-width:1.9!important}
footer .b88-footer-social .b88-footer-icons a:nth-of-type(3){border-color:#ff0000!important;background:#ff0000!important;color:#fff!important}
footer .b88-footer-social .b88-footer-icons a:nth-of-type(3) svg{display:none!important}
footer .b88-footer-social .b88-footer-icons a:nth-of-type(3)::before{content:"▶";display:block;color:#fff;font-size:.72rem;line-height:1;transform:translateX(1px)}

/* Shared footer lock-up: label and icons always share one centred vertical axis. */
footer .home-footer-social,
footer .b88-footer-social,
footer .foot-social{align-items:center!important;text-align:center!important}
footer .home-footer-social>b,
footer .b88-footer-social>b,
footer .foot-social>b{display:block!important;width:100%!important;text-align:center!important}
footer .home-footer-social nav,
footer .b88-footer-social nav,
footer .foot-social nav,
footer .b88-footer-social .b88-footer-icons{
  width:120px!important;
  margin-right:auto!important;
  margin-left:auto!important;
}

/* Desktop mastheads retain their existing layout while using the shared Follow us
   lock-up: label first, then Facebook, Instagram and YouTube in one calm row. */
@media(min-width:901px){
  body>header>.header-social,
  #top>header>.header-social,
  .topbar .shell.nav>.header-social{
    display:flex!important;
    flex:0 0 132px!important;
    flex-wrap:wrap!important;
    align-content:center!important;
    align-items:center!important;
    justify-content:center!important;
    column-gap:8px!important;
    row-gap:7px!important;
    margin-left:auto!important;
    margin-right:0!important;
  }
  body>header>.header-social::before,
  #top>header>.header-social::before,
  .topbar .shell.nav>.header-social::before{
    content:"Follow us";
    flex:0 0 100%;
    color:#fff!important;
    font:800 .72rem/1 "DM Sans",sans-serif!important;
    letter-spacing:0!important;
    text-align:center!important;
    text-transform:none!important;
  }
  body>header>.header-social a,
  #top>header>.header-social a,
  .topbar .shell.nav>.header-social a{
    display:grid!important;
    place-items:center!important;
    flex:0 0 34px!important;
    width:34px!important;
    height:34px!important;
    margin:0!important;
    border-radius:50%!important;
  }
  /* The markup is Facebook, YouTube, Instagram; show it in the reference order. */
  body>header>.header-social a:nth-of-type(1),
  #top>header>.header-social a:nth-of-type(1),
  .topbar .shell.nav>.header-social a:nth-of-type(1){order:1!important}
  body>header>.header-social a:nth-of-type(2),
  #top>header>.header-social a:nth-of-type(2),
  .topbar .shell.nav>.header-social a:nth-of-type(2){order:3!important}
  body>header>.header-social a:nth-of-type(3),
  #top>header>.header-social a:nth-of-type(3),
  .topbar .shell.nav>.header-social a:nth-of-type(3){order:2!important}
  body>header>.header-social a:nth-of-type(1),
  #top>header>.header-social a:nth-of-type(1),
  .topbar .shell.nav>.header-social a:nth-of-type(1){border-color:#1877f2!important;background:#1877f21c!important;color:#1877f2!important}
  body>header>.header-social a:nth-of-type(2),
  #top>header>.header-social a:nth-of-type(2),
  .topbar .shell.nav>.header-social a:nth-of-type(2){border-color:#ff0000!important;background:#ff0000!important;color:#fff!important}
  body>header>.header-social a:nth-of-type(2) svg,
  #top>header>.header-social a:nth-of-type(2) svg,
  .topbar .shell.nav>.header-social a:nth-of-type(2) svg{fill:currentColor!important;stroke:none!important}
  body>header>.header-social a:nth-of-type(3),
  #top>header>.header-social a:nth-of-type(3),
  .topbar .shell.nav>.header-social a:nth-of-type(3){border-color:#e1306c!important;background:linear-gradient(135deg,#f9ce34,#ee2a7b 55%,#6228d7)!important;color:#fff!important}
  body>header>.header-social a:nth-of-type(3) svg,
  #top>header>.header-social a:nth-of-type(3) svg,
  .topbar .shell.nav>.header-social a:nth-of-type(3) svg{fill:none!important;stroke:currentColor!important;stroke-width:1.9!important}
}

/* Mobile menus receive their own Follow us row below FAQ.  It is never visible
   until the menu is deliberately opened, so it cannot overlap page content. */
.b88-mobile-follow{display:none!important}
@media(max-width:900px){
  body>header>nav.is-mobile-open>.b88-mobile-follow,
  .topbar .shell.nav>nav.is-mobile-open>.b88-mobile-follow,
  #top>header>nav.open>.b88-mobile-follow,
  #top header nav.open .b88-mobile-follow{
    display:flex!important;
    flex:0 0 auto!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    margin:0!important;
    min-height:0!important;
    padding:7px 0 10px!important;
    border-top:1px solid #242424!important;
    background:#080808!important;
    text-align:center!important;
  }
  .b88-mobile-follow>b{
    display:block!important;
    margin:0!important;
    color:#fff!important;
    font:800 .78rem/1 "DM Sans",sans-serif!important;
    text-transform:none!important;
  }
  .b88-mobile-follow__icons{
    display:grid!important;
    grid-template-columns:repeat(3,30px)!important;
    gap:8px!important;
    margin-top:6px!important;
  }
  .b88-mobile-follow__icons a{
    display:grid!important;
    place-items:center!important;
    width:30px!important;
    height:30px!important;
    border:1px solid #fff!important;
    border-radius:50%!important;
  }
  /* This is the sole exception to the header-wide mobile social-link hide rule. */
  body>header>nav.is-mobile-open .b88-mobile-follow__icons a,
  .topbar .shell.nav>nav.is-mobile-open .b88-mobile-follow__icons a,
  #top>header>nav.open .b88-mobile-follow__icons a,
  #top header nav.open .b88-mobile-follow__icons a{
    display:grid!important;
    visibility:visible!important;
    opacity:1!important;
  }
  .b88-mobile-follow__icons svg{display:block!important;width:17px!important;height:17px!important;fill:currentColor!important;stroke:currentColor!important}
  .b88-mobile-follow__icons a:nth-child(1){border-color:#1877f2!important;background:#1877f21c!important;color:#1877f2!important}
  .b88-mobile-follow__icons a:nth-child(2){border-color:#e1306c!important;background:linear-gradient(135deg,#f9ce34,#ee2a7b 55%,#6228d7)!important;color:#fff!important}
  .b88-mobile-follow__icons a:nth-child(2) svg{fill:none!important;stroke-width:1.9!important}
  .b88-mobile-follow__icons a:nth-child(3){border-color:#ff0000!important;background:#ff0000!important;color:#fff!important}
}

/* One B88 social system: the label and FB / Instagram / YouTube icons always
   use the same compact proportions and brand colours in headers, menus and footers. */
footer .home-footer-social>b,
footer .b88-footer-social>b,
footer .foot-social>b,
.b88-mobile-follow>b{
  color:#fff!important;
  font:700 .78rem/1 "DM Sans",sans-serif!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
footer .home-footer-social nav,
footer .b88-footer-social nav,
footer .b88-footer-social .b88-footer-icons,
footer .foot-social nav,
.b88-mobile-follow__icons{gap:10px!important}
footer .home-footer-social nav a,
footer .b88-footer-social nav a,
footer .b88-footer-social .b88-footer-icons a,
footer .foot-social nav a,
.b88-mobile-follow__icons a{
  width:36px!important;
  height:36px!important;
  border-radius:50%!important;
}
@media(min-width:901px){
  body>header>.header-social a,
  #top>header>.header-social a,
  .topbar .shell.nav>.header-social a{flex-basis:36px!important;width:36px!important;height:36px!important;border-radius:50%!important}
  body>header>.header-social::before,
  #top>header>.header-social::before,
  .topbar .shell.nav>.header-social::before{font-size:.78rem!important}
}

/* The YouTube action uses one recognisable mark in every social location. */
header .header-social a[href*="youtube.com"],
footer a[href*="youtube.com"],
.b88-mobile-follow__icons a[href*="youtube.com"]{
  border-color:#ff0000!important;
  background:#ff0000!important;
  color:#fff!important;
}
header .header-social a[href*="youtube.com"] svg,
footer a[href*="youtube.com"] svg,
.b88-mobile-follow__icons a[href*="youtube.com"] svg{display:none!important}
header .header-social a[href*="youtube.com"]::before,
footer a[href*="youtube.com"]::before,
.b88-mobile-follow__icons a[href*="youtube.com"]::before{
  content:"▶";
  display:block;
  color:#fff;
  font-size:.72rem;
  line-height:1;
  transform:translateX(1px);
}

/* On phones, the logo and the social icons share one baseline. Keeping the
   label out of the normal footer flow prevents an empty column above icons. */
@media(max-width:900px){
  footer .home-footer-social,
  footer .b88-footer-social,
  footer .foot-social{
    position:relative!important;
    flex:0 0 128px!important;
    align-self:center!important;
    width:128px!important;
    height:36px!important;
    min-height:36px!important;
    padding:0!important;
  }
  footer .home-footer-social>b,
  footer .b88-footer-social>b,
  footer .foot-social>b{
    position:absolute!important;
    top:-17px!important;
    left:0!important;
    right:0!important;
    width:128px!important;
    margin:0!important;
    text-align:center!important;
    white-space:nowrap!important;
  }
  footer .home-footer-social nav,
  footer .b88-footer-social nav,
  footer .b88-footer-social .b88-footer-icons,
  footer .foot-social nav{
    position:absolute!important;
    top:0!important;
    left:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:128px!important;
    height:36px!important;
    min-height:36px!important;
    margin:0!important;
  }
}
