.b-loading-cell {
    background-image    : url('./images/vertex-icon.svg');
    background-size     : auto 2em;
    background-repeat   : no-repeat;
    background-position : calc(100% - 1em);
    filter              : grayscale(100%);
}

.b-loading-cell {
    animation : pulsate 1s infinite;

    &::after {
        display : none;
    }
}

@keyframes pulsate {
    0% {
        filter : grayscale(100%);
        filter : opacity(.4);
    }
    50% {
        filter : none;
        filter : opacity(1);
    }
    100% {
        filter : grayscale(100%);
        filter : opacity(.4);
    }
}

.b-grid-cell[data-column="restaurant"] {
    flex-direction  : column;
    justify-content : center;
    align-items     : flex-start;

    small {
        font-size : .7em;

        i {
            margin-inline-end : .5em;
        }
    }
}

.b-grid-cell[data-column="name"] {
    font-weight : 600;

    img {
        height            : 3em;
        margin-inline-end : 1em;
        border-radius     : .3em;
    }
}

.badge {
    padding       : .3em .6em;
    border-radius : .5em;
    font-weight   : 400;
    font-size     : .9em;
    color         : #333; /* Fixed text color */
    margin-right  : 4px;
    white-space   : nowrap;
}

.product-details-grid {
    display               : grid;
    grid-template-columns : 1fr 1fr 1fr;
    gap                   : 2em;
    padding               : 2em;
}

.detail-panel {
    padding        : 1em 2em;
    display        : flex;
    flex-direction : column;
    gap            : 1em;

    &:not(:last-child) {
        max-width : 26em;
    }

    &:not(:first-child) {
        padding-top : 7em;
    }

    .product-image {
        width         : 100%;
        max-width     : 26em;
        height        : auto;
        object-fit    : cover;
        border-radius : 1em;
    }

    p {
        margin          : 0;
        display         : flex;
        justify-content : space-between;
    }

    p strong {
        font-weight  : 600;
        margin-right : .5em;
    }

    p span {
        white-space   : nowrap;
        overflow      : hidden;
        text-overflow : ellipsis;
    }

    h2 {
        margin-top : 0;
    }
}
