/* ==================================================
   Baby Boomer Barbershop: brand overrides for the Barberon template
   ================================================== */
* {
  --btn-color: #0E2911;
  --btn-hover-color: #0E2911;
  --btn-hover-bg: #F5F2E9;
  --logo-width: 340px;
  --logo-footer-width: 460px;
}

/* Buttons: forest text on sage keeps contrast readable */
a.btn-main, .btn-main, input[type=submit].btn-main,
a.btn-main:visited, a.btn-main:focus { color: #0E2911 !important; font-weight: 700; }
a.btn-main:hover, .btn-main:hover { color: #0E2911 !important; background: #F5F2E9 !important; }

/* Transparent horizontal logo, cropped tight to the artwork */
div#logo img { width: var(--logo-width); height: auto; }
header.smaller div#logo img { width: 260px; }
footer .logo-footer { width: var(--logo-footer-width); max-width: 100%; height: auto; margin-bottom: 20px; }
@media (max-width: 991px) {
  * { --logo-width: 230px; }
  header div#logo img.logo-mobile { display: inline-block; }
  /* The larger logo makes the mobile header taller; start the menu below it */
  header .header-col-mid #mainmenu { top: 130px; }
}

/* Mascot badge in the spinning text circle */
.bbb-badge { width: 110px; height: 110px; border-radius: 50%; }

/* Hero tagline block */
.bbb-hero-tagline h4 { font-family: var(--heading-font); }


/* Header: room for the larger logo */
header div#logo { padding: 10px 0; }

/* "Book Your Haircut": big white raised button so nobody misses it */
a.bbb-book-btn,
a.bbb-book-btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #ECE9E0 100%);
  color: #000 !important;
  font-family: var(--body-font);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: center;
  padding: 26px 30px 26px 48px;
  border: 2px solid #fff;
  border-radius: 14px;
  /* sage "edge" underneath + deep drop shadow = looks raised and pressable */
  box-shadow: 0 8px 0 var(--primary-color), 0 18px 34px rgba(0,0,0,.6);
  position: relative;
  top: 0;
  cursor: pointer;
  transition: top .12s ease, box-shadow .12s ease, background .12s ease;
}
a.bbb-book-btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #F5F2E9 100%);
  color: #000 !important;
  top: -3px;
  box-shadow: 0 11px 0 var(--primary-color), 0 24px 40px rgba(0,0,0,.65);
}
a.bbb-book-btn:active {
  top: 6px;
  box-shadow: 0 2px 0 var(--primary-color), 0 6px 14px rgba(0,0,0,.5);
}
a.bbb-book-btn:focus-visible { outline: 4px solid #fff; outline-offset: 6px; }
.bbb-book-btn__label { display: block; }
.bbb-book-btn__sub {
  display: block;
  margin-top: 6px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: none;
}
/* round black badge with an arrow (or phone) makes it read as "click here" */
.bbb-book-btn__arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #0E2911;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  transition: transform .12s ease;
}
a.bbb-book-btn:hover .bbb-book-btn__arrow { transform: translateX(4px); }
a.bbb-book-btn--header { font-size: 17px; gap: 12px; padding: 12px 14px 12px 22px; border-radius: 10px; box-shadow: 0 5px 0 var(--primary-color), 0 10px 20px rgba(0,0,0,.45); }
a.bbb-book-btn--header:hover { box-shadow: 0 7px 0 var(--primary-color), 0 14px 24px rgba(0,0,0,.5); }
a.bbb-book-btn--header .bbb-book-btn__arrow { width: 34px; height: 34px; font-size: 18px; }
@media (max-width: 767px) {
  a.bbb-book-btn { display: flex; width: 100%; font-size: 21px; letter-spacing: 0; gap: 12px; padding: 22px 16px 22px 20px; }
  .bbb-book-btn__label { white-space: nowrap; }
  .bbb-book-btn__sub { white-space: normal; }
  .bbb-book-btn__arrow { width: 44px; height: 44px; font-size: 24px; }
  .bbb-book-btn__sub { font-size: 17px; }
}

