UserOrders.css

.quiqqer-frontendUsers-section--userOrders {
    --_label-color: var(--label-color, #999);
    --_label-fontSize: var(--label-fontSize, 0.875rem);
    --_box-padding: var(--box-padding, 0.75rem);
    --_box-bgColor: var(--box-bgColor, #f6f6f6);
    --_borderColor: var(--borderColor, #ddd);
    --_borderWidth: var(--borderWidth, 1px);
    --_scrollMarginTop: var(--scrollMarginTop,var(--_qui-template-scrollMarginTop, 0px));
}

.quiqqer-order-profile-orders-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

:where(.quiqqer-order-profile-orders-order__label) {
    color: var(--_label-color);
    font-size: var(--_label-fontSize);
}

/* header */
:where(.quiqqer-order-profile-orders-order__header) {
    background: var(--_box-bgColor);
    border-bottom: var(--_borderWidth) solid var(--_borderColor);
    padding: var(--_box-padding);
    display: flex;
    justify-content: space-between;
}

:where(.quiqqer-order-profile-orders-order__header .quiqqer-order-profile-orders-order__orderId) {
    text-align: right;
}

/** One Order
 =============================================== */

:where(.quiqqer-order-profile-orders-order) {
    container-type: inline-size;
    container-name: quiqqer-order-profile-orders-order;

    border: var(--_borderWidth) solid var(--_borderColor);
    min-width: 0;
}

/* article list */
.quiqqer-order-profile-orders-order-articles {
    padding: var(--_box-padding);
    display: grid;
    gap: 1rem;
}

/* single article */
.quiqqer-order-profile-orders-order-articles-article {
    display: flex;
    gap: 1rem;
    min-width: 0;
}

:where(.quiqqer-order-profile-orders-order-articles-image) {
    width: calc(10rem - 0.5rem);
    height: calc(10rem - 0.5rem);
    background: var(--_box-bgColor);
    border-radius: 0.5rem;
    overflow: hidden;
    display: grid;
    place-content: center;
    padding: var(--_box-padding);
    flex-shrink: 0;
}

.quiqqer-order-profile-orders-order-articles-data {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

:where(.quiqqer-order-profile-orders-order-articles-title) {
    font-weight: bolder;
}

.quiqqer-order-profile-orders-order-articles-buttons {
    margin-top: auto;
}

/* footer  */
:where(.quiqqer-order-profile-orders-order__footer) {
    border-top: var(--_borderWidth) solid var(--_borderColor);
    padding: var(--_box-padding);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

:where(.quiqqer-order-profile-orders-order__group) {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: 0.5rem;
}

@container quiqqer-order-profile-orders-order (max-width: 25rem) {
    .quiqqer-order-profile-orders-order-articles-article {
        flex-direction: column;
    }

    :where(.quiqqer-order-profile-orders-order-articles-article:not(:first-child)) {
        border-top: var(--_borderWidth) solid var(--_borderColor);
        padding-top: 1rem;
    }

    :where(.quiqqer-order-profile-orders-order__group) {
        display: block;
    }
}

/** Pagination
 =============================================== */
.quiqqer-order-profile-orders-pagination {
    width: 100%;
}

.quiqqer-order-profile-orders-pagination .quiqqer-pagination {
    text-align: right;
}

.quiqqer-sheets-mobile {
    margin-top: 2rem;
    width: 100%;
}

/* Back btn */
.quiqqer-order-control-order-backButton {
    margin-top: 1rem;
}

/* container for order details (open per click on order number) */
.quiqqer-order-profile-orders-order-container {
    scroll-margin-top: var(--_scrollMarginTop);
}