/* Customer pages migrated from the legacy site (CustomerLayout only), in the new TAILORBLEND look: white navbar, dark
   footer, white page, tables in a white 8px card. Values come from the designs and the TAILORBLEND Design System, whose
   tokens are in design-tokens.css. The cart pop-up is still styled by the legacy stylesheets in css/legacy. */

:root {
    /* Teal fills that carry text: buttons, selected chips and tabs, count badges. Kirsten's #5BBFB3 with white text, as
       her designs decided (Glen, 6 November 2026), though white on it is only 2.2:1; the accessible teal,
       --tb-teal-accessible, gives 5.2:1. To change every one of them, change these two lines. The navbar button is one of them
       too (Glen, 10 November 2026); the home page's teal buttons use the accessible teal (8 November 2026). */
    --tb-teal-fill: var(--tb-teal-ui);
    --tb-teal-fill-text: #FFFFFF;

    /* This site's older names for design system values. */
    --tb-teal-ink: var(--tb-teal-accessible);
    --tb-ink: var(--slate-900);
    --tb-ink-soft: var(--slate-700);
    --tb-ink-muted: var(--slate-600);
    --tb-ink-faint: var(--slate-500);
    --tb-line: var(--slate-200);
    --tb-line-soft: var(--slate-100);
    --tb-line-strong: var(--slate-300);
    --tb-page: var(--tb-bg-muted);
    /* The small uppercase labels above headings and footer links. */
    --tb-eyebrow-size: 9.5px;
    --tb-eyebrow-tracking: 0.22em;
    /* The Delete button: white text is 5:1 on this, where the design's --tb-danger is 4:1. */
    --tb-danger-fill: #C93C3C;
    --tb-danger-fill-hover: #A82E2E;
}

/* Legacy base.css fixes body at 100% height with overflow-x hidden, which makes the body, not the window, scroll.
   MudBlazor places its menus by the window's scroll, so the My Blends ⋯ menu opened further above its row the further
   down the page was scrolled. The body grows with the page instead, so the window scrolls; clip (unlike hidden) does not
   make the body a scroll box, so sticky panels keep sticking to the window. */
body {
    height: auto;
    overflow-x: clip !important;
    background: #fff;
    color: var(--tb-ink) !important;
    font-family: Montserrat, system-ui, sans-serif;
}

/* The page focuses its heading when it opens, for screen readers; it is not a control, so it shows no outline. */
h1:focus {
    outline: none;
}

/* ---------- Navbar ---------- */

/* The header and its phone menu stay at the top of the window on every page (Kirsten's design). --tb-nav-height is the
   header's height, for what must sit below it: the Create page's and checkout's sticky panels, and every jump to a part
   of a page, a tab or a focused control, which the browser keeps out from under the header (scroll-padding-top). */
:root {
    --tb-nav-height: 64px;
}

html:has(.tb-nav-wrap) {
    scroll-padding-top: var(--tb-nav-height);
}

.tb-nav-wrap {
    position: sticky;
    top: 0;
    z-index: 40;
}

/* The cart pop-up (Bootstrap's modal) puts overflow: hidden on the body. With html's overflow-x (legacy base.css) that would
   make the body a scroll box, and the header and the Create and checkout panels would stick to it, at the top of the page,
   not to the window. The window takes the lock instead: the page stays put behind the pop-up, header and all. */
body.modal-open {
    overflow-y: visible !important;
}

html:has(> body.modal-open) {
    overflow-y: hidden;
}

.tb-nav {
    position: relative;
    z-index: 40;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 40px;
    background: #fff;
    border-bottom: 1px solid var(--tb-line-soft);
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
}

.tb-nav a,
.tb-nav-mobile-menu a {
    color: var(--tb-ink-muted);
    font-weight: 500;
    text-decoration: none;
}

.tb-nav a:hover,
.tb-nav a.active,
.tb-nav-mobile-menu a.active {
    color: var(--tb-ink);
}

.tb-nav a.active {
    font-weight: 700;
}

.tb-nav-mobile-menu a.active {
    color: var(--tb-teal-ink);
}

/* Logo and account area share the spare width, so the links sit in the true centre. */
.tb-nav-logo {
    flex: 1;
    min-width: 0;
}

.tb-nav-logo img {
    display: block;
    height: 32px;
    width: auto;
}

.tb-nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
}

.tb-nav-links a {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-nav-account {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
}

.tb-nav a.tb-nav-login {
    color: var(--tb-ink);
    font-weight: 600;
}

/* The teal button: Start here, Build a blend, Reorder my blend or Chat to Deyna AI. */
.tb-nav-button,
.tb-nav a.tb-nav-button,
.tb-nav-mobile-menu a.tb-nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 20px;
    border: 0;
    border-radius: 8px;
    background: var(--tb-teal-fill);
    color: var(--tb-teal-fill-text);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.tb-nav a.tb-nav-button:hover,
.tb-nav-mobile-menu a.tb-nav-button:hover {
    color: var(--tb-teal-fill-text);
    transform: var(--tb-lift);
}

.tb-nav-user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--tb-ink);
    font-size: 12.5px;
    font-weight: 600;
}

.tb-nav-initials {
    width: 32px;
    height: 32px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--tb-teal-tint);
    color: var(--tb-teal-ink);
    font-size: 11px;
    font-weight: 700;
}

.tb-nav-dropdown.dropdown-menu {
    width: 240px;
    margin-top: 8px !important;
    padding: 8px;
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius-menu);
    box-shadow: var(--tb-shadow-menu);
    font-size: 13px;
}

.tb-nav .tb-nav-dropdown .dropdown-item {
    padding: 10px 12px;
    border-radius: 4px;
    color: var(--tb-ink);
    font-weight: 600;
}

.tb-nav .tb-nav-dropdown .dropdown-item:hover,
.tb-nav .tb-nav-dropdown .dropdown-item:focus {
    background: var(--tb-page);
    color: var(--tb-ink);
}

.tb-nav .tb-nav-dropdown .dropdown-item.tb-nav-muted {
    color: var(--tb-ink-faint);
    font-weight: 500;
}

.tb-nav-dropdown-note {
    display: block;
    color: var(--tb-ink-faint);
    font-size: 11.5px;
}

.tb-nav-dropdown .tb-nav-dropdown-note {
    margin-bottom: 4px;
    padding: 8px 12px 10px;
    border-bottom: 1px solid var(--tb-line-soft);
}

.tb-nav-dropdown-user {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 4px;
    padding: 10px 12px 12px;
    border-bottom: 1px solid var(--tb-line-soft);
    font-weight: 600;
    white-space: normal;
    overflow-wrap: anywhere;
}

.tb-nav-dropdown-user span + span {
    color: var(--tb-ink-faint);
    font-size: 11.5px;
    font-weight: 500;
}

.tb-nav-dropdown-line {
    height: 1px;
    margin: 4px 0;
    background: var(--tb-line-soft);
}

/* The slim banner under the header for a practitioner not yet approved. */
.tb-nav-pending {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 40px;
    background: var(--tb-teal-tint);
    color: var(--tb-ink);
    font-size: 12px;
}

.tb-nav-pending svg {
    flex: none;
    color: var(--tb-teal-ink);
}

.tb-nav-pending a {
    color: var(--tb-teal-ink);
    font-weight: 600;
    text-decoration: underline;
}

@media (max-width: 991.98px) {
    .tb-nav-pending {
        align-items: flex-start;
        padding: 10px 18px;
    }
}

/* Cart: a plain icon with a teal count badge. */
.tb-cart-button {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--tb-ink);
    cursor: pointer;
}

.tb-cart-count {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--tb-teal-fill);
    color: var(--tb-teal-fill-text);
    font-size: var(--tb-eyebrow-size);
    font-weight: 700;
}

.tb-nav-mobile {
    display: none;
    align-items: center;
    gap: 4px;
}

.tb-nav-menu-button {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--tb-ink);
}

.tb-nav-menu-button .tb-icon-open,
.tb-nav-menu-button.collapsed .tb-icon-close {
    display: none;
}

.tb-nav-menu-button.collapsed .tb-icon-open {
    display: block;
}

/* New blends in a practitioner's inbox, shown while the menu holding the count is closed. */
.tb-nav-dot {
    display: none;
    position: absolute;
    top: 10px;
    right: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tb-teal-ui);
}

.tb-nav-menu-button.collapsed .tb-nav-dot {
    display: block;
}

