﻿.profile {
    padding-bottom: 5rem;
}
    .profile .sub-nav ul {
        justify-content: left;
    }
.profile .k-form {
    padding: 2rem;
    box-shadow: 0 2px 23px 0 #e4e6e9;
    border: 1px solid #ccc;
    background-color: #fff;
}
    .profile .k-form.no-style {
        padding: 0;
        box-shadow: none;
        border: none;
        background-color: none;
    }
        .profile .k-form.no-legend legend {
            display: none;
        }
.profile .profile-box {
    padding: 3rem 2rem;
    box-shadow: 0 2px 23px 0 #e4e6e9;
    border: 1px solid #ccc;
    background-color: #fff;
}
    .profile .profile-box h1 {
        margin: 0 0 1rem;
        padding: 0;
        border-width: 0 0 2px;
        border-style: solid;
        border-color: rgba(0,0,0,.08);
        width: 100%;
        font-size: 1.4rem;
        font-weight: 600;
        text-transform: uppercase;
        color: #444;
        letter-spacing: .05rem;
    }
    .profile .profile-box .item-box {
        padding: 2rem 2rem 0 2rem;
        border: 1px solid #ddd;
        background-color: #fff;
        margin-bottom: 1.5rem;
        background-color: #fbfbfb;
        max-width: 500px;
    }
        .profile .profile-box .item-box h2 {
            margin: 0;
            font-size: 1.6rem;
            font-weight: 500;
            border-color: rgba(0,0,0,.08);
            color: #333;
            letter-spacing: .05rem;
            text-transform: uppercase;
        }
        .profile .profile-box .item-box h3 {
            margin: .75rem 0 0 0;
            font-weight: 900;
            font-size: 2.4rem;
            letter-spacing: .05rem;
        }
        .profile .profile-box .item-box h4 {
            margin: 2rem 0 0 0;
            text-align: right;
            font-size: 1.4rem;
            text-transform: uppercase;
            color: #ccc;
        }
        .profile .profile-box .item-box .address {
            display: grid;
            grid-template-columns: 2fr 1fr;
            padding: 0 0 1rem 0;
        }
        .profile .profile-box .item-box .address .actions {
            align-self: center;
            justify-self: flex-end;
        }

    .profile .profile-box .add-form {
        max-width: 500px;
    }

/* Profile - Credit Card Page */

    .profile .profile-box .item-box .credit-card {
        display: grid;
        grid-template-columns: 2fr 1fr;
        padding: 0 0 2rem 0;
    }
        .profile .profile-box .item-box .credit-card > div {
            align-self: center;
        }
            .profile .profile-box .item-box .credit-card > div:nth-child(2) {
                justify-self: flex-end;
            }
    .profile .profile-box .item-box .credit-card .button {
        margin: 0;
    }

/* Profile - Orders Page */

.profile .order-item {
    box-shadow: 0 2px 7px 0 rgb(34 37 43 / 10%);
    border: 1px solid #ccc;
    color: #3c404b;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
}
    .profile .order-item .order-header-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
    .profile .order-item .order-header-grid label {
        font-weight: 400;
    }
    .profile .order-item .order-header-grid > div:nth-child(2) {
        justify-self: end;
    }
        .profile .order-item .order-header-grid > div:nth-child(2) button {
            margin: 0;
        }
    .profile .order-item .order-details-container {
        border-top: 1px solid #000;
        margin: 1rem 0 0 0;
    }

        .profile .order-item .order-details-container label {
            margin: 0;
        }

        .profile .order-item .order-details-container .shipping-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            border-bottom: 1px solid #000;
            padding: 1rem 0;
        }
        .profile .order-item .order-details-container .order-item-grid {
            display: grid;
            grid-template-columns: 4fr 1fr 1fr 1fr;
        }
            .profile .order-item .order-details-container .order-item-grid .b {
                font-weight: 600;
            }
            .profile .order-item .order-details-container .order-item-grid .h {
                border-bottom: 1px solid #000;
            }
            .profile .order-item .order-details-container .order-item-grid .r {
                text-align: right;
            }
            .profile .order-item .order-details-container .order-item-grid .mt {
                margin-top: .5rem;
            }
@media (max-width: 768px) {
    .profile .profile-box .item-box {
        max-width: 100%;
    }
        .profile .profile-box .item-box h2 {
            font-size: 1.4rem;
            font-weight: 500;
        }
        .profile .profile-box .item-box h3 {
            font-size: 1.8rem;
        }
        .profile .profile-box .item-box h4 {
            font-size: 1.2rem;
        }
}
@media (max-width: 767px) {
    .profile .order-item .order-header-grid {
        grid-template-columns: 1fr;
        grid-row-gap: .5rem;
    }
    .profile .order-item .order-details-container .shipping-grid {
        grid-template-columns: 1fr;
        grid-row-gap: 2rem;
    }
    .profile .order-item .order-details-container .order-item-grid .n {
        grid-column: 1/5;
    }
    .profile .order-item .order-details-container .order-item-grid .q {
        grid-column: 2/3;
    }
}
@media (max-width: 425px) {
    .profile .order-item .order-details-container .order-item-grid {
        font-size: 1.4rem;
    }
    .profile .order-item {
        margin: 0 -1.5rem 1.5rem -1.5rem;
    }
}