/*
    Storefront chrome — topbar, header, mega-menu and footer.

    Lifted verbatim out of the inline <style> block in StoreLayout.razor so that both the public
    storefront and the B2B portal can share one copy. Two layouts each carrying their own inline
    copy would drift apart within weeks.

    Consumed by StoreChrome.razor. Registered in index.html.
*/

.store-topbar {
    background: #C8102E;
    color: white;
    text-align: center;
    padding: 6px 16px;
    font-size: 0.8rem;
    font-style: italic;
    font-weight: 600;
}

/* z-index must stay BELOW MudBlazor's popover layer. Popovers render at
   (--mud-zindex-popover + 1) = 1201 with the default theme, from a provider div at the end of
   <body> — so a sticky header above that paints over every dropdown anchored inside it, including
   the account menu in the B2B chrome. This was 1300 (dialog level) and did exactly that.
   1100 is MudBlazor's own appbar level: above page content, below popovers and dialogs. */
.store-header {
    background: #14264E;
    color: white;
    position: sticky;
    top: 0;
    z-index: 1100;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.store-header-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 24px;
}

.store-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    text-decoration: none;
}

.store-logo-title {
    color: white;
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.1;
}

.store-logo-subtitle {
    color: #E8DFDF;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    font-weight: 600;
    text-transform: uppercase;
}

.store-nav {
    display: flex;
    gap: 4px;
    /* Was flex:1, which handed all the header's free space to the nav and pinned the search field
       at its 220px minimum. The actions block takes that space now instead. */
    flex: 0 1 auto;
}

.store-nav-link {
    color: rgba(255,255,255,0.92) !important;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

    .store-nav-link:hover {
        background: rgba(255,255,255,0.12);
    }

.store-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    /* Grows so the search field can take the header's free space; the nav no longer absorbs it. */
    flex: 1 1 auto;
    justify-content: flex-end;
}

/* Anchors the suggestion panel and owns the width the field fills. */
.store-search-wrap {
    position: relative;
    flex: 1 1 420px;
    max-width: 560px;
    min-width: 200px;
}

.store-search-field {
    background: rgba(255,255,255,0.12);
    border-radius: 6px;
    padding: 0 8px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .store-search-field input {
        color: white !important;
    }

/* ---- Header search suggestions --------------------------------------------------------------
   Sits above the mega-menu overlay (1280) the same way .store-megamenu does. */
.store-suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: white;
    border-radius: 6px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.28);
    max-height: 420px;
    overflow-y: auto;
    padding: 4px 0;
    z-index: 1290;
}

.store-suggest-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .store-suggest-item:hover {
        background-color: #F2F5FA;
    }

.store-suggest-thumb {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 4px;
    background: white;
}

.store-suggest-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #EEF1F6;
    color: #8A93A5;
}

.store-suggest-text {
    min-width: 0;
}

.store-suggest-name {
    color: #14264E;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.25;
}

.store-suggest-code {
    color: #C8102E;
    font-size: 0.78rem;
    font-weight: 600;
}

.store-suggest-price {
    color: #14264E;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.store-suggest-all {
    padding: 10px 14px;
    border-top: 1px solid #E3E7EF;
    color: #C8102E;
    font-weight: 700;
    font-size: 0.85rem;
    text-align: center;
    cursor: pointer;
}

    .store-suggest-all:hover {
        background-color: #F2F5FA;
    }

.store-suggest-empty {
    padding: 18px 14px;
    text-align: center;
    color: #666;
    font-size: 0.9rem;
}

.store-megamenu {
    background: white;
    border-bottom: 3px solid #C8102E;
    box-shadow: 0 12px 24px rgba(0,0,0,0.18);
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1290;
}

.store-megamenu-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
}

.store-megamenu-col-title {
    color: #14264E;
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid #C8102E;
    padding-bottom: 6px;
    margin-bottom: 10px;
}

.store-megamenu-link {
    display: block;
    color: #333;
    padding: 4px 0;
    font-size: 0.875rem;
    cursor: pointer;
    text-decoration: none;
}

    .store-megamenu-link:hover {
        color: #C8102E;
    }