.tb-nav-mobile-menu {
    /* It drops down over the page from the sticky header, rather than pushing the page down, which would make it jump where
       the browser does not hold its place (Safari). A long menu on a short screen scrolls on its own (once open: while it
       opens or closes, Bootstrap's .collapsing clips it). */
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    max-height: calc(100dvh - var(--tb-nav-height));
    background: #fff;
    border-bottom: 1px solid var(--tb-line);
}

.tb-nav-mobile-menu.show {
    overflow-y: auto;
}

.tb-nav-mobile-links {
    display: flex;
    flex-direction: column;
    padding: 4px 20px 0;
}

.tb-nav-mobile-links > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--tb-line-soft);
    color: var(--tb-ink);
    font-size: 16px;
    font-weight: 600;
}

.tb-nav-mobile-section {
    display: flex;
    flex-direction: column;
    padding: 0 20px;
}

.tb-nav-mobile-section > a {
    padding: 10px 0;
    color: var(--tb-ink-soft);
    font-size: 14px;
}

.tb-nav-mobile-label {
    padding-top: 20px;
    color: var(--tb-ink-faint);
    font-size: var(--tb-eyebrow-size);
    font-weight: 700;
    letter-spacing: var(--tb-eyebrow-tracking);
    text-transform: uppercase;
}

.tb-nav-mobile-section .tb-nav-dropdown-note {
    padding-bottom: 4px;
}

.tb-nav-mobile-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 20px 6px;
    color: var(--tb-ink);
    font-size: 13px;
    font-weight: 600;
}

.tb-nav-mobile-user .tb-nav-initials {
    width: 28px;
    height: 28px;
    font-size: 10px;
}

.tb-nav-mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 20px 22px;
}

.tb-nav-mobile-menu a.tb-nav-button {
    padding: 14px;
    font-size: 12.5px;
}

.tb-nav-mobile-menu a.tb-nav-mobile-outline {
    padding: 13px;
    border: 1px solid var(--tb-line-strong);
    border-radius: 8px;
    color: var(--tb-ink-soft);
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
}

/* The mobile menu only exists below the desktop navbar's breakpoint. */
@media (min-width: 992px) {
    .tb-nav-mobile-menu {
        display: none !important;
    }
}

/* Four or five links, a name, the cart and a button stop fitting below this, and the logo gives way first. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .tb-nav {
        padding: 0 20px;
    }

    .tb-nav-links {
        gap: 18px;
    }

    .tb-nav-logo img {
        height: 24px;
    }

    .tb-nav-account {
        gap: 10px;
    }
}

@media (max-width: 991.98px) {
    :root {
        --tb-nav-height: 56px;
    }

    .tb-nav {
        height: 56px;
        gap: 4px;
        padding: 0 8px 0 18px;
    }

    .tb-nav-logo img {
        height: 28px;
    }

    .tb-nav-links,
    .tb-nav-account {
        display: none;
    }

    .tb-nav-mobile {
        display: flex;
    }

    .tb-nav-mobile .tb-nav-button {
        padding: 8px 14px;
        font-size: 11px;
    }

    .tb-nav-mobile .tb-cart-button {
        width: 44px;
        height: 44px;
    }

    .tb-nav-mobile .tb-cart-count {
        top: 6px;
        right: 4px;
    }
}

/* ---------- Footer ---------- */

.tb-footer {
    background: var(--tb-ink);
    color: #fff;
}

.tb-footer-inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 64px 40px 36px;
}

.tb-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: 32px 24px;
}

.tb-footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.tb-footer-brand img {
    display: block;
    height: 44px;
    width: auto;
}

.tb-footer-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tb-footer-column > span {
    color: var(--tb-teal-ui);
    font-size: var(--tb-eyebrow-size);
    font-weight: 700;
    letter-spacing: var(--tb-eyebrow-tracking);
    text-transform: uppercase;
}

.tb-footer-column > a,
.tb-footer-contact a {
    align-self: flex-start;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    text-decoration: none;
}

.tb-footer-column > a:hover,
.tb-footer-contact a:hover {
    color: #fff;
}

.tb-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.tb-footer-small {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tb-footer-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 0 6px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
}

.tb-footer-contact a {
    font-size: 12px;
}

.tb-footer-copyright {
    color: rgba(255, 255, 255, 0.6);
    font-size: 11.5px;
    line-height: 1.6;
}

.tb-footer-copyright a {
    color: inherit;
}

.tb-footer-social {
    display: flex;
    gap: 8px;
}

.tb-footer-social a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
}

@media (max-width: 767.98px) {
    .tb-footer-inner {
        gap: 32px;
        padding: 48px 20px 32px;
    }

    .tb-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 20px;
    }

    .tb-footer-brand {
        grid-column: 1 / -1;
    }

    .tb-footer-brand img {
        height: 36px;
        align-self: center;
    }

    .tb-footer-bottom {
        flex-direction: column-reverse;
        align-items: flex-start;
    }
}

/* ---------- Grey page and tab switcher (My clients) ---------- */

.tb-customer-main {
    background: var(--tb-bg-portal);
}

/* The design's portal pages are flat white. */
.tb-customer-main:has(.tb-myblends) {
    background: #fff;
}

.tb-tabs {
    display: flex;
    gap: 2px;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: 999px;
}

.tb-tab {
    height: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    border-radius: 999px;
    color: var(--tb-ink) !important;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.tb-tab.active {
    background: var(--tb-teal-fill);
    font-weight: 600;
    color: var(--tb-teal-fill-text) !important;
}

.tb-tab-count {
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--tb-teal-tint);
    color: var(--tb-teal-ink);
    font-size: 10.5px;
    font-weight: 700;
}

@media (max-width: 991.98px) {
    .tb-tabs {
        gap: 6px;
        padding: 0;
        background: none;
        border: 0;
    }

    .tb-tab {
        flex: none;
        padding: 0 13px;
        background: #fff;
        border: 1px solid var(--tb-line);
        font-size: 12px;
    }

    .tb-tab.active {
        border-color: var(--tb-teal-fill);
    }
}

/* ---------- My Blends ---------- */

.tb-myblends {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 32px 48px 56px;
}

.tb-myblends-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
}

.tb-myblends-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

/* The small capitals above a heading, and every label inside the detail panel. */
.tb-page-eyebrow {
    color: var(--tb-ink-faint);
    font-size: var(--tb-eyebrow-size);
    font-weight: 700;
    letter-spacing: var(--tb-eyebrow-tracking);
    line-height: 1.3;
    text-transform: uppercase;
}

/* The short grey sentence under a page heading, saying what is on the page. */
.tb-page-lead {
    max-width: 640px;
    margin: 0;
    color: var(--tb-ink-faint);
    font-size: 13px;
    line-height: 1.5;
}

.tb-page-title {
    margin: 0;
    color: var(--tb-ink);
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.05;
    text-transform: uppercase;
}

/* Legacy's base styles underline a heading's span. */
.tb-page-title-accent {
    color: var(--tb-teal-ink);
    font-weight: 300;
    text-decoration: none;
}

.tb-back-link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    margin-bottom: -14px;
    color: var(--tb-teal-ink) !important;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.tb-back-link:hover {
    text-decoration: underline;
}

/* Blazor's router focuses the page h1 after navigation (FocusOnNavigate); the design shows no focus ring there. */
.tb-page-title:focus {
    outline: none;
}

.tb-muted {
    color: var(--tb-ink-faint);
    font-size: 12.5px;
}

.tb-search {
    flex: 0 1 340px;
    width: 340px;
    min-width: 200px;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0 16px;
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: 8px;
    color: var(--tb-ink-faint);
}

.tb-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: none;
    color: var(--tb-ink);
    font: inherit;
    font-size: 13px;
}

/* The table: an outlined card, 44px header row in small capitals, 52px rows with hairline dividers. */
.tb-myblends .tb-blends-card {
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: 8px;
    box-shadow: none;
}

.tb-myblends .mud-table-container {
    border-radius: 8px 8px 0 0;
}

