/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   MainLayout scoped CSS — layout & sizing only.
   All background-color and text-color rules live
   in app.css (global) because Blazor CSS isolation
   ::deep doesn't reliably reach inside Radzen
   component boundaries.
   ═══════════════════════════════════════════ */

/* ── Top info bar ── */
[b-7q3zjiy63q] .top-info-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.5rem 2rem;
}

[b-7q3zjiy63q] .top-info-text {
    font-size: 0.85rem;
    margin: 0;
}

/* ── Nav bar ── */
[b-7q3zjiy63q] .nav-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.5rem 2rem;
}

[b-7q3zjiy63q] .nav-logo {
    height: 60px;
    width: auto;
}

/* ── Header customer picker (impersonators only) ── */
/* Always visible at every viewport width — lives outside the hamburger wrapper. */
[b-7q3zjiy63q] .nav-customer-picker {
    display: flex;
    align-items: center;
    margin-left: 1rem;
}

/* ── Header company info (non-impersonators) ── */
/* Occupies the same slot as the customer picker, so it shares its left offset.
   min-width:0 lets the flex child shrink far enough for the ellipsis to apply.
   margin-right:auto pins the block against the logo: .nav-content is a space-between
   flex row, which would otherwise spread this middle child into the gap. An auto margin
   wins over justify-content, so it swallows the slack and pushes the nav menu right. */
[b-7q3zjiy63q] .nav-company-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 1rem;
    margin-right: auto;
    min-width: 0;
    max-width: 320px;
    line-height: 1.3;
}

[b-7q3zjiy63q] .nav-company-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #222;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-7q3zjiy63q] .nav-company-address {
    font-size: 0.8rem;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* At the nav's mobile breakpoint (820px) .mobile-menu-toggle appears and .nav-menu-wrapper
   goes absolute, so the row is just logo + this block + hamburger. Both lines are kept;
   the type scales down and the fixed cap is dropped so the block takes whatever the logo
   and hamburger leave, truncating rather than squeezing the hamburger off-screen. */
@media (max-width: 820px) {
    [b-7q3zjiy63q] .nav-company-info {
        margin-left: 0.75rem;
        max-width: none;
    }

    [b-7q3zjiy63q] .nav-company-name {
        font-size: 0.8rem;
    }

    [b-7q3zjiy63q] .nav-company-address {
        font-size: 0.7rem;
    }
}

/* Phones. The logo is the only truly rigid item here — at height:60px a wide wordmark is
   ~290px, which together with the padding and hamburger leaves nothing for this block and
   collapses it to zero width. So reclaim room from the gutters and the logo before shrinking
   the type further; the hamburger never shrinks so it stays tappable. */
@media (max-width: 600px) {
    [b-7q3zjiy63q] .nav-content {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    [b-7q3zjiy63q] .nav-logo {
        height: 44px;
    }

    [b-7q3zjiy63q] .nav-company-info {
        margin-left: 0.5rem;
    }

    [b-7q3zjiy63q] .nav-company-name {
        font-size: 0.75rem;
    }

    [b-7q3zjiy63q] .nav-company-address {
        font-size: 0.67rem;
    }
}

@media (max-width: 400px) {
    [b-7q3zjiy63q] .nav-logo {
        height: 38px;
    }

    [b-7q3zjiy63q] .nav-company-name {
        font-size: 0.7rem;
    }

    [b-7q3zjiy63q] .nav-company-address {
        font-size: 0.63rem;
    }
}

/* ── Content ── */
.content[b-7q3zjiy63q] {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0;
    min-height: 14rem;
}

/* ── Footer upper ── */
[b-7q3zjiy63q] .footer-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

[b-7q3zjiy63q] .footer-brand {
    margin-bottom: 0.5rem;
}

[b-7q3zjiy63q] .footer-logo {
    height: 55px;
    width: auto;
}

[b-7q3zjiy63q] .footer-brand-name {
    font-weight: 500;
    margin: 0;
    border-left: 2px solid #ccc;
    padding-left: 1rem;
}

[b-7q3zjiy63q] .footer-description {
    color: #555;
    margin-bottom: 1rem;
    line-height: 1.5;
}

[b-7q3zjiy63q] .footer-nav-links a {
    display: block;
    text-decoration: none;
    padding: 0.1rem 0;
    font-size: 1rem;
    line-height: 1.5;
}

[b-7q3zjiy63q] .contact-heading {
    font-weight: 500;
    margin-bottom: 0.75rem;
    padding-bottom: 0.35rem;
}

/* ── Footer bottom bar ── */
[b-7q3zjiy63q] .footer-bottom-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

[b-7q3zjiy63q] .footer-bottom-logo {
    height: 40px;
    width: auto;
}

[b-7q3zjiy63q] .footer-copyright {
    font-size: 0.85rem;
    text-align: center;
    margin: 0;
}

[b-7q3zjiy63q] .footer-family-logo {
    height: 40px;
    width: auto;
}

/* ── Radzen layout overrides ── */
[b-7q3zjiy63q] .rz-header {
    display: block;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: none;
}

[b-7q3zjiy63q] .rz-body {
    flex: 1 0 auto;
    background: #fff;
}

/* ── Responsive ── */
@media (max-width: 480px) {
    [b-7q3zjiy63q] .top-info-content {
        flex-wrap: wrap;
        justify-content: center !important;
        gap: 0.5rem;
        text-align: center;
    }

    [b-7q3zjiy63q] .nav-content {
        flex-direction: column;
        gap: 0.5rem;
    }

    [b-7q3zjiy63q] .footer-bottom-content {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

/* ── User avatar menu ── */
[b-7q3zjiy63q] .user-menu-trigger {
    cursor: pointer;
    padding: 0.2rem 0;
}

[b-7q3zjiy63q] .nav-avatar {
    border-radius: 50%;
    display: block;
    flex-shrink: 0;
    width: 40px !important;
    height: 40px !important;
}

[b-7q3zjiy63q] .nav-username {
    font-size: 0.9rem;
    font-weight: 500;
    color: #000;
    white-space: nowrap;
}

/* ── Error UI ── */
#blazor-error-ui[b-7q3zjiy63q] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-7q3zjiy63q] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-l1f3zah8k8],
.components-reconnect-repeated-attempt-visible[b-l1f3zah8k8],
.components-reconnect-failed-visible[b-l1f3zah8k8],
.components-pause-visible[b-l1f3zah8k8],
.components-resume-failed-visible[b-l1f3zah8k8],
.components-rejoining-animation[b-l1f3zah8k8] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-l1f3zah8k8],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-l1f3zah8k8],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-l1f3zah8k8],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-l1f3zah8k8],
#components-reconnect-modal.components-reconnect-retrying[b-l1f3zah8k8],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-l1f3zah8k8],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-l1f3zah8k8],
#components-reconnect-modal.components-reconnect-failed[b-l1f3zah8k8],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-l1f3zah8k8] {
    display: block;
}


