@import '_content/AuralizeBlazor/AuralizeBlazor.tf5u2o3oxg.bundle.scp.css';
@import '_content/Nextended.Blazor/Nextended.Blazor.tkxqvq0zjw.bundle.scp.css';
@import '_content/WSMudBlazorLib/WSMudBlazorLib.f2fmm27r40.bundle.scp.css';

/* _content/WSRetail/Pages/Cart/ShoppingCart.razor.rz.scp.css */
/* Wrapper div gives ::deep a real DOM anchor to scope beneath, since
   MudCard/MudCardHeader/MudGrid are library components, not native
   elements (see NavMenuHorizontal.razor.css for the same pattern). */
.shopping-cart-page[b-cbwo6yw497] {
    display: block;
}

[b-cbwo6yw497] .cart-header .mud-chip {
    white-space: nowrap;
}

/* AddItemToCart's own grid uses fixed xs= column widths (xs="1" for
   Qty, etc.) tuned for a single desktop row, plus negative my-n8/
   my-n4 margin utilities (both use !important) to pull that row
   tight. The cart switches to card view (see ShoppingCart.razor.cs
   OnBpChanged) at MudBlazor's Sm breakpoint, which spans 600-959px,
   not just true phone widths, so this query has to match that same
   959px cutoff - otherwise AddItemToCart is still unhidden (below)
   using its cramped desktop layout in the 600-960px gap.

   Rather than stacking every field onto its own full-width row
   (which just moves the negative-margin collision problem down a
   level), this pairs Qty+Price and Add+Clear onto shared rows by
   targeting their specific xs- column classes directly - that cuts
   two rows of vertical space and matches how the fields are used in
   practice (Qty/Price are read together; Add/Clear are the same
   action pair).

   IMPORTANT: every selector below uses a '>' child combinator chain
   (wrapper > .mud-grid > .mud-grid-item-xs-N) instead of a bare
   descendant selector. AddItemToCart's first item embeds
   CartProductAC, which renders its OWN nested MudGrid with two of
   its own xs="12" items (the autocomplete and the Scan switch,
   meant to stack). A bare "::deep .cart-add-item-wrapper
   .mud-grid-item-xs-12" also matches those nested items and forces
   them to 50% width, sitting the Scan switch beside the product
   dropdown instead of below it - the child-combinator form only
   reaches the outer grid's own direct items. Specificity (wrapper
   class + Blazor scope attribute + two child combinators + the xs-
   class) still safely beats the plain single-class MudBlazor
   utility rules being overridden, both using !important. */
/* .cart-add-item-wrapper is a plain <div> with no border/padding/
   overflow, so the Add/Clear button row's negative bottom margin
   (AddItemToCart.razor, Class="my-n4" => margin-bottom: -16px
   !important) collapses straight through the wrapper's own bottom
   edge under normal CSS margin-collapse rules. That pulls the
   wrapper's effective bottom edge up into the Add/Clear row itself,
   so the <MudDivider Class="my-2" /> that immediately follows this
   wrapper in ShoppingCart.razor lands with its own box positioned
   inside the button row's vertical span instead of below it -
   visually reading as a thin line running through the Add/Clear
   buttons and on across the rest of the card. Confirmed via
   getBoundingClientRect(): the divider's top/bottom (216.75/217.75)
   sat squarely within the buttons' own top/bottom (194/224.75).
   display: flow-root establishes a new block formatting context,
   which stops the child's margin from collapsing through - unlike
   overflow: hidden, it does this without clipping the product
   Autocomplete's suggestion popover, which needs to overflow past
   the wrapper by design. The negative margins are unconditional (not
   just inside the mobile media query below), and the bug was
   reported in desktop view, so this rule applies at every width.

   flow-root alone isn't enough, though: AddItemToCart's root element
   is a MudGrid, which renders as display:flex/flex-wrap:wrap, not a
   plain block box, so this isn't really a block margin-collapse case
   at all - flow-root only stops that. Measured live: the flex
   container's own box ends at the same y as before (e.g. 208.75px),
   but the Add/Clear MudItem's negative bottom margin (my-n4 =>
   -16px) still makes its actual rendered box extend 16px past that
   (224.75px) - the flex container's height calculation used the
   item's margin box, which the negative margin shrinks below the
   item's real rendered size, so the item pokes out past the
   container's calculated edge with nothing to stop it. The fix is to
   give the wrapper back that same 16px as padding-bottom, so the
   next sibling (the MudDivider) is positioned far enough down to
   clear the overflow instead of landing inside it. */
