/*
  TradesFolks — Header UI Primitives · Sprint 136
  Shared Shell/Button/Menu header architecture for #tf-global-header[data-tf-ui="public-header-v2"]
  Replaces: header-mega-menu-premium, header-secondary-nav-removed,
  header-compare-cart-premium, header-compare-cart-yellow, header-ui-hotfix,
  header-search-final-fix, header-balance, header-alignment,
  topbar-final-compact-fix, header-canonical, desktop-header-geometry,
  utility-bar-center, auth-header-responsive, header-balanced-premium,
  header-final-balance, mobile-header-hero-premium, global-header-v2,
  mobile-header-search.css, mobile-header-home-clean.css (header rules only)
*/

:root{
  --tf-navy-950:#061a3f;
  --tf-navy-900:#071b46;
  --tf-blue-700:#0b3b87;
  --tf-gold-500:#f4b942;
  --tf-gold-600:#e2a52a;
  --tf-line:#e3e8f0;
  --tf-line-strong:#c7d0dd;
  --tf-text:#0f172a;
  --tf-text-muted:#64748b;
  --tf-radius:10px;
}

#tf-global-header[data-tf-ui="public-header-v2"]{
  position:sticky;top:0;z-index:200;background:#fff;
  box-shadow:0 1px 3px rgba(6,26,63,.08);
  font-family:inherit;
}
#tf-global-header[data-tf-ui="public-header-v2"],#tf-global-header[data-tf-ui="public-header-v2"] *{
  -webkit-tap-highlight-color:transparent;
}
#tf-global-header[data-tf-ui="public-header-v2"] .shell{width:min(var(--app-max,1720px),calc(100% - (var(--app-gutter,clamp(12px,2vw,32px))*2)));max-width:none;margin:0 auto;}

/* Skip-to-content link: visually hidden until keyboard focus (a11y best
   practice — removing it entirely would hurt keyboard/screen-reader users) */
.tf-skip-link{
  position:fixed;left:14px;top:10px;z-index:5000;
  transform:translateY(-160%);padding:9px 13px;border-radius:8px;
  background:var(--tf-navy-900);color:#fff;font-size:12px;font-weight:800;
  box-shadow:0 8px 22px rgba(7,27,70,.2);transition:transform .15s;
}
.tf-skip-link:focus{transform:translateY(0);outline:3px solid var(--tf-gold-500);outline-offset:2px;}

/* ---------- Utility bar (desktop) ---------- */
#tf-global-header[data-tf-ui="public-header-v2"] .utility-bar{background:var(--tf-navy-950);color:#c7d2e0;}
#tf-global-header[data-tf-ui="public-header-v2"] .utility-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:30px;font-size:12px;gap:16px;
}
#tf-global-header[data-tf-ui="public-header-v2"] .tf-marketplace-claim{color:#9fb0cc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#tf-global-header[data-tf-ui="public-header-v2"] .tf-marketplace-claim strong{color:#fff;font-weight:600;}
#tf-global-header[data-tf-ui="public-header-v2"] .tf-claim-separator{opacity:.6;}
#tf-global-header[data-tf-ui="public-header-v2"] .utility-inner nav{display:flex;align-items:center;gap:20px;}
#tf-global-header[data-tf-ui="public-header-v2"] .utility-inner nav>a{color:#c7d2e0;text-decoration:none;transition:color .15s;}
#tf-global-header[data-tf-ui="public-header-v2"] .utility-inner nav>a:hover{color:#fff;}
#tf-global-header[data-tf-ui="public-header-v2"] .tf-utility-seller-cta{
  background:var(--tf-gold-500);color:var(--tf-navy-950)!important;
  padding:6px 14px;border-radius:999px;font-weight:700;
}
#tf-global-header[data-tf-ui="public-header-v2"] .tf-utility-seller-cta:hover{background:var(--tf-gold-600);}
#tf-global-header[data-tf-ui="public-header-v2"] .utility-locale{color:#8fa0bd;padding-left:16px;border-left:1px solid rgba(255,255,255,.15);}

