/* latin */
@font-face {
    font-family: 'Hepta Slab';
    font-style: normal;
    font-weight: 1 900;
    font-display: swap;
    src: 'fonts/heptaslab.woff2';
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: 'fonts/inter.woff2';
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@import url('https://fonts.cdnfonts.com/css/arial');

button:focus {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

a:focus {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

h1:focus {
    outline: none !important;
}

.main-logo {
    content: var(--logo-image);
}

.secondary-logo {
    content: var(--logo2-image);
}


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

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

.validation-message {
    color: #e50000;
}

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

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

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

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

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/*
    MudBlazor z-index help
    Drawer: 1100
    Popover : 1200
    AppBar: 1300
    Dialog: 1400
    Snackbar: 1500
    Tooltip: 1600

    https://themes.arctechonline.tech/
*/

.rounded-left {
    border-radius: 16px 0 0 16px;
}

.rounded-right {
    border-radius: 0 16px 16px 0;
}

.rounded-top {
    border-radius: 16px 16px 0 0;
}

.rounded-bottom {
    border-radius: 0 0 16px 6px;
}

.rounded-mx {
    border-radius: var(--mud-default-borderradius);
}

.rounded-10 {
    border-radius: 20px;
}

/* Cookies */
.cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1400;
}

/* Spinner */
.overlay-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1402; /* Ensure the spinner is on top of the content */
}

.overlay-spinner-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-color: rgba(0, 0, 0, 0.1);*/
    z-index: 1401; /* Behind the spinner but on top of everything else */
}

.background-blur-1 {
    backdrop-filter: blur(10px);
}

/* Language Selector */
.selected-language {
    background-color: rgba(0, 0, 0, 0.12); /* Slightly darker version of the default background color */
    color: inherit; /* Keep the same text color */
}

/* Header */
.header-basket {
    color: var(--mud-palette-primary-text);
}

a.header-basket {
    color: var(--mud-palette-primary-text);
}

    a.header-basket:hover {
        color: var(--mud-palette-primary-text) !important;
    }

.header-basket h4 {
    color: var(--mud-palette-primary-text) !important;
}

.header-basket p {
    color: var(--mud-palette-primary-text) !important;
}

.extra-padding {
    padding-top: 44px !important;
}

.product.extra-padding {
    padding-top: 30px !important;
    padding-left: 30px !important;
    padding-bottom: 5px !important;
}


.logo-responsive {
    height: auto;
    max-width: var(--logo-max-width);
}

.logo-responsive-long {
    height: auto;
    max-width: var(--logo-long-max-width);
}

/* Navigation */
.nav-links a {
    color: var(--mud-palette-primary-text);
    font-size: 1.1rem;
    font-weight: 500;
    text-transform: uppercase;
    margin: 0 15px;
    text-decoration: none;
}

    .nav-links a:hover {
        text-decoration: underline;
    }


/* Footer */
@media (max-width: 600px) {
    .e2e-footer {
        min-height: 155px;
        height: auto;
        overflow: hidden;
        margin: 0;
        padding: 3.1rem 1rem;
    }
}

/* Example for larger screens */
@media (min-width: 600px) {
    .e2e-footer {
        height: 80px;
        padding-top: 0.5rem;
    }
    .sales-agreement-group {
        align-items: center;
        margin-bottom: 40px;
    }
}

@media (min-width: 601px) {
    .statusmessage {
        width: 98%;
    }

    .checkout-subtext {
        margin-left: 48px;
        margin-top: -73px;
        margin-bottom: 40px;
    }
    .checkout-subtext-kiosk {
        margin-left: 58px;
        margin-top: -73px;
        margin-bottom: 40px;
    }
}

@media (max-width: 600px) {
    .basket-content-checkout {
        display: flex;
        flex-direction: column-reverse;
        margin-bottom: 40px;
    }

    .basket-content-details {
        display: flex;
        flex-direction: column;
    }

    .basket-lines {
        order: 1;
    }

    .basket-payments {
        order: 3;
    }

    .basket-vouchers {
        order: 2;
    }

    .sales-agreement {
        margin: -15px 0 0 48px !important;
    }

    .sales-agreement-group {
        flex-direction: column;
    }

    .checkout-mobile {
        padding-bottom: 175px !important;
    }

    .mud-top-end-override {
        left: 10px !important;
        right: 10px !important;
    }

    .mud-picker-content {
        flex-direction: unset;
    }

    .statusmessage {
        width: 90%;
    }

    .mud-popover:has(.mud-picker) {
        position: fixed !important;
        top: 20px !important;
        bottom: 20px !important;
        overflow: auto !important;
        max-height: unset !important;
        left: 19px !important;
        right: 19px !important;
    }

    .product-extended {
        flex-direction: column;
    }

        .product-extended > div {
            max-width: 100%;
        }

    .checkout-subtext {
        margin-left: 48px;
        margin-top: -23px;
        margin-bottom: 40px;
    }  
}



