/* Phone header, one row (2026-10-11): 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, and since 2026-10-19 tablets up to 900px (the
   whole band where the menu button shows) with the tablet sizing in the block at the end of this file. */
@media (max-width: 900px) {
    /* the menu button (absolute, outside .container) anchors to the header, not the page: with a banner above the
       header (processor TEST MODE, admin preview) it sat on the banner, out of line with the logo row */
    html body header.site-header { position: relative; }
    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;
        /* at least 48px, wider when the label needs it: a signed-in "MY ACCOUNT" ran into "LOGOUT" at a fixed 48px */
        width: auto !important; min-width: 48px !important; height: 44px !important; padding: 0 2px !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; }
}

/* Tablet sizing, 641-900px (bridge decision 2026-10-19).
   Replaces the stock tablet header (Login / Cart pills stacked under the logo, ~232px tall at 768px) with the one-row
   layout above, sized for tablets: logo up to 54px tall and 220px wide, account and cart 10px apart with 16px before the
   menu button, search full width at 48px with equal 16px side gutters (the phone calc(100% + 54px) left the right gutter
   short), about 130px tall in all. The header keeps its existing 1px divider. */
@media (min-width: 641px) and (max-width: 900px) {
    html body header.site-header .header-main .container {
        /* the logout column is empty unless a customer is signed in; spacing comes from the icons' right margins, so an
           empty column adds no gap. Last column = the menu button's seat (52px). */
        grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto auto auto 52px !important;
        grid-template-areas: "logo . acct logout cart ." "search search search search search search" !important;
        column-gap: 0 !important;
        row-gap: 8px !important;
        padding: 10px 16px !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    /* 10px between the icons, 16px from the cart to the menu button */
    html body header.site-header .header-main .mobile-account-link,
    html body header.site-header .header-main .mobile-logout-link { margin-right: 10px !important; }
    html body header.site-header .header-main .cart-widget { margin-right: 16px !important; }
    html body header.site-header .header-main .logo { max-width: 220px !important; align-self: center !important; }
    html body header.site-header .header-main .logo img { max-height: 54px !important; object-fit: contain !important; }
    /* The container's own 10px top/bottom padding is the header's spacing here; the wrapper's 10px would add 20px more */
    html body header.site-header .header-main { padding-top: 0 !important; padding-bottom: 0 !important; }
    /* ID selector: brand-90-search-bar.css (and some brand-20 files) set calc(100vw - 24px) at <=768px, which counts the
       scrollbar in a desktop window and pushed the search button 7px past the edge */
    html body header.site-header .header-main .search-bar,
    html body header.site-header .header-main #tgdSearchBar.search-bar { width: 100% !important; max-width: none !important; flex: 0 0 auto !important; }
    html body header.site-header .header-main .search-bar input[name="q"],
    html body header.site-header .header-main .search-bar button[type="submit"] { height: 48px !important; min-height: 48px !important; box-sizing: border-box !important; }
    html body header.site-header .header-main .search-bar button[type="submit"] { min-width: 92px !important; padding-left: 18px !important; padding-right: 18px !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 { width: 22px !important; height: 22px !important; }
    html body header.site-header #mobileMenuBtn { top: 10px !important; right: 16px !important; }
}