/* TradesFolks 18.4.23 — final mobile header search ownership
   Fixes black/broken search button and voice icon on mobile.
   Loaded last so legacy mobile-search pseudo-elements cannot override it. */

@media (max-width:1023px){
  .site-header.premium-header .header-main{
    display:grid!important;
    grid-template-columns:auto 1fr auto auto auto!important;
    grid-template-rows:auto auto!important;
    align-items:center!important;
    gap:10px!important;
    width:100%!important;
    padding:10px 14px 12px!important;
    background:#fff!important;
  }

  .site-header.premium-header .brand{
    grid-column:1!important;
    grid-row:1!important;
    display:flex!important;
    align-items:center!important;
    width:auto!important;
    height:54px!important;
    margin:0!important;
  }
  .site-header.premium-header .brand img{
    display:block!important;
    width:auto!important;
    max-width:76px!important;
    height:52px!important;
    max-height:52px!important;
    object-fit:contain!important;
  }

  .site-header.premium-header .mobile-account-button{
    grid-column:3!important;
    grid-row:1!important;
  }
  .site-header.premium-header .mobile-menu-toggle{
    grid-column:4!important;
    grid-row:1!important;
  }
  .site-header.premium-header .header-actions{
    grid-column:5!important;
    grid-row:1!important;
    display:flex!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
  }
  .site-header.premium-header .header-actions>a:not(.shopping-cart-link){
    display:none!important;
  }
  .site-header.premium-header .shopping-cart-link{
    position:relative!important;
    display:grid!important;
    place-items:center!important;
    width:52px!important;
    min-width:52px!important;
    height:52px!important;
    min-height:52px!important;
    margin:0!important;
    padding:0!important;
    border:1px solid #f1d586!important;
    border-radius:14px!important;
    background:#fff7db!important;
    color:#075bc5!important;
  }
  .site-header.premium-header .shopping-cart-link>span:not(.cart-svg-icon){
    display:none!important;
  }
  .site-header.premium-header .shopping-cart-link .cart-svg-icon{
    display:grid!important;
    place-items:center!important;
    width:28px!important;
    height:28px!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#075bc5!important;
  }
  .site-header.premium-header .shopping-cart-link b[data-cart-count]{
    position:absolute!important;
    top:-7px!important;
    right:-5px!important;
    display:grid!important;
    place-items:center!important;
    min-width:24px!important;
    height:24px!important;
    padding:0 5px!important;
    border:2px solid #fff!important;
    border-radius:999px!important;
    background:#f5bd37!important;
    color:#071b46!important;
    font-size:11px!important;
    font-weight:900!important;
    line-height:1!important;
    transform:none!important;
  }

  /* Search row */
  .site-header.premium-header .global-search{
    grid-column:1/-1!important;
    grid-row:2!important;
    position:relative!important;
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr) 44px 48px!important;
    align-items:center!important;
    width:100%!important;
    min-width:0!important;
    height:52px!important;
    min-height:52px!important;
    margin:4px 0 0!important;
    padding:0!important;
    overflow:hidden!important;
    border:1.5px solid #cbd8e8!important;
    border-radius:14px!important;
    background:#fff!important;
    box-shadow:0 3px 12px rgba(13,42,82,.04)!important;
  }

  .site-header.premium-header .global-search>select,
  .site-header.premium-header .global-search>.tf-header-desktop-voice{
    display:none!important;
  }

  .site-header.premium-header .global-search>.mobile-search-icon{
    grid-column:1!important;
    position:static!important;
    display:grid!important;
    place-items:center!important;
    width:42px!important;
    height:50px!important;
    margin:0!important;
    color:#77869c!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:none!important;
  }
  .site-header.premium-header .global-search>.mobile-search-icon svg{
    display:block!important;
    width:19px!important;
    height:19px!important;
  }

  .site-header.premium-header .global-search>input[name="q"]{
    grid-column:2!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    height:50px!important;
    margin:0!important;
    padding:0 8px 0 0!important;
    border:0!important;
    outline:0!important;
    background:transparent!important;
    color:#172238!important;
    font-size:16px!important;
    line-height:50px!important;
    -webkit-text-fill-color:#172238!important;
  }
  .site-header.premium-header .global-search>input[name="q"]::placeholder{
    color:#8994a5!important;
    opacity:1!important;
    -webkit-text-fill-color:#8994a5!important;
  }

  /* Voice = clean white icon button inside the field */
  .site-header.premium-header .global-search>.mobile-voice-search{
    grid-column:3!important;
    position:static!important;
    display:grid!important;
    place-items:center!important;
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    margin:0 4px 0 0!important;
    padding:0!important;
    border:0!important;
    border-radius:11px!important;
    background:#f4f7fb!important;
    background-image:none!important;
    color:#0b5cc7!important;
    visibility:visible!important;
    opacity:1!important;
    box-shadow:none!important;
    transform:none!important;
    cursor:pointer!important;
    overflow:hidden!important;
  }
  .site-header.premium-header .global-search>.mobile-voice-search svg{
    display:block!important;
    width:20px!important;
    height:20px!important;
    color:#0b5cc7!important;
    stroke:currentColor!important;
  }
  .site-header.premium-header .global-search>.mobile-voice-search:before,
  .site-header.premium-header .global-search>.mobile-voice-search:after{
    content:none!important;
    display:none!important;
  }
  .site-header.premium-header .global-search>.mobile-voice-search:active{
    background:#e8f0fb!important;
  }

  /* Search submit = compact brand-gold icon button. */
  .site-header.premium-header .global-search>.tf-header-search-submit{
    grid-column:4!important;
    position:static!important;
    display:grid!important;
    place-items:center!important;
    width:48px!important;
    min-width:48px!important;
    max-width:48px!important;
    height:52px!important;
    min-height:52px!important;
    max-height:52px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0 13px 13px 0!important;
    background:#f5bd37!important;
    background-image:none!important;
    color:#071b46!important;
    opacity:1!important;
    visibility:visible!important;
    box-shadow:none!important;
    transform:none!important;
    text-indent:0!important;
    overflow:hidden!important;
    cursor:pointer!important;
  }
  .site-header.premium-header .global-search>.tf-header-search-submit .tf-header-search-icon{
    display:block!important;
    width:21px!important;
    height:21px!important;
    color:#071b46!important;
    stroke:currentColor!important;
  }
  .site-header.premium-header .global-search>.tf-header-search-submit>span{
    display:none!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;
    width:0!important;
    height:0!important;
  }
  .site-header.premium-header .global-search>.tf-header-search-submit:active{
    background:#eeb128!important;
  }

  /* Ensure no old generic mobile rule can inject black pseudo icons. */
  .site-header.premium-header .global-search button{
    font-size:0!important;
  }
}

/* Small phones */
@media (max-width:390px){
  .site-header.premium-header .header-main{
    gap:8px!important;
    padding-inline:10px!important;
  }
  .site-header.premium-header .brand img{
    max-width:66px!important;
    height:46px!important;
  }
  .site-header.premium-header .mobile-account-button,
  .site-header.premium-header .mobile-menu-toggle,
  .site-header.premium-header .shopping-cart-link{
    width:46px!important;
    min-width:46px!important;
    height:46px!important;
    min-height:46px!important;
    border-radius:13px!important;
  }
  .site-header.premium-header .global-search{
    grid-template-columns:38px minmax(0,1fr) 42px 46px!important;
    height:50px!important;
    min-height:50px!important;
  }
  .site-header.premium-header .global-search>.tf-header-search-submit{
    width:46px!important;
    min-width:46px!important;
    max-width:46px!important;
    height:50px!important;
    min-height:50px!important;
    max-height:50px!important;
  }
}