/* Cart */

.cart {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: var(--space-m);

    padding: var(--space-xxxl);
}

.cart__products {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

.product {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
}

.products__hr,
.cart__hr {
    height: 1px;

    background-color: var(--color-05);
}

.delivery,
.summary {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
}

.delivery__total--free {
    color: var(--color-04);
}

/* Details */

.details {
    width: 100%;

    padding: var(--space-xxxl);
}

.details__form {
    width: 100%;
    
    display: flex;
    gap: calc(2 * var(--space-m));
}

.details__form-left {
    width: calc(50% - var(--space-m));

    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

.details__form-left > .c-field-wrapper {
    width: 100%;
}

.details__form-fields {
    display: flex;
    gap: var(--space-m);
}

.customer__phone-number-prefix-field-wrapper {
    width: 120px;
}

.customer__phone-number-prefix-field {
    z-index: 2;
}

.customer__phone-number-field-wrapper {
    width: calc(100% - var(--space-m) - 120px);
}

.customer__province-field-wrapper,
.customer__city-field-wrapper {
    width: calc(100% - (var(--space-m) / 2));
}

.customer__address-field-wrapper {
    width: calc(100% - var(--space-m) - 120px);
}

.customer__postal-code-field-wrapper {
    width: 120px;
}

.details__form-right {
    width: calc(50% - var(--space-m));

    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

.details__form-right > .c-field-wrapper {
    width: 100%;
}

.payment-methods {
    width: 100%;

    display: flex;
    justify-content: space-between;
    gap: var(--space-m);
}

.payment-method-field__label {
    width: calc(50% - (var(--space-m) / 2));
}

.payment-method {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

.payment-method__option {
    height: 40px;

    border: 1px solid var(--color-05);
    border-radius: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);

    padding: 0 calc(var(--space-xs) + var(--space-xs));

    cursor: pointer;
}

.payment-method-field:checked + label > .payment-method > .payment-method__option {
    border-color: var(--color-12);
}

.payment-method__checkbox {
    width: 12px;
    height: 12px;

    border: 1px solid var(--color-01);
    border-radius: 0;
}

.payment-method-field:checked + label > .payment-method > .payment-method__option > .payment-method__checkbox {
    border-color: var(--color-04);

    background-color: var(--color-04);
}

.payment-method__media-files {
    display: flex;
    align-items: center;
    gap: var(--space-m);
}

.payment-method__media-files > img {
    height: 12px;
}

.payment-method-field {
    display: none;
}

.order-btn__label {
    width: 100%;

    justify-content: center;
}

@media (max-width: 1280px) {
    /* Details */

    .payment-methods {
        flex-direction: column;
    }

    .payment-method-field__label {
        width: 100%;
    }

    .payment-method__media-files > img {
        height: 16px;
    }
}

@media only screen and (max-width: 1024px) {
    /* Details */
    
    .details__form {
        flex-direction: column;
        gap: var(--space-m);
    }

    .details__form-left,
    .details__form-right {
        width: 100%;
    }
}

@media (max-width: 768px) {
    /* Cart */

    .cart {
        padding: var(--space-xxxl);
    }

    .product {
        flex-direction: column;
        align-items: initial;
        gap: var(--space-xs);
    }

    .delivery,
    .summary {
        flex-direction: column;
        align-items: initial;
        gap: var(--space-xs);
    }

    /* Details */

    .details {
        padding: 0 var(--space-xxxl) var(--space-xxxl) var(--space-xxxl);
    }
}

@media (max-width: 480px) {
    /* Details */

    .details__form-fields {
        flex-direction: column;
    }
    
    .customer__phone-number-prefix-field-wrapper,
    .customer__phone-number-field-wrapper,
    .customer__province-field-wrapper,
    .customer__city-field-wrapper,
    .customer__address-field-wrapper,
    .customer__postal-code-field-wrapper {
        width: 100%;
    }
    
    .details__form-note {
        line-height: 1.6;
    }
}