/* =========================================================
   Announcement Bar
   ========================================================= */
.cf-announcement-bar {
  position: relative;
  z-index: 1;
  padding: 0.75rem 0;
  background: var(--cf-color-ink);
  color: var(--cf-color-on-ink);
  font-size: 0.875rem;
  text-align: center;
}
.cf-announcement-bar > * {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cf-space-sm);
}
.cf-announcement-bar > * > * {
  max-width: 100%;
  flex: 0 auto;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.cf-announcement-bar p:last-of-type {
  margin-bottom: 0;
}
/* =========================================================
   Header Main
   ========================================================= */
.cf-header-main {
  display: flex;
  align-items: center;
  min-height: var(--cf-header-height);
  background: var(--cf-color-background);
  border-bottom: var(--cf-border-width-thin) solid transparent;
  transition: border-color 0.25s ease;
}
.cf-header.is-sticky .cf-header-main {
  border-bottom-color: var(--cf-color-border);
}
.cf-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: var(--cf-header-height);
}
.cf-logo a {
  display: inline-block;
  font-size: 1.75rem;
  font-weight: 700;
}
.cf-logo a.custom-logo-link {
  max-width: 80px;
}
/* =========================================================
   Desktop Navigation
   ========================================================= */
.cf-menu {
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cf-header-actions {
  display: flex;
  flex-grow: 0;
  justify-content: flex-end;
  gap: 0.75rem;
}
.cf-header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--cf-color-ink);
  cursor: pointer;
}
.cf-header-icon {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}
.cf-header-btn:where(:hover, :focus-visible),
.cf-menu-toggle:where(:hover, :focus-visible),
.cf-mobile-menu-close:where(:hover, :focus-visible) {
  color: var(--cf-color-primary-hover);
  background-color: var(--cf-color-surface-alt);
  border-radius: var(--cf-radius-sm);
}
.cf-header-btn:focus-visible,
.cf-menu-toggle:focus-visible,
.cf-mobile-menu-close:focus-visible {
  outline: var(--cf-border-width-base) solid var(--cf-color-primary);
  outline-offset: var(--cf-space-xs);
  border-radius: var(--cf-radius-sm);
}
/* =========================================================
   Header Navigation States
   ========================================================= */
.cf-navigation a {
  color: var(--cf-color-text);
  text-decoration: none;
  transition:
    color var(--cf-transition-fast),
    background-color var(--cf-transition-fast);
}
/* ---------- Hover ---------- */
.cf-navigation a:hover {
  color: var(--cf-color-primary);
}
/* ---------- Keyboard Focus ---------- */
.cf-navigation a:focus-visible {
  outline: none;
  color: var(--cf-color-primary);
  box-shadow: var(--cf-focus-ring);
  border-radius: var(--cf-radius-sm);
}
/* ---------- Current WordPress Menu Item ---------- */
.cf-navigation .current-menu-item > a,
.cf-navigation .current_page_item > a,
.cf-navigation .current-menu-parent > a,
.cf-navigation .current-menu-ancestor > a {
  color: var(--cf-color-primary);
  font-weight: var(--cf-font-semibold);
}
.cf-navigation .current-menu-item > a,
.cf-navigation .current_page_item > a {
  position: relative;
}
.cf-navigation .current-menu-item > a::after,
.cf-navigation .current_page_item > a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -0.5rem;
  height: 0.125rem;
  border-radius: var(--cf-radius-full);
  background: var(--cf-color-primary);
}
/* =========================================================
   Header Navigation Dropdowns
   ========================================================= */
.cf-header-nav a:focus-visible {
  outline: none;
  box-shadow: var(--cf-focus-ring);
  border-radius: var(--cf-radius-sm);
}
.cf-header-nav .sub-menu {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--cf-transition-fast),
    visibility var(--cf-transition-fast);
}
.cf-header-nav .menu-item-has-children:hover > .sub-menu,
.cf-header-nav .menu-item-has-children:focus-within > .sub-menu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
/* =========================================================
   Sticky Header
   ========================================================= */
.cf-header {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: var(--cf-z-header);
  transition:
    box-shadow var(--cf-transition-base),
    background-color var(--cf-transition-base);
}
.cf-header.is-sticky {
  background: var(--cf-overlay-header);
  backdrop-filter: blur(var(--cf-blur-lg));
  box-shadow: var(--cf-shadow-sm);
}
.cf-mobile-menu-open .cf-header.is-sticky {
  backdrop-filter: none;
}
.cf-header-main {
  transition: min-height var(--cf-transition-base);
}
.cf-header.is-sticky .cf-header-main {
  min-height: var(--cf-size-header-sticky-height);
}
/* =========================================================
   Cart Counter
   ========================================================= */
