/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 09 2026 | 12:37:48 */
/* ==========================================================
   CUSTOM GUITAR ATELIER — SOCIAL LOGIN RESTORATION

   Add as a SEPARATE CSS entry. Do not edit or replace the
   original 3,299-line header stylesheet.

   Result:
   - no shared outer enclosure
   - premium champagne/ivory account background
   - original horizontal Facebook and Google pill shapes
   - original Flatsome fl-icons glyphs, sizes and alignment
   - existing provider colors remain controlled by Flatsome
   ========================================================== */

/* Premium light background that blends into the page below. */
body.woocommerce-account:not(.logged-in)
#main .my-account-header.page-title {
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(223, 189, 116, 0.22) 0%,
      rgba(223, 189, 116, 0) 48%
    ),
    linear-gradient(
      180deg,
      #f8f2e8 0%,
      #fffaf3 62%,
      #ffffff 100%
    ) !important;
  border-top: 1px solid rgba(196, 154, 69, 0.52) !important;
  border-bottom: 1px solid rgba(196, 154, 69, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 8px 22px rgba(58, 40, 31, 0.07) !important;
}

/* Remove only the shared enclosure and flex constraint. */
body.woocommerce-account:not(.logged-in)
#main .my-account-header.page-title
.social-login {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: center !important;
}

/* Restore Flatsome's original horizontal provider buttons. */
body.woocommerce-account:not(.logged-in)
#main .my-account-header.page-title
.social-login >
a.button.social-button[data-provider="facebook"],
body.woocommerce-account:not(.logged-in)
#main .my-account-header.page-title
.social-login >
a.button.social-button[data-provider="google"] {
  display: inline-block !important;
  box-sizing: border-box !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 24px !important;
  height: auto !important;
  min-height: 2.5em !important;
  padding: 0 1.2em !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-size: 0.97em !important;
  letter-spacing: 0.03em !important;
  line-height: 2.4em !important;
  text-align: center !important;
  text-decoration: none !important;
  text-shadow: none !important;
  text-transform: uppercase !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  transform: none !important;
}

body.woocommerce-account:not(.logged-in)
#main .my-account-header.page-title
.social-login >
a.button.social-button[data-provider="facebook"] {
  margin: 5px 1em 5px 0 !important;
}

body.woocommerce-account:not(.logged-in)
#main .my-account-header.page-title
.social-login >
a.button.social-button[data-provider="google"] {
  margin: 5px 0 !important;
}

/* Restore the exact native fl-icons geometry for both icons. */
body.woocommerce-account:not(.logged-in)
#main .my-account-header.page-title
.social-login >
a.button.social-button[data-provider] > i {
  position: relative !important;
  top: -1.5px !important;
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0.4em 0 -0.15em !important;
  padding: 0 !important;
  font-family: "fl-icons" !important;
  font-size: 1em !important;
  font-style: normal !important;
  font-variant: normal !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  vertical-align: middle !important;
  transform: none !important;
}

body.woocommerce-account:not(.logged-in)
#main .my-account-header.page-title
.social-login >
a.button.social-button[data-provider] > span {
  display: inline-block !important;
  line-height: 1.6 !important;
  white-space: nowrap !important;
}

/* Preserve Flatsome's native hover/focus behavior. */
@media (hover: hover) and (pointer: fine) {
  body.woocommerce-account:not(.logged-in)
  #main .my-account-header.page-title
  .social-login >
  a.button.social-button[data-provider]:hover {
    box-shadow:
      inset 0 0 0 100px rgba(0, 0, 0, 0.20) !important;
    transform: none !important;
  }
}

body.woocommerce-account:not(.logged-in)
#main .my-account-header.page-title
.social-login >
a.button.social-button[data-provider]:active {
  transform: none !important;
}

body.woocommerce-account:not(.logged-in)
#main .my-account-header.page-title
.social-login >
a.button.social-button[data-provider]:focus-visible {
  outline: 2px solid currentColor !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}