.tb-myblends .mud-table-head .mud-table-cell {
    height: 44px;
    padding: 0 12px;
    border-bottom: 1px solid var(--tb-line-soft);
    background: transparent;
    color: var(--tb-ink-faint);
    font-size: var(--tb-eyebrow-size);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.tb-myblends .mud-table-head .mud-table-cell * {
    font-size: var(--tb-eyebrow-size);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.tb-myblends .mud-table-head .mud-table-cell .mud-icon-root {
    font-size: 15px;
}

/* Sort arrow straight after the column name, as in the design (MudBlazor pushes it to the cell's far edge). */
.tb-myblends .mud-table-head .column-header {
    justify-content: flex-start;
}

.tb-myblends .mud-table-head .column-header .sortable-column-header {
    width: auto;
}

.tb-myblends .mud-table-body .mud-table-cell {
    height: 52px;
    padding: 0 12px;
    border-bottom: 0;
    border-top: 1px solid var(--tb-line-soft);
    color: var(--tb-ink-soft);
    font-size: 13px;
}

.tb-myblends .mud-table-head .mud-table-cell:first-child,
.tb-myblends .mud-table-body .mud-table-cell:first-child {
    padding-left: 20px;
}

.tb-myblends .mud-table-head .mud-table-cell:last-child,
.tb-myblends .mud-table-body .mud-table-cell:last-child {
    padding-right: 20px;
}

/* The actions column takes only the width of its buttons, so the price sits beside them as in the design. */
.tb-myblends .mud-table-head .mud-table-cell:last-child {
    width: 1%;
}

.tb-myblends {
    --mud-palette-table-hover: var(--slate-50);
}

/* Keep the right-aligned price heading flush with its values: MudBlazor reserves room for an invisible sort arrow. */
.tb-myblends .mud-table-head .tb-align-right .sort-direction-icon:not(.mud-direction-asc):not(.mud-direction-desc) {
    display: none;
}

/* Underlined because a click opens the blend's details and label. */
.tb-myblends .tb-blend-name {
    color: var(--tb-ink);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--tb-line-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.tb-myblends .mud-table-row:hover .tb-blend-name,
.tb-myblends .tb-blend-name:hover {
    color: var(--tb-teal-ink);
    text-decoration-color: var(--tb-teal-ui);
}

/* An order lists several blends, each opening its own panel, so only the one under the pointer lights up (Kirsten,
   10 November 2026), and each is only as wide as its name. */
.tb-myblends .tb-orders-card .tb-blend-name {
    width: fit-content;
}

.tb-myblends .tb-orders-card .mud-table-row:hover .tb-blend-name:not(:hover) {
    color: var(--tb-ink);
    text-decoration-color: var(--tb-line-strong);
}

/* The blend lists' description tooltips: a long description wraps instead of running off both sides of the screen, in a
   box with the site cards' 8px corners (Kirsten, 10 November 2026). MudBlazor writes max-width: none on the element. */
.mud-tooltip {
    max-width: min(360px, calc(100vw - 32px)) !important;
    padding: 8px 12px;
    border-radius: 8px;
    text-align: left;
    white-space: normal;
}

.tb-search-mark {
    padding: 0;
    background: var(--tb-teal-tint);
    border-radius: 3px;
    color: var(--tb-teal-ink);
}

.tb-myblends .tb-align-right {
    text-align: right;
}

.tb-myblends .mud-table-head .tb-align-right .column-header {
    justify-content: flex-end;
}

/* Row buttons: Send / Buy outlined teal (filled on hover), Edit and Share outlined grey. */
.tb-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.tb-pill {
    height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0 14px;
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: 8px;
    color: var(--tb-ink-soft) !important;
    font: inherit;
    font-size: 11.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.tb-pill:hover {
    border-color: var(--slate-400);
}

.tb-pill-primary {
    padding: 0 14px;
    border-color: var(--tb-teal-ui);
    color: var(--tb-teal-ink) !important;
    font-weight: 500;
}

.tb-pill-primary:hover {
    background: var(--tb-teal-fill);
    border-color: var(--tb-teal-fill);
    color: var(--tb-teal-fill-text) !important;
}

.tb-pill-share {
    padding: 0 10px 0 14px;
}

/* Phones only: the row's one button, which opens the action sheet. */
.tb-row-more {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: 0;
    color: var(--tb-ink-faint);
    cursor: pointer;
}

.tb-pill .tb-chevron {
    width: 13px;
    height: 13px;
}

/* Share menu: small white card with "Copy link". */
.tb-share-menu.mud-popover {
    min-width: 150px;
    margin-top: 8px;
    padding: 5px;
    border: 1px solid var(--tb-line);
    border-radius: 6px;
    box-shadow: none;
}

.tb-share-menu .mud-list {
    padding: 0;
}

.tb-share-menu .mud-menu-item {
    padding: 9px 12px;
    border-radius: 4px;
}

.tb-share-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--tb-ink);
    font-size: 12.5px;
}

/* My Blends' row menu (the ⋯ button): Edit, Share (opens out to Copy link and Download PNG), a line, then Delete. */
.tb-pill.tb-pill-more {
    width: 30px;
    justify-content: center;
    padding: 0;
}

.tb-row-menu.mud-popover {
    min-width: 190px;
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.15);
}

/* MudBlazor gives item text a margin round it and 36px on its right; the design's rows are tighter. */
.tb-row-menu.mud-popover .mud-menu-item .mud-menu-item-text {
    margin: 0;
}

.tb-row-menu .tb-share-item {
    gap: 10px;
    width: 100%;
    font-size: 12px;
}

.tb-menu-chevron {
    display: flex;
    margin-left: auto;
    transition: transform 0.15s;
}

.tb-menu-chevron.open {
    transform: rotate(180deg);
}

.tb-row-menu .tb-menu-sub .tb-share-item {
    padding-left: 25px;
    color: var(--tb-ink-muted);
}

.tb-row-menu .tb-menu-divider {
    margin: 4px 0;
    border-color: var(--tb-line-soft);
}

.tb-row-menu .tb-menu-delete .tb-share-item {
    color: var(--tb-danger);
}

.tb-row-menu .tb-menu-delete:hover {
    background: #FDF1F1;
}

/* Delete on a blend something uses: still shown, so customers know deleting exists, but faded, and it only says why. */
.tb-row-menu .tb-menu-delete.tb-delete-unavailable,
.tb-action-sheet-actions .tb-delete-unavailable {
    opacity: 0.4;
    cursor: not-allowed;
}

.tb-row-menu .tb-menu-delete.tb-delete-unavailable:hover {
    background: transparent;
}

/* Pager: range on the left; rows per page, page buttons and arrows on the right. */
.tb-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px;
    border-top: 1px solid var(--tb-line-soft);
    color: var(--tb-ink-muted);
    font-size: 12px;
}

.tb-pager-controls,
.tb-pager-size {
    display: flex;
    align-items: center;
    gap: 20px;
}

.tb-pager-size {
    gap: 8px;
    margin: 0;
}

.tb-pager-size select {
    height: 30px;
    padding: 0 10px;
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: 8px;
    color: var(--tb-ink);
    font: inherit;
}