#components-reconnect-modal[b-l1f3zah8k8] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-l1f3zah8k8 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-l1f3zah8k8 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-l1f3zah8k8 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-l1f3zah8k8]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-l1f3zah8k8 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-l1f3zah8k8 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-l1f3zah8k8 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-l1f3zah8k8 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-l1f3zah8k8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-l1f3zah8k8] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-l1f3zah8k8] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-l1f3zah8k8] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-l1f3zah8k8] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-l1f3zah8k8] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-l1f3zah8k8] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-l1f3zah8k8 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-l1f3zah8k8] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-l1f3zah8k8 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Cart.razor.rz.scp.css */
/* ══════════════════════════════════════════
   Cart Page – Scoped Styles
   ══════════════════════════════════════════ */

/* ── Two-column page layout ── */

.cart-page-layout[b-rh4bq00f93] {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 0 1rem;
}

.cart-container[b-rh4bq00f93] {
    flex: 1 1 0;
    min-width: 0;        /* was 1100px — let this flex child shrink below content so the page reflows */
    max-width: 1100px;
    width: 100%;
}

.cart-side-panel[b-rh4bq00f93] {
    flex: 0 0 340px;
    width: 340px;
    position: sticky;
    top: 1rem;
    height: 715px;
    max-height: 715px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cart-header[b-rh4bq00f93] {
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--ces-primary, #1974B6);
}

.cart-add-panel[b-rh4bq00f93] {
    margin-bottom: 1.5rem;
}

/* All Words + qty + Add (+ barcode) grouped as one wrapping unit. On narrow screens the group drops
   below the search dropdown as a whole, so the search bar gets the full first line to itself. */
.cart-add-controls[b-rh4bq00f93] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cart-grid[b-rh4bq00f93] {
    margin-bottom: 1.5rem;
}

/* Safety net: if the table is ever wider than its container, scroll inside this box rather than
   pushing the whole page sideways. Only above the card breakpoint (900px) — below that the grid is a
   stacked card layout that needs no scroll, and an overflow box would clip in-grid dropdown popups. */
@media (min-width: 901px) {
    .cart-grid-scroll[b-rh4bq00f93] {
        overflow-x: auto;
    }
}

[b-rh4bq00f93] .cart-grid .rz-data-row td {
    vertical-align: middle;
}

[b-rh4bq00f93] .cart-grid .rz-numeric-input {
    padding-left: 5px !important;
}

/* Row state accent (error / new / dirty) — mirrors the status-icon colors in the first column.
   On desktop this is a left bar on the status cell plus a subtle tint; the phone card recolors its
   whole border (see the max-width: 900px block). */
[b-rh4bq00f93] .cart-grid .cart-row--error td:first-child { box-shadow: inset 3px 0 0 var(--rz-danger); }
[b-rh4bq00f93] .cart-grid .cart-row--new td:first-child { box-shadow: inset 3px 0 0 #2e7d32; }
[b-rh4bq00f93] .cart-grid .cart-row--dirty td:first-child { box-shadow: inset 3px 0 0 #e65100; }
[b-rh4bq00f93] .cart-grid .cart-row--error td { background: #fdecea; }

.cart-item-id[b-rh4bq00f93] {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.85rem;
    color: var(--ces-primary, #1974B6);
    font-weight: 500;
}

a.cart-item-id[b-rh4bq00f93] {
    text-decoration: none;
}

a.cart-item-id:hover[b-rh4bq00f93] {
    text-decoration: underline;
}

/* Description doubles as a product link (so mobile, where the item # is hidden, still has one).
   Styled to read as plain text — inherits color/weight, underline only on hover. */
a.cart-line-description[b-rh4bq00f93] {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

a.cart-line-description:hover[b-rh4bq00f93] {
    text-decoration: underline;
}

.cart-footer[b-rh4bq00f93] {
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
}

@media (max-width: 900px) {
    .cart-container[b-rh4bq00f93] {
        padding: 1rem 0.5rem 0;
    }

    /* ── Cart grid → stacked cards (layout "C": title on top, then one compact line —
       qty stepper · UOM · unit price ........ line total · remove) ──
       Radzen renders a real <table class="rz-grid-table"> with plain <tbody>/<tr>/<td> (no row class)
       and the column CssClass lands on the <td>. We drop the table formatting context so each <tr> is
       a card; `order` + flex arrange the cells into the inline control line. */
    [b-rh4bq00f93] .cart-grid table {
        display: block !important;
        width: 100%;
        min-width: 0 !important;
    }

    [b-rh4bq00f93] .cart-grid thead {
        display: none !important;
    }

    [b-rh4bq00f93] .cart-grid tbody {
        display: block !important;
        width: 100%;
    }

    /* Drop Radzen's outer grid frame on mobile. The visible border + shadow come from the
       .rz-datatable class on the grid root (border: var(--rz-grid-cell-border), i.e. --rz-border-width);
       there's also an outline/shadow on the inner data area. Each card has its own border, so none of
       these are wanted here. */
    [b-rh4bq00f93] .cart-grid {
        border: none !important;
        box-shadow: none !important;
    }
    [b-rh4bq00f93] .cart-grid .rz-data-grid-data {
        outline: none !important;
        box-shadow: none !important;
    }

    /* Each data row becomes a card. */
    [b-rh4bq00f93] .cart-grid tbody > tr {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 10px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }

    /* Cells become flex items; strip the table-cell chrome and the alternating-row stripe background
       (the stripe rule is more specific, so background needs !important). min-width: 0 lets a long
       title shrink instead of forcing the row wide. */
    [b-rh4bq00f93] .cart-grid tbody > tr > td {
        border: none !important;
        padding: 0 !important;
        width: auto !important;
        min-width: 0;
        overflow: visible;
        white-space: normal;
        background: transparent !important;
    }

    /* Columns not shown on the mobile card. */
    [b-rh4bq00f93] .cart-grid .cart-col-status,
    [b-rh4bq00f93] .cart-grid .cart-col-item,
    [b-rh4bq00f93] .cart-grid .cart-col-warehouse,
    [b-rh4bq00f93] .cart-grid .cart-col-nto {
        display: none !important;
    }

    /* Title — full width (forces the controls onto the next line), bold, up to two lines. */
    [b-rh4bq00f93] .cart-grid .cart-col-desc {
        order: 0;
        flex: 1 1 100%;
        font-weight: 500;
    }
    [b-rh4bq00f93] .cart-grid .cart-col-desc .rz-cell-data {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
        overflow: hidden;
        line-height: 1.3;
    }

    /* Compact control line: qty stepper · "$unit / UOM" ········ line total · remove. */
    [b-rh4bq00f93] .cart-grid .cart-col-qty {
        order: 1;
    }

    [b-rh4bq00f93] .cart-grid .cart-col-price {
        order: 2;
        color: #777;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    [b-rh4bq00f93] .cart-grid .cart-col-uom {
        order: 3;
        color: #777;
        font-size: 0.85rem;
        text-align: left;
        margin-inline-start: -2px;
    }
    [b-rh4bq00f93] .cart-grid .cart-col-uom .rz-cell-data::before {
        content: "/\00a0";
    }

    /* Line total — bold, pushed to the far right of the control line. */
    [b-rh4bq00f93] .cart-grid .cart-col-ext {
        order: 4;
        margin-left: auto;
        font-size: 0.95rem;
        white-space: nowrap;
    }

    [b-rh4bq00f93] .cart-grid .cart-col-delete {
        order: 5;
    }

    /* Row state accent (class set via OnCartRowRender). */
    [b-rh4bq00f93] .cart-grid tbody > tr.cart-row--error {
        border-color: var(--rz-danger);
        border-left-width: 4px;
    }

    [b-rh4bq00f93] .cart-grid tbody > tr.cart-row--new {
        border-color: #2e7d32;
        border-left-width: 4px;
    }

    [b-rh4bq00f93] .cart-grid tbody > tr.cart-row--dirty {
        border-color: #e65100;
        border-left-width: 4px;
    }
}

/* ── Clear Cart Confirmation Dialog ── */

/* cart-confirm-overlay / cart-confirm-dialog / cart-dialog-close moved to app.css
   so they apply to extracted child dialog components (Blazor CSS isolation does not
   cascade into child component elements). */

/* ── Product Search Result item template ── */

.psr-item[b-rh4bq00f93] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    line-height: 1.3;
}

.psr-top[b-rh4bq00f93] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.psr-item-number[b-rh4bq00f93] {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ces-primary, #1974B6);
}

.psr-separator[b-rh4bq00f93] {
    color: #bbb;
    font-size: 0.75rem;
}

.psr-warehouse[b-rh4bq00f93] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.psr-price[b-rh4bq00f93] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #2a7a2a;
}

.psr-description[b-rh4bq00f93] {
    font-size: 0.75rem;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ── Order Guide ── */

.order-guide-search[b-rh4bq00f93] {
    margin-bottom: 0.35rem;
}

.order-guide-list[b-rh4bq00f93] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}

.order-guide-empty[b-rh4bq00f93] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
    opacity: 0.7;
}

.order-guide-loading[b-rh4bq00f93] {
    display: flex;
    justify-content: center;
    padding: 0.75rem 0;
}

.order-guide-item[b-rh4bq00f93] {
    display: flex;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transition: background 0.15s;
}

.order-guide-item:hover[b-rh4bq00f93] {
    background: #f5f9ff;
    border-color: var(--ces-primary, #1974B6);
}

.order-guide-item:active[b-rh4bq00f93] {
    background: #e6f0fb;
}

.order-guide-item--disabled[b-rh4bq00f93] {
    cursor: default;
    opacity: 0.55;
}

.order-guide-item--disabled:hover[b-rh4bq00f93] {
    background: #fff;
    border-color: #e8e8e8;
}

.ogi-left[b-rh4bq00f93] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ogi-item-number[b-rh4bq00f93] {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ces-primary, #1974B6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ogi-description[b-rh4bq00f93] {
    font-size: 0.78rem;
    color: #444;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
}

.ogi-right[b-rh4bq00f93] {
    flex: 0 0 72px;
    width: 72px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
}

.ogi-thumbnail[b-rh4bq00f93] {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 4px;
    border: 1px solid #eee;
    background: #fafafa;
}

.ogi-thumbnail-placeholder[b-rh4bq00f93] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
}

/* Stack the side panel below the cart until the viewport is wide enough for a comfortable
   two-column layout. The grid's fixed columns total ~760px, so beside a ~340px panel the cart only
   has real room at ~1280px+; below that the panel goes full-width underneath and the cart gets the
   whole width (table down to 901px, cards below). */
@media (max-width: 1280px) {
    .cart-page-layout[b-rh4bq00f93] {
        flex-direction: column;
    }

    /* Full width when stacked so the cart and the panel beneath it line up (the 1100px cap would
       otherwise leave the cart narrower than the full-width panel between 1100–1280px). */
    .cart-container[b-rh4bq00f93] {
        max-width: none;
    }

    /* max-height tall enough to clear the Details tab (PO field + 320px Notes textarea + tab header),
       which was getting clipped at 500px; padding-bottom adds breathing room below it. A definite
       height is still needed so the Order Guide list (flex:1) stays scrollable. */
    .cart-side-panel[b-rh4bq00f93] {
        width: 100%;
        flex: none;
        position: static;
        max-height: 560px;
        padding-bottom: 0.5rem;
    }
}
/* /Components/Pages/History.razor.rz.scp.css */
.history-page[b-8hn8ac8b0o] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 0 3rem;
}

.history-header[b-8hn8ac8b0o] {
    padding: 1.25rem 0 0.75rem;
}

.history-divider[b-8hn8ac8b0o] {
    border: none;
    border-top: 2px solid var(--ces-primary, #1974B6);
    margin: 0 0 1.25rem;
}

/* ── Detail dialog ─────────────────────────────────────────────────────────── */

.order-detail-dialog[b-8hn8ac8b0o] {
    padding: 0.25rem 0;
}

.odl-meta[b-8hn8ac8b0o] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.odl-label[b-8hn8ac8b0o] {
    font-size: 0.72rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.odl-value[b-8hn8ac8b0o] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111;
}
/* /Components/Pages/Login.razor.rz.scp.css */
.login-page-wrap[b-xmdq383avk] {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 2rem 1rem;
}

.login-tile[b-xmdq383avk] {
    width: 100%;
    max-width: 420px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding: 1.5rem;
}

.login-helper-text[b-xmdq383avk] {
    font-size: 0.875rem;
    line-height: 1.4;
    margin-bottom: 1rem;
    color: #4b5563;
    text-align: center;
}

.login-form[b-xmdq383avk] {
    width: 100%;
}

.login-form .rz-message[b-xmdq383avk] {
    left: 0;
    transform: none;
    text-align: left;
}

.remember-me-row[b-xmdq383avk] {
    display: inline-flex;
    align-items: center;
    width: auto;
}
/* /Components/Pages/Product.razor.rz.scp.css */
/* ══════════════════════════════════════════
   Product Detail Page – Scoped Styles
   ══════════════════════════════════════════ */

/* ── Container ── */

.pdp-container[b-hceuk44360] {
    margin: 0 auto;
    padding: 0 0 2rem;
}

/* ── Breadcrumb ── */

.pdp-breadcrumb[b-hceuk44360] {
    margin-bottom: 1rem;
}

.pdp-breadcrumb-list[b-hceuk44360] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    font-size: 0.875rem;
}

.pdp-breadcrumb-segment[b-hceuk44360] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
}

/* The last (current page) crumb shrinks to fill remaining space and truncates */
.pdp-breadcrumb-current[b-hceuk44360] {
    flex: 1 1 0;
    min-width: 0;
}

.pdp-breadcrumb-current .pdp-breadcrumb-text[b-hceuk44360] {
    display: block;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    color: #000 !important;
    font-weight: 500;
}

[b-hceuk44360] .pdp-breadcrumb-segment .rz-link,
[b-hceuk44360] .pdp-breadcrumb-segment .rz-link:link,
[b-hceuk44360] .pdp-breadcrumb-segment .rz-link:visited,
[b-hceuk44360] .pdp-breadcrumb-segment .rz-link:hover,
[b-hceuk44360] .pdp-breadcrumb-segment .rz-link:focus,
[b-hceuk44360] .pdp-breadcrumb-segment .rz-link:active,
.pdp-breadcrumb-text[b-hceuk44360] {
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
    line-height: 1.35;
    color: #000 !important;
    text-decoration: none !important;
}

.pdp-breadcrumb-sep[b-hceuk44360] {
    color: #000 !important;
    user-select: none;
    flex: 0 0 auto;
    line-height: 1.35;
}

/* ── Hero (image + short info) ── */

.pdp-hero[b-hceuk44360] {
    margin-bottom: 0;
}

/* ── Image gallery ── */

.pdp-gallery[b-hceuk44360] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pdp-image-wrap[b-hceuk44360] {
    position: relative;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
}

[b-hceuk44360] .pdp-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1rem;
}

