/* Trinity phone header, one row (2026-10-11, Brad: "Make sure all tenants have this nice appearance for mobile").
   Same layout TheGunDock got today: logo left; account and cart as compact icon buttons on the same row; the menu
   button keeps its seat at the top right; search full width underneath. Replaces the centred logo with "Login to My
   Account" and "Shopping Cart" pills stacked under it. The label under each icon comes from the link's own
   aria-label, so a signed-in customer still sees "My Account". Phones only. */
@media (max-width: 640px) {
    html body header.site-header .header-main .container {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto auto !important;
        grid-template-areas: "logo acct logout cart" "search search search search" !important;
        align-items: center !important;
        column-gap: 4px !important;
        row-gap: 10px !important;
        padding-right: 64px !important;
        position: relative !important;
    }
    html body header.site-header .header-main .search-bar { grid-area: search !important; width: calc(100% + 54px) !important; margin: 0 !important; order: 0 !important; }
    html body header.site-header .header-main .logo { grid-area: logo !important; justify-self: start !important; margin: 0 !important; text-align: left !important; width: auto !important; min-width: 0 !important; order: 0 !important; }
    html body header.site-header .header-main .logo img { width: auto !important; height: auto !important; max-width: 100% !important; max-height: 46px !important; display: block !important; }
    html body header.site-header .header-main .mobile-account-link { grid-area: acct !important; }
    html body header.site-header .header-main .mobile-logout-link { grid-area: logout !important; }
    html body header.site-header .header-main .cart-widget { grid-area: cart !important; margin: 0 !important; width: auto !important; order: 0 !important; display: block !important; }
    html body header.site-header .header-main .cart-widget .cart-link { display: none !important; }
    html body header.site-header .header-main .mobile-account-link,
    html body header.site-header .header-main .mobile-logout-link,
    html body header.site-header .header-main .mobile-cart-link {
        display: inline-flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
        width: 48px !important; min-width: 0 !important; height: 44px !important; padding: 0 !important; margin: 0 !important;
        background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 6px !important;
        color: #1f2937 !important; font-size: 0 !important; line-height: 1 !important; position: relative !important; text-decoration: none !important; order: 0 !important;
    }
    html body header.site-header .header-main .mobile-account-link > *,
    html body header.site-header .header-main .mobile-logout-link > *,
    html body header.site-header .header-main .mobile-cart-link > .cart-text-mobile { display: none !important; }
    html body header.site-header .header-main .mobile-account-link::before,
    html body header.site-header .header-main .mobile-logout-link::before,
    html body header.site-header .header-main .mobile-cart-link::before {
        content: "" !important; display: block !important; width: 24px !important; height: 24px !important; background: currentColor !important;
        -webkit-mask: var(--hdr-ico) center / contain no-repeat !important; mask: var(--hdr-ico) center / contain no-repeat !important;
    }
    html body header.site-header .header-main .mobile-account-link::after,
    html body header.site-header .header-main .mobile-logout-link::after,
    html body header.site-header .header-main .mobile-cart-link::after {
        content: attr(aria-label) !important; display: block !important; margin-top: 3px !important; font-size: 10px !important; font-weight: 700 !important;
        letter-spacing: .02em !important; text-transform: uppercase !important; white-space: nowrap !important; font-family: inherit !important;
    }
    html body header.site-header .header-main .mobile-cart-link::after { content: "Cart" !important; }
    html body header.site-header .header-main .mobile-account-link { --hdr-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20a7 7 0 0 1 14 0'/%3E%3C/svg%3E"); }
    html body header.site-header .header-main .mobile-logout-link { --hdr-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9'%3E%3Cpath d='M15 4h4v16h-4M10 8l-4 4 4 4M6 12h10'/%3E%3C/svg%3E"); }
    html body header.site-header .header-main .mobile-cart-link { --hdr-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2 3h3l2.2 11.3a1.5 1.5 0 0 0 1.5 1.2h7.9a1.5 1.5 0 0 0 1.5-1.2L21 7H6'/%3E%3C/svg%3E"); }
    html body header.site-header .header-main .mobile-cart-link .cart-badge { position: absolute !important; top: 0 !important; right: 4px !important; display: inline-flex !important; min-width: 16px !important; height: 16px !important; padding: 0 4px !important; border-radius: 8px !important; font-size: 10px !important; line-height: 16px !important; justify-content: center !important; background: #dc2626 !important; color: #fff !important; }
    html body header.site-header #mobileMenuBtn { position: absolute !important; top: 12px !important; right: 10px !important; }
}