:root {
  --fwfsb-height: 37px;
  --fwfsb-admin-offset: 0px;
  --fwfsb-sticky-background: rgba(209, 117, 89, 0.46);
}

body.admin-bar {
  --fwfsb-admin-offset: 32px;
}

.fwfsb {
  position: fixed;
  top: var(--fwfsb-admin-offset);
  right: 0;
  left: 0;
  z-index: 9999999;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--fwfsb-height);
  min-height: var(--fwfsb-height);
  padding: 10px 32px 11px;
  background: #ff674b;
  color: #ffffff;
  font-family: Raleway, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 16px;
  text-align: center;
}

.fwfsb__message {
  display: block;
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: inherit;
}

.fwfsb .woocommerce-Price-amount,
.fwfsb .woocommerce-Price-currencySymbol {
  color: inherit;
  font: inherit;
}

.fwfsb .woocommerce-Price-amount {
  font-weight: 700;
}

/*
 * Kadence normally switches this row to fixed positioning in JavaScript.
 * Fix it from the first paint so the initial and sticky positions are equal.
 */
@media (min-width: 1025px) {
  body.home #main-header .site-main-header-wrap.kadence-sticky-header,
  body.post-type-archive-product #main-header .site-main-header-wrap.kadence-sticky-header,
  body.woocommerce-shop #main-header .site-main-header-wrap.kadence-sticky-header {
    position: fixed !important;
    top: calc(var(--fwfsb-admin-offset) + var(--fwfsb-height)) !important;
    right: 0;
    left: 0;
    z-index: 1200;
    width: 100%;
    transition-property: background-color, box-shadow !important;
  }

  /*
   * Keep a permanent placeholder for the shipping bar and Kadence's 108 px
   * desktop header. It remains in the flow when Kadence fixes the inner row,
   * so page content can never slide underneath the navigation.
   */
  body:not(.home):not(.post-type-archive-product):not(.woocommerce-shop)
    #main-header {
    box-sizing: border-box;
    min-height: calc(var(--fwfsb-height) + 108px) !important;
    padding-top: var(--fwfsb-height) !important;
  }

  body:not(.home):not(.post-type-archive-product):not(.woocommerce-shop)
    #main-header .site-main-header-wrap.kadence-sticky-header:not(.item-is-fixed) {
    top: auto !important;
    margin-top: 0 !important;
  }

  body:not(.home):not(.post-type-archive-product):not(.woocommerce-shop)
    #main-header .site-main-header-wrap.kadence-sticky-header:not(.item-is-fixed)
    .site-main-header-inner-wrap {
    min-height: 108px !important;
  }

  body:not(.home):not(.post-type-archive-product):not(.woocommerce-shop)
    #main-header .site-main-header-wrap.kadence-sticky-header.item-is-fixed {
    top: calc(var(--fwfsb-admin-offset) + var(--fwfsb-height)) !important;
    margin-top: 0 !important;
  }
}

body #mobile-header .site-header-inner-wrap {
  position: fixed !important;
  top: calc(var(--fwfsb-admin-offset) + var(--fwfsb-height)) !important;
  right: 0;
  left: 0;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Match the transparent orange header used on the desktop home and shop. */
body.home #mobile-header .site-header-inner-wrap,
body.post-type-archive-product #mobile-header .site-header-inner-wrap,
body.woocommerce-shop #mobile-header .site-header-inner-wrap {
  background-color: var(--fwfsb-sticky-background) !important;
}

/* Keep the configured orange background as soon as the sticky state starts. */
body.fwfsb-has-scrolled #mobile-header .site-header-inner-wrap {
  background-color: var(--fwfsb-sticky-background) !important;
}

@media (max-width: 782px) {
  body.admin-bar {
    --fwfsb-admin-offset: 46px;
  }
}

@media (max-width: 767px) {
  :root {
    --fwfsb-height: 60px;
  }

  .fwfsb {
    padding: 8px 16px;
    line-height: 1.35;
  }
}