/* Prev / Next arrows */
[b-hceuk44360] .pdp-gallery-arrow,
[b-hceuk44360] .pdp-gallery-arrow.rz-button {
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.85) !important;
    border: 1px solid #ddd !important;
    border-radius: 50% !important;
    min-width: 40px !important;
    width: 40px !important;
    height: 40px !important;
    cursor: pointer;
    color: #333 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    transition: background 0.15s, box-shadow 0.15s;
    padding: 0 !important;
    z-index: 2;
}

[b-hceuk44360] .pdp-gallery-arrow:hover,
[b-hceuk44360] .pdp-gallery-arrow.rz-button:hover {
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

[b-hceuk44360] .pdp-gallery-arrow-prev,
[b-hceuk44360] .pdp-gallery-arrow-prev.rz-button {
    left: 0.5rem !important;
    right: auto !important;
}

[b-hceuk44360] .pdp-gallery-arrow-next,
[b-hceuk44360] .pdp-gallery-arrow-next.rz-button {
    right: 0.5rem !important;
    left: auto !important;
}

[b-hceuk44360] .pdp-gallery-arrow .rzi,
[b-hceuk44360] .pdp-gallery-arrow.rz-button .rzi {
    font-size: 1.2rem;
}

/* Thumbnail strip */

.pdp-thumbnails[b-hceuk44360] {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
}

.pdp-thumb[b-hceuk44360] {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    background: #fafafa;
    padding: 2px;
    transition: border-color 0.15s;
}

.pdp-thumb:hover[b-hceuk44360] {
    border-color: #999;
}

.pdp-thumb-active[b-hceuk44360] {
    border-color: var(--ces-primary, #1974B6) !important;
    box-shadow: 0 0 0 1px var(--ces-primary, #1974B6);
}

[b-hceuk44360] .pdp-thumb-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Badges */

[b-hceuk44360] .pdp-badge-used,
[b-hceuk44360] .pdp-badge-special {
    position: absolute;
    top: 0.75rem;
    font-size: 0.75rem;
}

[b-hceuk44360] .pdp-badge-used {
    left: 0.75rem;
}

[b-hceuk44360] .pdp-badge-special {
    right: 0.75rem;
}

/* ── Short info ── */

[b-hceuk44360] .pdp-manufacturer,
[b-hceuk44360] .pdp-manufacturer.rz-text {
    color: #888 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0;
}

[b-hceuk44360] .pdp-title,
[b-hceuk44360] .pdp-title.rz-text {
    color: #1a1a1a !important;
    font-weight: 600 !important;
    line-height: 1.25;
    margin-bottom: 0.25rem;
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
}

[b-hceuk44360] .pdp-meta-label,
[b-hceuk44360] .pdp-meta-label.rz-text {
    color: #666 !important;
    font-weight: 600 !important;
}

[b-hceuk44360] .pdp-meta-value,
[b-hceuk44360] .pdp-meta-value.rz-text {
    color: #333 !important;
}

.pdp-barcode-hover[b-hceuk44360],
.pdp-item-number-hover[b-hceuk44360] {
    color: #333;
    cursor: pointer;
    border-bottom: 1px dotted #9ca3af;
    line-height: 1.2;
}

.pdp-barcode-hover:focus[b-hceuk44360],
.pdp-item-number-hover:focus[b-hceuk44360] {
    outline: 2px solid var(--ces-primary, #1974B6);
    outline-offset: 2px;
    border-bottom-color: transparent;
}

[b-hceuk44360] .pdp-barcode-tooltip,
[b-hceuk44360] .pdp-item-barcode-tooltip {
    background: #fff;
    padding: 15px 0;
    border-radius: 6px;
    min-width: 200px;
}

[b-hceuk44360] .pdp-item-barcode-caption,
[b-hceuk44360] .pdp-item-barcode-caption.rz-text {
    font-weight: 600 !important;
    margin-bottom: 0.35rem;
    display: block;
}

.pdp-divider[b-hceuk44360] {
    border: none;
    border-top: 1px solid #e5e5e5;
    margin: 0.5rem 0;
}

/* ── Pricing ── */

.pdp-pricing[b-hceuk44360] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

[b-hceuk44360] .pdp-price,
[b-hceuk44360] .pdp-price.rz-text {
    color: var(--ces-primary, #1974B6) !important;
    font-weight: 700 !important;
}

[b-hceuk44360] .pdp-price-call,
[b-hceuk44360] .pdp-price-call.rz-text {
    color: var(--ces-header, #EC6525) !important;
    font-weight: 600 !important;
}

[b-hceuk44360] .pdp-uom,
[b-hceuk44360] .pdp-uom.rz-text {
    color: #999 !important;
    font-size: 0.85rem;
}

/* ── Section bars (Overview, Specs) ── */

.pdp-section[b-hceuk44360] {
    margin-top: 2.5rem;
    padding-top: 0;
    border-top: none;
}

[b-hceuk44360] .pdp-description-html {
    color: #333;
    line-height: 1.5;
}

[b-hceuk44360] .pdp-description-html p {
    margin: 0 0 0.6rem;
}

[b-hceuk44360] .pdp-description-html p:last-child {
    margin-bottom: 0;
}

[b-hceuk44360] .pdp-description-html ul,
[b-hceuk44360] .pdp-description-html ol {
    margin: 0.25rem 0 0.75rem 1.25rem;
}

.pdp-section-bar[b-hceuk44360] {
    background: #f2f5f8;
    border: 1px solid #e3e9ef;
    border-left: 5px solid #d8e2ec;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
}

[b-hceuk44360] .pdp-section-heading,
[b-hceuk44360] .pdp-section-heading.rz-text {
    color: #1a1a1a !important;
    font-weight: 600 !important;
    margin-bottom: 0;
}

[b-hceuk44360] .pdp-text-muted,
[b-hceuk44360] .pdp-text-muted.rz-text {
    color: #999 !important;
    font-style: italic;
}

/* ── Documents card ── */

[b-hceuk44360] .pdp-documents-card {
    background: #fafafa !important;
}

[b-hceuk44360] .pdp-documents-heading,
[b-hceuk44360] .pdp-documents-heading.rz-text {
    color: #333 !important;
    font-weight: 600 !important;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 0.5rem;
}

[b-hceuk44360] .pdp-doc-link,
[b-hceuk44360] .pdp-doc-link:link,
[b-hceuk44360] .pdp-doc-link:visited,
[b-hceuk44360] .pdp-doc-link:hover,
[b-hceuk44360] .pdp-doc-link:focus,
[b-hceuk44360] .pdp-doc-link:active,
[b-hceuk44360] .pdp-doc-link.rz-link,
[b-hceuk44360] .pdp-doc-link.rz-link:link,
[b-hceuk44360] .pdp-doc-link.rz-link:visited,
[b-hceuk44360] .pdp-doc-link.rz-link:hover,
[b-hceuk44360] .pdp-doc-link.rz-link:focus,
[b-hceuk44360] .pdp-doc-link.rz-link:active {
    color: var(--ces-primary, #1974B6) !important;
    font-size: 0.925rem;
    display: block;
    padding: 0.35rem 0;
    text-decoration: none !important;
    text-decoration-line: none !important;
}

/* ── Tech Specs table ── */

.pdp-specs-table[b-hceuk44360] {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
}

.pdp-spec-row[b-hceuk44360] {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) 2fr;
    padding: 0.65rem 1rem;
}

.pdp-spec-row-even[b-hceuk44360] {
    background: #f9f9f9;
}

.pdp-spec-row-odd[b-hceuk44360] {
    background: #fff;
}

.pdp-spec-key[b-hceuk44360] {
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
}

.pdp-spec-value[b-hceuk44360] {
    color: #555;
    font-size: 0.9rem;
}

/* ── Responsive ── */

@media (max-width: 768px) {
    .pdp-container[b-hceuk44360] {
        padding: 0 0 2rem;
    }

    .pdp-image-wrap[b-hceuk44360] {
        aspect-ratio: 4 / 3;
    }

    [b-hceuk44360] .pdp-gallery-arrow,
    [b-hceuk44360] .pdp-gallery-arrow.rz-button {
        min-width: 34px !important;
        width: 34px !important;
        height: 34px !important;
    }

    .pdp-thumb[b-hceuk44360] {
        width: 52px;
        height: 52px;
    }

    .pdp-section[b-hceuk44360] {
        margin-top: 2rem;
    }

    .pdp-section-bar[b-hceuk44360] {
        padding: 0.625rem 0.75rem;
        border-radius: 6px;
    }

    .pdp-spec-row[b-hceuk44360] {
        grid-template-columns: 1fr 1fr;
        padding: 0.5rem 0.75rem;
    }
}

@media (max-width: 480px) {
    .pdp-spec-row[b-hceuk44360] {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    .pdp-spec-key[b-hceuk44360] {
        font-size: 0.8rem;
        color: #888;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .pdp-spec-value[b-hceuk44360] {
        font-size: 0.9rem;
    }
}

/* Product item-number barcode tooltip */
.pdp-item-barcode-tooltip-popup[b-hceuk44360],
.pdp-item-barcode-tooltip-popup .rz-tooltip-content[b-hceuk44360] {
    background: #fff !important;
    color: #000 !important;
}

.pdp-item-barcode-tooltip-popup.rz-bottom-tooltip-content[b-hceuk44360]::after,
.pdp-item-barcode-tooltip-popup.rz-top-tooltip-content[b-hceuk44360]::after,
.pdp-item-barcode-tooltip-popup.rz-left-tooltip-content[b-hceuk44360]::after,
.pdp-item-barcode-tooltip-popup.rz-right-tooltip-content[b-hceuk44360]::after {
    background: #fff !important;
}
/* /Components/Pages/Profile.razor.rz.scp.css */
.profile-page[b-rzce3hulbb] {
    max-width: 1200px;
    margin: 0 auto 2rem;
    padding: 0 1rem;
}

.profile-page-header[b-rzce3hulbb] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.profile-heading[b-rzce3hulbb] {
    margin: 0;
}

/* ── Two-column split ── */
.profile-columns[b-rzce3hulbb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 768px) {
    .profile-columns[b-rzce3hulbb] {
        grid-template-columns: 1fr;
    }
}

.profile-col-label[b-rzce3hulbb] {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #888;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

/* ── Cards → unified panel ── */
.profile-panel[b-rzce3hulbb] {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

.profile-panel--empty[b-rzce3hulbb] {
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-style: dashed;
    background: #fafafa;
}

.profile-identity[b-rzce3hulbb] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
}

.profile-identity-text[b-rzce3hulbb] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.profile-identity--impersonate[b-rzce3hulbb] {
    align-items: flex-start;
}

.profile-impersonate-header[b-rzce3hulbb] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.profile-divider[b-rzce3hulbb] {
    margin: 0;
    border: none;
    border-top: 1px solid #e0e0e0;
}

.profile-details[b-rzce3hulbb] {
    padding: 0 0 1.25rem;
}

.profile-section-heading[b-rzce3hulbb] {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #555;
    background: #f0f0f0;
    border-radius: 4px;
    padding: 0.25rem 0.6rem;
    margin: 0.85rem 1.5rem 0.6rem;
}

.profile-avatar[b-rzce3hulbb] {
    border-radius: 50%;
    border: 2px solid #ddd;
    width: 80px !important;
    height: 80px !important;
    flex-shrink: 0;
}

.profile-field-list[b-rzce3hulbb] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.75rem 1.5rem 1.25rem;
}

.profile-field[b-rzce3hulbb] {
    display: flex;
    gap: 1rem;
    align-items: baseline;
}

.profile-label[b-rzce3hulbb] {
    font-weight: 600;
    color: #333;
    min-width: 140px;
    flex-shrink: 0;
    font-size: 0.9rem;
}

.profile-value[b-rzce3hulbb] {
    color: #555;
    font-size: 0.9rem;
}
/* /Components/Pages/Shop.razor.rz.scp.css */
/* ══════════════════════════════════════════
   Home / Catalog Page – Scoped Styles
   ══════════════════════════════════════════ */

/* ── Tile wrapper (grid cell containing <a> + ATC strip) ── */

.product-tile-wrap[b-z4sjpmvw22] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.product-tile-wrap .product-tile[b-z4sjpmvw22] {
    flex: 1;
}

/* ── Breadcrumb Row ── */

.catalog-breadcrumb-row[b-z4sjpmvw22] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--rz-base-300);
}

/* ── Controls Row (search + dropdowns) ── */

.catalog-controls-row[b-z4sjpmvw22] {
    padding: 0.25rem 0;
    margin-bottom: 0.4rem;
    gap: 0.5rem;
}

/* ── Layout ── */

.catalog-layout[b-z4sjpmvw22] {
    display: flex;
    gap: 1rem;
    padding: 0 0 2rem;
    align-items: stretch;
}

.catalog-sidebar[b-z4sjpmvw22] {
    flex: 0 0 250px;
    min-width: 250px;
    max-width: 250px;
}

.catalog-main[b-z4sjpmvw22] {
    flex: 1;
    min-width: 0;
}

@media (max-width: 767px) {
    .catalog-layout[b-z4sjpmvw22] {
        flex-direction: column;
    }

    .catalog-sidebar[b-z4sjpmvw22] {
        flex: none;
        min-width: unset;
        max-width: unset;
        width: 100%;
    }
}

/* ── Filter Panel ── */

.filter-panel[b-z4sjpmvw22] {
    background: var(--rz-base-200);
    border-radius: var(--rz-border-radius);
    padding: 1.25rem;
    position: sticky;
    top: 1rem;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.pricing-availability[b-z4sjpmvw22] {
    margin-top: 0.5rem;
}

[b-z4sjpmvw22] .filter-heading {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #9a9a9a;
}

.filter-section[b-z4sjpmvw22] {
    margin-bottom: 1.25rem;
    flex-shrink: 0;
}

.filter-checkboxes[b-z4sjpmvw22] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (max-width: 767px) {
    .filter-checkboxes[b-z4sjpmvw22] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem 1rem;
    }
}

[b-z4sjpmvw22] .filter-label {
    margin-bottom: 0.5rem;
}

.search-allwords[b-z4sjpmvw22] {
    margin-top: 0.5rem;
    width: fit-content;
}

.filter-panel > :last-child[b-z4sjpmvw22] {
    margin-top: auto;
}

/* ── Breadcrumbs ── */

.catalog-breadcrumbs[b-z4sjpmvw22] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--rz-on-background);
}

.catalog-breadcrumbs a[b-z4sjpmvw22],
.catalog-breadcrumbs a:link[b-z4sjpmvw22],
.catalog-breadcrumbs a:visited[b-z4sjpmvw22],
.catalog-breadcrumbs a:hover[b-z4sjpmvw22],
.catalog-breadcrumbs a:focus[b-z4sjpmvw22],
.catalog-breadcrumbs a:active[b-z4sjpmvw22] {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 500;
}

.breadcrumb-current[b-z4sjpmvw22] {
    font-weight: 600;
    color: var(--rz-on-background);
    font-size: 1.1rem;
}

.breadcrumb-sep[b-z4sjpmvw22] {
    color: var(--rz-text-tertiary-color);
    user-select: none;
}

/* ── Content Area ── */

.catalog-content[b-z4sjpmvw22] {
    min-height: 400px;
    margin-top: 0.35rem;
}

/* ── Category Grid ── */

.category-grid[b-z4sjpmvw22] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.category-tile[b-z4sjpmvw22] {
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    padding: 1rem 0.75rem;
    text-align: center;
    cursor: pointer;
    transition: box-shadow 0.2s, border-color 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: inherit;
    text-decoration: none;
    height: 100%;
}

.category-tile:visited[b-z4sjpmvw22],
.category-tile:hover[b-z4sjpmvw22],
.category-tile:focus[b-z4sjpmvw22],
.category-tile:active[b-z4sjpmvw22] {
    color: inherit;
    text-decoration: none;
}

.category-tile-icon[b-z4sjpmvw22] {
    margin-bottom: 0.5rem;
}

.category-tile-icon-wrap[b-z4sjpmvw22] {
    width: 84px;
    height: 84px;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-tile-image[b-z4sjpmvw22] {
    width: 84px;
    height: 84px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.category-tile-image-primary[b-z4sjpmvw22] {
    position: absolute;
    inset: 0;
}

.category-tile-icon-fallback[b-z4sjpmvw22] {
    position: absolute;
    inset: 0;
    display: flex !important;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

[b-z4sjpmvw22] .category-tile-icon .rzi {
    font-size: 60px;
    color: #000;
}

[b-z4sjpmvw22] .category-name {
    margin-bottom: 0.25rem;
}

[b-z4sjpmvw22] .category-product-count,
[b-z4sjpmvw22] .category-product-count.rz-text {
    color: #9a9a9a !important;
    font-size: 0.85rem;
    margin-top: 0.1rem;
}

[b-z4sjpmvw22] .category-tile .category-product-count,
[b-z4sjpmvw22] .category-tile .category-product-count.rz-text {
    margin-top: auto;
    padding-top: 0.35rem;
}

[b-z4sjpmvw22] .category-desc {
    opacity: 0.7;
}

/* ── Category List View ── */

.category-list[b-z4sjpmvw22] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.category-list-item[b-z4sjpmvw22] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    cursor: pointer;
    transition: background 0.15s;
    color: inherit;
    text-decoration: none;
}

.category-list-item:visited[b-z4sjpmvw22],
.category-list-item:hover[b-z4sjpmvw22],
.category-list-item:focus[b-z4sjpmvw22],
.category-list-item:active[b-z4sjpmvw22] {
    color: inherit;
    text-decoration: none;
}

[b-z4sjpmvw22] .category-list-item .rzi {
    font-size: 60px;
    color: #000;
    flex-shrink: 0;
}

.category-list-icon-wrap[b-z4sjpmvw22] {
    width: 84px;
    height: 84px;
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-list-image[b-z4sjpmvw22] {
    width: 84px;
    height: 84px;
    object-fit: contain;
    display: block;
}

.category-list-image-primary[b-z4sjpmvw22] {
    position: absolute;
    inset: 0;
}

.category-list-icon-fallback[b-z4sjpmvw22] {
    position: absolute;
    inset: 0;
    display: flex !important;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ── Product Grid (Tile View) ── */

.product-grid[b-z4sjpmvw22] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(220px, calc(25% - 0.75rem)), 1fr));
    gap: 1rem;
}

.product-tile[b-z4sjpmvw22] {
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.2s, border-color 0.2s;
    display: block;
    color: inherit;
    text-decoration: none;
}

.product-tile:visited[b-z4sjpmvw22],
.product-tile:hover[b-z4sjpmvw22],
.product-tile:focus[b-z4sjpmvw22],
.product-tile:active[b-z4sjpmvw22] {
    color: inherit;
    text-decoration: none;
}

.product-tile-image[b-z4sjpmvw22] {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rz-base-100);
    padding: 0;
    position: relative;
}

.product-tile-image img[b-z4sjpmvw22] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.product-tile-info[b-z4sjpmvw22] {
    padding: 0.75rem 1rem 1rem;
}

.product-tile-warehouse-badge[b-z4sjpmvw22] {
    position: absolute;
    bottom: 0.4rem;
    right: 0.4rem;
    background: rgba(25, 116, 182, 0.6);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 0.15rem 0.45rem;
    border-radius: 3px;
    line-height: 1.4;
    pointer-events: none;
    white-space: nowrap;
}

.product-tile-oos-badge[b-z4sjpmvw22] {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    background: rgba(180, 30, 30, 0.82);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 0.15rem 0.45rem;
    border-radius: 3px;
    line-height: 1.4;
    pointer-events: none;
    white-space: nowrap;
}

[b-z4sjpmvw22] .product-brand {
    opacity: 0.6;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

[b-z4sjpmvw22] .product-name {
    margin: 0.25rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

[b-z4sjpmvw22] .product-mpn {
    opacity: 0.5;
}

[b-z4sjpmvw22] .product-price {
    margin-top: 0.5rem;
    color: var(--rz-primary);
}

/* ── Product List View ── */

.product-list[b-z4sjpmvw22] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.product-list-item-wrap[b-z4sjpmvw22] {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    overflow: hidden;
    transition: box-shadow 0.15s;
}

.product-list-item[b-z4sjpmvw22] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    flex: 1;
    min-width: 0;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}

.product-list-item:visited[b-z4sjpmvw22],
.product-list-item:hover[b-z4sjpmvw22],
.product-list-item:focus[b-z4sjpmvw22],
.product-list-item:active[b-z4sjpmvw22] {
    color: inherit;
    text-decoration: none;
}

.product-list-img[b-z4sjpmvw22] {
    width: 80px;
    height: 80px;
    object-fit: contain;
    flex-shrink: 0;
}

.product-list-info[b-z4sjpmvw22] {
    flex: 1;
    min-width: 0;
}

.product-list-atc[b-z4sjpmvw22] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.75rem 1rem;
    border-left: 1px solid var(--rz-base-300);
    width: 130px;
    flex-shrink: 0;
    flex-grow: 0;
}

.product-list-atc-controls[b-z4sjpmvw22] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
}

.product-list-atc-price[b-z4sjpmvw22] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--rz-primary);
    white-space: nowrap;
}

