/* 2026-10-08: search bar on phones. Loaded after the store's brand files (brand-*.css convention).
   The clear (x) keeps its own look over brand button colors, and on phones the bar uses the full width
   (the header row keeps space on the right for the menu button, which sits up by the logo). */
html body .search-bar button.search-clear{background:transparent !important;border:0 !important;color:#999 !important;box-shadow:none !important;padding:0 !important;}
html body .search-bar button.search-clear:hover{background:#f0f0f0 !important;color:#333 !important;}
@media (max-width: 768px){
  html body .header-main #tgdSearchBar.search-bar{ margin-left:0 !important; margin-right:0 !important; max-width:none !important; flex:0 0 auto !important; width:calc(100vw - 24px) !important; }
  html body .search-bar form{ width:100% !important; }
  html body .search-bar input[name="q"]{ flex:1 1 auto !important; min-width:0 !important; padding-right:40px !important; }
  html body .search-bar button[type="submit"]{ flex:0 0 96px !important; width:96px !important; }
  html body .search-bar button.search-clear{ left:auto !important; right:100px !important; }
}
@media (max-width: 767px){ html body .header-main #tgdSearchBar.search-bar{ width:calc(100vw - 20px) !important; } }
@media (max-width: 379px){ html body .header-main #tgdSearchBar.search-bar{ width:calc(100vw - 16px) !important; } }
/* no zoom on tap: iPhones zoom into any text box under 16px and the page stays zoomed, cropping the sides. */
@media (max-width: 768px){ html body .search-bar input[name="q"], html body .mobile-search-form input, html body input#tgdSearchInput{ font-size:16px !important; } }
/* the x only when there is something to clear */
html body .search-bar input[name="q"]:placeholder-shown ~ button.search-clear{ display:none !important; }