/* ==========================================================
   CUSTOM GUITAR ATELIER — PREMIUM CHAMPAGNE TOP BAR

   Append this to the existing separate override CSS entry.
   Do not edit the original header stylesheet.

   Layout, dimensions, scrolling and menu behavior are retained.
   ========================================================== */

/* Keep the telephone link readable on the light background. */
body #header .html_topbar_left
a.cga-topbar-phone,
body #header .html_topbar_left
a.cga-topbar-phone:link,
body #header .html_topbar_left
a.cga-topbar-phone:visited,
body #header .html_topbar_left
a[x-apple-data-detectors] {
  color: #3a281f !important;
  -webkit-text-fill-color: #3a281f !important;
}

body #header .html_topbar_left
a.cga-topbar-phone:focus-visible {
  outline-color: #8b6548 !important;
}

@media screen and (min-width: 850px) {
  body #header .header-top {
    background:
      radial-gradient(
        circle at 12% -110%,
        rgba(255, 255, 255, 0.96) 0%,
        rgba(255, 255, 255, 0) 54%
      ),
      linear-gradient(
        115deg,
        #fffdf8 0%,
        #f8efe1 46%,
        #ead5b2 100%
      ) !important;
    border-bottom-color: rgba(139, 101, 72, 0.42) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      inset 0 -1px 0 rgba(139, 101, 72, 0.10),
      0 3px 12px rgba(58, 40, 31, 0.08) !important;
  }

  body #header .header-top
  .flex-col.hide-for-medium.flex-left
  .html_topbar_left {
    color: #3a281f !important;
    background: rgba(255, 255, 255, 0.58) !important;
    border-color: rgba(139, 101, 72, 0.38) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      0 2px 8px rgba(58, 40, 31, 0.07) !important;
  }

  body #header .header-top
  .top-bar-nav > li > a.nav-top-link {
    color: rgba(58, 40, 31, 0.82) !important;
  }

  body #header .header-top
  .top-bar-nav > li.current-menu-item >
  a.nav-top-link,
  body #header .header-top
  .top-bar-nav > li.current_page_item >
  a.nav-top-link,
  body #header .header-top
  .top-bar-nav > li >
  a.nav-top-link[aria-current="page"] {
    color: #633e0e !important;
    background: rgba(196, 154, 69, 0.18) !important;
    border-color: rgba(139, 101, 72, 0.34) !important;
  }

  body #header .header-top
  .top-bar-nav > li > a.nav-top-link:focus-visible {
    outline-color: #8b6548 !important;
  }

  body #header .header-top .top-bar-nav {
    scrollbar-color:
      rgba(139, 101, 72, 0.52)
      transparent !important;
  }

  body #header .header-top
  .top-bar-nav::-webkit-scrollbar-thumb {
    background: rgba(139, 101, 72, 0.46) !important;
  }
}

@media screen and (min-width: 850px) and
(hover: hover) and (pointer: fine) {
  body #header .header-top
  .top-bar-nav > li > a.nav-top-link:hover {
    color: #633e0e !important;
    background: rgba(196, 154, 69, 0.16) !important;
    border-color: rgba(139, 101, 72, 0.30) !important;
  }
}

@media screen and (max-width: 849px) {
  body #header .header-top {
    background:
      radial-gradient(
        circle at 50% -130%,
        rgba(255, 255, 255, 0.96) 0%,
        rgba(255, 255, 255, 0) 58%
      ),
      linear-gradient(
        115deg,
        #fffdf8 0%,
        #f8efe1 52%,
        #ead5b2 100%
      ) !important;
    border-bottom-color: rgba(139, 101, 72, 0.42) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      inset 0 -1px 0 rgba(139, 101, 72, 0.10),
      0 3px 12px rgba(58, 40, 31, 0.08) !important;
  }

  body #header .header-top
  .flex-col.show-for-medium.flex-grow
  .html_topbar_left {
    color: #3a281f !important;
    background: rgba(255, 255, 255, 0.58) !important;
    border-color: rgba(139, 101, 72, 0.38) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      0 2px 8px rgba(58, 40, 31, 0.07) !important;
  }
}