/* ── Tile ATC strip — fixed height, price left, controls right ── */

.product-listing-atc[b-z4sjpmvw22] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0 0.75rem;
    height: 52px;
    overflow: hidden;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-300);
    border-top: none;
    border-radius: 0 0 var(--rz-border-radius) var(--rz-border-radius);
}

.product-tile-atc-price[b-z4sjpmvw22] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--rz-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 1;
}

.product-listing-atc-controls[b-z4sjpmvw22] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    margin-left: auto;
}

/* Square the tile's bottom corners when an ATC strip is attached below it */
.product-tile-wrap:has(.product-listing-atc) .product-tile[b-z4sjpmvw22] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* ── Pager ── */

.pager-toolbar[b-z4sjpmvw22] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0.05rem 0 0.2rem;
}

.pager-summary[b-z4sjpmvw22] {
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1.1;
}

[b-z4sjpmvw22] .catalog-pager {
    margin-left: auto;
}

[b-z4sjpmvw22] .catalog-pager .rz-paginator {
    padding: 0;
    border: 0;
    background: transparent;
    min-height: 1.7rem;
}

[b-z4sjpmvw22] .catalog-pager .rz-paginator-element {
    border-radius: 0.3rem;
    min-width: 1.7rem;
    height: 1.7rem;
    line-height: 1.7rem;
    padding: 0 0.3rem;
    font-size: 0.85rem;
}