/* Top-level categories carry their icon in the menu, matching the results-page chips. */
.store-megamenu-rootlink {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #14264E;
    margin-top: 6px;
}

.store-megamenu-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex: 0 0 22px;
    color: #8A8F98;
}

.store-megamenu-sublink {
    padding-left: 14px;
    font-size: 0.82rem;
    color: #555;
}

.store-main {
    min-height: 60vh;
    background: #FFFFFF;
}

.store-footer {
    background: #14264E;
    color: rgba(255,255,255,0.85);
    margin-top: 48px;
}

.store-footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 24px 16px;
}

.store-footer-title {
    color: white;
    font-weight: 700;
    margin-bottom: 12px;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.store-footer-link {
    display: block;
    color: rgba(255,255,255,0.75) !important;
    padding: 3px 0;
    font-size: 0.85rem;
    text-decoration: none;
    cursor: pointer;
}

    .store-footer-link:hover {
        color: white !important;
    }

.store-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.15);
    margin-top: 24px;
    padding-top: 14px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.6);
}

@media (max-width: 960px) {
    .store-nav {
        display: none;
    }

    .store-search-wrap {
        flex: 1 1 auto;
        min-width: 120px;
    }
}

/* B2B badge on the logo — PDF p12, "Logo similar pero no igual". */
.store-b2b-badge {
    background: #C8102E;
    color: white;
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: 8px;
    align-self: center;
    line-height: 1;
}

/* Account menu in the B2B header. */
.store-account-btn {
    color: white !important;
    text-transform: none !important;
    font-weight: 600;
}

.store-account-menu {
    min-width: 240px;
    padding: 6px 0;
}

.store-account-name {
    font-weight: 700;
    color: #14264E;
    padding: 6px 16px 2px;
}

.store-account-email {
    font-size: 0.78rem;
    color: #777;
    padding: 0 16px 8px;
    word-break: break-all;
}

/* Group heading inside the staff account menu. The staff menu carries every destination the
   drawer used to hold, so it needs the drawer's grouping to stay scannable. */
.store-account-group {
    font-size: 0.68rem;
    font-weight: 700;
    color: #8A93A6;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 8px 16px 2px;
}

/* ---------------------------------------------------------------------------
   Shared section rows: the navy ribbon headings and the category/brand tile
   grids under them. Moved out of StoreHome.razor's inline <style> so the B2B
   home can render the same rows (see docs/b2b-portal-parity-plan.md, B2).
   Used by ShopByCategoryRow and ShopByBrandRow, and by StoreHome's remaining
   sections, which still carry these class names.
   --------------------------------------------------------------------------- */
.sh-section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px 24px 0;
}

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

.sh-section-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #14264E;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

    .sh-section-title span {
        font-weight: 400;
        color: #5B6472;
    }

.sh-ribbon {
    background: #14264E;
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 8px 22px;
    clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
    font-size: 0.95rem;
}

    .sh-ribbon span { font-weight: 400; }

/* Ribbon headings carry the mockup's slanted stripe motif on their inward-facing
   side — stripes to the left of a right-aligned chip, to the right of a left-aligned one. */
.sh-ribbon-wrap {
    display: flex;
    align-items: stretch;
}