/* ---------- Utility bar (mobile) ---------- */
#tf-global-header[data-tf-ui="public-header-v2"] .tf-mobile-utility{display:none;}

/* ---------- Header main row ---------- */
#tf-global-header[data-tf-ui="public-header-v2"] .header-main{
  display:grid;
  grid-template-areas:"brand search actions";
  grid-template-columns:auto minmax(320px,1fr) auto;
  align-items:center;gap:16px;padding:7px 0;
  width:min(var(--app-max,1720px),calc(100% - (var(--app-gutter,clamp(12px,2vw,32px))*2)));
  margin:0 auto;position:relative;
}
#tf-global-header[data-tf-ui="public-header-v2"] .brand{grid-area:brand;display:flex;align-items:center;}
#tf-global-header[data-tf-ui="public-header-v2"] .brand img{height:34px;width:auto;display:block;}

/* ---------- Search ---------- */
#tf-global-header[data-tf-ui="public-header-v2"] .global-search{
  grid-area:search;display:flex;align-items:center;gap:8px;height:42px;
}
#tf-global-header[data-tf-ui="public-header-v2"] .tf-search-input-group{
  flex:1;min-width:0;display:grid;grid-template-columns:auto 1fr auto auto;
  align-items:stretch;height:100%;
  border:1.5px solid var(--tf-line-strong);border-radius:999px;
  overflow:hidden;background:#fff;transition:border-color .15s,box-shadow .15s;
}
#tf-global-header[data-tf-ui="public-header-v2"] .global-search:focus-within .tf-search-input-group{
  border-color:var(--tf-blue-700);box-shadow:0 0 0 3px rgba(11,59,135,.12);
}
#tf-global-header[data-tf-ui="public-header-v2"] .tf-search-input-group select{
  border:none;border-right:1px solid var(--tf-line);background:#f8fafc;
  padding:0 30px 0 14px;font-size:13.5px;font-weight:600;color:var(--tf-text);
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;
  cursor:pointer;max-width:150px;
}
#tf-global-header[data-tf-ui="public-header-v2"] .tf-search-input-group input{
  border:none;padding:0 12px;font-size:14px;color:var(--tf-text);min-width:0;
}
#tf-global-header[data-tf-ui="public-header-v2"] .tf-search-input-group input:focus{outline:none;}
#tf-global-header[data-tf-ui="public-header-v2"] .tf-search-input-group input::placeholder{color:var(--tf-text-muted);}
#tf-global-header[data-tf-ui="public-header-v2"] .mobile-search-icon{display:none;}
#tf-global-header[data-tf-ui="public-header-v2"] .tf-header-desktop-voice{
  display:flex;align-items:center;justify-content:center;width:44px;
  border:none;outline:none;appearance:none;-webkit-appearance:none;box-shadow:none;margin:0;
  border-left:1px solid var(--tf-line);background:#fff;
  color:var(--tf-text-muted);cursor:pointer;transition:color .15s;
}
#tf-global-header[data-tf-ui="public-header-v2"] .tf-header-desktop-voice:hover{color:var(--tf-blue-700);}
#tf-global-header[data-tf-ui="public-header-v2"] .tf-header-desktop-voice svg{width:19px;height:19px;flex-shrink:0;}
#tf-global-header[data-tf-ui="public-header-v2"] .tf-header-search-submit svg{display:none;}
#tf-global-header[data-tf-ui="public-header-v2"] .mobile-voice-search svg{width:21px;height:21px;flex-shrink:0;}
#tf-global-header[data-tf-ui="public-header-v2"] .tf-mobile-search-submit svg{width:19px;height:19px;flex-shrink:0;}
#tf-global-header[data-tf-ui="public-header-v2"] .mobile-search-icon svg{width:20px;height:20px;flex-shrink:0;}
#tf-global-header[data-tf-ui="public-header-v2"] .mobile-voice-search,#tf-global-header[data-tf-ui="public-header-v2"] .tf-mobile-search-submit{display:none;}
/* Round, independent search buttons — sit beside the input pill with a
   visible gap rather than being clipped flush into its end. */