[b-z4sjpmvw22] .catalog-pager .rz-state-active {
    border-radius: 0.3rem;
}

[b-z4sjpmvw22] .catalog-pager .rz-paginator-element:hover:not(.rz-state-active) {
    border-radius: 0.3rem;
}

/* ── Responsive ── */

@media (max-width: 768px) {
    .pager-toolbar[b-z4sjpmvw22] {
        gap: 0.35rem;
    }

    .pager-summary[b-z4sjpmvw22] {
        font-size: 0.78rem;
    }

    .filter-panel[b-z4sjpmvw22] {
        position: static;
    }

    .category-grid[b-z4sjpmvw22] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .product-grid[b-z4sjpmvw22] {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}
/* /Components/Shared/QuickProcessSettings.razor.rz.scp.css */
/* ── Payment method card grid ─────────────────────────────────────────────── */

.qp-payment-grid[b-eiev38g5fs] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
}

@media (max-width: 480px) {
    .qp-payment-grid[b-eiev38g5fs] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.qp-payment-card[b-eiev38g5fs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.65rem 0.4rem;
    border: 2px solid #ddd;
    border-radius: 0.5rem;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    user-select: none;
}

.qp-payment-card:hover[b-eiev38g5fs] {
    border-color: var(--ces-primary);
    background: #f4f8fd;
}

.qp-payment-card--selected[b-eiev38g5fs] {
    border-color: var(--ces-primary);
    background: #eaf2fb;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ces-primary) 18%, transparent);
}

.qp-payment-label[b-eiev38g5fs] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #444;
    text-align: center;
    line-height: 1.2;
}

.qp-payment-card--selected .qp-payment-label[b-eiev38g5fs] {
    color: var(--ces-primary);
}

/* ── Detail sub-form ──────────────────────────────────────────────────────── */

.qp-detail-form[b-eiev38g5fs] {
    padding: 0.75rem 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
    background: #fafafa;
}