/* The header (cart icon + customer name + Items/Total chips) sits
   immediately above this wrapper with no gap of its own. MudBlazor's
   MudGrid applies a built-in negative top margin as its column-
   spacing compensation (confirmed via getComputedStyle: -24px here),
   which - just like the Add/Clear row's negative bottom margin below
   - isn't contained by this wrapper (a plain div), so the grid's
   rendered content pokes up 24px above the wrapper's own top edge and
   overlaps the header row above it (measured live: the Product
   input's floating-label box started at the same y as the header's
   icon/text, reading as visually crowded/overlapping). padding-top
   reclaims that space the same way padding-bottom does below, plus a
   bit of extra breathing room so there's a clear, deliberate gap
   between the header and the product dropdown rather than just no
   overlap. */
[b-cbwo6yw497] .cart-add-item-wrapper {
    display: flow-root;
    padding-top: 40px;
    padding-bottom: 16px;
}

@media (max-width: 959px) {
    [b-cbwo6yw497] .cart-add-item-wrapper > .mud-grid > .mud-grid-item {
        margin-top: 2px !important;
        margin-bottom: 2px !important;
    }

    /* Autocomplete (xs=6), image (xs=6), and the Prod name field
       (xs=4) each keep their own full-width row. */
    [b-cbwo6yw497] .cart-add-item-wrapper > .mud-grid > .mud-grid-item-xs-6,
    [b-cbwo6yw497] .cart-add-item-wrapper > .mud-grid > .mud-grid-item-xs-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Qty (xs=1) and Price (xs=2) share one row. */
    [b-cbwo6yw497] .cart-add-item-wrapper > .mud-grid > .mud-grid-item-xs-1,
    [b-cbwo6yw497] .cart-add-item-wrapper > .mud-grid > .mud-grid-item-xs-2 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* Add and Clear (both xs=12 md=1 - the only xs=12 fields at the
       OUTER grid level) share one row instead of stacking. */
    [b-cbwo6yw497] .cart-add-item-wrapper > .mud-grid > .mud-grid-item-xs-12 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* The Items/Total chips in the header sit right above this
       wrapper and, once the header itself stacks vertically on
       mobile (see the MudStack Row="!_isMobile" above), there isn't
       enough room before the product autocomplete's floating
       Outlined label - it visually collides with the chips above
       it. This is the same MudGrid built-in negative top margin
       (-24px) as the desktop fix above, compounded by further
       negative margins nested inside CartProductAC (my-n4/my-n6),
       which together pull the visible fieldset/label up 38px above
       this wrapper's own top edge on mobile (confirmed live via
       getBoundingClientRect: fieldset top 174px vs. header bottom
       192px - an 18px overlap at the old margin-top: 20px). Unlike
       the desktop rule, mobile uses margin-top rather than
       padding-top here because the header's own height differs
       (stacked chips add height only on mobile), so the clearance
       has to move with it rather than being a fixed reclaim amount.
       54px = the old 20px plus the 34px needed to clear that 38px
       internal offset with a clean ~16px gap below the header. */
    [b-cbwo6yw497] .cart-add-item-wrapper {
        margin-top: 54px;
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* Mobile card view (used instead of MudTable below the Sm breakpoint) */
[b-cbwo6yw497] .cart-card {
    display: flex;
    flex-direction: column;
    width: 100%;
}

[b-cbwo6yw497] .cart-card-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* _content/WSRetail/Pages/Components/TopNewProduct.razor.rz.scp.css */
.top-new-product-wrapper[b-j7avdifv3t] {
    position: relative;
    display: inline-block;
    cursor: pointer;
    overflow: hidden;
}

.new-ribbon[b-j7avdifv3t] {
    position: absolute;
    top: 14px;
    right: -34px;
    width: 120px;
    padding: 3px 0;
    background-color: var(--mud-palette-info, #2196f3);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(45deg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}
/* _content/WSRetail/Pages/Index.razor.rz.scp.css */
/* MudCarousel/MudItem/MudImage render their own root elements, so plain
   scoped selectors here never match them (Blazor only stamps its scope
   attribute on elements Index.razor renders directly). ::deep tells Blazor
   to reach into child components' markup instead - required for every rule
   below. ::deep also needs a native HTML ancestor to anchor to, which is
   what the <div class="index-page"> wrapper around the page body is for. */

/* Hero carousel default (desktop/tablet) height */
[b-2hm6xnyin1] .hero-carousel {
    height: 500px;
}

/* Hero carousel image default (desktop/tablet) size - same values the
   inline Style used to set before being moved here so it can vary by
   breakpoint */
[b-2hm6xnyin1] .hero-carousel-image {
    max-width: 420px;
    max-height: 400px;
}

@media (max-width: 599.98px) {
    /* Show the hero carousel + contact info before the promo shortcut
       buttons on phones, without changing the desktop layout order */
    [b-2hm6xnyin1] .mobile-order-1 {
        order: -1;
    }

    /* Shrink the hero carousel so it doesn't dominate a phone screen */
    [b-2hm6xnyin1] .hero-carousel {
        height: 260px;
    }

    /* Shrink the image to match, and tighten its margin - it was
       overflowing the shrunk carousel and getting clipped */
    [b-2hm6xnyin1] .hero-carousel-image {
        max-width: 300px;
        max-height: 230px;
        margin: 8px;
    }

    /* Lay the 4 shortcut buttons out 2-up instead of stacking them */
    [b-2hm6xnyin1] .promo-links {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-items: center;
        gap: 8px;
    }

    [b-2hm6xnyin1] .promo-links img {
        width: 100% !important;
        max-width: 150px;
        height: auto !important;
    }

    /* Hide the carousel's bullet/dot pagination row on phones - it's a
       direct child of the carousel section, alongside the slides */
    [b-2hm6xnyin1] .hero-carousel > .d-flex.flex-grow-1.align-self-auto {
        display: none !important;
    }
}

@media (max-width: 375px) {
    [b-2hm6xnyin1] .hero-carousel {
        height: 220px;
    }

    [b-2hm6xnyin1] .hero-carousel-image {
        max-width: 260px;
        max-height: 190px;
    }
}
/* DNR / River Levels buttons: only rendered below MudBlazor's md
   breakpoint (960px - see Breakpoint.MdAndUp on the wrapping MudHidden
   in Index.razor), laid out side by side and centered instead of
   stacking full-width */
@media (max-width: 959.98px) {
    [b-2hm6xnyin1] .mobile-dnr-river {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 16px;
    }
}
/* _content/WSRetail/Pages/Product/Brand.razor.rz.scp.css */

/* Brand.razor's top-level markup is just a bare <MudGrid> (a MudBlazor
   component, not a native element), so every ::deep selector below needs
   the <div class="brand-page"> wrapper in Brand.razor as a native scope
   anchor - same pattern used for Index.razor/Category.razor. The three
   rules below pre-date that wrapper and were passing a Class into MudBadge
   without ::deep, so they were silently dead against the compiled
   scope attribute; fixed here rather than removed since .sale-badge is
   still used in the markup (.img-wrap/.sale-overlay are not currently
   referenced by any markup in this file, but are harmless to keep). */

.img-wrap[b-mo31g3lfdu] {
    position: relative;
    display: inline-block;
}

[b-mo31g3lfdu] .sale-overlay {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    background: #d32f2f;
    color: white;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    pointer-events: none;
}

[b-mo31g3lfdu] .sale-badge .mud-badge {
    font-weight: 800;
    letter-spacing: .55em;
}

/* Product card grid: was a fixed-width 300px card in an unsized MudItem
   that just auto-wrapped; now the MudItem carries real responsive
   breakpoints (xs=12 sm=6 md=4 lg=3) and the card centers/caps itself
   within whatever column width that produces. */
[b-mo31g3lfdu] .product-grid-item {
    justify-content: center;
}

[b-mo31g3lfdu] .product-card {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    border-radius: 12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

[b-mo31g3lfdu] .product-card:hover {
    transform: translateY(-4px);
}

/* Replaces the old "~" placeholder-character height hack: a consistent
   min-height on the description keeps card heights uniform regardless of
   how long the text is, without measuring string length in code. */
[b-mo31g3lfdu] .product-description {
    display: block;
    min-height: 48px;
}

/* MudTable's grid/list view: with Virtualize + a wide, non-collapsing set of
   columns, the table's intrinsic content width exceeds the mobile viewport
   and, unwrapped, drags the whole page into horizontal scroll. Wrapping
   just the table in its own horizontally-scrollable container contains
   that overflow to the table itself - same fix applied to Category.razor. */
[b-mo31g3lfdu] .table-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Cart/Notify/Wishlist buttons previously all carried a flat Class="mt-6"
   (48px top margin each), creating a big, uneven gap between the qty field
   and the action buttons. Replaced with a proper divider + modest spacing
   on the actions container itself instead of a per-button margin hack. */
[b-mo31g3lfdu] .product-card-actions {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    align-items: center;
}

/* Table/grid-view "Add" cell: was 2-3 MudFabs each carrying the same mt-6
   hack, stacked with no explicit layout. Now a plain flex row so they sit
   evenly spaced and wrap instead of overflowing. This div is authored
   natively in Brand.razor (not a Class passed into a Mud component), so
   it does not need ::deep. */
.row-actions[b-mo31g3lfdu] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 4px;
}

/* Table view's toolbar (title + card/table toggle buttons on row 1,
   search + pager on row 2, see .brand-toolbar in Brand.razor) is two rows
   tall (~140px), but MudBlazor's .mud-table-toolbar is a fixed 64px with
   align-items:center, so the taller content overflowed 38px ABOVE the
   toolbar, pushing the title and the switch-back-to-card-view button up
   underneath the fixed app bar (confirmed live: button top 50px vs. a 48px
   app bar bottom on desktop; worse on mobile where the content wraps
   further). Letting the toolbar grow to fit its content, top-aligned with a
   little padding, keeps the whole toolbar on-screen below the app bar. */
[b-mo31g3lfdu] .mud-table-toolbar {
    height: auto !important;
    min-height: 64px;
    align-items: flex-start !important;
    padding-top: 8px;
    padding-bottom: 8px;
}
/* _content/WSRetail/Pages/Product/Category.razor.rz.scp.css */
/* Category.razor's top-level markup is just a bare <MudGrid> (a MudBlazor
   component, not a native element), so every ::deep selector below needs
   the <div class="category-page"> wrapper in Category.razor as a native
   scope anchor - same pattern used for Index.razor's carousel work. */

/* Product card grid: was a fixed-width 300px card in an unsized MudItem
   that just auto-wrapped; now the MudItem carries real responsive
   breakpoints (xs=12 sm=6 md=4 lg=3) and the card centers/caps itself
   within whatever column width that produces. */
[b-320qme9at6] .product-grid-item {
    justify-content: center;
}

[b-320qme9at6] .product-card {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    border-radius: 12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

[b-320qme9at6] .product-card:hover {
    transform: translateY(-4px);
}

/* Replaces the old "~" placeholder-character height hack: a consistent
   min-height on the description keeps card heights uniform regardless of
   how long the text is, without measuring string length in code. */
[b-320qme9at6] .product-description {
    display: block;
    min-height: 48px;
}

/* MudTable's grid/list view: with Virtualize + a wide, non-collapsing set of
   columns (image, num, description, price, qty, actions...), the table's
   intrinsic content width exceeds the mobile viewport and, unwrapped, drags
   the whole page into horizontal scroll (the header, menu, everything shifts
   right). Confirmed live: switching to grid view at 375px pushed
   document.documentElement.scrollWidth to 549px. Wrapping just the table in
   its own horizontally-scrollable container contains that overflow to the
   table itself, matching the standard responsive-table pattern. */
[b-320qme9at6] .table-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Cart/Notify/Wishlist buttons previously all carried a flat Class="mt-6"
   (48px top margin each), creating a big, uneven gap between the qty field
   and the action buttons - they read as tacked on rather than part of the
   card/row. Replaced with a proper divider + modest spacing on the actions
   container itself instead of a per-button margin hack. */
[b-320qme9at6] .product-card-actions {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    align-items: center;
}

/* Table/grid-view "Add" cell: was 2-3 MudFabs each carrying the same mt-6
   hack, stacked with no explicit layout. Now a plain flex row so they sit
   evenly spaced and wrap instead of overflowing when both Cart/Notify and
   Wishlist are present. This div is authored natively in Category.razor
   (not a Class passed into a Mud component), so it does not need ::deep. */
.row-actions[b-320qme9at6] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 4px;
}
/* _content/WSRetail/Pages/Product/CategoryScroll.razor.rz.scp.css */
/* _content/WSRetail/Shared/CatMenuDb.razor.rz.scp.css */

.scroll-container[b-3jta9jn8jp] {
    width: 100%;
    height: 50vh;
    overflow-y: auto;
    border: 1px solid var(--mud-palette-lines-default, #ccc);
    border-radius: 8px;
    padding: 10px;
}

/* For mobile screens (max width 600px) */
@media (max-width: 599.98px) {
    .scroll-container[b-3jta9jn8jp] {
        height: 280px;
    }
}

@keyframes pulse-b-3jta9jn8jp {
    0%,100% {
        opacity: 1;
    }

    50% {
        opacity: .35;
    }
}

.pulse[b-3jta9jn8jp] {
    animation: pulse-b-3jta9jn8jp 1.2s ease-in-out infinite;
}
/* _content/WSRetail/Shared/CatMenuDb_obsolete.razor.rz.scp.css */
.scroll-container[b-h0e7mwv8ry] {
    width: 300px;
    height: 400px; /* Default height for desktop */
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 10px;
}

/* For mobile screens (max width 600px) */
@media (max-width: 600px) {
    .scroll-container[b-h0e7mwv8ry] {
        height: 200px; /* Smaller height on mobile */
    }
}
/* _content/WSRetail/Shared/Components/CatMenuDbExpander.razor.rz.scp.css */

.scroll-container[b-e3bx81g25a] {
    width: 300px;
    height: 400px; /* Default height for desktop */
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 10px;
}

/* For mobile screens (max width 600px) */
@media (max-width: 600px) {
    .scroll-container[b-e3bx81g25a] {
        height: 200px; /* Smaller height on mobile */
    }
}

@keyframes pulse-b-e3bx81g25a {
    0%,100% {
        opacity: 1;
    }

    50% {
        opacity: .35;
    }
}

.pulse[b-e3bx81g25a] {
    animation: pulse-b-e3bx81g25a 1.2s ease-in-out infinite;
}

/* _content/WSRetail/Shared/DefaultLayout.razor.rz.scp.css */
.layout-bg[b-fi9dj6xbk3] {
    background-image: url('/Images/b2b/STORYBOARD/river_pic.jpg');
    background-size: cover;
    background-position: center;
    min-height: 100vh;
}

.content-bg[b-fi9dj6xbk3] {
    background: rgba(0, 0, 0, 0.5); /* Dark overlay for readability */
    color: white;
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
}
/* _content/WSRetail/Shared/NavMenuHorizontal.razor.rz.scp.css */
/* NavMenuHorizontal.razor's real content (the "else" branch) is a bare
   <MudAppBar>/<MudExpansionPanels> - MudBlazor components, not native
   elements this file authors directly - so every ::deep selector below
   needs the <div class="nav-menu-horizontal"> wrapper in
   NavMenuHorizontal.razor as a native scope anchor, same pattern used for
   Index/Category/Brand. This file replaces the old unscoped <style> block
   that used to live directly in the .razor markup, and gives the nav's
   black background a single source of truth instead of three separate
   hardcoded "background-color: black" declarations (this variable, plus
   what used to be inline Style attributes on MudAppBar and
   MudExpansionPanels). */

.nav-menu-horizontal[b-1ebq406t9a] {
    --nav-bg-color: #000;
}

[b-1ebq406t9a] .mud-appbar {
    background-color: var(--nav-bg-color);
}

[b-1ebq406t9a] .mud-expansion-panels {
    background-color: var(--nav-bg-color);
}

[b-1ebq406t9a] .mud-expand-panel,
[b-1ebq406t9a] .muudstrap-navbar-expand {
    color: var(--mud-palette-appbar-text);
    background-color: var(--nav-bg-color);
}

/* These two rules previously targeted ".muudstrap-navbar", a class that
   doesn't exist anywhere in this component's markup, so they never matched
   anything. The class actually applied to the mobile menu's content div is
   "muudstrap-navbar-expand" (see NavMenuHorizontal.razor) - fixed here. */
[b-1ebq406t9a] .muudstrap-navbar-expand .mud-button {
    text-transform: none;
}

[b-1ebq406t9a] .muudstrap-navbar-expand .mud-expand-panel-header {
    padding: 0px;
    width: 100%;
    height: 100%;
    flex: none;
}