.elementor-3206 .elementor-element.elementor-element-ca5501d{--display:flex;--min-height:24px;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3206 .elementor-element.elementor-element-ca5501d:not(.elementor-motion-effects-element-type-background), .elementor-3206 .elementor-element.elementor-element-ca5501d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-225d7bd );}.elementor-3206 .elementor-element.elementor-element-0f8a78a{--display:flex;--min-height:24px;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-3206 .elementor-element.elementor-element-0f8a78a:not(.elementor-motion-effects-element-type-background), .elementor-3206 .elementor-element.elementor-element-0f8a78a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-c302e2c );}.elementor-3206 .elementor-element.elementor-element-b8120ea{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:flex-end;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3206 .elementor-element.elementor-element-b8120ea:not(.elementor-motion-effects-element-type-background), .elementor-3206 .elementor-element.elementor-element-b8120ea > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-c302e2c );}.elementor-3206 .elementor-element.elementor-element-f99ada1{font-family:"Proxima Nova Cond SB";font-size:15px;font-weight:600;color:#3341557D;}.elementor-3206 .elementor-element.elementor-element-8cd2016{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-3206 .elementor-element.elementor-element-006d823{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1024px){.elementor-3206 .elementor-element.elementor-element-f99ada1{font-size:14px;}}@media(min-width:768px){.elementor-3206 .elementor-element.elementor-element-ca5501d{--content-width:1060px;}}@media(max-width:767px){.elementor-3206 .elementor-element.elementor-element-ca5501d{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3206 .elementor-element.elementor-element-f99ada1{font-size:13px;}.elementor-3206 .elementor-element.elementor-element-8cd2016{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}}/* Start custom CSS for html, class: .elementor-element-8cd2016 */<header class="bys-header">
  <div class="bys-container bys-header-container">
    
    <!-- Logo (Tamanho Aumentado) -->
    <a href="/" class="bys-logo" aria-label="BoostYourSupps Home">
      <span class="bys-logo-primary">boost</span><span class="bys-logo-accent">your</span><span class="bys-logo-primary">supps</span>
    </a>

    <!-- Checkbox Mobile -->
    <input type="checkbox" id="bys-mobile-toggle" class="bys-mobile-toggle" aria-label="Abrir menu" />
    
    <!-- Botão Hambúrguer (Mobile) -->
    <label for="bys-mobile-toggle" class="bys-burger" aria-hidden="true">
      <span></span>
      <span></span>
      <span></span>
    </label>

    <!-- Overlay Mobile -->
    <label for="bys-mobile-toggle" class="bys-nav-backdrop" aria-hidden="true"></label>

    <!-- Navegação -->
    <nav class="bys-nav-wrapper">
      <ul class="bys-nav-list">
        <li class="bys-nav-item"><a href="#" class="bys-nav-link">Reviews</a></li>
        <li class="bys-nav-item"><a href="#" class="bys-nav-link">Health Guides</a></li>
        <li class="bys-nav-item"><a href="#" class="bys-nav-link">Comparisons</a></li>
        <li class="bys-nav-item"><a href="#" class="bys-nav-link">Topics</a></li>
      </ul>

      <!-- Botão Search Minimalista (Sem Cor / Borda Leve) -->
      <div class="bys-header-actions">
        <button type="button" class="bys-search-btn" aria-label="Search">
          <svg class="bys-icon" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="11" cy="11" r="8"></circle>
            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
          </svg>
          <span class="bys-search-label">Search</span>
        </button>
      </div>
    </nav>

  </div>
</header>

<style>
/* =========================================
   BoostYourSupps - Header Styles Atualizados
   ========================================= */

.bys-header {
  background-color: #FFFFFF;
  border-bottom: 1px solid #F1F5F9;
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
}

.bys-header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 80px; /* Levemente mais alto para acomodar a logo maior */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo Aumentada */
.bys-logo {
  text-decoration: none;
  font-size: 1.85rem; /* Aumentado */
  font-weight: 800;
  letter-spacing: -0.03em;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.bys-logo-primary {
  color: var(--bys-color-primary, #007EAF);
}

.bys-logo-accent {
  color: var(--bys-color-accent, #FF8500);
}

.bys-mobile-toggle {
  display: none;
}

/* Navegação Desktop */
.bys-nav-wrapper {
  display: flex;
  align-items: center;
  gap: 2.25rem;
}

.bys-nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2rem;
}

.bys-nav-link {
  text-decoration: none;
  color: #1E293B;
  font-size: 0.95rem;
  font-weight: 600;
  transition: color 0.2s ease;
  position: relative;
  padding: 0.5rem 0;
}

.bys-nav-link:hover {
  color: var(--bys-color-primary, #007EAF);
}

/* Botão Search Clean (Sem preenchimento + Borda cinza clara) */
.bys-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid #E2E8F0; /* Cinza bem clarinho */
  color: #64748B;            /* Cinza médio suave */
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.bys-search-btn:hover {
  border-color: #CBD5E1;
  color: #0F172A;
  background-color: #F8FAFC;
}

.bys-search-btn .bys-icon {
  color: #94A3B8;
  transition: color 0.2s ease;
}

.bys-search-btn:hover .bys-icon {
  color: var(--bys-color-primary, #007EAF);
}

/* Mobile Hambúrguer */
.bys-burger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  cursor: pointer;
}

.bys-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--bys-color-primary, #007EAF);
  border-radius: 2px;
  transition: all 0.2s ease;
}

.bys-nav-backdrop {
  display: none;
}

/* Responsivo (Mobile & Tablet) */
@media (max-width: 991px) {
  .bys-burger {
    display: flex;
  }

  .bys-nav-backdrop {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.3);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
  }

  .bys-nav-wrapper {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: #FFFFFF;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.08);
    flex-direction: column;
    align-items: flex-start;
    padding: 5rem 1.75rem 2rem;
    gap: 2rem;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1001;
  }

  .bys-nav-list {
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
  }

  .bys-nav-link {
    font-size: 1.05rem;
    display: block;
    width: 100%;
    border-bottom: 1px solid #F1F5F9;
    padding-bottom: 0.75rem;
  }

  .bys-header-actions {
    width: 100%;
  }

  .bys-search-btn {
    width: 100%;
    justify-content: center;
    padding: 0.65rem 1rem;
  }

  /* Estados Abertura */
  .bys-mobile-toggle:checked ~ .bys-nav-wrapper {
    right: 0;
  }

  .bys-mobile-toggle:checked ~ .bys-nav-backdrop {
    opacity: 1;
    visibility: visible;
  }

  .bys-mobile-toggle:checked ~ .bys-burger span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .bys-mobile-toggle:checked ~ .bys-burger span:nth-child(2) {
    opacity: 0;
  }

  .bys-mobile-toggle:checked ~ .bys-burger span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}
</style>/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Proxima Nova Cond SB';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://boostyoursupps.com/wp-content/uploads/2026/07/Proxima-Nova-Cond-SB.ttf') format('truetype');
}
/* End Custom Fonts CSS */