#tf-global-header[data-tf-ui="public-header-v2"] .tf-header-search-submit{
  flex-shrink:0;height:100%;border-radius:999px;
  border:none;outline:none;appearance:none;-webkit-appearance:none;box-shadow:none;margin:0;
  background:var(--tf-gold-500);color:var(--tf-navy-950);
  font-weight:700;font-size:13.5px;padding:0 26px;cursor:pointer;
  transition:background .15s;
}
#tf-global-header[data-tf-ui="public-header-v2"] .tf-header-search-submit:hover{background:var(--tf-gold-600);}

/* ---------- Header actions (desktop) ---------- */
#tf-global-header[data-tf-ui="public-header-v2"] .header-actions{grid-area:actions;display:flex;align-items:center;gap:14px;white-space:nowrap;}
#tf-global-header[data-tf-ui="public-header-v2"] .header-actions>a{color:var(--tf-text);text-decoration:none;font-size:13.5px;font-weight:600;}
#tf-global-header[data-tf-ui="public-header-v2"] .header-actions>a:not(.join-button):not(.cart-button):hover{color:var(--tf-blue-700);}
#tf-global-header[data-tf-ui="public-header-v2"] .join-button{
  display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  height:40px;border:1.5px solid var(--tf-blue-700);color:var(--tf-blue-700)!important;
  padding:0 18px;border-radius:999px;transition:background .15s,color .15s;
}
#tf-global-header[data-tf-ui="public-header-v2"] .join-button:hover{background:var(--tf-blue-700);color:#fff!important;}
#tf-global-header[data-tf-ui="public-header-v2"] .account-link{display:flex;align-items:center;gap:4px;}
#tf-global-header[data-tf-ui="public-header-v2"] .tf-header-user-prefix{color:var(--tf-text-muted);font-weight:400;}

#tf-global-header[data-tf-ui="public-header-v2"] .cart-button{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;
  color:var(--tf-text-muted);font-size:11px;font-weight:600;
}
#tf-global-header[data-tf-ui="public-header-v2"] .cart-button:hover{color:var(--tf-blue-700);}
#tf-global-header[data-tf-ui="public-header-v2"] .tf-header-action-icon{position:relative;display:flex;}
#tf-global-header[data-tf-ui="public-header-v2"] .tf-header-action-icon svg{width:22px;height:22px;}
#tf-global-header[data-tf-ui="public-header-v2"] .tf-header-action-count{
  position:absolute;top:-6px;right:-8px;background:var(--tf-gold-500);color:var(--tf-navy-950);
  font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;padding:0 3px;
}

/* ---------- Mobile-only controls (hidden on desktop) ---------- */
#tf-global-header[data-tf-ui="public-header-v2"] .mobile-account-button,#tf-global-header[data-tf-ui="public-header-v2"] .mobile-cart-button,#tf-global-header[data-tf-ui="public-header-v2"] .mobile-menu-toggle{display:none;}

/* =======================================================
   TABLET (768px - 1100px) — search shouldn't get squeezed,
   utility bar shouldn't overflow at mid-range widths
   ======================================================= */
@media(min-width:768px) and (max-width:1100px){
  #tf-global-header[data-tf-ui="public-header-v2"] .utility-inner nav{gap:12px;}
  #tf-global-header[data-tf-ui="public-header-v2"] .utility-inner nav>a:not(.tf-utility-seller-cta){display:none;}
  #tf-global-header[data-tf-ui="public-header-v2"] .header-main{grid-template-columns:auto minmax(220px,1fr) auto;gap:12px;}
  #tf-global-header[data-tf-ui="public-header-v2"] .header-actions{gap:8px;}
  #tf-global-header[data-tf-ui="public-header-v2"] .header-actions>a:not(.join-button):not(.cart-button){display:none;}
  #tf-global-header[data-tf-ui="public-header-v2"] .cart-button .tf-header-action-label{display:none;}
  #tf-global-header[data-tf-ui="public-header-v2"] .tf-search-input-group select{max-width:110px;}
}

