/* TradesFolks 18.4.13 — Public header UI hotfix
   Loaded last. Desktop ownership is explicit so historical mobile/header rules
   cannot turn the search CTA into an icon/black block or hide select/input text. */

@media (min-width: 1024px){
  .site-header.premium-header .header-main.shell{
    display:grid!important;
    grid-template-columns:76px minmax(420px,1fr) auto!important;
    align-items:center!important;
    gap:20px!important;
    min-height:86px!important;
    padding-top:12px!important;
    padding-bottom:12px!important;
  }

  .site-header.premium-header .brand{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:76px!important;
    min-width:76px!important;
    height:62px!important;
    overflow:visible!important;
  }
  .site-header.premium-header .brand img{
    display:block!important;
    width:auto!important;
    max-width:68px!important;
    height:58px!important;
    object-fit:contain!important;
  }

  .site-header.premium-header .global-search{
    position:relative!important;
    display:grid!important;
    grid-template-columns:150px minmax(0,1fr) 142px!important;
    align-items:stretch!important;
    width:100%!important;
    min-width:0!important;
    height:58px!important;
    min-height:58px!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    border:2px solid #0b4ca5!important;
    border-radius:15px!important;
    background:#fff!important;
    box-shadow:0 4px 14px rgba(10,55,120,.06)!important;
  }

  /* These are mobile-only controls. Old CSS was allowing them into desktop grid. */
  .site-header.premium-header .global-search .mobile-search-icon,
  .site-header.premium-header .global-search .mobile-voice-search{
    display:none!important;
    visibility:hidden!important;
    position:absolute!important;
    width:0!important;
    height:0!important;
    min-width:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    overflow:hidden!important;
    pointer-events:none!important;
  }

  .site-header.premium-header .global-search select{
    display:block!important;
    grid-column:1!important;
    width:100%!important;
    min-width:0!important;
    height:54px!important;
    margin:0!important;
    padding:0 18px!important;
    border:0!important;
    border-right:1px solid #d9e1ec!important;
    border-radius:0!important;
    outline:0!important;
    appearance:auto!important;
    background:#fff!important;
    color:#172238!important;
    opacity:1!important;
    font:700 15px/1.2 Manrope,Arial,sans-serif!important;
    -webkit-text-fill-color:#172238!important;
  }

  .site-header.premium-header .global-search input[name="q"]{
    display:block!important;
    grid-column:2!important;
    width:100%!important;
    min-width:0!important;
    height:54px!important;
    margin:0!important;
    padding:0 18px!important;
    border:0!important;
    border-radius:0!important;
    outline:0!important;
    background:#fff!important;
    color:#172238!important;
    opacity:1!important;
    font:500 15px/54px Manrope,Arial,sans-serif!important;
    -webkit-text-fill-color:#172238!important;
  }
  .site-header.premium-header .global-search input[name="q"]::placeholder{
    color:#7b8492!important;
    opacity:1!important;
    -webkit-text-fill-color:#7b8492!important;
  }

  .site-header.premium-header .global-search > .tf-header-search-submit{
    position:static!important;
    display:flex!important;
    grid-column:3!important;
    align-items:center!important;
    justify-content:center!important;
    width:142px!important;
    min-width:142px!important;
    max-width:142px!important;
    height:58px!important;
    min-height:58px!important;
    margin:-2px -2px -2px 0!important;
    padding:0 20px!important;
    border:0!important;
    border-left:1px solid rgba(7,27,70,.08)!important;
    border-radius:0 14px 14px 0!important;
    background:#f5bd37!important;
    color:#071b46!important;
    opacity:1!important;
    box-shadow:none!important;
    transform:none!important;
    overflow:hidden!important;
    font:800 15px/1 Manrope,Arial,sans-serif!important;
    text-indent:0!important;
    letter-spacing:0!important;
    cursor:pointer!important;
  }
  .site-header.premium-header .global-search > .tf-header-search-submit span{
    display:inline!important;
    position:static!important;
    width:auto!important;
    height:auto!important;
    color:#071b46!important;
    opacity:1!important;
    font:inherit!important;
    text-indent:0!important;
  }
  .site-header.premium-header .global-search > .tf-header-search-submit:before,
  .site-header.premium-header .global-search > .tf-header-search-submit:after{
    content:none!important;
    display:none!important;
  }
  .site-header.premium-header .global-search > .tf-header-search-submit:hover{
    background:#efb32b!important;
  }

  .site-header.premium-header .header-actions{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:10px!important;
    width:auto!important;
    min-width:max-content!important;
    height:auto!important;
    overflow:visible!important;
    white-space:nowrap!important;
  }
  .site-header.premium-header .header-actions>a{
    flex:0 0 auto!important;
  }
  .site-header.premium-header .header-actions .account-link{
    display:inline-flex!important;
    align-items:center!important;
    min-height:48px!important;
    padding:0 4px!important;
    color:#253247!important;
    font-size:14px!important;
    font-weight:700!important;
    text-decoration:none!important;
  }
  .site-header.premium-header .header-actions .join-button,
  .site-header.premium-header .header-actions .compare-header-link,
  .site-header.premium-header .header-actions .shopping-cart-link{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    width:auto!important;
    min-width:126px!important;
    height:50px!important;
    min-height:50px!important;
    margin:0!important;
    padding:0 17px!important;
    border-radius:13px!important;
    line-height:1!important;
  }
  .site-header.premium-header .header-actions .join-button{
    border:1.5px solid #0b4ca5!important;
    background:#fff!important;
    color:#0a428e!important;
  }
  .site-header.premium-header .header-actions .compare-header-link,
  .site-header.premium-header .header-actions .shopping-cart-link{
    border:1px solid #071b46!important;
    background:#071b46!important;
    color:#fff!important;
  }
  .site-header.premium-header .shopping-cart-link .cart-svg-icon{
    display:grid!important;
    place-items:center!important;
    width:28px!important;
    height:28px!important;
    border-radius:9px!important;
    background:#f5bd37!important;
    color:#0b4ca5!important;
  }
  .site-header.premium-header .shopping-cart-link [data-cart-count],
  .site-header.premium-header .compare-header-link [data-compare-count]{
    display:inline-grid!important;
    place-items:center!important;
    min-width:24px!important;
    height:24px!important;
    padding:0 6px!important;
    border-radius:999px!important;
    background:#f5bd37!important;
    color:#071b46!important;
    font-size:12px!important;
    font-weight:900!important;
  }

  .site-header.premium-header .mobile-account-button,
  .site-header.premium-header .mobile-menu-toggle{
    display:none!important;
  }
}