.e2e-footer {
    background: var(--footer-background) !important;
    color: var(--mud-palette-primary-text);
    background-size: contain;
}

footer a:focus, header a:focus {
    outline: 2px solid white;
}
/* Main content */
.main-content {
    min-height: 83vh !important;
}


/* Products */
.product-unavailable {
    opacity: 0.4;
}
.product-overview {
    padding: 20px;
}

.product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-description {
    color: var(--mud-palette-dark-lighten);
    opacity: .6;
}

.product-category-card-header {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-info-text);
}

.product-loading {
    background-color: var(--mud-palette-primary);
    opacity: 0.3;
}

.product-title {
    hyphens: auto;
    /*    word-break: break-word;
    overflow-wrap: break-word;*/
}


/* Banners */

.banner-top {
    position: sticky;
    transition: top 0.4s ease-in-out;
    height: 11vh;
    width: 100%;
    z-index: 1350; /*Between the appbar and dialog. On top of the appbar, below the dialog*/
    background-color: var(--mud-palette-primary);
}

    .banner-top.banner-visible {
        top: 0;
        left: 0;
    }

    .banner-top.banner-hidden {
        top: -15vh; /* hide it completely offscreen */
    }

.banner-bottom {
    position: sticky;
    transition: bottom 0.4s ease-in-out;
    height: 15vh;
    width: calc(100% - 1rem);
    z-index: 1350; /*Between the appbar and dialog. On top of the appbar, below the dialog*/
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

    .banner-bottom.banner-visible {
        bottom: 0;
        left: 0;
    }

    .banner-bottom.banner-hidden {
        margin-top: 10vh;
        bottom: 0;
    }

/* Basket */
.basket-container {
    display: flex;
    width: 100%;
    align-items: stretch;
}

.basket-content {
    flex: 1 1 auto;
    min-width: 0; /* Prevents flex overflow weirdness */
}

.basket-text {
    margin-top: 3px;
}


.delete-vertical-button {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    /* transform: rotate(180deg); */
    border-radius: 0;
    padding: 1rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto; /* will match the height of MudPaper since it's flex */
}




/* Payments */

.kiosk-payment-page {
    min-height: 80vh !important;
    min-width: 90vw !important;
}

.kiosk-payment-details {
    margin-top: 4% !important;
    min-height: 80vh !important;
}

.kiosk-text .mud-alert-icon svg {
    width: 40px;
    height: 40px;
    margin-top: 10px !important;
}

.payment-minheight {
    min-height: 80vh;
}

.checkout-minheight {
    min-height: 65vh;
}


.checkout-minheight-kiosk {
    min-height: 90vh;
}

.checkout-minheight-padding {
    padding-bottom: 195px !important;
}

.absolute-bottom {
    bottom: 20px;
    right: 20px;
    left: 0px
}

.kiosk-absolute-bottom {
    bottom: 10px;
    right: 20px;
    left: 0px
}

.payment-details {
    min-height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box-shadow {
    box-shadow: red;
    -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.29);
    -moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.29);
    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.15);
}


.list-item-bordered {
    border-bottom: 1px solid #f1f1f1;
}

.site-background {
    background-image: var(--background-image);
    background-position: bottom center;
    background-size: contain;
}

/* Quill overrides */

