/* Bang-Bang phone home (2026-10-11, Brad: "Make sure all tenants have this nice appearance for mobile").
   Same changes TheGunDock got today. Header: logo left, Account and Cart on the same row at the right, search full
   width underneath (was a tall centred logo, the Account/Cart row, then search: 250px before any product). Tiles:
   no grey frame or double padding, so they use the full width the search bar uses (366px of 390, was 292).
   Phones only. */
@media (max-width: 640px) {
    html body header.site-header .bbt-shophdr .bbt-wrap {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        grid-template-areas: "logo . actions" "search search search" !important;
        align-items: center !important;
        column-gap: 8px !important;
        row-gap: 10px !important;
        padding: 10px 12px 12px !important;
    }
    html body header.site-header .bbt-shophdr .bbt-logo { grid-area: logo !important; margin: 0 !important; justify-self: start !important; }
    html body header.site-header .bbt-shophdr .bbt-logo img { height: 60px !important; width: auto !important; max-width: 160px !important; display: block !important; }
    html body header.site-header .bbt-shophdr .bbt-actions { grid-area: actions !important; display: flex !important; align-items: center !important; gap: 14px !important; margin: 0 56px 0 0 !important; justify-self: end !important; }
    html body header.site-header .bbt-shophdr .bbt-search { grid-area: search !important; width: 100% !important; margin: 0 !important; }
    html body .bbt-mosaic-sec { padding-left: 12px !important; padding-right: 12px !important; }
    html body .bbt-mosaic-sec > .bbt-wrap { padding-left: 0 !important; padding-right: 0 !important; }
    html body .bbt-mosaic { background: transparent !important; border: 0 !important; padding: 0 !important; }
}