.sh-stripes {
    width: 96px;
    background: repeating-linear-gradient(115deg, #14264E 0 9px, transparent 9px 21px);
}

.sh-viewall {
    color: #C8102E !important;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.sh-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
}

/* Product rows run wider than the tile rows — the mockup shows four cards across,
   while category/brand/truck tiles stay dense. */
.sh-row-products {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

@media (max-width: 700px) {
    .sh-row-products {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    .sh-stripes {
        display: none;
    }
}

.sh-cat-tile {
    text-align: center;
    cursor: pointer;
    padding: 14px 8px;
    border-radius: 10px;
    transition: background .2s ease;
}

    .sh-cat-tile:hover { background: #F0F3F9; }

    .sh-cat-tile img {
        height: 72px;
        object-fit: contain;
    }

.sh-cat-name {
    color: #14264E;
    font-weight: 600;
    font-size: 0.82rem;
    margin-top: 8px;
}

.sh-brand-tile {
    border: 1px solid #E4E7EE;
    border-radius: 8px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    cursor: pointer;
    color: #14264E;
    font-weight: 700;
    font-size: 0.9rem;
    text-align: center;
    padding: 4px 10px;
    transition: box-shadow .2s ease;
}

    .sh-brand-tile:hover { box-shadow: 0 6px 16px rgba(20,38,78,0.12); }

    .sh-brand-tile img {
        max-height: 46px;
        max-width: 88%;
        object-fit: contain;
    }

/* ---------------------------------------------------------------------------
   Document pages (PDF p13): My Orders, Invoices, Credit Memos, Payments and
   the account statement. Chrome only - the "MY ___" heading, the navy table
   header bar and the filter row's Generate button. Column sets and behaviour
   are untouched. See docs/b2b-portal-parity-plan.md, package B2.
   --------------------------------------------------------------------------- */

.doc-head {
    margin-bottom: 18px;
}

.doc-title {
    font-size: 1.6rem;
    font-weight: 400;
    color: #5B6472;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0;
    line-height: 1.2;
}

    /* p13 sets the possessive in heavy navy and lets the noun fall back. */
    .doc-title span {
        font-weight: 800;
        color: #14264E;
    }

.doc-subtitle {
    color: #5B6472;
    font-size: 0.85rem;
    margin-top: 4px;
}

/* MudTable renders its own header background, so these need to win on specificity
   rather than order - store.css is a plain global sheet, not a scoped one. */
.doc-table .mud-table-head th {
    background: #14264E !important;
    color: #FFFFFF !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    border-right: 1px solid rgba(255,255,255,0.15);
}

    .doc-table .mud-table-head th:last-child {
        border-right: none;
    }

    /* Sort labels and their arrows are buttons inside the cell, and inherit the
       old dark-on-light colours unless told otherwise. */
    .doc-table .mud-table-head th .mud-table-sort-label,
    .doc-table .mud-table-head th .mud-button-root,
    .doc-table .mud-table-head th .mud-icon-root {
        color: #FFFFFF !important;
    }

.doc-filters {
    background: #F5F7FA;
    border: 1px solid #E4E7EE;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

/* p13's filter action: a navy filled button, no icon. Stated explicitly rather than through
   Color.Primary so it matches the ribbon navy used everywhere else on these pages. */
.doc-generate {
    background-color: #14264E !important;
    color: #FFFFFF !important;
}

    .doc-generate:hover {
        background-color: #1E3A6E !important;
    }

/* Group row on the line-level My Orders table (p13 draws one row per line, so the
   document context has to live somewhere). Tinted rather than navy: it is a divider
   inside the table, not a second header competing with the real one above it. */
.doc-table .doc-group-row {
    background: #EEF1F7 !important;
    color: #14264E !important;
    border-top: 1px solid #C3CCDD !important;
    border-bottom: 1px solid #C3CCDD !important;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.8rem;
    padding: 6px 12px;
}

.doc-group-num {
    font-weight: 800;
    font-size: 0.85rem;
}

.doc-group-sep {
    color: #9AA5B8;
}

/* The address is the first thing worth dropping when the row runs out of room. */
.doc-group-addr {
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-group-total {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* An outstanding quantity is the one number on this table a customer is hunting for. */
.doc-backorder {
    color: #C8102E;
    font-weight: 700;
}

.doc-empty {
    text-align: center;
    padding: 32px 16px;
    color: #5B6472;
}

/* ---------------------------------------------------------------------------
   Chat. The layout was already right for a conversation — a docked contact list
   beside the thread — so only the palette changed: both sides used to be the
   same grey bubble, leaving the name above it to carry who said what.
   --------------------------------------------------------------------------- */
.chat-bubble {
    padding: 10px;
    background-color: var(--mud-palette-background-grey);
    border-radius: 0 15px 15px 15px;
    margin-top: 5px;
}

.chat-bubble-mine {
    background-color: #14264E;
    color: #FFFFFF;
    border-radius: 15px 0 15px 15px;
}

/* Your own messages run the other way, avatar on the right. */
.chat-row-mine {
    flex-direction: row-reverse;
    text-align: right;
}

.chat-context {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #EEF1F7;
    border: 1px solid #C3CCDD;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.8rem;
    color: #14264E;
}

.chat-context-link {
    color: #C8102E !important;
    font-weight: 700;
    font-size: 0.78rem;
}

/* Section rail on /account. Navy fill marks the live section, matching the table headers rather
   than introducing a third selected-state treatment. */
.doc-rail {
    display: grid;
    gap: 1px;
    background: #E4E7EE;
    border: 1px solid #E4E7EE;
    border-radius: 8px;
    overflow: hidden;
}

.doc-rail-item {
    display: flex;
    align-items: center;
    background: #FFFFFF;
    padding: 10px 12px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #5B6472;
    cursor: pointer;
}

    .doc-rail-item:hover {
        background: #F0F3F9;
    }

    .doc-rail-item.is-active {
        background: #14264E;
        color: #FFFFFF;
    }

    /* These are divs carrying a click handler, so the focus ring has to be asked for. */
    .doc-rail-item:focus-visible {
        outline: 2px solid #C8102E;
        outline-offset: -2px;
    }

/* Summary tiles, borrowed from p12's Account Summary: the figure you came for sits above the
   detail, in a bordered tile, with the semantic colour on the value rather than the label. */
.doc-tile {
    border: 1px solid #E4E7EE;
    border-radius: 8px;
    background: #FFFFFF;
    padding: 10px 14px;
    height: 100%;
}

.doc-tile-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: #5B6472;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.doc-tile-value {
    font-size: 1.35rem;
    font-weight: 800;
    color: #14264E;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

    /* Only turns red when the count is actually non-zero — a red 0 trains people to ignore it. */
    .doc-tile-value.is-alert {
        color: #C8102E;
    }

.doc-overdue {
    color: #C8102E;
    font-weight: 700;
    white-space: nowrap;
    margin-left: 4px;
}

/* A settled balance is still printed rather than blanked — an empty money cell reads as
   missing data — but it recedes so the rows that owe something carry the eye. */
.doc-settled {
    color: #9AA5B8;
}

/* Money in the customer's favour — a payment, a credit memo, an unapplied balance. Green
   rather than a minus sign alone, which is easy to miss in a column of figures. */
.is-credit {
    color: #0F6B42;
}

/* The account total, set beside the statement heading rather than in the tile row: it is the
   answer to the page, and the buckets below it are the breakdown. */
.doc-total {
    text-align: right;
    line-height: 1.15;
    margin-right: 12px;
}

.doc-total-label {
    display: block;
    font-size: 0.66rem;
    font-weight: 600;
    color: #5B6472;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.doc-total-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #14264E;
    font-variant-numeric: tabular-nums;
}

    .doc-total-value.is-alert {
        color: #C8102E;
    }

/* Money and quantity columns only line up if the digits are the same width. */
.doc-table td {
    font-variant-numeric: tabular-nums;
}

/* These tables are wide, and p13 makes them wider. Scroll the table, never the page.
   Was an unscoped `.mud-table-container { overflow: auto }` block copy-pasted into the
   <style> of several document pages, which applied to every MudTable in the app. */
.doc-table .mud-table-container {
    overflow: auto;
}

/* ---------------------------------------------------------------------------
   Document cards — the customer view of /document-store ("PDF Catalogs").

   ⚠ StoreResources carries the same treatment as `.sr-doc-*`, inline in its own
   <style> block. These are deliberately a separate family rather than a shared
   one: merging them means lifting live storefront CSS into this sheet, which
   changes cascade order on a page that works today, and nothing on this branch
   has been opened in a browser yet. Merge the two once someone has, exactly the
   way package B0 lifted the chrome.
   --------------------------------------------------------------------------- */
.dc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 8px;
}

.dc-card {
    border: 1px solid #E4E7EE;
    border-radius: 12px;
    background: #FFFFFF;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s ease, transform .2s ease;
}

    .dc-card:hover {
        box-shadow: 0 8px 22px rgba(20,38,78,0.14);
        transform: translateY(-3px);
    }

.dc-cover {
    height: 170px;
    background: linear-gradient(160deg, #EDF1F7 0%, #DCE3ED 100%);
    border-bottom: 1px solid #F0F2F5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .dc-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Stand-in for a document with no cover on file: a drawn sheet, which reads as
   "a document" where a broken image reads as a fault. */
.dc-sheet {
    width: 62px;
    height: 82px;
    background: #FFFFFF;
    border: 1px solid #C9D2E0;
    border-radius: 2px;
    box-shadow: 2px 3px 0 rgba(20,38,78,0.10);
    padding: 8px 7px;
    display: grid;
    gap: 4px;
    align-content: start;
}

    .dc-sheet i {
        display: block;
        height: 2px;
        background: #D3DBE7;
        border-radius: 1px;
    }

        .dc-sheet i.hd {
            height: 8px;
            background: #14264E;
        }

        .dc-sheet i.sh {
            width: 60%;
        }

.dc-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.dc-title {
    font-weight: 700;
    color: #14264E;
    font-size: 0.92rem;
    line-height: 1.3;
}

/* Descriptions are free text and run to any length; two lines keeps the cards
   on a grid row the same height. */
.dc-desc {
    font-size: 0.8rem;
    color: #5B6472;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dc-meta {
    font-size: 0.72rem;
    color: #8A93A3;
}

/* Pushed to the bottom so every button in a row lines up regardless of how much
   description sits above it. */
.dc-btn {
    margin-top: auto;
    width: 100%;
}

/* ---------------------------------------------------------------------------
   B2B catalog (/catalogmp). The storefront's visual language applied to a card
   that is an ordering control, not a link: warehouse selector, dual bonded
   pricing, per-warehouse stock, favourite toggle, quantity stepper, Add to
   Cart. PublicItemCard cannot be reused here - different DTO, and none of
   those controls exist on it. See docs/b2b-portal-parity-plan.md, package B3.
   --------------------------------------------------------------------------- */

.cat-layout {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 20px 48px;
    max-width: 1400px;
    margin: 0 auto;
    min-height: calc(100vh - 64px);
}

.cat-rail {
    position: sticky;
    top: 16px;
    width: 250px;
    flex-shrink: 0;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

.cat-main {
    flex: 1;
    min-width: 0;
}

/* Page head, mirroring the storefront's: title and result count on the left,
   sort on the right. */
.cat-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.cat-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #14264E;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.cat-count {
    color: #5B6472;
    font-size: 0.82rem;
    margin-top: 2px;
}

.cat-rail-title {
    font-weight: 800;
    color: #14264E;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
}

/* Brand facet: checkbox on the left, the count it would return pushed to the right — the same
   shape the public storefront's rail uses, so the two read as one product. */
.cat-facet-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.cat-facet-count {
    font-size: 0.72rem;
    color: #8A93A6;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Shown only on narrow screens, where the rail collapses behind it. */
.cat-filter-toggle {
    display: none;
}

/* ---- The card ---- */

/* ---------------------------------------------------------------------------
   THE product card - one definition, every surface.

   Was five copies: PublicItemCard's own <style> block plus hand-rolled cards in
   ProductsMP, ProductosMPView, ProductsMPNew and Home, each with its own near
   identical CSS. Restyling one did nothing for the others, which is exactly how
   the storefront and the B2B catalog drifted apart visually.

   The .pic-* family is the storefront's, kept because the storefront look is the
   one we standardised on. The additions below are the B2B ordering controls, in
   the same palette: navy #14264E for money and headings, #8A8F98 for secondary
   text, #E4E7EE for borders.
   --------------------------------------------------------------------------- */
.pic-card {
    border-radius: 10px;
    background: white;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: box-shadow .2s ease, transform .2s ease;
    overflow: hidden;
}

    .pic-card:hover {
        box-shadow: 0 8px 22px rgba(20,38,78,0.14);
        transform: translateY(-3px);
    }

    /* Ordering cards are not a single link target: the stepper, warehouse select and
       Add to Cart live inside them, so only the image, name and SKU navigate. */
    .pic-card.pic-card-b2b {
        cursor: default;
        border: 1px solid #E4E7EE;
    }

.pic-img-wrap {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

    .pic-img-wrap img {
        max-height: 100%;
        max-width: 100%;
        object-fit: contain;
    }

.pic-card-b2b .pic-img-wrap,
.pic-card-b2b .pic-name,
.pic-card-b2b .pic-sku {
    cursor: pointer;
}

.pic-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.pic-name {
    color: #14264E;
    font-weight: 600;
    font-size: 0.88rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5em;
}

.pic-sku {
    color: #8A8F98;
    font-size: 0.72rem;
    margin: 4px 0 6px;
}

/* Navy, not red. The old B2B card used MudBlazor's Color.Error; red #C8102E is the
   storefront's accent for the topbar and links, never for money. */
.pic-price {
    color: #14264E;
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.2;
}

    .pic-price span {
        color: #8A8F98;
        font-weight: 400;
        font-size: 0.75rem;
    }

/* The other warehouse's price, under the headline one. */
.pic-price-alt {
    color: #8A8F98;
    font-size: 0.72rem;
    margin-top: 2px;
}

/* Price and rating share a row on the storefront, price left and stars right. */
.pic-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.pic-rating {
    display: flex;
    align-items: center;
    gap: 4px;
}

    .pic-rating span {
        color: #8A8F98;
        font-size: 0.72rem;
        white-space: nowrap;
    }

    /* MudRating renders icon buttons; strip their padding down to inline star size. */
    .pic-rating .mud-rating-item {
        padding: 0;
    }

    .pic-rating .mud-icon-root {
        font-size: 0.95rem;
    }

/* Storefront stock: a word, not a number. */
.pic-stock {
    font-size: 0.75rem;
    font-weight: 700;
    margin-top: auto;
    padding-top: 6px;
}

.pic-stock-in { color: #018065; }
.pic-stock-low { color: #C77700; }
.pic-stock-out { color: #9AA0A8; }

/* B2B stock: real figures per warehouse - MP / FT / CG. */
.pic-stock-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 10px;
}

.pic-stock-fig {
    font-size: 0.72rem;
    font-weight: 700;
    color: #14264E;
    background: #F0F3F9;
    border-radius: 6px;
    padding: 2px 8px;
    white-space: nowrap;
}

    .pic-stock-fig.pic-stock-zero {
        color: #9AA0A8;
        background: #F5F6F8;
        font-weight: 600;
    }

/* Staff-only "Allocated" line under the stock figures. Amber rather than red: allocated stock is
   normal, and the part is still orderable as a back order. */
.pic-stock-committed {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #8A6100;
    background: #FFF6E0;
    border-radius: 6px;
    padding: 2px 8px;
    white-space: nowrap;
}

    .pic-stock-committed .mud-icon-root {
        font-size: 0.9rem;
    }

.pic-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.pic-qty {
    display: flex;
    align-items: center;
    border: 1px solid #E4E7EE;
    border-radius: 8px;
    height: 34px;
    min-width: 96px;
}

    .pic-qty .mud-icon-button {
        padding: 2px;
    }

    .pic-qty .mud-typography {
        min-width: 26px;
        text-align: center;
        font-weight: 700;
        color: #14264E;
    }

.pic-add {
    flex-grow: 1;
    background-color: #14264E !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
}

    .pic-add:hover {
        background-color: #1E3A6E !important;
    }

    .pic-add.mud-button-disabled {
        background-color: #D5DAE2 !important;
        color: #8A8F98 !important;
    }

@media (max-width: 900px) {
    .cat-layout {
        flex-direction: column;
    }

    .cat-rail {
        position: static;
        width: 100%;
        max-height: none;
    }

    /* On a phone the rail otherwise pushes the results below the fold; it collapses behind the
       Filters button in the page head and the grid starts at the top. */
    .cat-rail-hidden {
        display: none;
    }

    .cat-filter-toggle {
        display: inline-flex;
    }
}

/* ---------------------------------------------------------------------------
   B2B product page (/product/{ItemCode}), mirroring the storefront's StoreItem
   treatment. Same reasoning as the catalog card: shared CSS, not shared
   components - this page keeps target price, consignment stock and bonded
   pricing, none of which StoreItem knows about.
   --------------------------------------------------------------------------- */

.pd-eyebrow {
    color: #C8102E;
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pd-name {
    color: #14264E;
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1.25;
    margin-top: 6px;
}

.pd-sku {
    color: #8A8F98;
    font-size: 0.85rem;
    margin: 6px 0 14px;
}

.pd-price {
    color: #14264E;
    font-weight: 800;
    font-size: 1.7rem;
    line-height: 1.15;
}

.pd-price-alt {
    color: #8A8F98;
    font-size: 0.8rem;
    margin-top: 3px;
}

.pd-price-label {
    color: #5B6472;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}

.pd-panel {
    border: 1px solid #E4E7EE;
    border-radius: 12px;
    background: #FFFFFF;
    padding: 18px;
}

.pd-section-title {
    color: #14264E;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    margin-bottom: 12px;
}

.pd-cart {
    background-color: #14264E !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
}

    .pd-cart:hover {
        background-color: #1E3A6E !important;
    }

    .pd-cart.mud-button-disabled {
        background-color: #D5DAE2 !important;
        color: #8A8F98 !important;
    }

/* Target price is the secondary action, so it stays outlined against the navy. */
.pd-target {
    border-color: #14264E !important;
    color: #14264E !important;
    border-radius: 8px !important;
}

/* ---------------------------------------------------------------------------
   Account quick links - the signed-in shortcuts row on the B2B home.
   --------------------------------------------------------------------------- */
.aql-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin: 0 auto 8px;
    padding: 0 16px;
    max-width: 1400px;
}

.aql-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px 10px;
    border-radius: 10px;
    background: white;
    border: 1px solid #E4E7EE;
    text-decoration: none;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

    .aql-tile:hover {
        box-shadow: 0 8px 22px rgba(20,38,78,0.14);
        transform: translateY(-3px);
        border-color: #14264E;
        text-decoration: none;
    }

.aql-icon {
    color: #14264E !important;
    font-size: 1.7rem !important;
}

.aql-label {
    color: #14264E;
    font-weight: 600;
    font-size: 0.8rem;
    text-align: center;
    line-height: 1.2;
}

/* Company & Terms (/account) — read-only fact cards.
   Definition lists rather than a table: these are single values about one account, and a table
   header over one row reads as a grid with the data missing. */
.acct-card {
    border: 1px solid rgba(20, 38, 78, 0.12);
    border-radius: 12px;
    padding: 16px 18px;
    height: 100%;
}

.acct-card-head {
    color: #14264E;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.acct-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(20, 38, 78, 0.07);
}

    .acct-row:last-of-type {
        border-bottom: 0;
    }

.acct-label {
    color: rgba(0, 0, 0, 0.6);
    font-size: 0.875rem;
}

.acct-value {
    font-weight: 600;
    text-align: right;
    /* Amounts stacked in a column line up on the decimal point. */
    font-variant-numeric: tabular-nums;
}

/* The customer's own note on a document (U_WEB_COMMENTS). Truncated inline with the full text in
   a tooltip - a long note must not push the order number and total out of the group row. */
.doc-group-note {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: italic;
    color: rgba(0, 0, 0, 0.6);
}