#order-confirmation {
    color: var(--zg-color-text-primary);
    font-size: var(--zg-font-size-body);
    line-height: 20px;
}

#order-confirmation .order-confirmation {
    padding: 40px 20px;
}

#order-confirmation .h1.title {
    margin: 0;
    font-size: var(--zg-font-size-h2);
}

#order-confirmation .order-confirmation-block p {
    margin: 0;
    font-size: var(--zg-font-size-body);
}

#order-confirmation .h1.title i {
    font-size: var(--zg-font-size-h1);
}

#order-confirmation .order-items-header {
    display: flex;
    flex-direction: row;
    text-align: center;
}

#order-confirmation .order-items-header .title.h3 {
    font-size: var(--zg-font-size-body-large);
    font-weight: var(--zg-font-weight-bold);
}

#order-confirmation .product-detail .details span,
#order-confirmation .text-detail {
    font-size: var(--zg-font-size-body-large);
}

#order-confirmation .text-detail.product-total {
    font-weight: var(--zg-font-weight-bold);
}


#order-confirmation .order-items-header .title {
    flex: 1;
    margin: 0;
    padding: 1rem;
}

#order-confirmation .order-confirmation-body {
    padding: 0 20px;
}

#order-confirmation .order-confirmation-body .order-lines .line {
    padding: 20px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    border-top: 1px solid var(--zg-color-secondary);
}

#order-confirmation .order-confirmation-body .order-lines .line:last-child {
    border-bottom: 1px solid var(--zg-color-secondary);
}

#order-confirmation .order-confirmation-body .product-image {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#order-confirmation .order-confirmation-body .order-lines .line img {
    max-width: 50%;
}

#order-confirmation .order-confirmation-body .product-image,
#order-confirmation .order-confirmation-body .text-detail {
    flex: 1;
}

#order-confirmation .order-subtotals {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1rem;
}

#order-confirmation .order-subtotals-item.font-bold {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-weight: var(--zg-font-weight-bold);
}

#order-confirmation .order-subtotals .order-subtotals-item {
    width: 35%;
}

#order-confirmation .order-subtotals .order-subtotals-item .discount {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#order-confirmation .order-confirmation-block #order-details {
    padding: 20px;
}

#order-confirmation .order-confirmation-block #order-details .title.h3 {
    font-size: var(--zg-font-size-body-large);
    font-weight: var(--zg-font-weight-bold);
    margin: 0;
    padding: 1.5rem 0;
}

#order-confirmation .order-confirmation-block #order-details ul {
    margin: 0;
}

#order-confirmation .order-confirmation-block #order-details ul li {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
}

.definition-list {
    padding: 20px 20px 60px 20px;
}

.definition-list .order-confirmation-block .full-width {
    width: 100%;
}

.definition-list .order-confirmation-block .full-width p {
    padding: 1rem;
    font-size: var(--zg-color-text-primary);
}

.definition-list dl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0;
    border-top: 1px solid var(--zg-color-secondary);
    border-bottom: 1px solid var(--zg-color-secondary);
    padding: 1rem;
}

.definition-list dl dt {
    font-weight: var(--zg-font-weight-semibold);
}

.definition-list dl dd,
.definition-list dl dt {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 45%;
    flex: 0 0 45%;
    padding: 0.6rem;
    margin: 0;
    background: var(--zg-color-white);
}

.definition-list dl dd:nth-of-type(even),
.definition-list dl dt:nth-of-type(even),
.product-features>dl.data-sheet dd.value:nth-of-type(even),
.product-features>dl.data-sheet dt.name:nth-of-type(even) {
    background: var(--zg-color-white);
}

.definition-list a {
    color: var(--zg-color-primary);
    text-decoration: none;
    font-weight: var(--zg-font-weight-semibold);
}

.definition-list a:hover {
    color: var(--zg-color-hover-primary);
}

@media screen and (max-width:425px) {
    #order-confirmation .order-items-header .title.h3{
        font-size: var(--zg-font-size-body-small);
        font-weight: var(--zg-font-weight-semibold);
    }

    #order-confirmation .order-confirmation-body .order-lines .line img {
        max-width: 100%;
    }

    #order-confirmation .order-subtotals .order-subtotals-item {
        width: 60%;
    }
}