/*
 * Global chrome: utility bar, sticky header, mega-menu, footer.
 */

[x-cloak] { display: none !important; }

/* ---------------------------------------------------------------------------
 * Utility bar
 * ------------------------------------------------------------------------ */

.m-utility {
  background: var(--green-800);
  color: var(--mint-500);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  /* 4px, not 7: the links below take the difference as tap-target padding,
     so the bar keeps its 35px height while each link clears WCAG 2.5.8. */
  padding: 4px var(--gutter);
  font-size: 13px;
}

.m-utility__promise { font-weight: 600; color: var(--gold-200); }

.m-utility__links { display: flex; gap: 16px; }
.m-utility__links a { color: var(--mint-500); white-space: nowrap; padding-block: 3px; }
.m-utility__links a:hover { color: #fff; }

/* ---------------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------------ */

.m-header {
  position: sticky;
  top: 0;
  z-index: 70;
  background: var(--surface);
  border-bottom: 1px solid var(--border-300);
}

.m-header__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px var(--gutter);
  flex-wrap: wrap;
}


.m-header__logo { flex: none; display: block; }
.m-header__logo img {
  height: 34px;
  width: auto;
  object-fit: contain;
}

.m-search {
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: stretch;
  border: 2px solid var(--green-700);
  border-radius: var(--r-control);
  overflow: hidden;
  background: var(--surface);
}
.m-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 11px 13px;
  font-size: 14px;
  outline: none;
  background: transparent;
}
.m-search__submit {
  flex: none;
  border: 0;
  background: var(--green-700);
  color: #fff;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 600;
  transition: background var(--t-fast);
}
.m-search__submit:hover { background: var(--green-800); }

.m-header__orders {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-700);
  white-space: nowrap;
}
.m-header__orders:hover { color: var(--green-700); }

.m-cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink-900);
  color: #fff;
  border-radius: var(--r-control);
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--t-fast);
}
.m-cart-btn:hover { background: var(--green-700); color: #fff; }

.m-cart-btn__count {
  background: var(--gold-500);
  color: var(--ink-900);
  border-radius: var(--r-pill);
  padding: 1px 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}
.m-cart-btn__total { opacity: .85; font-weight: 500; }
.m-cart-btn__total .woocommerce-Price-amount { color: inherit; }

/*
 * Mobile header.
 *
 * Left to wrap freely, the four items each took their own line: logo, search,
 * Orders, cart -- 128px of header on a 412px phone, and 201px of chrome once
 * the utility bar and nav row are counted. That is a quarter of the viewport
 * gone before a single product.
 *
 * Logo and cart share the top line, search takes the full width beneath, and
 * the Orders link is dropped -- "Track order" in the utility bar goes to the
 * same place.
 */
@container (max-width: 620px) {
  .m-header__bar {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 12px;
    padding: 8px var(--gutter);
  }
  /* Rows pinned explicitly: an explicit column with an auto row lets grid
     push the cart onto a line of its own, which is the problem being fixed. */
  .m-header__logo { grid-area: 1 / 1; }
  .m-cart-btn {
    grid-area: 1 / 2;
    justify-self: end;
    padding: 8px 12px;
  }
  .m-search { grid-area: 2 / 1 / 3 / -1; }
  .m-search__input { padding: 9px 11px; }
  .m-header__orders { display: none; }
  .m-header__logo img { height: 28px; }
}

/* ---------------------------------------------------------------------------
 * Nav row
 * ------------------------------------------------------------------------ */

.m-nav {
  display: flex;
  gap: 22px;
  padding: 0 var(--gutter) 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.m-nav::-webkit-scrollbar { display: none; }

.m-nav__item {
  flex: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-700);
  white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.m-nav__item:hover { color: var(--green-700); }
.m-nav__item.is-open {
  color: var(--green-700);
  border-bottom-color: var(--green-700);
}

/* ---------------------------------------------------------------------------
 * Mega-menu
 * ------------------------------------------------------------------------ */

.m-mega {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 24px;
  background: var(--surface);
  border-top: 1px solid var(--border-300);
  padding: 22px 18px;
  box-shadow: var(--shadow-menu);
}

.m-mega__heading {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 10px;
}

.m-mega__list { list-style: none; margin: 0; padding: 0; }
.m-mega__list li + li { margin-top: 7px; }
.m-mega__list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-700);
}
.m-mega__list a:hover { color: var(--green-700); }
.m-mega__count { font-size: 13px; color: var(--ink-400); flex: none; }

.m-mega__close {
  grid-column: 1 / -1;
  justify-self: end;
  background: none;
  border: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-500);
}
.m-mega__close:hover { color: var(--green-700); }

/* ---------------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------------ */

.m-footer {
  background: var(--green-900);
  color: var(--mint-200);
  padding: 34px var(--gutter) 22px;
}

.m-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 26px;
}

.m-footer__logo {
  height: 32px;
  width: auto;
  filter: brightness(0) invert(1);
  margin-bottom: 12px;
}

.m-footer__positioning {
  font-size: 13.5px;
  color: var(--mint-200);
  line-height: 1.55;
  margin-bottom: 14px;
}

.m-footer__badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.m-footer__badges li {
  border: 1px solid #2C3D34;
  border-radius: var(--r-badge);
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--mint-400);
}

.m-footer__heading {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: 12px;
}

.m-footer__col ul { list-style: none; margin: 0; padding: 0; }
.m-footer__col li + li { margin-top: 8px; }
.m-footer__col a { font-size: 13.5px; color: var(--mint-200); }
.m-footer__col a:hover { color: #fff; }

.m-footer__disclaimer {
  border-top: 1px solid #1E2721;
  margin-top: 26px;
  padding-top: 16px;
  font-size: 13px;
  color: var(--mint-200);
  line-height: 1.6;
}