/* Mission and services */
.bbb-mission { font-size: 24px; line-height: 1.6; }
.bbb-service { height: 100%; padding: 36px 32px; background: var(--bg-dark-2); border-radius: 8px; border-top: 4px solid var(--primary-color); }
.bbb-service-list { list-style: none; padding: 0; font-size: 24px; }
.bbb-service-list li { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.15); }
.bbb-service-list li::before { content: "\2713"; color: var(--primary-color); margin-right: 14px; }
@media (max-width: 767px) { .bbb-mission { font-size: 20px; } }

/* Header: no menu, logo centered; the call button sits on the right on desktop */
.bbb-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.bbb-header__side--end { justify-content: flex-end; }
header div#logo.bbb-header__logo { text-align: center; }

.bbb-pin { width: 34px; height: auto; margin: -6px 8px 0 0; vertical-align: middle; }

/* Service prices */
.bbb-service__title { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.bbb-price { color: var(--primary-color); font-family: var(--body-font); font-weight: 800; font-size: 44px; line-height: 1; white-space: nowrap; }
.bbb-service-list .bbb-price { font-size: 36px; }
@media (max-width: 767px) {
  .bbb-price { font-size: 38px; }
  .bbb-service-list .bbb-price { font-size: 32px; }
}
.bbb-service-list li { display: flex; align-items: center; }
.bbb-service-list li .bbb-price { margin-left: auto; }

/* Larger service names and descriptions for easier reading */
.bbb-service__title > span:first-child { font-size: 32px; line-height: 1.15; }
.bbb-service p { font-size: 22px !important; line-height: 1.55; }
.bbb-service-list { font-size: 28px; }
@media (max-width: 767px) {
  .bbb-service__title > span:first-child { font-size: 28px; }
  .bbb-service p { font-size: 20px !important; }
  .bbb-service-list { font-size: 24px; }
}

/* The theme starts WOW.js twice; the second instance can re-hide elements the first
   already revealed (hero text and buttons stayed blank on slower loads). Anything that
   has animated in stays visible. */
.wow.animated { visibility: visible !important; }

/* Mobile hero: stack the intro, headline and button right under the header instead of
   stretching to full screen height with the button pinned near the bottom */
@media (max-width: 767px) {
  #section-intro .v-center { min-height: 0; display: block; padding: 118px 0 56px; }
  #section-intro .v-center .spacer-double { display: none; }
  #section-intro .abs.bottom-10 { position: relative; bottom: auto; left: auto; transform: none; margin-top: 20px; }
  #section-intro .owl-single-fade h1 { margin-bottom: 12px; }
}

/* Mobile-only hero heading (replaces the intro sentence on phones) */
.bbb-hero-mobile-title { font-size: 44px; line-height: 1.1; margin-bottom: 18px; color: #fff; }

/* Desktop: keep the three service cards even when a name wraps to two lines */
@media (min-width: 992px) {
  .bbb-service__title { min-height: 76px; align-items: flex-start; }
}

/* Booking page call button: larger, barber-pole red, bold white text, black phone icon */
a.bbb-book-btn--call,
a.bbb-book-btn--call:visited {
  background: linear-gradient(180deg, #D7263D 0%, #B3152B 100%);
  border-color: #D7263D;
  color: #fff !important;
  font-size: 34px;
  padding: 30px 34px 30px 52px;
  box-shadow: 0 8px 0 #7A0E1D, 0 18px 34px rgba(0,0,0,.6);
}
a.bbb-book-btn--call:hover {
  background: linear-gradient(180deg, #E23A50 0%, #C01A31 100%);
  color: #fff !important;
  box-shadow: 0 11px 0 #7A0E1D, 0 24px 40px rgba(0,0,0,.65);
}
a.bbb-book-btn--call:active { box-shadow: 0 2px 0 #7A0E1D, 0 6px 14px rgba(0,0,0,.5); }
a.bbb-book-btn--call .bbb-book-btn__label,
a.bbb-book-btn--call .bbb-book-btn__sub { color: #fff; font-weight: 800; }
a.bbb-book-btn--call .bbb-book-btn__sub { font-size: 20px; }
a.bbb-book-btn--call .bbb-book-btn__arrow { background: #fff; color: #000; width: 64px; height: 64px; font-size: 36px; }
@media (max-width: 767px) {
  a.bbb-book-btn--call { font-size: 23px; padding: 24px 16px 24px 20px; }
  a.bbb-book-btn--call .bbb-book-btn__sub { font-size: 18px; }
  a.bbb-book-btn--call .bbb-book-btn__arrow { width: 50px; height: 50px; font-size: 28px; }
}
.fs-22 { font-size: 22px; }
/* the free coffee / parking line is longer than the old heading */
.bbb-hero-mobile-title { font-size: 34px; }

/* Red call button in the header keeps the compact header size */
a.bbb-book-btn--header.bbb-book-btn--call { font-size: 17px; padding: 12px 14px 12px 22px; box-shadow: 0 5px 0 #7A0E1D, 0 10px 20px rgba(0,0,0,.45); }
a.bbb-book-btn--header.bbb-book-btn--call:hover { box-shadow: 0 7px 0 #7A0E1D, 0 14px 24px rgba(0,0,0,.5); }
a.bbb-book-btn--header.bbb-book-btn--call .bbb-book-btn__arrow { width: 34px; height: 34px; font-size: 18px; }

/* "What We Do" statement on the home page */
.bbb-what-we-do { font-size: 52px; line-height: 1.15; }
@media (max-width: 767px) { .bbb-what-we-do { font-size: 36px; } }

/* Home page hours: three short, large lines */
.bbb-hours__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.18); font-size: 30px; color: #fff; }
.bbb-hours__row span:first-child { font-family: var(--heading-font); }
.bbb-hours__row span:last-child { font-weight: 700; }
.bbb-hours__row--closed { border-bottom: 0; color: var(--primary-color); }
.bbb-hours__row--closed span:first-child { font-family: var(--body-font); font-weight: 700; }
@media (max-width: 767px) { .bbb-hours__row { font-size: 24px; } }

/* Home page: big tap-to-call phone number across the bottom (replaces the footer) */
.bbb-call-band { padding: 60px 16px 70px; text-align: center; background: var(--bg-dark-2); border-top: 4px solid var(--primary-color); }
a.bbb-call-band__number { display: inline-block; color: #fff !important; font-family: var(--body-font); font-weight: 800; font-size: 110px; line-height: 1; letter-spacing: .02em; white-space: nowrap; }
a.bbb-call-band__number:hover { color: var(--primary-color) !important; }
@media (max-width: 991px) { a.bbb-call-band__number { font-size: 76px; } }
@media (max-width: 767px) { .bbb-call-band { padding: 40px 12px 48px; } a.bbb-call-band__number { font-size: 46px; } }

/* Home page address under the hours */
.bbb-address { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.18); }
.bbb-address__street { font-size: 26px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.bbb-address__note { font-size: 22px; margin-bottom: 0; }
@media (max-width: 767px) { .bbb-address__street { font-size: 22px; } .bbb-address__note { font-size: 19px; } }

/* Hero intro + tagline: larger for easier reading */
.bbb-hero-intro { font-size: 30px; line-height: 1.45; color: #fff; }
.bbb-hero-tagline { font-size: 40px; line-height: 1.25; }
@media (max-width: 991px) { .bbb-hero-intro { font-size: 26px; } .bbb-hero-tagline { font-size: 34px; } }
@media (max-width: 767px) { .bbb-hero-tagline { font-size: 30px; } }

/* Desktop/tablet hero: stack intro, tagline, headline and button as one centered group
   so the larger text can't run into the headline pinned at the bottom */
@media (min-width: 768px) {
  #section-intro .v-center { flex-direction: column; justify-content: center; align-items: stretch; min-height: 100vh; padding: 150px 0 56px; }
  #section-intro .v-center .spacer-double { display: none; }
  #section-intro .abs.bottom-10 { position: relative; bottom: auto; left: auto; transform: none; margin-top: 28px; }
}

/* ================= Hero: Marco "Old Guard" (replaces the barber-chair slider) ================= */
.bbb-hero { background: var(--bg-dark-1); padding: 170px 0 90px; min-height: 100vh; display: flex; align-items: center; }
.bbb-hero .container { width: 100%; }
.bbb-hero-title { font-size: 64px; line-height: 1.05; margin-bottom: 20px; }
.bbb-hero__cta { margin-top: 32px; }
.bbb-hero__portrait { margin: 0; text-align: center; }
.bbb-hero__portrait img { width: 100%; max-height: 74vh; object-fit: cover; object-position: top; border-radius: 10px; border: 3px solid var(--primary-color); box-shadow: 0 24px 60px rgba(0,0,0,.55); }
.bbb-hero__portrait figcaption { margin-top: 14px; font-family: var(--heading-font); font-size: 24px; color: #fff; }

/* Phones and tablets: Marco's photo fills the top of the screen; text sits below his face */
@media (max-width: 991px) {
  .bbb-hero { display: block; min-height: 0; padding: 88vw 0 48px;
    background: linear-gradient(180deg, rgba(14,41,17,.92) 0%, rgba(14,41,17,.35) 11%, rgba(14,41,17,0) 17%, rgba(14,41,17,0) 29%, rgba(14,41,17,.86) 42%, #0E2911 60%),
                url(../images/hero/marco-full.webp) center top / 100% auto no-repeat, #0E2911; }
  .bbb-hero-title { font-size: 48px; }
}
@media (max-width: 767px) {
  .bbb-hero { padding-top: 84vw; }
}

/* Meet Old Guard */
#section-old-guard { padding: 90px 0; }
.bbb-old-guard__photo { border-radius: 10px; border: 3px solid var(--primary-color); box-shadow: 0 18px 44px rgba(0,0,0,.5); }
.bbb-old-guard__title { font-size: 48px; line-height: 1.1; margin-bottom: 22px; }
.bbb-old-guard__story p { font-size: 22px; line-height: 1.65; color: #fff; margin-bottom: 18px; }
@media (max-width: 767px) {
  #section-old-guard { padding: 56px 0; }
  .bbb-old-guard__title { font-size: 36px; }
  .bbb-old-guard__story p { font-size: 20px; }
}

/* What We Do: barber-chair photo band */
.bbb-what-we-do-band { padding: 130px 0; background: linear-gradient(rgba(14,41,17,.72), rgba(14,41,17,.72)), url(../images/background/2.webp) center / cover no-repeat; }
@media (max-width: 767px) { .bbb-what-we-do-band { padding: 80px 0; } }

/* Shorter laptop screens: keep the button and Marco's caption on the first screen */
@media (min-width: 992px) and (max-height: 860px) {
  .bbb-hero { padding: 140px 0 36px; }
  .bbb-hero-title { font-size: 54px; margin-bottom: 14px; }
  .bbb-hero-intro { margin-bottom: 18px !important; }
  .bbb-hero__cta { margin-top: 20px; }
  .bbb-hero__portrait img { max-height: 62vh; }
  .bbb-hero__portrait figcaption { margin-top: 10px; font-size: 21px; }
}

/* ================= Hero background: wide photo of Marco in the shop (replaces the framed portrait) ================= */
.bbb-hero {
  background:
    linear-gradient(180deg, rgba(14,41,17,.85) 0%, rgba(14,41,17,0) 20%),
    linear-gradient(90deg, rgba(14,41,17,.94) 0%, rgba(14,41,17,.82) 32%, rgba(14,41,17,.25) 55%, rgba(14,41,17,0) 70%),
    url(../images/hero/header-shave.webp) 62% center / cover no-repeat,
    #0E2911;
}
.bbb-hero__caption { position: absolute; right: 32px; bottom: 34px; font-family: var(--heading-font); font-size: 22px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.8); }

/* Phones/tablets: photo across the top with Marco centered; text on the dark area below */
@media (max-width: 991px) {
  .bbb-hero {
    padding-top: 118vw;
    background:
      linear-gradient(180deg, rgba(14,41,17,.9) 0%, rgba(14,41,17,0) 16%, rgba(14,41,17,0) 44%, rgba(14,41,17,.88) 60%, #0E2911 72%),
      url(../images/hero/header-shave.webp) 57% 70px / auto calc(118vw + 80px) no-repeat,
      #0E2911;
  }
  .bbb-hero__caption { top: calc(118vw - 10px); bottom: auto; right: 16px; font-size: 17px; }
}

/* Desktop: start the photo below the logo and anchor it right, so Marco's face sits
   clear of the centered logo and the text column */
@media (min-width: 992px) {
  .bbb-hero {
    background:
      linear-gradient(180deg, #0E2911 0, #0E2911 110px, rgba(14,41,17,0) 230px),
      linear-gradient(90deg, rgba(14,41,17,.95) 0%, rgba(14,41,17,.85) 30%, rgba(14,41,17,.2) 52%, rgba(14,41,17,0) 64%),
      url(../images/hero/header-shave.webp) right bottom / auto calc(100% - 110px) no-repeat,
      #0E2911;
  }
}

/* Phones/tablets: shorter photo band so the button stays on the first screen; no caption overlap */
@media (max-width: 991px) {
  .bbb-hero {
    padding-top: 84vw;
    background:
      linear-gradient(180deg, #0E2911 0, #0E2911 64px, rgba(14,41,17,0) 110px, rgba(14,41,17,0) 72vw, rgba(14,41,17,.9) calc(84vw + 30px), #0E2911 calc(84vw + 90px)),
      url(../images/hero/header-shave.webp) 57% 64px / auto calc(84vw + 40px) no-repeat,
      #0E2911;
  }
  .bbb-hero__caption { display: none; }
}

/* Header photo: barber on the right of the frame; on phones zoom out a little and center
   him so his face sits above the heading */
@media (max-width: 991px) {
  .bbb-hero {
    background:
      linear-gradient(180deg, #0E2911 0, #0E2911 64px, rgba(14,41,17,0) 104px, rgba(14,41,17,0) 74vw, rgba(14,41,17,.9) calc(84vw + 24px), #0E2911 calc(84vw + 80px)),
      url(../images/hero/header-shave.webp) 72% 90px / auto calc(84vw - 20px) no-repeat,
      #0E2911;
  }
}

/* The theme script sets an inline background-size: cover on every section, which would
   override the hero photo sizing above; these win over that inline style. */
.bbb-hero { background-size: auto, auto, cover !important; }
@media (min-width: 992px) {
  .bbb-hero { background-size: auto, auto, auto calc(100% - 110px) !important; }
}
@media (max-width: 991px) {
  .bbb-hero { background-size: auto, auto calc(84vw - 20px) !important; }
}
.bbb-what-we-do-band { background-size: auto, cover !important; }

/* Tablets (768–991px): show only one logo (the phone and desktop logos both appeared) */
@media (min-width: 768px) and (max-width: 991px) {
  header div#logo img.logo-main, header div#logo img.logo-scroll { display: none !important; }
  header div#logo img.logo-mobile { display: inline-block !important; }
}

/* Hero: one heading for all screen sizes ("Bringing our boys back home") */
@media (max-width: 767px) {
  .bbb-hero-title { font-size: 36px; line-height: 1.12; margin-bottom: 12px; }
  .bbb-hero-intro { font-size: 21px; line-height: 1.4; margin-bottom: 14px !important; }
  .bbb-hero-tagline { font-size: 26px; }
}

/* What We Do: services shown one at a time under the statement */
#section-what-we-do .bbb-rotator { position: relative; height: 1.3em; margin: 22px 0 0; font-family: var(--heading-font); font-size: 46px; line-height: 1.3; color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.bbb-rotator__word { position: absolute; left: 0; right: 0; opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.bbb-rotator__word.is-active { opacity: 1; transform: none; }
.bbb-rotator__word.is-leaving { opacity: 0; transform: translateY(-14px); }
@media (max-width: 767px) { #section-what-we-do .bbb-rotator { font-size: 28px; height: 2.6em; } }
@media (prefers-reduced-motion: reduce) { .bbb-rotator__word { transition: opacity .3s; transform: none !important; } }

/* Booking page prices: regular price struck through in red, senior price highlighted */
.bbb-senior-note { font-size: 22px; line-height: 1.4; margin-bottom: 8px; color: var(--primary-color); font-weight: 700; }
.bbb-price-list li { gap: 18px; }
.bbb-price-list .bbb-price-reg { margin-left: auto; min-width: 2.6em; text-align: center; color: #FF7A7A; font-weight: 700; font-size: 26px; text-decoration-thickness: 3px; }
.bbb-price-list li .bbb-price { margin-left: 0; min-width: 2.6em; text-align: center; }
.bbb-price-list__head { border-bottom: 0 !important; padding-bottom: 0 !important; font-size: 16px; text-transform: uppercase; letter-spacing: .12em; }
.bbb-price-list__head::before { visibility: hidden; }
.bbb-price-list__head .bbb-price-reg, .bbb-price-list__head .bbb-price { font-size: 16px; font-weight: 700; }
.bbb-price-list__head .bbb-price-reg { text-decoration: none; }
.bbb-free-list { margin-top: 12px; }
.bbb-free-list .bbb-free { margin-left: auto; color: var(--primary-color); font-weight: 800; }
@media (max-width: 767px) {
  .bbb-price-list li { gap: 10px; }
  .bbb-price-list .bbb-price-reg { font-size: 22px; }
  .bbb-senior-note { font-size: 20px; }
  .bbb-price-list__head .bbb-price-reg, .bbb-price-list__head .bbb-price { font-size: 13px; }
}

/* The theme's fixed "Scroll to Top" label and progress line sit at the left edge; below
   ~1420px wide the page content runs underneath them, so only show them when there's room */
@media (max-width: 1419px) {
  .float-text, .scrollbar-v { display: none !important; }
}

/* Desktop hero: photo anchored to the right edge (the barber and customer are on the
   right of the frame, clear of the headline) */
@media (min-width: 992px) {
  .bbb-hero {
    background-image:
      linear-gradient(180deg, #0E2911 0, #0E2911 110px, rgba(14,41,17,0) 230px),
      linear-gradient(90deg, rgba(14,41,17,.95) 0%, rgba(14,41,17,.85) 30%, rgba(14,41,17,.2) 52%, rgba(14,41,17,0) 64%),
      url(../images/hero/header-shave-desktop.webp) !important;
    background-position: 0 0, 0 0, right bottom !important;
  }
}
/* On wide screens the photo (sized to the hero's height) is narrower than the window;
   header-shave-desktop.webp has a green fade baked into its left edge so it blends in
   wherever that edge lands. */

/* Home page services & prices (between the gallery and hours): the neighbouring
   sections already supply the spacing */
#section-services { padding-top: 0; padding-bottom: 0; }

/* Mission-section button: goes to the booking page's services & prices; the longer label
   may wrap on phones; no icon */
a.bbb-book-btn--services .bbb-book-btn__label { white-space: normal; }
a.bbb-book-btn--services { justify-content: center; text-align: center; }
@media (max-width: 767px) { a.bbb-book-btn--services { font-size: 25px; padding-left: 20px; padding-right: 20px; } a.bbb-book-btn--services .bbb-book-btn__sub { font-size: 18px; } }

/* Small laptops (992-1199px): the hero text column is narrow, so keep the phone number
   on one line in the big call button */
@media (min-width: 992px) and (max-width: 1199px) {
  #section-intro a.bbb-book-btn--call { font-size: 27px; padding-left: 36px; }
}

/* Background music on/off button, fixed in the bottom corner (js/brand.js adds it only
   when audio/shop-music.mp3 exists). Sits under the gallery photo popup. */
.bbb-music {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 12px 16px;
  background: #0E2911;
  color: #fff;
  border: 2px solid var(--primary-color);
  border-radius: 999px;
  font-family: var(--body-font);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 8px 22px rgba(0,0,0,.55);
  cursor: pointer;
}
.bbb-music:hover { background: var(--bg-dark-3); }
.bbb-music:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.bbb-music__icon { font-size: 26px; color: var(--primary-color); }
.bbb-music.is-playing .bbb-music__icon { animation: bbb-music-bob .7s ease-in-out infinite alternate; }
@keyframes bbb-music-bob { from { transform: translateY(2px); } to { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .bbb-music.is-playing .bbb-music__icon { animation: none; } }
@media (max-width: 767px) {
  .bbb-music { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); font-size: 16px; padding: 10px 16px 10px 12px; }
  .bbb-music__icon { font-size: 22px; }
}
/* Phones: leave room at the very bottom of each page (big phone number on the home
   page, copyright line on the booking page) so the music button doesn't cover it */
@media (max-width: 767px) {
  .bbb-has-music .bbb-call-band { padding-bottom: 84px; }
  .bbb-has-music .subfooter { padding-bottom: 84px; }
}

/* Background music credit (required by the track's Creative Commons license) */
.bbb-music-credit { margin: 14px 0 0; font-family: var(--body-font); font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.7); }
.bbb-music-credit a, .bbb-music-credit a:visited { color: inherit; text-decoration: underline; }
.bbb-music-credit a:hover { color: #fff; }
.bbb-call-band .bbb-music-credit { margin-top: 26px; }