/* I keep the branded shop header independent of the admin forms' stacked layout. */
body.plant-body.ecommerce-body #main-content #shop > .shop-storefront-heading {
    min-height: 0 !important; height: auto !important; padding: clamp(1rem, 2vw, 1.75rem) !important;
}
body.plant-body.ecommerce-body #main-content #shop .shop-preview-mode-switch {
    display: inline-flex; flex-wrap: wrap; gap: .35rem; align-items: center;
}
body.plant-body.ecommerce-body #main-content #shop .shop-preview-mode-switch .active {
    outline: 2px solid currentColor; outline-offset: -4px;
}
@media (min-width: 1200px) {
    body.plant-body.ecommerce-body #main-content #shop > .shop-storefront-heading {
        display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(22rem, .9fr) !important;
        grid-template-areas: none !important; align-items: center !important; gap: 1.5rem !important;
    }
    body.plant-body.ecommerce-body #main-content #shop > .shop-storefront-heading > * {
        grid-column: auto !important; grid-area: auto !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important;
    }
    body.plant-body.ecommerce-body #main-content #shop .shop-storefront-brand {
        display: grid !important; grid-template-columns: minmax(6rem, 11rem) minmax(0, 1fr) !important;
        align-items: center !important; gap: 1.25rem !important; text-align: left !important;
    }
    body.plant-body.ecommerce-body #main-content #shop .shop-storefront-brand > * {
        grid-column: auto !important; grid-area: auto !important; min-width: 0 !important; width: 100% !important;
    }
    body.plant-body.ecommerce-body #main-content #shop .shop-page-logo-link {
        display: flex !important; align-items: center !important; max-width: 11rem !important; min-height: 0 !important; height: auto !important;
    }
    body.plant-body.ecommerce-body #main-content #shop .shop-page-logo {
        width: 100% !important; height: auto !important; max-width: 11rem !important; max-height: 8rem !important; object-fit: contain !important;
    }
    body.plant-body.ecommerce-body #main-content #shop .shop-storefront-title {
        text-align: left !important; align-items: start !important;
    }
    body.plant-body.ecommerce-body #main-content #shop .shop-storefront-title h2 {
        font-size: clamp(1.5rem, 2.3vw, 2.5rem) !important; line-height: 1.15 !important;
        white-space: normal !important; overflow-wrap: anywhere !important; margin: 0 0 .4rem !important;
    }
    body.plant-body.ecommerce-body #main-content #shop .shop-storefront-right,
    body.plant-body.ecommerce-body #main-content #shop .shop-heading-actions {
        display: flex !important; flex-wrap: wrap !important; justify-content: flex-end !important;
        align-items: center !important; gap: .65rem !important; width: 100% !important;
    }
    body.plant-body.ecommerce-body #main-content #shop .shop-user-developer-group {
        display: flex !important; flex-direction: column !important; align-items: flex-end !important;
        flex: 0 0 100% !important; gap: .5rem !important;
    }
    body.plant-body.ecommerce-body #main-content #shop .shop-heading-actions > :is(a, form, nav) {
        flex: 0 1 auto !important; width: auto !important; min-width: 0 !important;
    }
}
@media (max-width: 1199px) {
    body.plant-body.ecommerce-body #main-content #shop > .shop-storefront-heading {
        display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 1rem !important;
    }
    body.plant-body.ecommerce-body #main-content #shop .shop-preview-mode-switch { width: 100%; }
    body.plant-body.ecommerce-body #main-content #shop .shop-preview-mode-switch .btn { flex: 1 1 auto; min-height: 44px; }
}

/* I keep sidebar search readable within the navigation width and preserve typed casing. */
body.plant-body.ecommerce-body #adminSidebar .admin-tool-search {
    width: 100%; min-width: 0; padding: .4rem .5rem; box-sizing: border-box;
}
body.plant-body.ecommerce-body #adminSidebar .admin-tool-search label {
    display: block; margin-bottom: .4rem; font-size: .9rem; line-height: 1.4;
}
body.plant-body.ecommerce-body #adminSidebar #adminToolSearch {
    display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important;
    box-sizing: border-box !important; padding: .65rem .75rem !important; margin: 0 !important;
    height: auto !important; min-height: 44px !important; font-size: 1rem !important; line-height: 1.4 !important;
    text-transform: none !important; letter-spacing: normal !important; text-align: left !important;
}
body.plant-body.ecommerce-body #adminSidebar #adminToolSearch::placeholder {
    text-transform: none !important; letter-spacing: normal !important; font-size: .9rem !important;
}
body.plant-body.ecommerce-body #adminSidebar [data-tool-search-status] {
    margin: .35rem 0 0; font-size: .85rem; line-height: 1.4;
}
body.plant-body.ecommerce-body #adminSidebar [data-tool-search-status]:empty { display: none; }

/* I give required signed-out navigation its own layout, independent of legacy shop action selectors. */
body.plant-body.ecommerce-body #main-content #shop #guestShopActions {
    display: grid !important; grid-template-columns: minmax(0, 1fr) !important;
    gap: .75rem !important; width: 100% !important; min-width: 0 !important;
    height: auto !important; max-height: none !important; visibility: visible !important;
    overflow: visible !important; opacity: 1 !important;
}
body.plant-body.ecommerce-body #main-content #shop #guestShopActions > .guest-shopping-credit {
    display: flex !important; justify-content: flex-end !important; min-width: 0 !important;
}
body.plant-body.ecommerce-body #main-content #shop #guestShopActions > .guest-shopping-buttons {
    display: flex !important; flex-flow: row wrap !important; justify-content: flex-end !important;
    gap: .65rem !important; height: auto !important; min-height: 44px !important;
    visibility: visible !important; overflow: visible !important;
}
body.plant-body.ecommerce-body #main-content #shop #guestShopActions .guest-shopping-buttons > a {
    display: inline-flex !important; position: static !important; visibility: visible !important;
    align-items: center !important; justify-content: center !important; gap: .5rem !important;
    min-height: 44px !important; height: auto !important; width: auto !important;
    padding: .65rem 1.25rem !important; opacity: 1 !important; transform: none !important;
    font-size: 1rem !important; line-height: 1.4 !important;
}