h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* --- Weedable login form (plain inputs kept static-SSR so the password form does a real POST) --- */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.weed-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: #555;
}

.weed-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.75rem;
    font-size: 1rem;
    border: 1px solid #c4c4c4;
    border-radius: 6px;
    outline: none;
}

.weed-input:focus {
    border-color: #2E7D32;
    box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.2);
}

.weed-google-btn {
    display: block;
    text-decoration: none;
}

/* --- Storefront (buyer-facing) ------------------------------------------------------------------ */

/* Location picker in the app bar. Plain inputs (not MudBlazor) so the GET form submits under static
   rendering with no interactive circuit. */
.weed-locform {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.weed-locinput {
    padding: 0.35rem 0.6rem;
    font-size: 0.9rem;
    border: none;
    border-radius: 6px;
    outline: none;
    width: 12rem;
    max-width: 40vw;
    background: #ffffff;
    color: #222;
}

.weed-locbtn {
    padding: 0.35rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 6px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
}

.weed-locbtn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.weed-searchform {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.weed-pager-link {
    display: inline-block;
    min-width: 2.25rem;
    padding: 0.35rem 0.6rem;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    font-size: 0.9rem;
    line-height: 1.2;
    text-decoration: none;
}

.weed-pager-current {
    background: var(--weed-accent, #2E7D32);
    border-color: var(--weed-accent, #2E7D32);
    color: #fff;
    font-weight: 600;
}

.weed-searchinput {
    flex: 1 1 auto;
    max-width: 28rem;
    padding: 0.55rem 0.75rem;
    font-size: 1rem;
    border: 1px solid #c4c4c4;
    border-radius: 8px;
    outline: none;
}

.weed-searchinput:focus {
    border-color: var(--weed-accent, #2E7D32);
    box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.2);
}

.weed-searchform .weed-locbtn {
    color: var(--weed-accent, #2E7D32);
    border-color: var(--weed-accent, #2E7D32);
}

.weed-searchform .weed-locbtn:hover {
    background: rgba(46, 125, 50, 0.08);
}

/* Brand grid tiles */
.weed-brandtile {
    height: 100%;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    cursor: pointer;
}

.weed-brandtile:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

/* Product tiles */
.weed-producttile {
    height: 100%;
    overflow: hidden;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    cursor: pointer;
}

.weed-producttile:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

.weed-producttile-img {
    position: relative;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.weed-producttile-photo {
    width: 100%;
    height: 100%;
}

.weed-strainchip {
    position: absolute;
    top: 8px;
    left: 8px;
}

.weed-producttile-name {
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;
}

.weed-detail-img {
    border-radius: 8px;
    overflow: hidden;
    min-height: 280px;
}

.weed-detail-photo {
    width: 100%;
    height: 100%;
}

.weed-qtyselect {
    padding: 0.5rem 0.6rem;
    font-size: 1rem;
    border: 1px solid #c4c4c4;
    border-radius: 8px;
    background: #fff;
    outline: none;
}

.weed-addbtn {
    padding: 0.6rem 1.4rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: var(--weed-accent, #2E7D32);
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.weed-addbtn:hover {
    filter: brightness(0.92);
}

.weed-cartqty {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.weed-cartqty a {
    text-decoration: none;
    font-weight: 700;
    padding: 0 0.5rem;
    border: 1px solid #c4c4c4;
    border-radius: 6px;
    color: var(--weed-accent, #2E7D32);
}

/* Buyer order progress tracker */
.weed-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    align-items: center;
}

.weed-step {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #9e9e9e;
    font-size: 0.9rem;
    white-space: nowrap;
}

.weed-step.done {
    color: #2E7D32;
    font-weight: 600;
}

/* Per-company storefront theming: the app bar takes the company accent (var set on .weed-shop). */
.weed-shop .mud-appbar {
    background-color: var(--weed-accent, #2E7D32) !important;
}

/* ---- Buyer account area (mobile-first) ---------------------------------- */

/* Account sub-navigation: a horizontally scrollable chip row on narrow screens,
   wrapping naturally when there's room. Never causes a horizontal page scroll. */
.weed-account-nav {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .35rem;
    scrollbar-width: thin;
}
.weed-account-tab {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    flex: 0 0 auto;
    padding: .4rem .85rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .18);
    color: inherit;
    text-decoration: none;
    font-size: .9rem;
    background: #fff;
}
.weed-account-tab:hover { border-color: var(--weed-accent, #2E7D32); }
.weed-account-tab-active {
    background: var(--weed-accent, #2E7D32);
    border-color: var(--weed-accent, #2E7D32);
    color: #fff;
}
@media (min-width: 600px) {
    .weed-account-nav { flex-wrap: wrap; overflow-x: visible; }
}

/* ---- Area left nav, shared by the merchant and operator chromes (mobile-first: a collapsible
   checkbox-driven menu below the app bar; becomes an always-open sticky left sidebar once there's
   room). A hidden checkbox + <label> toggle rather than a MudBlazor drawer for the same reason as the
   partner store switcher above: these chromes are static SSR with no interactive circuit to drive a
   JS component. NOT <details>/<summary> (used for that switcher) - tried here first, but Chromium
   hides a closed <details>'s content via an internal mechanism that a plain `display` override on the
   child can't reach: getComputedStyle reported `display:flex` with real layout geometry, yet nothing
   painted, and only setting the element's `.open` property (i.e. real user interaction) made it
   render. A checkbox's :checked state has no such native-hidden layer, so `display` toggles reliably
   in every state. ---- */
.weed-sidenav-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.weed-sidenav-toggle { margin-bottom: 0; }
/* Same visually-hidden technique as the .visually-hidden utility above: off-screen via clip, not
   display:none, so the checkbox stays in the tab order and toggles with a keyboard the same as a
   click on its <label>. */
.weed-sidenav-checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.weed-sidenav-summary {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: .55rem .75rem;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 8px;
    font-weight: 600;
    font-size: .92rem;
}
.weed-sidenav-checkbox:focus-visible ~ .weed-sidenav-summary {
    outline: 2px solid var(--weed-accent, #2E7D32);
    outline-offset: 2px;
}
.weed-sidenav-checkbox:checked ~ .weed-sidenav-summary { border-radius: 8px 8px 0 0; }
/* Collapsed by default on mobile. */
.weed-sidenav {
    display: none;
    flex-direction: column;
    gap: .15rem;
}
.weed-sidenav-checkbox:checked ~ .weed-sidenav {
    display: flex;
    border: 1px solid rgba(0, 0, 0, .15);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: .4rem;
}
.weed-sidenav-link {
    display: flex;
    align-items: center;
    padding: .5rem .75rem;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    font-size: .92rem;
}
.weed-sidenav-link:hover { background: rgba(0, 0, 0, .05); }
.weed-sidenav-link-active {
    background: var(--weed-accent, #2E7D32);
    color: #fff;
}
.weed-sidenav-link-active:hover { background: var(--weed-accent, #2E7D32); }
.weed-sidenav-heading {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(0, 0, 0, .5);
    padding: .9rem .75rem .25rem;
}
/* Marks the superadmin-only block so it reads as a distinct tier, not just another group. */
.weed-sidenav-heading-super { color: #B71C1C; }
.weed-sidenav-rule {
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, .12);
    margin: .75rem .25rem .35rem;
}
.weed-sidenav-content { min-width: 0; }
@media (min-width: 900px) {
    .weed-sidenav-layout { flex-direction: row; align-items: flex-start; gap: 2rem; }
    .weed-sidenav-toggle { width: 220px; flex: 0 0 220px; position: sticky; top: 1rem; }
    .weed-sidenav-summary { display: none; }
    /* Always shown regardless of the checkbox's checked state - there's no toggle to click at this
       width, see .weed-sidenav-summary above. `.weed-sidenav-toggle > .weed-sidenav` matches the
       :checked sibling rule's specificity, so being declared after it here is what wins the tie and
       strips that rule's mobile-only border/padding too. */
    .weed-sidenav-toggle > .weed-sidenav { display: flex; border: none; padding: 0; }
    .weed-sidenav-content { flex: 1 1 auto; }
}

/* ---- Partner store changer (app bar, only shown with >1 store membership) ---- */
.weed-store-switcher { position: relative; color: inherit; }
.weed-store-switcher > summary {
    list-style: none;
    cursor: pointer;
    padding: .4rem .75rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .5);
    font-size: .875rem;
}
.weed-store-switcher > summary::-webkit-details-marker { display: none; }
.weed-store-switcher[open] > summary { background: rgba(255, 255, 255, .12); }
/* position:fixed, not absolute: the mobile app-bar fix below (`.mud-appbar .mud-toolbar{overflow-x:auto}`)
   forces overflow-y to compute as auto too (a container can't scroll one axis and stay clip-free on the
   other - CSS2.1 11.1.1), so an absolutely-positioned dropdown anchored inside that toolbar gets clipped
   to the toolbar's own ~56px height the moment it's open. Fixed positioning escapes that ancestor's
   clipping/scrolling box entirely (its containing block is the viewport), which is the only CSS-only way
   out - this component is deliberately JS-free static SSR (see its own header comment), so we can't
   reposition it with a ResizeObserver/portal the way a MudMenu would. Anchored to the viewport's top-right
   rather than the button's own position: the app bar spans the full viewport width and this switcher
   already sits flush against its right edge, so this lines up correctly at any viewport width without
   needing the button's actual coordinates. */
.weed-store-switcher-menu {
    position: fixed;
    top: calc(var(--mud-appbar-height, 64px) + 4px);
    right: .5rem;
    z-index: 20;
    min-width: 220px;
    background: #fff;
    color: #212121;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
    padding: .4rem 0;
}
.weed-store-switcher-menu a {
    display: block;
    padding: .5rem 1rem;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}
.weed-store-switcher-menu a:hover { background: rgba(0, 0, 0, .06); }
.weed-store-switcher-menu a.weed-store-switcher-active { font-weight: 700; color: var(--weed-accent, #2E7D32); }

/* ---- Buyer storefront style switcher (app bar) ----------------------------
   Default/classic look only - per-style theme overrides (weed-style-midnight, weed-style-haze) live in a
   separate stylesheet owned by another workstream. Modeled on .weed-store-switcher above. */
.weed-style-switcher { position: relative; color: inherit; }
.weed-style-switcher > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .6rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .5);
    font-size: .85rem;
}
.weed-style-switcher > summary::-webkit-details-marker { display: none; }
.weed-style-switcher[open] > summary { background: rgba(255, 255, 255, .12); }
/* position:fixed - see the identical comment on .weed-store-switcher-menu above; same clipping conflict
   with the mobile app-bar's forced overflow-x/overflow-y:auto, same JS-free constraint, same fix. */
.weed-style-menu {
    position: fixed;
    top: calc(var(--mud-appbar-height, 64px) + 4px);
    right: .5rem;
    z-index: 20;
    min-width: 180px;
    background: #fff;
    color: #212121;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
    padding: .4rem 0;
}
.weed-style-option {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem 1rem;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}
.weed-style-option:hover { background: rgba(0, 0, 0, .06); }
.weed-style-active { font-weight: 700; }
.weed-style-swatch {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    flex: 0 0 auto;
    border: 1px solid rgba(0, 0, 0, .15);
}
.weed-style-swatch-classic { background: #2E7D32; }
.weed-style-swatch-midnight { background: #101312; box-shadow: inset 0 0 0 2px #d9b25f; }
.weed-style-swatch-haze { background: linear-gradient(135deg, #ff6f61, #8b5cf6); }

/* ---- Shared date-range filter (merchant reports) ------------------------- */
.weed-daterange { display: flex; flex-direction: column; gap: .6rem; }
.weed-daterange-presets {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .25rem;
}
.weed-daterange-custom { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem; }
.weed-daterange-label {
    display: flex;
    flex-direction: column;
    font-size: .78rem;
    color: rgba(0, 0, 0, .6);
    gap: .15rem;
}
@media (min-width: 600px) {
    .weed-daterange-presets { flex-wrap: wrap; overflow-x: visible; }
}
@media (max-width: 599px) {
    /* On a ~390px phone the From/To/Apply row doesn't have width for all three at their natural
       size: From and To each take about half, leaving Apply to wrap onto To's line with only
       whatever width is left over. align-items: end (which lines Apply's bottom up with the inputs
       when everything fits on one row on desktop) then leaves it floating above/beside the To field
       instead of forming a clean row. Stack the row instead, so each field and the button get the
       full width and there's nothing left to misalign. */
    .weed-daterange-custom { flex-direction: column; align-items: stretch; }
}

/* A link-styled button for destructive inline actions (delete address, clear history). */
.weed-linkbtn-danger {
    background: none;
    border: none;
    padding: 0;
    color: #c62828;
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
}

/* Checkbox rows on the notifications page. */
.weed-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem 0;
    font-size: .95rem;
}
.weed-check input { width: 1.1rem; height: 1.1rem; }

/* Order tracking stepper (buyer "in progress" orders). Horizontal, wraps on mobile. */
.weed-order-track {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.25rem;
}
.weed-order-step {
    display: flex;
    align-items: center;
    gap: .4rem;
    opacity: .45;
    font-size: .8rem;
}
.weed-order-step.done { opacity: 1; }
.weed-order-dot {
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: #bdbdbd;
    flex: 0 0 auto;
}
.weed-order-step.done .weed-order-dot { background: var(--weed-accent, #2E7D32); }

/* Dim an unavailable favourite card. */
.weed-fav-unavailable { opacity: .6; }

/* Non-production in-range-stores debug panel. */
.weed-debug-panel {
    border: 1px dashed #b71c1c;
    border-radius: 8px;
    padding: .75rem 1rem;
    background: rgba(183, 28, 28, .04);
}
.weed-debug-panel > summary {
    cursor: pointer;
    font-weight: 600;
    color: #b71c1c;
    display: flex;
    align-items: center;
}

/* Favorite heart: a plain anchor (not a MudIconButton, which swallows the click) styled as an icon
   tap target. */
.weed-fav-heart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .35rem;
    border-radius: 50%;
    line-height: 0;
    color: inherit;
    text-decoration: none;
}
.weed-fav-heart:hover { background: rgba(0, 0, 0, .06); }

/* Mobile-first: keep every area's app bar within a phone viewport. MudAppBar's toolbar has a CSS
   var-driven FIXED height (doesn't grow with content) - when its buttons don't fit a ~390px bar, MudBlazor
   wraps them onto a second line that the fixed-height box has no room for, so that line visually overlaps
   whatever is directly below the app bar in the DOM and silently steals clicks meant for it (found by adding
   the Support launcher to every chrome - see SupportWidgetLauncher). Let the toolbar scroll internally instead
   (nothing clipped, page itself never scrolls sideways), on every area, not just the storefront. */
@media (max-width: 599px) {
    .mud-appbar .mud-toolbar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 2px;
    }
    .mud-appbar .mud-toolbar > * { flex: 0 0 auto; }
    .weed-locinput { width: 4.5rem; }
    .weed-locform { margin-right: .35rem !important; }
    /* AddressLocked branch (a saved-address label, not the free-text box above) - same overflow
       contributor, different markup shape. !important beats the element's own inline max-width. */
    .weed-loclabel { max-width: 4.5rem !important; }
    .weed-style-current { display: none; } /* icon-only summary so the app bar stays tight */
    /* Icon-only Cart/Account/Sign in/Sign out on the storefront app bar. Measured live on a 390px
       viewport (StorefrontChrome, signed-in buyer with a saved address): even with overflow-x:auto
       above making the bar technically usable, its content measured 691px wide against a 390px bar -
       nearly double, so reaching Sign out meant an undiscoverable horizontal drag. Icons keep every
       control reachable with a straight tap; aria-label on each button (see StorefrontChrome.razor)
       keeps them accessible with the label gone. */
    .mud-appbar .weed-btn-label { display: none; }
    /* Hiding the label text alone still left MudButton's own text-button padding/min-width in place
       (measured: 691px -> 586px against a 390px bar - better, not fixed), because that padding is sized
       for a text button, not an icon. :has() (already used elsewhere for this exact "icon-only cell" shape,
       see DotNetShared.MudMobile) scopes this to just the buttons that actually went icon-only here, so it
       can't cramp a text button elsewhere in the app whose label this page didn't hide. */
    .mud-appbar .mud-button-root:has(.weed-btn-label) {
        min-width: 0;
        padding-left: .5rem;
        padding-right: .5rem;
    }
}

/* ---- Superadmin impersonation banner (ImpersonationBanner.razor) ----
   Full-width and sticky, not a dismissible pill like EnvironmentBanner - it needs to stay unmissable for
   the entire session, since it's the only on-screen cue that actions are being taken as someone else. */
.imp-banner {
    position: sticky;
    top: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: .6rem;
    background: #B71C1C;
    color: #fff;
    padding: .5rem 1rem;
    font-size: .85rem;
    line-height: 1.4;
}
.imp-text { flex: 1; }
.imp-exit {
    flex-shrink: 0;
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}
.imp-exit:hover { color: #ffe0e0; }
@media (max-width: 599px) {
    .imp-banner { flex-wrap: wrap; }
}

/* ---- EnvironmentBanner (DotNetShared) placement override --------------------------------------
   The shared banner floats fixed top-center with a 44px ✕ hit-target. Top-center lands exactly on
   the storefront app bar's style-switcher/cart cluster at ~1280px viewports and eats their clicks
   (caught by StyleSwitcherTests' trial-clicks; the banner body is pointer-transparent but the ✕
   can't be). Park it bottom-center instead: still unmissable, and nothing interactive lives there
   on any Weedable page (floating launchers are bottom-RIGHT). !important because the component's
   scoped .razor.css attribute selector outranks this plain class rule. */
.eb-banner {
    top: auto !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
}