.ql-container {
    border-radius: 0 0 16px 16px;
    border: 1px solid var(--mud-palette-lines-default, #ccc);
    font-family: var(--mud-typography-default-font-family, Roboto), sans-serif;
    box-shadow: var(--mud-elevation-1);
    background-color: var(--mud-palette-surface, #fff);
    transition: border 0.3s ease;
}

.ql-editor {
    min-height: 200px;
    padding: 16px;
    font-size: 1rem;
    color: var(--mud-palette-text-primary, #212121);
}

.ql-toolbar {
    border-radius: 16px 16px 0 0;
    background-color: var(--mud-palette-background-grey, #f5f5f5);
    border: 1px solid var(--mud-palette-lines-default, #ccc);
    border-bottom: none;
}

/* SPLASH */
.mud-splash-screen-overlay-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    margin: 0;
    position: fixed;
}

.mud-splash-screen-overlay-loaded {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    margin: 0;
    position: fixed;
    opacity: 0;
    transition: visibility 1s,opacity 1s linear;
}

.mud-splash-screen-body-loading {
    opacity: 0;
    transition: visibility 1s,opacity 1s linear;
}

.mud-splash-screen-body-loaded {
    visibility: visible;
    opacity: 1;
    transition: opacity 1s linear;
}

.payter-cancel {
    font-weight: bold;
    min-width: 200px;
}

.basket-mobile-banner {
    margin-left: -19px !important;
}

.mud-top-end-override {
    right: 10px;
}


/* Unsorted stuff */



.openinghours-popover {
    max-width: 400px;
    min-height: 408px;
    max-height: 408px;
}

.openinghours-popover-small {
    /*max-width: unset !important;*/
    max-height: unset !important;
    min-height: unset !important;
}



.overlay-popover {
    z-index: 1450 !important; /* Above all dialogs, but below the snackbar and tooltips*/
}

/* Status Message */
.statusmessage {
    z-index: 1350; /* Above the appbar, below dialog, snackbar and tooltips*/
}


.product-extended {
    width: calc(100% + 48px);
    padding-right: 24px;
    padding-bottom: 24px;
}


.light-background {
    background-color: var(--light-color);
}


/* Date selector */

.date-selection-title {
    font-size: 1.8em;
}

.date-selection-input > div > div > fieldset {
    border: 2px solid var(--mud-palette-appbar-background) !important;
    background-color: white;
    z-index: 0;
}

.date-selection-input > div > div > input {
    font-size: 1.2em !important;
    z-index: 1;
}

.date-selection-input > div > div > .mud-input-adornment {
    z-index: 1;
}

    .date-selection-input > div > div > .mud-input-adornment button svg {
        fill: var(--mud-palette-primary) !important;
    }



.kiosk-text {
    font-size: 1.7rem !important;
}

.kiosk-text-large {
    font-size: 2.1rem !important;
}

.kiosk-text-title {
    font-size: 2.4rem !important;
}

.kiosk-icon {
    font-size: 1.7rem !important;
}

.kiosk-icon-large {
    font-size: 2.5rem !important;
}

.kiosk-text-extralarge {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
    font-size: 4.5rem !important;
}

.kiosk-text > div > div > input {
    font-size: 2.1rem !important;
    height: 55px !important;
}

.kiosk-button {
    padding: 30px;
}

.kiosk-text .mud-input-control-input-container > label {
    font-size: 1.7rem !important;
    overflow: unset !important;
}

.kiosk-text .mud-input-error {
    font-size: 1.4rem !important;
}

.kiosk-date-picker {
    transform: scale(2.4);
    margin: 15%
}

.kiosk-page-zoom {
    transform: scale(1.5);
    margin: 3.5% 25%
}




.kiosk-text .mud-dialog-title .mud-button-close > span > svg {
    height: 4em !important;
    width: 4em !important;
}

.kiosk-text .mud-popover-provider .mud-popover-open .mud-list .mud-list-item .mud-list-item-text > p {
    font-size: 1.5rem !important;
}

.kiosk-text .mud-top-end-override {
    font-size: 2.1rem !important;
}

    .kiosk-text .mud-top-end-override .mud-snackbar {
        max-width: 50vw !important;
    }

        .kiosk-text .mud-top-end-override .mud-snackbar .mud-snackbar-icon {
            transform: scale(2.1);
            margin-right: 4% !important;
            margin-left: 4% !important;
        }

        .kiosk-text .mud-top-end-override .mud-snackbar .mud-snackbar-content-message {
            margin-right: 4% !important;
            margin-left: 4% !important;
        }

        .kiosk-text .mud-top-end-override .mud-snackbar .mud-snackbar-content-action {
            transform: scale(2.1);
            margin-right: 4% !important;
            margin-left: 4% !important;
        }



.kioskboard-key-enter {
    font-size: 28px !important;
    width: 90px !important;
    height: 72.4px !important;
    align-content: center;
    align-items: center;
}

.btn-fallback-finalize {
    position:fixed;
    top: 75%
}

.fallback-padding {
    padding: 24px 30px !important
}
.mud-main-content:has(.statusmessage) .page-view {
    margin-top: 5rem;
}
.statusmessage > .mud-alert-position > .mud-alert-message {
    margin-top: 8px; /* Or use margin-left, margin: 10px, etc. */
}

/* FAC2-1614: the places left in a timeslot. The pill is a MudButton, which uppercases and spaces its label. */
.timeslot-availability,
.timeslot-availability * {
    text-transform: none;
    letter-spacing: normal;
}

.timeslot-availability-bar {
    max-width: 240px;
}


/* =============================================================================
   e2e brand styling: the house style of the Blazor till and backoffice (tenant 1104, Facilitator Demo).
   MainLayout puts .e2e-brand on the MudLayout when TenantLayoutMap.HasE2eBrand; the colours and type come
   from TenantLayouts.E2eBrandTheme. The literals below are the logo's own colours, the white overlays on the
   chrome bar and the till's shadow, as in the backoffice app.css and the till's pos.css.
   The tenant CSS (tapp.css) loads after this file but only sets :root variables, which .e2e-brand overrides.
   ========================================================================== */
.e2e-brand {
    --e2e-lime: #8dc63f;
    --e2e-teal: #1795a6;
    --e2e-lime-on-dark: #a3d95c;
    --e2e-teal-on-dark: #57c9d8;
    --e2e-radius-lg: 10px;
    --e2e-shadow-md: 0 2px 8px rgba(16, 32, 37, .08);
    --e2e-shadow-lg: 0 8px 24px rgba(16, 32, 37, .12);
    /* the tenant CSS variables */
    --light-color: #e4f2f3; /* till primary-tint */
    --background-image: none;
    --footer-background: var(--mud-palette-appbar-background);
    /* bootstrap markup inside the pages */
    --bs-body-font-family: var(--mud-typography-default-family);
    --bs-border-color: var(--mud-palette-lines-inputs);
    --bs-link-color-rgb: 15, 111, 114;
    --bs-link-hover-color-rgb: 10, 80, 82;
    font-family: var(--mud-typography-default-family);
    color: var(--mud-palette-text-primary);
}

/* --- top bar: the till's chrome bar with the login's lime-into-teal hairline --- */
.e2e-brand .mud-appbar:not(.e2e-footer) {
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .1);
}

    .e2e-brand .mud-appbar:not(.e2e-footer)::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--e2e-lime) 0%, var(--e2e-lime) 45%, var(--e2e-teal) 55%, var(--e2e-teal) 100%);
        pointer-events: none;
    }

    .e2e-brand .mud-appbar .mud-button-root:hover {
        background-color: rgba(255, 255, 255, .12);
    }