/* =======================================================
   MOBILE (<768px)
   ======================================================= */
@media(max-width:767px){
  #tf-global-header[data-tf-ui="public-header-v2"] .utility-bar{display:none;}
  #tf-global-header[data-tf-ui="public-header-v2"] .tf-mobile-utility{
    display:flex;align-items:center;gap:14px;height:34px;padding:0 16px;
    background:var(--tf-navy-950);color:#c7d2e0;font-size:11.5px;overflow-x:auto;
  }
  #tf-global-header[data-tf-ui="public-header-v2"] .tf-mobile-utility a{color:#c7d2e0;text-decoration:none;display:flex;align-items:center;gap:4px;}
  #tf-global-header[data-tf-ui="public-header-v2"] .tf-mobile-utility span{color:#8fa0bd;}

  #tf-global-header[data-tf-ui="public-header-v2"] .header-main{
    grid-template-areas:"brand mobactions" "search search";
    grid-template-columns:auto auto;grid-template-rows:auto auto;
    padding:12px 0;gap:10px 0;
  }
  #tf-global-header[data-tf-ui="public-header-v2"] .brand img{height:32px;}
  #tf-global-header[data-tf-ui="public-header-v2"] .global-search{grid-column:1/-1;height:46px;gap:6px;}
  #tf-global-header[data-tf-ui="public-header-v2"] .tf-search-input-group{flex:1;min-width:0;}
  #tf-global-header[data-tf-ui="public-header-v2"] .tf-search-input-group select{display:none;}
  #tf-global-header[data-tf-ui="public-header-v2"] .tf-search-input-group input{padding-left:4px;}
  #tf-global-header[data-tf-ui="public-header-v2"] .mobile-search-icon{
    display:flex;align-items:center;padding-left:14px;color:var(--tf-text-muted);
  }
  #tf-global-header[data-tf-ui="public-header-v2"] .tf-header-desktop-voice{display:none;}
  #tf-global-header[data-tf-ui="public-header-v2"] .mobile-voice-search{
    display:flex;align-items:center;justify-content:center;width:40px;border:none;outline:none;
    appearance:none;-webkit-appearance:none;box-shadow:none;margin:0;
    background:#fff;color:var(--tf-text-muted);
  }
  #tf-global-header[data-tf-ui="public-header-v2"] .tf-header-search-submit{display:none;}
  #tf-global-header[data-tf-ui="public-header-v2"] .tf-mobile-search-submit{
    display:flex;align-items:center;justify-content:center;
    width:46px;height:46px;flex-shrink:0;box-sizing:border-box;padding:0;
    border:none;outline:none;border-radius:999px;
    appearance:none;-webkit-appearance:none;box-shadow:none;margin:0;
    background:var(--tf-gold-500);color:var(--tf-navy-950);
  }
  #tf-global-header[data-tf-ui="public-header-v2"] .header-actions{display:none;}

  #tf-global-header[data-tf-ui="public-header-v2"] .mobile-account-button,
  #tf-global-header[data-tf-ui="public-header-v2"] .mobile-cart-button{
    grid-area:auto;position:relative;display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;border:1px solid var(--tf-line);border-radius:11px;
    color:var(--tf-text);background:#fff;
  }
  #tf-global-header[data-tf-ui="public-header-v2"] .mobile-cart-button svg{width:19px;height:19px;}
  #tf-global-header[data-tf-ui="public-header-v2"] .mobile-cart-button .tf-header-action-count{
    position:absolute;top:-6px;right:-6px;background:var(--tf-gold-500);color:var(--tf-navy-950);
    font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:999px;
    display:flex;align-items:center;justify-content:center;padding:0 3px;
  }

  #tf-global-header[data-tf-ui="public-header-v2"] .mobile-menu-toggle{
    display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;border:1px solid var(--tf-line);border-radius:11px;
    background:#fff;position:relative;padding:0;cursor:pointer;flex-shrink:0;
  }
  /* Bars are positioned relative to the BUTTON (::before/::after on the
     button itself + the span as the middle bar) — not nested inside the
     span, which was the earlier bug causing a blank/invisible icon. */
  #tf-global-header[data-tf-ui="public-header-v2"] .mobile-menu-toggle span,
  #tf-global-header[data-tf-ui="public-header-v2"] .mobile-menu-toggle::before,
  #tf-global-header[data-tf-ui="public-header-v2"] .mobile-menu-toggle::after{
    content:'';position:absolute;left:10px;right:10px;height:2px;background:var(--tf-text);
    border-radius:2px;transition:transform .2s,opacity .2s;
  }
  #tf-global-header[data-tf-ui="public-header-v2"] .mobile-menu-toggle::before{top:14px;}
  #tf-global-header[data-tf-ui="public-header-v2"] .mobile-menu-toggle span{top:19px;}
  #tf-global-header[data-tf-ui="public-header-v2"] .mobile-menu-toggle::after{top:24px;}
  #tf-global-header[data-tf-ui="public-header-v2"].menu-open .mobile-menu-toggle span{opacity:0;}
  #tf-global-header[data-tf-ui="public-header-v2"].menu-open .mobile-menu-toggle::before{transform:translateY(5px) rotate(45deg);}
  #tf-global-header[data-tf-ui="public-header-v2"].menu-open .mobile-menu-toggle::after{transform:translateY(-5px) rotate(-45deg);}

  [data-tf-header-mobactions]{
    grid-area:mobactions;display:flex;align-items:center;gap:8px;
    margin-left:auto;
  }
}