/* Medium desktop/laptop: keep all controls on one row without crushing search. */
@media (min-width:1024px) and (max-width:1399px){
  .site-header.premium-header .header-main.shell{
    grid-template-columns:68px minmax(360px,1fr) auto!important;
    gap:14px!important;
  }
  .site-header.premium-header .global-search{
    grid-template-columns:120px minmax(0,1fr) 112px!important;
  }
  .site-header.premium-header .global-search > .tf-header-search-submit{
    width:112px!important;min-width:112px!important;max-width:112px!important;
  }
  .site-header.premium-header .header-actions{gap:7px!important}
  .site-header.premium-header .header-actions .account-link{font-size:13px!important}
  .site-header.premium-header .header-actions .join-button,
  .site-header.premium-header .header-actions .compare-header-link,
  .site-header.premium-header .header-actions .shopping-cart-link{
    min-width:108px!important;
    padding-inline:12px!important;
    font-size:13px!important;
  }
}

/* Tablet/mobile keep the existing app-like header, but explicitly prevent
   the desktop text search CTA from inheriting the legacy black pseudo icon. */
@media (max-width:1023px){
  .site-header.premium-header .global-search > .tf-header-search-submit:before,
  .site-header.premium-header .global-search > .tf-header-search-submit:after{
    content:none!important;
  }
  .site-header.premium-header .global-search > .tf-header-search-submit{
    text-indent:0!important;
  }
}