/* header-compact.css (Oct 7 2026) - site header on phones + tablets, merged with the Account button + order-update badge (order emails).
   index.html  #main-app > nav > div : child 1 = logo, child 2 = menu links (Browse / Stock Order / Supplies / Cart / Account button with
               business name + badge), child 3 = phone + LOGOUT, child 4 = #hc-tools added by header-compact.js (Cart shortcut + Menu button).
   account.html nav[data-hc="account"] > div : since Oct 9 2026 the same 3 parts as the shop header (links go to index.html#section),
               so every rule below applies to both headers; #hc-tools = Cart shortcut (to index.html#cart) + Menu.
   Markup of the existing children is NOT changed (only re-arranged with CSS). Desktop 1280 px and wider: nothing here applies. */
#hc-tools { display: none; }

/* ---------- shop + account headers: phones (up to 767 px) - one-line header [BT Berry Tire Wholesale ...... Cart(n) Menu] ---------- */
@media (max-width: 767px) {
  #main-app > nav, nav[data-hc="account"] { padding-top: 8px !important; padding-bottom: 8px !important; }
  #main-app > nav > div, nav[data-hc="account"] > div { flex-wrap: wrap; gap: 0 8px; padding-left: 12px; padding-right: 12px; }
  #main-app > nav > div > div:nth-child(1), nav[data-hc="account"] > div > div:nth-child(1) { gap: 8px; min-width: 0; flex: 1; }
  #main-app > nav > div > div:nth-child(1) > div:first-child, nav[data-hc="account"] > div > div:nth-child(1) > div:first-child { width: 32px; height: 32px; font-size: 1.1rem; flex: none; }
  #main-app > nav > div > div:nth-child(1) > div:last-child, nav[data-hc="account"] > div > div:nth-child(1) > div:last-child { font-size: 1.15rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #main-app > nav > div > div:nth-child(2), #main-app > nav > div > div:nth-child(3), nav[data-hc="account"] > div > div:nth-child(2), nav[data-hc="account"] > div > div:nth-child(3) { display: none !important; }
  #main-app > nav.hc-open > div > div:nth-child(2), nav[data-hc="account"].hc-open > div > div:nth-child(2) { display: flex !important; order: 3; width: 100%; flex-direction: column; align-items: stretch; gap: 0; margin-top: 8px; border-top: 1px solid #e5e5e5; font-size: 1.05rem; }
  #main-app > nav.hc-open > div > div:nth-child(2) > a, nav[data-hc="account"].hc-open > div > div:nth-child(2) > a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid #f0f0f0; padding: 0 4px; }
  #main-app > nav.hc-open > div > div:nth-child(3), nav[data-hc="account"].hc-open > div > div:nth-child(3) { display: flex !important; order: 4; width: 100%; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; padding: 10px 4px 4px; }
  #main-app > nav.hc-open > div > div:nth-child(3) a[href^="tel:"], nav[data-hc="account"].hc-open > div > div:nth-child(3) a[href^="tel:"] { min-height: 44px; }
  /* Gov pricing bar: buttons stay; the explanation shrinks to one line (tap it to read all) */
  #main-app > #gov-bar > div { padding-top: 8px; padding-bottom: 8px; gap: 6px; }
  #main-app > #gov-bar > div > div:last-child { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; font-size: .75rem; }
  #main-app > #gov-bar > div > div:last-child.hc-more { display: block; }
}

/* ---------- both pages, phones: Cart / Menu buttons; Account button keeps its pill look inside the open Menu ---------- */
@media (max-width: 767px) {
  #hc-tools { display: flex; order: 2; gap: 6px; align-items: center; }
  #hc-tools button { position: relative; min-height: 44px; min-width: 44px; padding: 0 10px; border: 1px solid #000; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: .95rem; font-weight: 600; background: #fff; color: #000; }
  #hc-tools #hc-menu[aria-expanded="true"] { background: #111; color: #fff; }
  #hc-cart-n { min-width: 20px; padding: 0 5px; border-radius: 10px; background: #111; color: #fff; font-size: .75rem; line-height: 20px; text-align: center; }
  /* order-update badge on the Menu button (same count as the Account button; order-badge.js fills every [data-acct-badge]) */
  #hc-tools #hc-menu .acct-badge { top: -9px; right: -9px; }
  #main-app > nav.hc-open > div > div:nth-child(2) > a.acct-link, nav[data-hc="account"].hc-open > div > div:nth-child(2) > a.acct-link { align-self: flex-start; display: inline-flex; min-height: 48px; margin: 10px 0 6px; padding: 5px 20px 5px 10px; border: 1px solid #000; max-width: calc(100% - 16px); }
  nav[data-hc="account"].hc-open > div > div:nth-child(2) > a.acct-link[aria-current="page"] { border-color: #000; }
}

/* ---------- shop + account headers: tablets + small laptops (768-1279 px). Row 1: logo ... phone, LOGOUT.  Row 2: menu links + Account button ---------- */
@media (min-width: 768px) and (max-width: 1279px) {
  #main-app > nav, nav[data-hc="account"] { padding-top: 14px !important; padding-bottom: 10px !important; }
  #main-app > nav > div, nav[data-hc="account"] > div { flex-wrap: wrap; gap: 8px 24px; padding-left: 24px; padding-right: 24px; max-width: 100%; }
  #main-app > nav > div > div:nth-child(1) > div:last-child, nav[data-hc="account"] > div > div:nth-child(1) > div:last-child { font-size: 1.6rem; white-space: nowrap; }
  #main-app > nav > div > div:nth-child(3), nav[data-hc="account"] > div > div:nth-child(3) { order: 2; gap: 16px; }
  #main-app > nav > div > div:nth-child(3) a[href^="tel:"], nav[data-hc="account"] > div > div:nth-child(3) a[href^="tel:"] { white-space: nowrap; min-height: 40px; }
  #main-app > nav > div > div:nth-child(2), nav[data-hc="account"] > div > div:nth-child(2) { order: 3; width: 100%; gap: 8px 32px; font-size: 1.05rem; flex-wrap: wrap; align-items: center; }
  #main-app > nav > div > div:nth-child(2) > a, nav[data-hc="account"] > div > div:nth-child(2) > a { min-height: 40px; display: inline-flex; align-items: center; }
}

/* ---------- shop + account headers: desktop (1280 px +): a little air between the Account button and the phone number ---------- */
@media (min-width: 1280px) {
  #main-app > nav > div > div:nth-child(3), nav[data-hc="account"] > div > div:nth-child(3) { margin-left: 16px; }
}