/* ---------- Mobile nav drawer + backdrop ---------- */
.tf-mobile-nav-backdrop{
  display:none;position:fixed;inset:0;background:rgba(6,26,63,.45);z-index:210;
}
#tf-market-navigation{
  display:none;position:fixed;top:0;right:0;bottom:0;width:86%;max-width:360px;
  background:#fff;z-index:220;overflow-y:auto;
  box-shadow:-12px 0 32px rgba(6,26,63,.18);
  transform:translateX(100%);transition:transform .25s ease;
}
#tf-global-header[data-tf-ui="public-header-v2"].menu-open ~ .tf-mobile-nav-backdrop,
#tf-global-header[data-tf-ui="public-header-v2"].menu-open ~ #tf-market-navigation{display:block;}
#tf-global-header[data-tf-ui="public-header-v2"].menu-open ~ #tf-market-navigation{transform:translateX(0);}
body.tf-mobile-nav-open{overflow:hidden;}

#tf-market-navigation .tf-nav-panel-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px;border-bottom:1px solid var(--tf-line);
}
#tf-market-navigation .tf-nav-panel-head strong{font-size:15px;color:var(--tf-navy-950);}
#tf-market-navigation .tf-nav-panel-close{
  width:32px;height:32px;border:none;background:#f1f5f9;border-radius:8px;
  font-size:16px;color:var(--tf-text-muted);cursor:pointer;
}
#tf-market-navigation .tf-nav-links{display:flex;flex-direction:column;padding:8px 0;border-bottom:8px solid #f4f6f9;}
#tf-market-navigation .tf-nav-links a{
  padding:12px 16px;font-size:14px;font-weight:600;color:var(--tf-text);text-decoration:none;
}
#tf-market-navigation .tf-nav-links a:hover{background:#f8fafc;}
#tf-market-navigation .tf-nav-categories{padding:8px 0;}
#tf-market-navigation details{border-bottom:1px solid var(--tf-line);}
#tf-market-navigation summary{
  list-style:none;display:flex;align-items:center;justify-content:space-between;
  padding:13px 16px;font-size:14px;font-weight:600;color:var(--tf-text);cursor:pointer;
}
#tf-market-navigation summary::-webkit-details-marker{display:none;}
#tf-market-navigation summary:after{
  content:'';width:8px;height:8px;border-right:1.5px solid var(--tf-text-muted);
  border-bottom:1.5px solid var(--tf-text-muted);transform:rotate(45deg);transition:transform .15s;
}
#tf-market-navigation details[open] summary:after{transform:rotate(-135deg);}
#tf-market-navigation .tf-nav-sublist{padding:0 16px 12px 16px;display:flex;flex-direction:column;}
#tf-market-navigation .tf-nav-sublist a{
  padding:8px 8px 8px 12px;font-size:13.5px;color:var(--tf-text-muted);text-decoration:none;
  border-radius:8px;
}
#tf-market-navigation .tf-nav-sublist a:hover{background:#f8fafc;color:var(--tf-blue-700);}
#tf-market-navigation .tf-nav-panel-auth{
  display:flex;gap:10px;padding:16px;border-top:8px solid #f4f6f9;
}
#tf-market-navigation .tf-nav-panel-auth a{
  flex:1;text-align:center;padding:11px;border-radius:10px;font-size:13.5px;font-weight:700;
  text-decoration:none;
}
#tf-market-navigation .tf-nav-panel-auth a.tf-signup{background:var(--tf-blue-700);color:#fff;}
#tf-market-navigation .tf-nav-panel-auth a.tf-signin{border:1.5px solid var(--tf-line-strong);color:var(--tf-text);}