.cf-cart-btn {
  position: relative;
}
.cf-cart-count {
  position: absolute;
  top: var(--cf-space-count-offset-top);
  right: var(--cf-space-count-offset-right);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--cf-size-cart-count);
  max-width: var(--cf-size-cart-count);
  height: var(--cf-size-cart-count);
  border-radius: 50%;
  background: var(--cf-color-primary);
  color: var(--cf-color-on-primary);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}
.cf-cart-count.is-empty {
  visibility: hidden;
  opacity: 0;
}
/* =========================================================
   Mobile Navigation
   ========================================================= */
.cf-menu-toggle {
  display: none;
}
.cf-mobile-menu,
.cf-mobile-menu-overlay {
  display: none;
}
/* =========================================================
   Tablet / Mobile Navigation
   ========================================================= */
@media (max-width: 64rem) {
  .cf-navigation,
  .cf-header-nav {
    display: none;
  }
  .cf-header-actions {
    flex-grow: 1;
  }
  .cf-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--cf-color-ink);
    cursor: pointer;
  }
  .cf-menu-toggle .cf-header-icon {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 2;
  }
  /* -----------------------------------------------------
       Mobile Drawer
       ----------------------------------------------------- */
  .cf-mobile-menu {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: var(--cf-z-dropdown);
    display: flex;
    width: min(85vw, var(--cf-size-mini-cart-width));
    max-width: 100vw;
    box-sizing: border-box;
    flex-direction: column;
    background: var(--cf-color-background);
    box-shadow: var(--cf-shadow-drawer);
    /*
         * translate3d prevents the hidden drawer from
         * producing problematic horizontal rendering
         * on mobile browsers.
         */
    transform: translate3d(100%, 0, 0);
    transition: transform var(--cf-transition-base);
    overflow-x: hidden;
  }
  .cf-mobile-menu.is-open {
    transform: translate3d(0, 0, 0);
  }
  /* -----------------------------------------------------
       Mobile Drawer Overlay
       ----------------------------------------------------- */
  .cf-mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: calc(var(--cf-z-dropdown) - 1);
    display: block;
    background: var(--cf-overlay-backdrop);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--cf-transition-base),
      visibility var(--cf-transition-base);
  }
  .cf-mobile-menu-overlay.is-visible {
    opacity: 1;
    visibility: visible;
  }
  /* -----------------------------------------------------
       Mobile Drawer Header
       ----------------------------------------------------- */
  .cf-mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--cf-space-lg);
    border-bottom: var(--cf-border-width-thin) solid var(--cf-color-border);
  }
  .cf-mobile-menu-title {
    margin: 0;
    min-width: 0;
    color: var(--cf-color-ink);
    font-weight: var(--cf-font-semibold);
  }
  .cf-mobile-menu-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: var(--cf-radius-sm);
    background: transparent;
    color: var(--cf-color-ink);
    cursor: pointer;
  }
  .cf-mobile-menu-close .cf-header-icon {
    width: 1.125rem;
    height: 1.125rem;
    stroke-width: 2;
  }
  /* -----------------------------------------------------
       Mobile Navigation Container
       ----------------------------------------------------- */
  .cf-mobile-nav {
    flex: 1;
    min-width: 0;
    padding: var(--cf-space-md);
    overflow-x: hidden;
    overflow-y: auto;
  }
  /* -----------------------------------------------------
       Mobile Navigation List
       ----------------------------------------------------- */
  .cf-mobile-nav-list {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--cf-space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .cf-mobile-nav-list li {
    min-width: 0;
  }
  .cf-mobile-nav-list a {
    display: block;
    min-width: 0;
    padding: var(--cf-space-md);
    border-radius: var(--cf-radius-sm);
    color: var(--cf-color-text);
    text-decoration: none;
    /*
         * Prevent long menu labels from forcing the
         * drawer beyond the viewport.
         */
    overflow-wrap: anywhere;
    word-break: break-word;
    transition:
      color var(--cf-transition-fast),
      background-color var(--cf-transition-fast);
  }
  .cf-mobile-nav-list a:hover,
  .cf-mobile-nav-list .current-menu-item > a,
  .cf-mobile-nav-list .current_page_item > a {
    color: var(--cf-color-primary);
    background: var(--cf-color-surface);
  }
  .cf-mobile-nav-list a:focus-visible {
    outline: none;
    box-shadow: var(--cf-focus-ring);
  }
}
/* =========================================================
   Prevent Horizontal Page Overflow When Mobile Menu Opens
   ========================================================= */
html.cf-mobile-menu-open,
body.cf-mobile-menu-open {
  overflow-x: hidden;
}
body.cf-mobile-menu-open {
  overflow-y: hidden;
}
/* =========================================================
   WordPress Admin Bar Offset
   ========================================================= */
#wpadminbar ~ .cf-header .cf-mobile-menu {
  padding-block-start: var(--cf-size-adminbar-offset);
}