.tb-pager-pages {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tb-page,
.tb-page-step {
    min-width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--tb-ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.tb-page {
    border-radius: 8px;
}

.tb-page.active {
    background: var(--tb-teal-fill);
    color: var(--tb-teal-fill-text);
}

.tb-page-step:disabled {
    opacity: 0.3;
    cursor: default;
}

.tb-page-gap {
    min-width: 20px;
    text-align: center;
}

@media (max-width: 991.98px) {
    .tb-myblends {
        gap: 12px;
        padding: 18px 16px 32px;
    }

    .tb-myblends-heading {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .tb-page-title {
        font-size: 24px;
    }

    .tb-back-link {
        margin-bottom: -8px;
    }

    .tb-search {
        flex: 1 1 100%;
        width: auto;
    }

    /* Directly in the stacked heading, a basis of 100% would be the height and squash it. */
    .tb-myblends-heading > .tb-search {
        flex: none;
    }

    .tb-pager {
        flex-wrap: wrap;
    }
}

/* Phones: MudBlazor stacks each row as "label: value" lines; lay it out like the design's compact phone row instead:
   name and price on top; client, flavour and date beneath (the formulator is left out, as in the design); then the
   actions. Cells: 1 name, 2 flavour, 3 formulated for, 4 formulated by, 5 created, 6 price, 7 actions. */
@media (max-width: 600px) {
    .tb-myblends .mud-xs-table .mud-table-body .mud-table-row {
        display: grid;
        grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto;
        column-gap: 0;
        row-gap: 1px;
        padding: 10px 14px;
        border-top: 1px solid var(--tb-line-soft);
    }

    .tb-myblends .mud-xs-table .mud-table-body .mud-table-cell {
        display: block;
        height: auto;
        min-width: 0;
        padding: 0;
        border: 0;
        color: var(--tb-ink-faint);
        font-size: 11.5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tb-myblends .mud-xs-table .mud-table-body .mud-table-cell::before {
        content: none;
    }

    .tb-myblends .mud-xs-table .mud-table-body .mud-table-cell:nth-child(1) { grid-area: 1 / 1 / 2 / 3; font-size: 13px; }
    .tb-myblends .mud-xs-table .mud-table-body .mud-table-cell:nth-child(2) { grid-area: 2 / 2; padding-left: 4px; }
    .tb-myblends .mud-xs-table .mud-table-body .mud-table-cell:nth-child(2)::before { content: "· "; padding: 0; }
    .tb-myblends .mud-xs-table .mud-table-body .mud-table-cell:nth-child(3) { grid-area: 2 / 1; }
    .tb-myblends .mud-xs-table .mud-table-body .mud-table-cell:nth-child(4) { display: none; }
    .tb-myblends .mud-xs-table .mud-table-body .mud-table-cell:nth-child(5) { grid-area: 2 / 3; padding-left: 10px; text-align: right !important; }
    .tb-myblends .mud-xs-table .mud-table-body .mud-table-cell:nth-child(6) { grid-area: 1 / 3; padding-left: 10px; color: var(--tb-ink); font-size: 12.5px; font-weight: 500; text-align: right !important; }
    .tb-myblends .mud-xs-table .mud-table-body .mud-table-cell:nth-child(7) { grid-area: 3 / 1 / 4 / 4; padding-top: 8px; overflow: visible; }

    .tb-myblends .mud-xs-table .mud-table-body .mud-table-cell .tb-blend-name {
        font-weight: 600;
    }

    .tb-myblends .mud-xs-table .tb-actions {
        justify-content: flex-start;
    }

    /* Phone pager, as the design: page size, range and two arrow buttons, without numbered pages. */
    .tb-pager {
        padding: 12px 14px;
    }

    .tb-pager-controls {
        flex: 1;
        justify-content: space-between;
        gap: 8px;
    }

    .tb-pager-size {
        white-space: nowrap;
    }

    .tb-page,
    .tb-page-gap {
        display: none;
    }

    .tb-pager-pages {
        gap: 6px;
    }

    .tb-page-step {
        width: 44px;
        height: 36px;
        background: #fff;
        border: 1px solid var(--tb-line-strong);
    }
}

/* The phone sort chips and action sheet exist only where MudDataGrid hides its sortable headings and the buttons don't fit. */
.tb-sort-chips {
    display: none;
    gap: 6px;
    margin: 0 -16px;
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
}

.tb-sort-chip {
    flex: none;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 14px;
    background: var(--tb-page);
    border: 0;
    border-radius: 8px;
    color: var(--tb-ink-muted);
    font: inherit;
    font-size: 11.5px;
    font-weight: 500;
}

.tb-sort-chip.active {
    background: var(--tb-teal-fill);
    color: var(--tb-teal-fill-text);
    font-weight: 600;
}

.tb-action-sheet {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 10px 16px 26px;
    background: #fff;
    border-radius: 12px 12px 0 0;
}

/* Focus lands on the dialog itself so the keyboard starts inside it; it needs no ring of its own. */
.tb-action-sheet:focus,
.tb-ledger-dialog:focus,
.tb-detail:focus {
    outline: none;
}

.tb-action-sheet-handle {
    align-self: center;
    width: 36px;
    height: 4px;
    background: var(--tb-line-strong);
    border-radius: 999px;
}

.tb-action-sheet-title {
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: var(--tb-ink);
    font-size: 14px;
    font-weight: 600;
}

.tb-action-sheet-title .tb-muted {
    font-size: 12px;
    font-weight: 400;
}

.tb-action-sheet-actions.tb-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.tb-action-sheet-actions .tb-pill {
    width: 100%;
    height: 44px;
    justify-content: center;
    font-size: 12.5px;
}

.tb-action-sheet-actions .tb-pill-primary {
    grid-column: 1 / -1;
    background: var(--tb-teal-fill);
    color: var(--tb-teal-fill-text) !important;
    font-weight: 700;
}

.tb-action-sheet-actions [data-testid="delete-blend"] {
    grid-column: 1 / -1;
    order: 1;
    border: 0;
    color: var(--tb-danger-fill-hover) !important;
}

@media (max-width: 600px) {
    .tb-sort-chips {
        display: flex;
    }

    .tb-ledger-tools .tb-ledger-button {
        flex: 1;
        justify-content: center;
    }

    /* View recent orders, with the search below it. */
    .tb-my-blends .tb-ledger-tools .tb-search {
        order: 1;
    }

    /* The My Blends phone row: name, then client, on the left; price over date; then the action button. */
    .tb-my-blends .mud-xs-table .mud-table-body .mud-table-row {
        grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto 44px;
        align-items: center;
        padding: 10px 4px 10px 14px;
    }

    /* My Blends has no Flavour column (Kirsten's feedback, 9 November 2026), so its cells are 1 name, 2 formulated for,
       3 formulated by, 4 last edited, 5 price, 6 actions: one fewer than the shared phone rows above count. */
    .tb-my-blends .mud-xs-table .mud-table-body .mud-table-cell:nth-child(2) { grid-area: 2 / 1 / 3 / 3; padding-left: 0; }
    .tb-my-blends .mud-xs-table .mud-table-body .mud-table-cell:nth-child(2)::before { content: none; }
    .tb-my-blends .mud-xs-table .mud-table-body .mud-table-cell:nth-child(3) { display: none; }
    .tb-my-blends .mud-xs-table .mud-table-body .mud-table-cell:nth-child(4) { display: block; grid-area: 2 / 3; padding-left: 10px; text-align: right !important; }
    .tb-my-blends .mud-xs-table .mud-table-body .mud-table-cell:nth-child(5) { grid-area: 1 / 3; padding-left: 10px; color: var(--tb-ink); font-size: 12.5px; font-weight: 500; text-align: right !important; }

    .tb-my-blends .mud-xs-table .mud-table-body .mud-table-cell:nth-child(6) {
        grid-area: 1 / 4 / 3 / 5;
        padding: 0;
        overflow: visible;
        color: var(--tb-ink-faint);
        font-size: 11.5px;
        font-weight: 400;
        text-align: start !important;
    }

    .tb-my-blends .mud-xs-table .tb-actions {
        display: none;
    }

    .tb-my-blends .tb-row-more {
        display: flex;
    }
}

/* ---------- Blend detail panel (the My Blends design's drawer): slides in on the right; full screen on phones ---------- */

.tb-myblends .mud-table-body .mud-table-row {
    cursor: pointer;
}

/* Above the navbar and Bootstrap's cart modal, below MudBlazor popovers (so Share's menu opens on top). */
.tb-detail-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(20, 20, 20, 0.28);
}

.tb-detail {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    width: 580px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    color: var(--tb-ink);
    font-size: 12.5px;
    line-height: 1.5;
}

.tb-detail-topbar {
    display: none;
}

.tb-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 28px 32px 18px;
}

.tb-detail-title {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tb-detail-title h2 {
    margin: 0;
    color: var(--tb-ink);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    text-transform: none;
}

.tb-detail-title .tb-muted {
    font-size: 12px;
}

.tb-detail-close {
    flex: none;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: 999px;
    color: var(--tb-ink);
}

.tb-detail-buy {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 16px;
    padding: 0 32px 22px;
    border-bottom: 1px solid var(--tb-line-soft);
}

.tb-detail-price {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tb-detail-price > span:last-child {
    font-size: 30px;
    font-weight: 300;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.tb-detail-actions.tb-actions {
    justify-content: flex-start;
    gap: 8px;
}

.tb-detail-actions .tb-pill {
    height: 40px;
    padding: 0 20px;
}

.tb-detail-actions .tb-pill-primary {
    padding: 0 22px;
    background: var(--tb-teal-fill);
    color: var(--tb-teal-fill-text) !important;
    font-weight: 700;
}

.tb-detail-actions .tb-pill-primary:hover {
    background: var(--tb-teal-fill);
    border-color: var(--tb-teal-fill);
}

.tb-detail-actions .tb-pill-share {
    padding: 0 14px 0 20px;
}

.tb-detail-body {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 24px 32px 40px;
}

.tb-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}

.tb-fact {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    background: var(--tb-page);
    border-radius: 8px;
}

.tb-fact > span:first-child,
.tb-note > span:first-child {
    color: var(--tb-ink-faint);
    font-size: var(--tb-eyebrow-size);
    font-weight: 700;
    letter-spacing: var(--tb-eyebrow-tracking);
    text-transform: uppercase;
}

.tb-fact > span:last-child {
    font-weight: 500;
    overflow-wrap: anywhere;
}

.tb-detail-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tb-detail-section h3 {
    margin: 0;
    color: var(--tb-ink-faint);
    font-size: var(--tb-eyebrow-size);
    font-weight: 700;
    letter-spacing: var(--tb-eyebrow-tracking);
    line-height: 1.3;
    text-transform: uppercase;
}

.tb-nutrition,
.tb-actives {
    overflow: hidden;
    border: 1px solid var(--tb-line-soft);
    border-radius: 8px;
}

.tb-nutrition-head,
.tb-nutrition-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(92px, max-content) minmax(112px, max-content);
}

.tb-nutrition-head {
    background: var(--tb-page);
    color: var(--tb-ink-muted);
    font-size: 11px;
    font-weight: 600;
}

.tb-nutrition-head span {
    padding: 8px 12px;
}

.tb-nutrition-row span {
    padding: 6px 12px;
}

.tb-nutrition-head span:not(:first-child),
.tb-nutrition-row span:not(:first-child) {
    text-align: right;
    white-space: nowrap;
}

.tb-nutrition-row {
    border-top: 1px solid var(--tb-page);
    font-variant-numeric: tabular-nums;
}

.tb-nutrition-head + .tb-nutrition-row {
    border-top: 0;
}

.tb-nutrition-sub span:first-child {
    padding-left: 28px;
    color: var(--tb-ink-faint);
}

.tb-active-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--tb-page);
    font-variant-numeric: tabular-nums;
}

.tb-active-row:last-child {
    border-bottom: 0;
}

.tb-active-row span:last-child {
    font-weight: 600;
    white-space: nowrap;
}

.tb-detail-notes {
    gap: 16px;
}

.tb-detail-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}

