/* ============================================================
   H1 — NAVIGATION
   ============================================================ */

.h1-nav {
  position: absolute;
  top: var(--nav-top);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-nav);
  width: min(var(--nav-width), calc(100% - 32px));
}

.h1-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--nav-height);
  padding: 0 var(--nav-padding-x);
  background: rgba(199, 177, 151, var(--color-tan-opacity));  /* #C7B197 */
  border: none;
  border-radius: var(--nav-radius);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: none;
}

/* ---------- Logo ---------- */
.h1-nav__logo img {
  width: var(--nav-logo-size);
  height: var(--nav-logo-size);
  filter: brightness(0) saturate(100%) invert(20%) sepia(9%) saturate(2000%) hue-rotate(115deg) brightness(95%) contrast(95%);
}

/* ---------- Desktop links ---------- */
.h1-nav__links {
  display: flex;
  align-items: center;
  gap: var(--nav-link-gap);
}

.h1-nav__link {
  position: relative;
  font-size: var(--nav-font-size);
  font-weight: 500;
  letter-spacing: var(--nav-letter-spacing);
  text-transform: uppercase;
  color: var(--nav-link-color);
  padding: 4px 0;
  transition: color 0.25s ease;
}

.h1-nav__link:hover {
  color: var(--nav-link-active-color);
}

.h1-nav__link.is-active {
  color: var(--nav-link-active-color);
}

.h1-nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  width: 50%;                     /* half width */
  bottom: calc(-1 * var(--nav-link-active-gap));
  height: var(--nav-link-active-bar);
  background: var(--nav-link-active-color);
  border-radius: 2px;
}

/* ---------- Right actions ---------- */
.h1-nav__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.h1-nav__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--nav-action-color);
  transition: opacity 0.25s ease;
}

.h1-nav__action img {
  width: var(--nav-icon-size);
  height: var(--nav-icon-size);
}

.h1-nav__cart-total {
  font-size: var(--nav-cart-total-size);
  color: var(--nav-cart-total-color);
  font-weight: 500;
}

/* ---------- Hamburger (hidden on desktop) ---------- */
.h1-nav__hamburger { display: none; }

/* ---------- Mobile menu ---------- */
.h1-nav__mobile-menu {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(320px, 82vw);
  background: #1b3524;
  padding: 24px;
  transform: translateX(-100%);
  transition: transform 0.35s var(--cursor-easing);
  z-index: var(--z-mobile-menu);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.h1-nav__mobile-menu.is-open { transform: translateX(0); }

.h1-nav__mobile-menu ul { display: flex; flex-direction: column; gap: 18px; }

.h1-nav__mobile-menu a {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-tan);
}

.h1-nav__mobile-menu a.is-active { color: #ffffff; }

.h1-nav__close { align-self: flex-end; }

/* ============================================================
   TABLET  (641px – 1400px)
   ============================================================ */
@media (max-width: 1600px) {
  .h1-nav {
    top: var(--nav-top-tablet);
    width: min(var(--nav-width-tablet), calc(100% - 32px));
  }
  .h1-nav__inner {
    height: var(--nav-height-tablet);
    padding: 0 var(--nav-padding-x-tablet);
    border-radius: var(--nav-radius-tablet);
  }
  .h1-nav__links { gap: var(--nav-link-gap-tablet); }
  .h1-nav__link { font-size: var(--nav-font-size-tablet); }
  .h1-nav__logo img {
    width: var(--nav-logo-size-tablet);
    height: var(--nav-logo-size-tablet);
  }
  .h1-nav__action img {
    width: var(--nav-icon-size-tablet);
    height: var(--nav-icon-size-tablet);
  }
  .h1-nav__cart-total { font-size: var(--nav-cart-total-size-tablet); }
}

/* ============================================================
   MOBILE  (up to 640px)
   ============================================================ */
@media (max-width: 640px) {
  .h1-nav {
    top: var(--nav-top-mobile);
    width: var(--nav-width-mobile);
  }
  .h1-nav__inner {
    height: var(--nav-height-mobile);
    padding: 0 var(--nav-padding-x-mobile);
    border-radius: var(--nav-radius-mobile);
  }
  .h1-nav__links { display: none; }
  .h1-nav__hamburger { display: inline-flex; }
  .h1-nav__cart-total { display: none; }
  .h1-nav__logo img {
    width: var(--nav-logo-size-mobile);
    height: var(--nav-logo-size-mobile);
  }
  .h1-nav__action img {
    width: var(--nav-icon-size-mobile);
    height: var(--nav-icon-size-mobile);
  }
}