.e2e-topbar__brand {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

    .e2e-topbar__brand:hover,
    .e2e-topbar__brand:focus {
        color: inherit;
        text-decoration: none;
    }

/* --- the end2end lockup (kauth e2e.css) --------------------------------------- */
.e2e-lockup {
    display: inline-flex;
    align-items: center;
    gap: .1em;
    font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.015em;
    white-space: nowrap;
}

.e2e-mark {
    display: inline-block;
    flex: none;
    width: 1.14em;
    height: 1em;
}

.e2e-mark__svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* On the dark chrome both halves step up a tint, or the teal one sinks into it. */
.e2e-mark__half--l {
    fill: var(--e2e-lime-on-dark);
}

.e2e-mark__half--r {
    fill: var(--e2e-teal-on-dark);
}

/* --- footer: the same chrome, the hairline on top ----------------------------- */
.e2e-brand .e2e-footer {
    /* app.css fixes the footer at 80px; with the lockup the stacked columns need more on a tablet */
    height: auto;
    min-height: 80px;
    padding-top: .75rem;
    padding-bottom: .75rem;
    box-shadow: none;
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--e2e-lime) 0%, var(--e2e-lime) 45%, var(--e2e-teal) 55%, var(--e2e-teal) 100%) 1;
}

    /* Mud's toolbar is one bar high; let it grow with the stacked columns instead of padding around it. */
    .e2e-brand .e2e-footer .mud-toolbar {
        height: auto;
        min-height: var(--mud-appbar-height);
    }

    .e2e-brand .e2e-footer .e2e-lockup {
        margin-right: .75rem;
        font-size: 20px;
        vertical-align: middle;
    }

    .e2e-brand .e2e-footer a {
        text-underline-offset: 3px;
    }

/* --- panels: the till's card, 10px radius, hairline border, a soft shadow ------ */
.e2e-brand .rounded-10 {
    border-radius: var(--e2e-radius-lg);
}

.e2e-brand .box-shadow {
    box-shadow: var(--e2e-shadow-md);
}

.e2e-brand .product-category-card {
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: var(--e2e-shadow-md);
}

.e2e-brand .product-category-card-header {
    color: var(--mud-palette-primary-text);
}

.e2e-brand .product-description {
    color: var(--mud-palette-text-secondary);
    opacity: 1;
}

.e2e-brand .mud-dialog {
    box-shadow: var(--e2e-shadow-lg);
}