/*#region product list (AutoShip "Automatic Shipment Items" design)*/
/* Mirrors .divManageProductsList* from MyAccount.css (the AutoShip edit page,
   section 4). MyAccount.css only loads on account pages (CustomerNavigation
   component), so the order form carries its own copy, scoped under
   .divOrderFormList. Keep values in sync with MyAccount.css. */
.divOrderFormList .divManageProductsListItems {
    display: grid;
    grid-template-columns: 72px auto;
    grid-template-rows: auto auto;
    background-color: var(--tertiary-color-1);
    margin-top: 10px;
    padding: 10px;
}

    .divOrderFormList .divManageProductsListItems.no-image {
        grid-template-columns: auto;
    }

    .divOrderFormList .divManageProductsListItems .product-picture {
        grid-row-start: 1;
        grid-row-end: span 2;
    }

        .divOrderFormList .divManageProductsListItems .product-picture img {
            max-width: 72px;
        }

    .divOrderFormList .divManageProductsListItems .product {
        margin: 0px 10px;
    }

    .divOrderFormList .divManageProductsListItemVariantsWrapper {
        text-align: right;
    }

.divOrderFormList .divManageProductsListItemVariants {
    display: flex;
    align-items: center;
    font-size: 1.5REM;
    justify-content: flex-end;
    margin-left: 20px;
    border-top: 1px solid var(--tertiary-color-3);
    padding: 10px;
    border-bottom: 1px solid var(--tertiary-color-3);
}

    /* order-form additions: the variant row's left slot holds the SKU -
       and, for children of a grouped product, the child's name first
       (the slot the AutoShip page uses for the variant name) */
    .divOrderFormList .divManageProductsListItemVariants .sku {
        flex-grow: 2;
        text-align: left;
    }

        .divOrderFormList .divManageProductsListItemVariants .sku .product-name {
            display: block;
        }

        /* the sku drops to a smaller second line when a child name leads the cell */
        .divOrderFormList .divManageProductsListItemVariants .sku .product-name + .skuNumberWrapper {
            font-size: 1.25REM;
        }

        .divOrderFormList .divManageProductsListItemVariants .sku .td-title {
            display: inline-block;
            font-weight: 700;
            margin: 0 4px 0 0;
        }

        .divOrderFormList .divManageProductsListItemVariants .sku .txt-sku-number {
            display: inline-block; /* the theme's text inputs are block-level */
            width: 150px;
            height: 30px;
            vertical-align: middle;
        }

            /* pre-loaded rows keep the input (the grid script reads its value)
               but render it as plain text */
            .divOrderFormList .divManageProductsListItemVariants .sku .txt-sku-number[readonly] {
                border: none;
                background: transparent;
                padding: 0;
            }

    .divOrderFormList .divManageProductsListItemVariants .unit-price {
        min-width: 50px;
        text-align: right;
    }

    .divOrderFormList .divManageProductsListItemVariants .quantity {
        min-width: 60px;
        text-align: center;
        margin-left: 20px;
    }

        .divOrderFormList .divManageProductsListItemVariants .quantity input {
            width: 50px;
            height: 30px;
            line-height: 30px;
            margin: 0px auto;
        }

        /* pulses when the grid script rewrites a committed quantity (clamped to the
           product's allowed range, or cleared as invalid) - a raise to the minimum
           adds copies beyond what was typed, so the rewrite must catch the eye.
           The class is re-applied per adjustment; see afterQuantityAdjusted in
           OrderFormGrid.js */
        .divOrderFormList .divManageProductsListItemVariants .quantity input.qtyAdjusted {
            animation: qtyAdjustedPulse 1.2s ease-out 1;
        }

@keyframes qtyAdjustedPulse {
    0% {
        box-shadow: 0 0 0 4px var(--warning-yellow-color);
    }

    100% {
        box-shadow: 0 0 0 4px transparent;
    }
}

    .divOrderFormList .divManageProductsListItemVariants .subtotal {
        min-width: 70px;
        text-align: right;
    }
/*#endregion product list*/

/*#region modal messages*/
.orderFormMessagesModal {
    display: inline;
}
.orderFormMessagesModal span {
    font-weight: bold;
}
.orderFormMessagesModal.success {
    color: var(--success-green-color);
}
.orderFormMessagesModal.warning {
    color: var(--warning-yellow-color);
}
.orderFormMessagesModal.error {
    color: var(--error-red-color);
}
/*#endregion modal messages*/



.product .warning,
.sku .warning {
    color: var(--warning-yellow-color);
}
.product .success,
.sku .success {
    color: var(--success-green-color);
}

/* Shown when every product on a quick order form is filtered out (unpublished,
   expired, blocked, out of stock). The theme's .no-data rules are all page-scoped
   (.wishlist-page / .compare-products-page / .shopping-cart-page) and this message
   renders outside the cart form, so it carries its own spacing. */
.divOrderFormEmpty {
    margin: 25px 0 0;
}