@media(min-width:768px){
  #tf-market-navigation,.tf-mobile-nav-backdrop{display:none!important;}
}

/* ---------- Accessibility ---------- */
#tf-global-header[data-tf-ui="public-header-v2"] a:focus-visible,#tf-global-header[data-tf-ui="public-header-v2"] button:focus-visible,
#tf-global-header[data-tf-ui="public-header-v2"] input:focus-visible,#tf-global-header[data-tf-ui="public-header-v2"] select:focus-visible{
  outline:3px solid rgba(244,185,66,.6);outline-offset:2px;
}
@media(prefers-reduced-motion:reduce){
  #tf-global-header[data-tf-ui="public-header-v2"] *{transition-duration:.01ms!important;}
}


/* Sprint 136 — authoritative desktop header primitive layer. */
#tf-global-header[data-tf-ui="public-header-v2"]{--tf-header-surface:#fff;--tf-header-border:#e2e8f0;--tf-header-muted:#64748b;--tf-header-ink:#0f172a;--tf-header-accent:#f4b942}
#tf-global-header[data-tf-ui="public-header-v2"] .tf-ui-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease}
#tf-global-header[data-tf-ui="public-header-v2"] .tf-ui-button-ghost{border:1px solid transparent;background:transparent;color:var(--tf-header-ink)}
#tf-global-header[data-tf-ui="public-header-v2"] .tf-ui-button-ghost:hover{background:#f8fafc;border-color:var(--tf-header-border)}
#tf-global-header[data-tf-ui="public-header-v2"] .tf-ui-button-secondary{border:1px solid #cbd5e1;background:#fff;color:#0f3f78}
#tf-global-header[data-tf-ui="public-header-v2"] .tf-ui-button-accent{border:1px solid transparent;background:var(--tf-header-accent);color:#061a3f}
#tf-global-header[data-tf-ui="public-header-v2"] .header-actions>.tf-ui-button{min-height:38px;padding:7px 10px;border-radius:10px}
#tf-global-header[data-tf-ui="public-header-v2"] .header-actions>.join-button.tf-ui-button{height:38px;padding-inline:14px;border-radius:10px}
#tf-global-header[data-tf-ui="public-header-v2"] .header-actions>.tf-header-primary-action{min-width:54px;padding:5px 9px}
#tf-global-header[data-tf-ui="public-header-v2"] .tf-header-action-count{box-shadow:0 0 0 2px #fff}
#tf-global-header[data-tf-ui="public-header-v2"] .tf-header-brand{min-width:max-content}
#tf-market-navigation .tf-nav-panel-close.tf-ui-button{display:grid;place-items:center;padding:0}
#tf-market-navigation .tf-nav-panel-close .tf-ui-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media(max-width:1100px) and (min-width:768px){#tf-global-header[data-tf-ui="public-header-v2"] .header-actions>.tf-ui-button{padding-inline:8px}}