Navbar 07

<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<nav class="nav07_component">
  <div class="nav07_ticker">
    <p class="nav07_ticker_left">N°07 — FREE SHIPPING OVER $120</p>
    <p class="nav07_ticker_mid">(C) 2026 STUDIO GOODS ISSUE</p>
    <p class="nav07_ticker_right">PAGE / SHOP-ALL</p>
  </div>
  <div class="nav07_bar">
    <a class="nav07_brand" href="#">
      <h1 class="nav07_brand_word">FIELD</h1>
      <p class="nav07_brand_num">07</p>
    </a>
    <ul class="nav07_links">
      <li class="nav07_link_item">
        <a class="nav07_link" href="#">Apparel</a>
        <div class="nav07_mega">
          <p class="nav07_mega_kicker">01 / Apparel Index</p>
          <ul class="nav07_mega_list">
            <li class="nav07_mega_li">
              <a class="nav07_mega_link" href="#">Outerwear & Shells</a>
            </li>
            <li class="nav07_mega_li">
              <a class="nav07_mega_link" href="#">Knitwear & Fleece</a>
            </li>
            <li class="nav07_mega_li">
              <a class="nav07_mega_link" href="#">Trousers & Denim</a>
            </li>
          </ul>
        </div>
      </li>
      <li class="nav07_link_item">
        <a class="nav07_link" href="#">Footwear</a>
      </li>
      <li class="nav07_link_item">
        <a class="nav07_link" href="#">Objects</a>
      </li>
      <li class="nav07_link_item">
        <a class="nav07_link nav07_link_sale" href="#">Archive Sale</a>
      </li>
    </ul>
    <div class="nav07_actions">
      <div class="nav07_search">
        <img class="nav07_search_icon" src="https://pub-8060008fc1ab494c98adf87ab62286c4.r2.dev/assets/inspiration/navbar-deck-editorial-07-1-12.webp" alt="Search" />
        <p class="nav07_search_label">Search the store</p>
      </div>
      <a class="nav07_icon_btn" href="#">
        <img class="nav07_icon_img" src="https://pub-8060008fc1ab494c98adf87ab62286c4.r2.dev/assets/inspiration/navbar-deck-editorial-07-2-13.webp" alt="Account" />
      </a>
      <a class="nav07_cart" href="#">
        <p class="nav07_cart_label">Cart</p>
        <p class="nav07_cart_count">03</p>
      </a>
    </div>
  </div>
</nav>

<style>
.nav07_component {
  width:100%;
  background:#eae8e4;
  border-bottom:2px solid #141414;
  font-family:Helvetica,Arial,sans-serif;
  color:#141414;
  box-sizing:border-box;
}

.nav07_ticker {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 32px;
  border-bottom:1px solid rgba(20,20,20,0.2);
  font-size:10px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  box-sizing:border-box;
}

.nav07_ticker_left {
  margin:0;
  color:#141414;
}

.nav07_ticker_mid {
  margin:0;
  color:#e63b2e;
}

.nav07_ticker_right {
  margin:0;
  color:#141414;
}

.nav07_bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 32px;
  gap:32px;
  box-sizing:border-box;
}

.nav07_brand {
  display:flex;
  align-items:baseline;
  gap:8px;
  text-decoration:none;
  color:#141414;
}

.nav07_brand_word {
  margin:0;
  font-size:34px;
  font-weight:900;
  letter-spacing:-0.03em;
  text-transform:uppercase;
  line-height:1;
  font-family:Helvetica,Arial,sans-serif;
}

.nav07_brand_num {
  margin:0;
  font-size:34px;
  font-weight:900;
  letter-spacing:-0.03em;
  line-height:1;
  color:#e63b2e;
  font-family:Helvetica,Arial,sans-serif;
}

.nav07_links {
  display:flex;
  align-items:center;
  gap:28px;
  list-style:none;
  margin:0;
  padding:0;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-weight:600;
}

.nav07_link_item {
  position:relative;
}

.nav07_link {
  text-decoration:none;
  color:#141414;
  padding:4px 0;
  display:inline-block;
  transition:color 0.15s ease;
}

.nav07_mega {
  position:absolute;
  left:0;
  top:100%;
  margin-top:12px;
  background:#141414;
  color:#eae8e4;
  padding:24px;
  width:340px;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity 0.18s ease,transform 0.18s ease;
  border:2px solid #141414;
  box-shadow:8px 8px 0 #e63b2e;
  z-index:40;
}

.nav07_mega_kicker {
  margin:0 0 16px 0;
  font-size:10px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:#e63b2e;
}

.nav07_mega_list {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.nav07_mega_link {
  text-decoration:none;
  color:#eae8e4;
  font-size:15px;
  font-weight:600;
  letter-spacing:-0.01em;
}

.nav07_link nav07_link_sale {
  text-decoration:none;
  color:#e63b2e;
  padding:4px 0;
  display:inline-block;
}

.nav07_actions {
  display:flex;
  align-items:center;
  gap:16px;
}

.nav07_search {
  display:flex;
  align-items:center;
  gap:8px;
  background:#141414;
  color:#eae8e4;
  padding:8px 16px;
  border:2px solid #141414;
  box-sizing:border-box;
}

.nav07_search_icon {
  width:16px;
  height:16px;
  object-fit:contain;
}

.nav07_search_label {
  margin:0;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:#eae8e4;
}

.nav07_icon_btn {
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border:2px solid #141414;
  color:#141414;
  text-decoration:none;
  background:transparent;
  box-sizing:border-box;
}

.nav07_icon_img {
  width:20px;
  height:20px;
  object-fit:contain;
}

.nav07_cart {
  display:flex;
  align-items:center;
  gap:8px;
  background:#e63b2e;
  color:#141414;
  padding:0 16px;
  height:40px;
  text-decoration:none;
  border:2px solid #141414;
  box-sizing:border-box;
}

.nav07_cart_label {
  margin:0;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.12em;
  font-weight:600;
  color:#141414;
}

.nav07_cart_count {
  margin:0;
  font-size:22px;
  font-weight:900;
  line-height:1;
  letter-spacing:-0.03em;
  color:#141414;
  font-family:Helvetica,Arial,sans-serif;
}
</style>