/* Myles Hustler Store 21 · V57: universal search box and header alignment. Loaded after v50 files.
   Header rows (top bar, logo row, menu row) share one width: full page up to 1440 px, 16 px from each edge. */

*, *::before, *::after { box-sizing: border-box; }   /* no sideways scroll: html, body { overflow-x: clip } is in v37.css (clip keeps the sticky header working) */

/* ---------- One edge for every header row */
.topbar > .container, .hdr34 .hdr-main, .hdr34 .cat-row, .more-drawer .more-row { max-width: 1440px; padding-left: 16px; padding-right: 16px; }
.hdr34 .hdr-main { gap: 16px; min-height: 76px; padding-top: 12px; padding-bottom: 12px; }
.hdr34 .header-actions { gap: 4px; }   /* desktop: round buttons start exactly 16 px from each edge */

/* Sticky header gets a shadow once the page scrolls (class set by v57.js) */
.site-header { transition: box-shadow .2s ease; }
.site-header.is-scrolled { box-shadow: 0 10px 28px rgba(0, 0, 0, .55); }

/* ---------- Universal search: loop left · input · clear · voice. No category list. */
.hs57 { flex: 1 1 auto; max-width: 760px; margin: 0 auto; height: 50px; align-items: center; padding: 0 6px; }
.hs57 .hs-go { order: 0; width: 44px; height: 44px; border-radius: 50%; background: transparent; color: var(--gold); }
.hs57 .hs-go:hover { background: rgba(212, 175, 55, .12); color: var(--gold); }
.hs57 .hs-q { order: 1; height: 100%; padding: 0 8px 0 4px; font-size: 15px; }
.hs57 .hs-q::-webkit-search-cancel-button { display: none; }
.hs57 .hs-clear, .hs57 .hs-mic { order: 2; flex: none; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: #cfc6b4; cursor: pointer; display: grid; place-items: center; font-size: 22px; line-height: 1; }
.hs57 .hs-mic { order: 3; color: var(--gold); }
.hs57 .hs-clear[hidden], .hs57 .hs-mic[hidden] { display: none; }
.hs57 .hs-clear:hover, .hs57 .hs-mic:hover { background: rgba(212, 175, 55, .12); color: #fff; }
.hs57 .hs-mic.is-listening { background: var(--gold); color: #000; animation: hs57-pulse 1s ease-in-out infinite; }
@keyframes hs57-pulse { 50% { box-shadow: 0 0 0 6px rgba(212, 175, 55, .3); } }
.hs57 .hs-list { padding: 6px 6px 8px; }
.hs57 .hs-list .hs-group { padding: 10px 10px 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8a6d12; }
.hs57 .hs-list .hs-group:first-child { padding-top: 4px; }

@media (max-width: 899px) {
  .hdr34 .hdr-main { gap: 8px 6px; min-height: 64px; padding-top: 8px; padding-bottom: 10px; }
  .hdr34 .hs57 { order: 3; flex: 1 1 100%; max-width: none; height: 46px; margin: 2px 0 0; }
  /* phones: buttons have no ring, so line the icons up with the search box edge (16 px); the 44 px tap area stays */
  .hdr34 .menu-btn { margin-left: -12px; }
  .hdr34 .header-actions { margin-right: -12px; }
}
@media (prefers-reduced-motion: reduce) { .hs57 .hs-mic.is-listening { animation: none; } .site-header { transition: none; } }

/* ---------- Search page: same universal look */
.search-page-form { display: flex; gap: 12px; align-items: center; }

/* ---------- Grids: equal-height cards, one gap */
.product-grid, .hub-cards { gap: 16px; }
.product-grid > *, .hub-cards > * { height: 100%; }

/* ---------- V57 welcome music pill (client 30 s, admin loop) */
.mh57-music { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 80; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 6px 6px 14px; border-radius: 999px; background: rgba(10, 9, 7, .94); border: 1px solid rgba(212, 175, 55, .55); color: #f4efe4;
  font: 600 13px/1 var(--font, system-ui); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); max-width: calc(100vw - 32px); }
.mh57-music[hidden] { display: none; }
.mh57-music .mh57-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh57-music .mh57-time { color: var(--gold, #d4af37); font-variant-numeric: tabular-nums; }
.mh57-music button { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--gold, #d4af37); color: #000; cursor: pointer; font-size: 15px; display: grid; place-items: center; }
.mh57-music button.mh57-x { background: transparent; color: #cfc6b4; font-size: 20px; }
@media (max-width: 599px) { .mh57-music { bottom: 88px; } }   /* above WhatsApp / chat bubbles on phones */