.item-detail-dialog {
    --image-container-height: 25vh;

    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 100%;
    gap: var(--space-x4);
    height: 100%;
    overflow: hidden;
    border-radius: var(--theme-border-radius-dialog);
}

.item-detail-dialog__close {
    position: absolute;
    top: var(--space-x4);
    left: var(--space-x4);
    opacity: 0.8;
}

.item-detail-dialog__image-desktop {
    z-index: var(--theme-z-index-main);
    grid-column: 1;
    border-right: 1px solid var(--theme-divider-20);
}

.item-detail-dialog__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: var(--space-x2);
}

.item-detail-dialog__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--theme-border-radius-image);
}

.item-detail-dialog__desc {
    display: -webkit-box;
    margin-top: var(--space);
    overflow: hidden;
    color: var(--theme-text-20);
    -webkit-line-clamp: 8;
    line-clamp: 8;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

.item-detail-dialog__desc--expanded {
    -webkit-line-clamp: unset;
    line-clamp: unset;
}

.item-detail-dialog__desc-read-more {
    display: flex;
    justify-content: center;
    margin-top: var(--space-half);
}

.item-detail-dialog__desc-read-more .ui-button__label {
    text-transform: uppercase;
}

.item-detail-dialog__customer-account-button {
    display: flex;
    flex-direction: column;
    margin-top: var(--space);
}

.item-detail-dialog__icon {
    --material-icon-width: var(--theme-icon-40-font-size);
    --material-icon-height: var(--theme-icon-40-font-size);
}

.item-detail-dialog__image-figure--visible {
    min-height: var(--image-container-height);
}

.item-detail-dialog__scrollbar {
    height: 100%;
    padding: 0 var(--theme-dialog-padding) calc(var(--theme-dialog-padding) + var(--theme-action-bar-height)) var(--theme-dialog-padding);
}

.item-detail-dialog__main {
    position: relative;
    display: flex;
    flex-flow: column;
    gap: var(--space);
}

.item-detail-dialog__price-calorie-wrapper {
    position: relative;
    display: flex;
    gap: var(--space);
    align-items: center;
}

.item-detail-dialog__food-details {
    display: flex;
    flex-direction: column;
    gap: var(--space);
    margin: var(--space) 0;
    container-type: inline-size;
    container-name: food-details;
}

.item-detail-dialog__food-details-badge-wrapper {
    display: flex;
    gap: var(--space);
    align-items: center;
    font: var(--theme-paragraph-10-bold);
    color: var(--theme-text-10);
    letter-spacing: var(--theme-paragraph-10-letter-spacing);
}

@container food-details (max-width: 450px) {
    .item-detail-dialog__food-details-badge-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }
}

.item-detail-dialog__food-details-label {
    text-wrap: nowrap;
}

.item-detail-dialog .item-form__main-detail {
    padding: 0;
    padding-bottom: calc(var(--add-to-cart-bar-height) + var(--space-x4));
}

.item-detail-dialog .item-form__quantity-buttons-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-x2);
    background: var(--theme-surface-20);
    border-top: 1px solid var(--theme-divider-20);
    border-bottom-right-radius: var(--theme-border-radius-dialog);
    border-bottom-left-radius: var(--theme-border-radius-dialog);
}

.item-detail-dialog .item-form__quantity-buttons-wrapper .form-element__label {
    display: none;
}

.item-detail-dialog .item-form__add-to-buttons {
    flex: 1 1 auto;
}

.item-detail-dialog__loader.ui-loader--overlay {
    flex-flow: column;
    gap: var(--space);
    color: var(--theme-body-text-color-contrast);
    background-color: var(--theme-surface-body-overlay);
}

.item-detail-dialog__banners-wrapper {
    position: relative;
}

@media (min-width: 700px) {
    .item-detail-dialog__image {
        aspect-ratio: 8 / 5;
    }
}

@media (min-width: 992px) {
    .item-detail-dialog__image-mobile {
        display: none;
    }

    .item-detail-dialog--has-image {
        grid-template-columns: 50% 50%;
        gap: 0;
    }

    .item-detail-dialog--has-image .item-detail-dialog__scrollbar {
        grid-column: 2;
        padding: 0;
    }

    .item-detail-dialog--has-image .item-detail-dialog__image  {
        width: 100%;
        height: 100%;
        min-height: 100%;
        aspect-ratio: 1 / 1;
        margin-bottom: 0;
    }

    .item-detail-dialog--has-image .item-form__quantity-buttons-wrapper {
        /* due to the buttons being a child element of .form.twig, Im giving
        * the buttons some negative margin, and additional width - these values
        * are simply the same as the padding on its parent element
        */
        position: sticky;
        align-self: end;
        width: calc(100% + var(--space-x8));
        height: var(--theme-action-bar-height);
        margin-right: calc(-1 * var(--space-x4));
        margin-left: calc(-1 * var(--space-x4));
    }

    .item-detail-dialog .item-form__main-detail {
        padding-bottom: 0;
    }

    .item-detail-dialog .item-detail-dialog--no-image {
        padding-bottom: calc(var(--add-to-cart-bar-height) + var(--space-x4));
    }

    .item-detail-dialog--has-image .item-form__main-detail {
        position: relative;
        height: 100%;
        padding: var(--space-x4);
        padding-bottom: 0;
    }

    .item-detail-dialog--has-image .item-form {
        height: 100%;
    }

    .item-detail-dialog--has-image .item-detail-dialog__image img {
        border-radius: 0;
    }
}

@media (max-width: 992px) {
    .item-detail-dialog__image-desktop {
        display: none;
    }
}