.tb-note {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tb-note > span:last-child {
    color: var(--tb-ink-soft);
}

/* Legacy lower-cases the list and capitalises each word for display. */
.tb-ingredients-list {
    text-transform: capitalize;
}

/* Phones: the panel fills the screen and scrolls as one; a top bar to close it and the buttons stay in view. */
@media (max-width: 600px) {
    .tb-detail {
        width: 100%;
        overflow-y: auto;
    }

    .tb-detail-topbar {
        position: sticky;
        top: 0;
        z-index: 1;
        flex: none;
        height: 52px;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 8px;
        background: #fff;
        border-bottom: 1px solid var(--tb-line);
        font-size: 13px;
        font-weight: 600;
    }

    .tb-detail-topbar .tb-detail-close {
        width: 44px;
        height: 44px;
        border: 0;
    }

    .tb-detail-close-desktop {
        display: none;
    }

    .tb-detail-head {
        padding: 20px 16px 6px;
    }

    .tb-detail-title h2 {
        font-size: 19px;
    }

    /* The price joins the heading and the buttons become the bottom bar. */
    .tb-detail-buy {
        display: contents;
    }

    .tb-detail-price {
        padding: 0 16px;
    }

    .tb-detail-price > span:last-child {
        font-size: 26px;
    }

    .tb-detail-body {
        flex: none;
        overflow: visible;
        gap: 18px;
        padding: 18px 16px 28px;
    }

    .tb-detail-actions.tb-actions {
        position: sticky;
        bottom: 0;
        order: 4;
        margin-top: auto;
        padding: 12px 16px 22px;
        background: #fff;
        border-top: 1px solid var(--tb-line-soft);
    }

    .tb-detail-actions .tb-pill {
        height: 44px;
        padding: 0 18px;
        font-size: 12.5px;
    }

    .tb-detail-actions .tb-pill-primary {
        flex: 1;
        justify-content: center;
    }

    .tb-detail-pair {
        grid-template-columns: 1fr;
    }

    .tb-nutrition-head,
    .tb-nutrition-row {
        grid-template-columns: minmax(0, 1fr) minmax(70px, max-content) minmax(84px, max-content);
    }

    .tb-nutrition-head span,
    .tb-nutrition-row span {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* My Clients and My Account: underlined tabs above a ledger table, a tools row, links that open panels, and a small dialog. */
.tb-ledger-tabs {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    border-bottom: 1px solid var(--tb-line);
    scrollbar-width: none;
}

.tb-ledger-tabs .tb-tab {
    flex: none;
    height: auto;
    min-height: 40px;
    margin-bottom: -1px;
    padding: 0;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--tb-ink-muted) !important;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.tb-ledger-tabs .tb-tab.active {
    background: none;
    border-bottom-color: var(--tb-teal-ui);
    color: var(--tb-ink) !important;
    font-weight: 600;
}

.tb-ledger-tools {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: 0;
}

/* The page's main action: the teal button, or an outlined grey one beside it. */
.tb-ledger-button {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 24px;
    background: var(--tb-teal-fill);
    border: 0;
    border-radius: 8px;
    color: var(--tb-teal-fill-text) !important;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.tb-ledger-button:hover {
    transform: var(--tb-lift);
}

.tb-ledger-button.outline {
    padding: 0 20px;
    background: #fff;
    border: 1px solid var(--tb-line);
    color: var(--tb-ink-soft) !important;
    font-weight: 600;
}

.tb-ledger-button.outline:hover {
    border-color: var(--slate-400);
}

.tb-ledger-button.danger {
    background: var(--tb-danger-fill);
    color: #fff !important;
}

.tb-ledger-button.danger:hover {
    background: var(--tb-danger-fill-hover);
}

/* A status: tinted when done, amber while waiting, grey when stopped, outlined otherwise. */
.tb-status {
    display: inline-block;
    padding: 4px 10px;
    background: #fff;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px var(--tb-line);
    color: var(--tb-ink-soft);
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}

.tb-status:empty {
    display: none;
}

.tb-status.done {
    background: var(--tb-teal-tint);
    box-shadow: none;
    color: var(--tb-teal-ink);
}

.tb-status.waiting {
    background: var(--tb-warning-bg);
    box-shadow: none;
    color: var(--tb-warning-text);
}

.tb-status.stopped {
    background: var(--tb-page);
    box-shadow: none;
    color: var(--tb-ink-muted);
}

.tb-ledger-link {
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.tb-ledger-link:hover {
    color: var(--tb-teal-ink);
    text-decoration: underline;
}

.tb-ledger-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1100;
    width: min(420px, calc(100vw - 32px));
    padding: 24px;
    background: #fff;
    border-radius: 12px;
    transform: translate(-50%, -50%);
}

.tb-dialog-title {
    margin: 0 0 14px;
    color: var(--tb-ink);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
}

.tb-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

.tb-dialog-actions .tb-ledger-button {
    height: 44px;
}

.tb-ledger-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.tb-ledger-dialog-head h2 {
    margin: 0;
    font-size: 20px;
}

.tb-ledger-dialog-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 16px;
    margin: 0;
    font-size: 14px;
}

.tb-ledger-dialog-facts dt {
    color: var(--tb-ink-faint);
    font-weight: 500;
}

.tb-ledger-dialog-facts dd {
    margin: 0;
    word-break: break-all;
}

/* My Clients: the key under Sent Blends, saying what each status means; closed until asked for. */
.tb-status-panel {
    background: var(--slate-50);
    border: 1px solid var(--tb-line-soft);
    border-radius: 8px;
}

.tb-status-toggle {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 20px;
    background: none;
    border: 0;
    color: var(--tb-ink-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.tb-status-key {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: center;
    gap: 10px 16px;
    margin: 0;
    padding: 16px 20px 20px;
    border-top: 1px solid var(--tb-line-soft);
    color: var(--tb-ink-muted);
    font-size: 12px;
}

.tb-status-key[hidden] {
    display: none;
}

.tb-status-key dt {
    font-weight: 500;
}

.tb-status-key dd {
    margin: 0;
}

/* Phones: My Clients' rows in the My Blends phone layout (blend name and price on top; who, then the date beneath;
   then the actions). The My Blends rules above number their cells for its own columns, so each table re-places its own.
   Inbox cells: 1 from, 2 name, 3 formulated for, 4 date, 5 total, 6 actions.
   Sent cells: 1 date, 2 client, 3 name, 4 price, 5 status, 6 actions. Clients cells are listed with their rules. */
@media (max-width: 600px) {
    .tb-myblends .mud-xs-table .tb-ledger-link {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: top;
    }

    .tb-myblends .tb-inbox-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(1) { grid-area: 2 / 1; font-size: 11.5px; }
    .tb-myblends .tb-inbox-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(2) { grid-area: 1 / 1 / 2 / 3; padding-left: 0; font-size: 13px; }
    .tb-myblends .tb-inbox-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(2)::before { content: none; }
    .tb-myblends .tb-inbox-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(3) { grid-area: 2 / 2; padding-left: 4px; }
    .tb-myblends .tb-inbox-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(3)::before { content: "· "; padding: 0; }
    .tb-myblends .tb-inbox-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(4) { display: block; grid-area: 2 / 3; padding-left: 10px; text-align: right !important; }
    .tb-myblends .tb-inbox-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(5) { grid-area: 1 / 3; color: var(--tb-ink); font-size: 12.5px; font-weight: 500; }
    .tb-myblends .tb-inbox-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(6) { grid-area: 3 / 1 / 4 / 4; padding: 8px 0 0; overflow: visible; text-align: left !important; }

    .tb-myblends .tb-sent-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(1) { grid-area: 2 / 3; padding-left: 10px; font-size: 11.5px; text-align: right !important; }
    .tb-myblends .tb-sent-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(2) { grid-area: 2 / 1; padding-left: 0; }
    .tb-myblends .tb-sent-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(2)::before { content: none; }
    .tb-myblends .tb-sent-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(3) { grid-area: 1 / 1 / 2 / 3; font-size: 13px; }
    .tb-myblends .tb-sent-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(4) { display: block; grid-area: 1 / 3; padding-left: 10px; color: var(--tb-ink); font-size: 12.5px; font-weight: 500; }
    .tb-myblends .tb-sent-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(5) { grid-area: 2 / 2; padding-left: 8px; text-align: left !important; }
    .tb-myblends .tb-sent-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(5)::before { content: none; }
    .tb-myblends .tb-sent-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(6) { grid-area: 3 / 1 / 4 / 4; padding: 8px 0 0; overflow: visible; color: inherit; font-size: 11.5px; font-weight: 400; text-align: left !important; }

    /* Clients cells: 1 name, 2 email, 3 mobile, 4 actions. My Blends hides its 4th cell, which here holds Edit email and
       Remove, so a phone could not change a client (check 25). Name on top, email and mobile beneath, then the actions. */
    .tb-myblends .tb-clients-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(1) { grid-area: 1 / 1 / 2 / 4; font-size: 13px; }
    .tb-myblends .tb-clients-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(2) { grid-area: 2 / 1 / 3 / 3; padding-left: 0; }
    .tb-myblends .tb-clients-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(2)::before { content: none; }
    .tb-myblends .tb-clients-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(3) { grid-area: 2 / 3; padding-left: 10px; text-align: right !important; }
    .tb-myblends .tb-clients-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(4) { display: block; grid-area: 3 / 1 / 4 / 4; padding: 8px 0 0; overflow: visible; text-align: left !important; }
}

/* Forms on these pages, as the My Account design: small labels above 44px boxes with a teal focus ring. */
.tb-myblends .tb-contact-field,
.tb-ledger-dialog .tb-contact-field {
    gap: 6px;
    margin-bottom: 0;
    color: var(--tb-ink-muted);
    font-size: 11.5px;
    font-weight: 600;
}

.tb-myblends .form-control,
.tb-myblends .form-select,
.tb-ledger-dialog .form-control {
    min-height: 44px;
    border: 1px solid var(--tb-line);
    border-radius: 8px;
    color: var(--tb-ink);
    font-size: 13px;
    font-weight: 400;
}

.tb-myblends .form-control:focus,
.tb-myblends .form-select:focus,
.tb-ledger-dialog .form-control:focus {
    border-color: var(--tb-teal-ui);
    box-shadow: var(--tb-shadow-focus);
}

.tb-myblends .form-control[readonly]:not([data-held]) {
    background: var(--slate-50);
    color: var(--tb-ink-muted);
}

.tb-ledger-button:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Add Client and Update Directory: the registration card, on the left under the heading. */
.tb-myblends .tb-register .tb-content-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 760px;
    margin: 0;
    padding: 24px;
    border-radius: 8px;
}

/* Update Directory: the card uses the page's full width, as My Account and My Clients do (QA, 12 November 2026). */
.tb-myblends .tb-directory-edit .tb-content-card {
    max-width: none;
}

.tb-myblends .tb-register .tb-content-card h2 {
    margin: 8px 0 0;
    color: var(--tb-ink-faint);
    font-size: var(--tb-eyebrow-size);
    font-weight: 700;
    letter-spacing: var(--tb-eyebrow-tracking);
    text-transform: uppercase;
}

.tb-myblends .tb-register .tb-ledger-tools {
    justify-content: flex-start;
}

/* The Add client form, on its page and in My Clients' pop-up: the compulsory-fields note sits on the left in the
   heading's small grey (Kirsten, 10 November 2026). */
.tb-add-client-note {
    text-align: left;
}

.tb-add-client-dialog {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}

.tb-add-client-dialog .tb-ledger-dialog-head {
    margin-bottom: 0;
}

.tb-add-client-dialog .tb-account-pair {
    gap: 16px;
}

.tb-add-client-dialog .tb-add-client-actions {
    justify-content: flex-start;
}

/* My Account: what is behind the order history's blend panel, made inert while it is open. Its parts stay in the page's
   column, with its gaps. */
.tb-account-behind {
    display: contents;
}

/* My Account: details on the left, then password and directory on the right (one column on smaller screens). */
.tb-account {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.tb-account-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.tb-myblends .tb-account .tb-content-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    padding: 24px;
    border-radius: 8px;
    text-align: left;
}

.tb-myblends .tb-account .tb-content-card h2 {
    margin: 0;
    color: var(--tb-ink-faint);
    font-size: var(--tb-eyebrow-size);
    font-weight: 700;
    letter-spacing: var(--tb-eyebrow-tracking);
    text-transform: uppercase;
}

.tb-account .tb-contact-problem,
.tb-account .tb-contact-sent {
    margin: 0;
}

.tb-account-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
}

.tb-account-password {
    position: relative;
    display: block;
}

.tb-account-password input {
    padding-right: 44px;
}

/* Slightly smaller password dots, phones included (Kirsten and Glen, 13 November 2026), knowing an iPhone zooms the page
   in when a box under 16px is tapped. */
.tb-account-password input[type="password"] {
    font-size: 12px;
    letter-spacing: 0.08em;
}

.tb-account-password button {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: 0;
    color: var(--tb-ink-faint);
    cursor: pointer;
}

.tb-account-forward {
    margin-bottom: 0;
}

/* The dark support card, for practitioners. */
.tb-account-support {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 40px;
    padding: 24px 28px;
    background: var(--tb-gradient-dark);
    border-radius: 8px;
}

.tb-account-support > div:first-child {
    flex: 1 1 420px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.tb-account-support .tb-page-eyebrow {
    color: var(--tb-teal-ui);
}

.tb-account-support p {
    margin: 0;
    color: #fff;
    font-size: 14px;
    line-height: 1.6;
    text-wrap: pretty;
}

.tb-account-support-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tb-ledger-button.tb-account-ghost {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    color: #fff !important;
}

.tb-ledger-button.tb-account-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
}

.tb-account fieldset {
    border: 0;
    padding: 0;
}

.tb-account legend {
    margin-bottom: 8px;
    color: var(--tb-ink-muted);
    font-size: 11.5px;
    font-weight: 600;
}

.tb-account-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
}

.tb-myblends .tb-account-pair {
    gap: 16px;
}

/* Gender: one choice in a pill, the radio itself hidden but still reachable by keyboard. */
.tb-account-choices {
    display: inline-flex;
    align-self: flex-start;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    background: var(--tb-page);
    border-radius: 999px;
}

.tb-account-choices label {
    position: relative;
    margin: 0;
    padding: 8px 16px;
    border-radius: 999px;
    color: var(--tb-ink-muted);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

.tb-account-choices input {
    position: absolute;
    opacity: 0;
}

.tb-account-choices label:has(input:checked) {
    background: #fff;
    box-shadow: var(--tb-shadow-toggle);
    color: var(--tb-ink);
    font-weight: 600;
}

.tb-account-choices label:has(input:focus-visible) {
    outline: 2px solid var(--tb-teal-ink);
}

/* The day's column is wide enough for its "Day" placeholder on a phone. */
.tb-account-dob {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 8px;
    max-width: 420px;
}

.tb-account-directory {
    color: var(--tb-ink-muted);
    font-size: 13px;
    line-height: 1.6;
}

@media (max-width: 991.98px) {
    .tb-account {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Phones: orders as My Blends' compact rows (blends and total on top; order number, status and date beneath; then the
   buttons). Cells: 1 order number, 2 blends, 3 formulated by, 4 date, 5 total, 6 status, 7 actions. */
@media (max-width: 600px) {
    .tb-account-pair {
        grid-template-columns: minmax(0, 1fr);
    }

    .tb-myblends .tb-orders-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(1) { grid-area: 2 / 1; font-size: 11.5px; }
    .tb-myblends .tb-orders-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(1)::before { content: "#"; padding: 0; }
    .tb-myblends .tb-orders-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(2) { grid-area: 1 / 1 / 2 / 3; padding-left: 0; font-size: 13px; }
    .tb-myblends .tb-orders-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(2)::before { content: none; }
    .tb-myblends .tb-orders-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(3) { display: none; }
    .tb-myblends .tb-orders-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(4) { display: block; grid-area: 2 / 3; padding-left: 10px; text-align: right !important; }
    .tb-myblends .tb-orders-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(5) { grid-area: 1 / 3; color: var(--tb-ink); font-size: 12.5px; font-weight: 500; }
    .tb-myblends .tb-orders-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(6) { grid-area: 2 / 2; padding-left: 8px; text-align: left !important; }
    .tb-myblends .tb-orders-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(6)::before { content: none; }

    /* Small enough to sit on the line beside the order number or client. */
    .tb-myblends .mud-xs-table .tb-status {
        padding: 1px 8px;
        font-size: 10px;
    }
}

/* A past order: delivery and payment cards, then the blends and legacy's totals in one ledger card. */
.tb-order-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.tb-order .tb-content-card {
    padding: 22px 24px;
    border-radius: 8px;
    box-shadow: none;
    text-align: left;
}

.tb-order .tb-content-card h2 {
    margin-bottom: 10px;
    font-size: 15px;
}

.tb-order address {
    margin: 0;
    color: var(--tb-ink-soft);
    font-size: 13px;
    font-style: normal;
    line-height: 1.6;
}

.tb-order-items {
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: 8px;
}

.tb-order-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px 130px;
    gap: 12px;
    align-items: center;
    padding: 12px 20px;
    border-top: 1px solid var(--tb-line-soft);
    font-size: 13px;
}

.tb-order-head {
    border-top: 0;
    color: var(--tb-ink-faint);
    font-size: var(--tb-eyebrow-size);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.tb-order-meta {
    display: block;
    margin-top: 2px;
    color: var(--tb-ink-faint);
    font-size: 12px;
}

.tb-order-totals {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 130px;
    gap: 6px 12px;
    margin: 0;
    padding: 16px 20px 20px;
    border-top: 1px solid var(--tb-line);
    font-size: 13px;
}

.tb-order-totals dt {
    color: var(--tb-ink-soft);
    font-weight: 400;
    text-align: right;
}

.tb-order-totals dd {
    margin: 0;
    text-align: right;
}

.tb-order-totals .tb-order-total {
    color: var(--tb-ink);
    font-size: 15px;
    font-weight: 600;
}

.tb-order-missing {
    max-width: 520px;
    text-align: center;
}

/* Plain words here; the client dialog breaks anywhere only so long email addresses fit. */
.tb-order .tb-ledger-dialog-facts dd {
    word-break: normal;
    overflow-wrap: break-word;
}

@media (max-width: 600px) {
    .tb-order-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .tb-order .tb-ledger-dialog-facts {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .tb-order .tb-ledger-dialog-facts dd {
        margin-bottom: 8px;
    }

    .tb-order-row {
        grid-template-columns: minmax(0, 1fr) 36px 96px;
        padding: 12px 14px;
    }

    .tb-order-totals {
        grid-template-columns: minmax(0, 1fr) 96px;
        padding: 14px;
    }
}

/* Registration: one card, the form in sections; the success page reuses it. Headings outrank content.css's card headings. */
.tb-register .tb-content-card {
    max-width: 760px;
    margin: 0 auto;
    text-align: left;
}

.tb-register .tb-content-card h1 {
    font-size: 24px;
}

.tb-register .tb-content-card h2 {
    margin: 22px 0 10px;
    font-size: 16px;
    text-transform: uppercase;
}

.tb-register fieldset {
    border: 0;
    padding: 0;
}

.tb-register legend {
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 600;
}

.tb-register-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 10px 0;
    font-size: 13px;
}

.tb-register-check input {
    margin-top: 3px;
    accent-color: var(--tb-teal-ui);
}

/* Each missing or wrong field's message, in red directly below the field (Kirsten, checks 9 and 10). The darker red keeps
   12px text readable (6:1), where the design's --tb-danger is 4:1. */
.tb-register .validation-message {
    margin-top: 4px;
    color: var(--tb-danger-fill-hover);
    font-size: 12px;
}

.tb-register .form-control.invalid,
.tb-register .form-select.invalid {
    border-color: var(--tb-danger);
}

/* The live password check under the two password boxes; empty until Confirm password has text. */
.tb-password-match {
    margin: -4px 0 12px;
    font-size: 12px;
}

.tb-password-match:empty {
    display: none;
}

.tb-password-match[data-state="match"] {
    color: var(--tb-teal-ink);
}

.tb-password-match[data-state="mismatch"] {
    color: var(--tb-danger-fill-hover);
}

.tb-register .g-recaptcha {
    margin: 16px 0;
}

.tb-register .tb-content-button:disabled {
    opacity: 0.5;
}

.tb-registered {
    text-align: center !important;
}

/* The directory note sits in the section the directory box reveals. Its CMS text comes in a <p>, so the rule names the
   <p> too: content.css's card paragraph size (15px) would otherwise make it bigger than the box's 13px label. */
.tb-register-note,
.tb-register .tb-register-note p {
    font-size: 12px;
}

.tb-register-note {
    margin: -4px 0 12px 26px;
}

/* The practice details are only needed for the directory, so they show only while the directory box is ticked. */
.tb-register-listing {
    display: none;
}

.tb-register-check:has(input:checked) ~ .tb-register-listing {
    display: block;
}

/* Login: legacy's two cards side by side (log in; register), stacked on a phone. It reuses the registration card
   styles (.tb-register); the title sits above both cards, with the cards' teal accent. The registration pages,
   Practitioner Directory and a practitioner's profile use the same title above their cards. */
.tb-login-title {
    margin: 0;
    color: var(--tb-ink);
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.05;
    text-align: center;
    text-transform: uppercase;
}

/* Legacy's base styles underline a heading's span. */
.tb-login-title span {
    border-bottom: 0;
    color: var(--tb-teal-ink);
    font-weight: 300;
    text-decoration: none;
}

@media (max-width: 759px) {
    .tb-login-title {
        font-size: 24px;
    }
}

.tb-login-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.tb-login .tb-content-card {
    max-width: none;
    margin: 0;
}

.tb-login .tb-content-card h2.tb-login-second {
    margin-top: 32px;
}

.tb-login-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

@media (max-width: 760px) {
    .tb-login-cards {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Practitioner qualifications: institution, qualification and year on one line. */
.tb-register-qualification {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) 110px;
    gap: 8px;
    margin-bottom: 8px;
}

@media (max-width: 600px) {
    .tb-register .tb-account-pair {
        grid-template-columns: minmax(0, 1fr);
    }

    .tb-register-qualification {
        grid-template-columns: minmax(0, 1fr);
        padding-bottom: 8px;
        border-bottom: 1px solid var(--tb-line-soft);
    }
}

/* Practitioner Directory: Login's title and the introduction centred; beneath them Pre-designed Blends' category
   filter (.tb-category) with the search beside it, above the table. */
.tb-directory-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.tb-directory-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
}

/* The filters carry the View button's teal border (.tb-pill-primary); a chosen speciality is filled teal. Reset filter is
   dimmed until a speciality is chosen. */
.tb-directory-filter .tb-category {
    padding: 0 14px 0 10px;
    border-color: var(--tb-teal-ui);
    color: var(--tb-teal-ink);
}

.tb-directory-filter .tb-category svg {
    flex: none;
    color: var(--tb-teal-ui);
}

.tb-directory-filter .tb-category:hover {
    background: var(--tb-teal-tint);
    border-color: var(--tb-teal-ui);
    color: var(--tb-teal-ink);
}

.tb-directory-filter .tb-category.active {
    background: var(--tb-teal-fill);
    border-color: var(--tb-teal-fill);
    color: var(--tb-teal-fill-text);
}

.tb-directory-filter .tb-category.active svg {
    color: currentColor;
}

.tb-directory-filter .tb-category:disabled {
    opacity: 0.5;
    cursor: default;
}

/* The speciality under the name, on one line as legacy's table. */
.tb-directory-speciality {
    max-width: 420px;
    overflow: hidden;
    color: var(--tb-ink-muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tb-myblends .tb-directory-card .mud-table-body .mud-table-cell {
    height: 58px;
}

/* Update Directory: each qualification row has its own Remove. */
.tb-directory-qualification {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) 110px auto;
    align-items: center;
}

.tb-directory-submit {
    margin-top: 20px;
}

/* Phones: name and speciality on top, location and contact beneath, then View. Cells: 1 name, 2 location, 3 contact,
   4 actions. */
@media (max-width: 600px) {
    .tb-myblends .tb-directory-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(1) { grid-area: 1 / 1 / 2 / 4; white-space: normal; }
    .tb-myblends .tb-directory-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(2) { grid-area: 2 / 1; padding-left: 0; }
    .tb-myblends .tb-directory-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(2)::before { content: none; }
    .tb-myblends .tb-directory-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(3) { display: block; grid-area: 2 / 2 / 3 / 4; padding-left: 8px; }
    .tb-myblends .tb-directory-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(4) { display: block; grid-area: 3 / 1 / 4 / 4; padding-top: 8px; overflow: visible; }

    .tb-directory-speciality {
        max-width: none;
    }

    .tb-directory-tools > .tb-search {
        flex: 1 1 100%;
    }

    .tb-directory-qualification {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Pre-designed Blends: My Blends' ledger with legacy's category filter ---------- */

.tb-category-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tb-category {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px 0 8px;
    background: #fff;
    border: 1px solid var(--tb-line-strong);
    border-radius: 8px;
    color: var(--tb-ink-muted);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
}

.tb-category:hover {
    border-color: var(--slate-400);
    color: var(--tb-ink);
}

.tb-category.active {
    background: var(--tb-teal-tint);
    border-color: var(--tb-teal-ui);
    color: var(--tb-teal-ink);
    font-weight: 600;
}

.tb-category:focus-visible {
    outline: 2px solid var(--tb-teal-ink);
    outline-offset: 2px;
}

.tb-category img {
    width: 22px;
    height: 22px;
}

.tb-category-icons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    vertical-align: middle;
}

/* Phones: name and price on top; product type and category icons beneath; then the actions.
   Cells: 1 name, 2 product type, 3 categories, 4 price, 5 actions. */
@media (max-width: 600px) {
    .tb-category {
        min-height: 44px;
    }

    .tb-myblends .tb-predesigned-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(1) { grid-area: 1 / 1 / 2 / 3; font-size: 13px; }
    .tb-myblends .tb-predesigned-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(2) { grid-area: 2 / 1; padding-left: 0; }
    .tb-myblends .tb-predesigned-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(2)::before { content: none; }
    .tb-myblends .tb-predesigned-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(3) { grid-area: 2 / 2 / 3 / 4; padding-left: 8px; }
    .tb-myblends .tb-predesigned-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(4) { display: block; grid-area: 1 / 3; padding-left: 10px; color: var(--tb-ink); font-size: 12.5px; font-weight: 500; text-align: right !important; }
    .tb-myblends .tb-predesigned-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(5) { grid-area: 3 / 1 / 4 / 4; padding: 8px 0 0; overflow: visible; text-align: left !important; }
}

/* A live page before it is live (js/before-live.js): a pressed button says it is connecting, at the width it already has,
   and one note explains why nothing else responds yet. The page itself keeps its normal look. */
button[data-connecting],
button[data-busy] {
    cursor: progress;
    -webkit-text-fill-color: transparent;
}

button[data-connecting] > *,
button[data-busy] > * {
    visibility: hidden;
}

button[data-connecting]::after,
button[data-busy]::after {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* The empty alternative keeps the word out of the button's name: the note says it to a screen reader, once. */
    content: attr(data-connecting);
    content: attr(data-connecting) / "";
    white-space: nowrap;
    -webkit-text-fill-color: currentColor;
}

/* A live button at work (design system: "Loading: preserve width and show a labelled progress indicator"). The same label over
   the button's own text as above, with a pulse as the indicator, which stops after three beats like the shimmer. Not dimmed,
   as a disabled button would be: this is the one thing on the page the customer needs to read. And aria-disabled, not
   disabled, which would throw away the focus of someone on a keyboard: the page's own check ignores a second press. The page
   keeps a status for screen readers, as with the shimmer. */
button[data-busy] {
    position: relative;
}

button[data-busy]::after {
    content: attr(data-busy);
    content: attr(data-busy) / "";
    animation: tb-busy-pulse calc(var(--dur-slower) * 2.5) ease-in-out 3;
}

/* Shallower than the shimmer's pulse, as this word has to stay readable all the way through. */
@keyframes tb-busy-pulse {
    50% {
        opacity: 0.7;
    }
}

@media (prefers-reduced-motion: reduce) {
    button[data-busy]::after {
        animation: none;
    }
}

.tb-connecting-note {
    position: fixed;
    z-index: 1500;
    top: 4.75rem;
    left: 50%;
    width: max-content;
    max-width: calc(100vw - 2.5rem);
    padding: 0.625rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    box-shadow: var(--tb-shadow-menu);
    color: var(--fg2);
    font-size: var(--type-body-xs);
    pointer-events: none;
    transform: translateX(-50%);
}

.tb-connecting-note:empty {
    display: none;
}

.tb-connecting-note a {
    display: inline-block;
    margin: -0.75rem 0;
    padding: 0.75rem 0.25rem;
    color: inherit;
    font-weight: 600;
    pointer-events: auto;
    text-decoration: underline;
}

/* The link in a live page's reload warning, the one thing left to use on the page. */
.tb-page-reload-link {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.tb-connecting-note a:focus-visible,
.tb-page-reload-link:focus-visible {
    outline: 2px solid var(--tb-teal-ink);
    outline-offset: 2px;
    box-shadow: var(--tb-shadow-focus);
}

/* A link that is loading a whole new page (js/page-change.js). The link looks pressed at once. The bar is held back for the
   first 300 ms, like the shimmer, so a quick page change shows none, and then eases most of the way across and waits there: it
   stops short of the end because nothing here knows how long the rest will take. It sits over the page's top edge and only
   its opacity and transform change, so nothing on the page moves. */
a[data-page-pending] {
    cursor: progress;
    opacity: 0.7;
    transition: opacity var(--dur-fast) ease-out;
}

body[data-page-changing]::before {
    position: fixed;
    z-index: 1500;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--tb-teal-accessible);
    content: "";
    pointer-events: none;
    transform-origin: left;
    animation:
        tb-page-bar-appear var(--dur-fast) ease-out var(--dur-base) backwards,
        tb-page-bar-grow calc(var(--dur-slower) * 10) var(--ease-out) var(--dur-base) both;
}

@keyframes tb-page-bar-appear {
    from {
        opacity: 0;
    }
}

@keyframes tb-page-bar-grow {
    from {
        transform: scaleX(0.08);
    }

    to {
        transform: scaleX(0.9);
    }
}

/* Reduced motion: the same wait, then a still bar right across. */
@media (prefers-reduced-motion: reduce) {
    a[data-page-pending] {
        transition: none;
    }

    body[data-page-changing]::before {
        animation: tb-page-bar-appear 1ms linear var(--dur-base) backwards;
    }
}


/* An icon drawn inline (Icon.razor), sized by the text around it. */
.tb-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    overflow: visible;
    vertical-align: -0.125em;
    fill: currentColor;
}

.tb-icon--arrow-right,
.tb-icon--trash-can,
.tb-icon--instagram,
.tb-icon--whatsapp {
    width: 0.875em;
}

.tb-icon--facebook-f {
    width: 0.625em;
}

/* The keyboard outline. MudBlazor's reset removes the browser's own, so this outranks it; the white ring keeps it visible on
   dark sections. Never on the page's main region, which only takes focus from the skip link. The checkout has its own. */
:root body :where(a, button, [tabindex]:not([tabindex="-1"])):not(.tb-checkout *):focus-visible {
    outline: 2px solid var(--tb-teal-accessible);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff;
}

#main-content:focus {
    outline: none;
}

.tb-skip-link:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 3000;
    padding: 8px 16px;
    border-radius: 8px;
    background: #fff;
    color: var(--tb-ink);
}