.container.checkout,
.container.order-confirm {
display: flex;
flex-direction: column;
padding: 25px 15px 60px 15px;
}
#toast-container .toast {
width: calc(100% - 145px) !important;
}
.container.checkout .checkout-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.container.order-confirm .order-confirm-wrapper {
display: flex;
flex-direction: column;
}
.container.order-confirm .experience-review {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.container.order-confirm .experience-review p {
max-width: 850px;
}
.container.order-confirm .experience-review .actions-container img {
margin-left: 12px;
margin-right: 12px;
}
@media (max-width: 1279px) {
.container.checkout .checkout-wrapper {
flex-direction: column;
}
}
.container.checkout .checkout-wrapper .checkout-form-wrapper {
width: 65%;
}
@media (max-width: 1279px) {
.container.checkout .checkout-wrapper .checkout-form-wrapper {
width: 100%;
}
}
.checkout-header,
.order-confirm-header {
display: flex;
flex-direction: column;
}
@media (max-width: 675px) {
.checkout-header,
.order-confirm-header {
align-items: center;
}
}
.checkout-header,
.checkout-express-payment-options,
.checkout-shipping-details,
.checkout-billing-details,
.checkout-payment-details,
.thank-you-container {
margin-bottom: 48px;
}
.checkout-shipping-details h4,
.checkout-billing-details h4,
.checkout-payment-details h4,
.checkout-order-details h4,
.thank-you-container h4 {
font-size: 24px;
font-weight: 700;
}
@media (max-width: 675px) {
.checkout-shipping-details h4,
.checkout-billing-details h4,
.checkout-payment-details h4,
.checkout-order-details h4 {
text-align: center;
}
}
.checkout-header .logo,
.order-confirm-header .logo {
width: fit-content;
margin-bottom: 12px;
}
.checkout-header h2,
.order-confirm-header h2 {
width: 100%;
text-align: center;
font-size: 42px;
font-weight: 700;
}
.checkout-header .actions-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.checkout-header .actions-container .login-form-container .login-form {
display: flex;
flex-direction: column;
}
@media (max-width: 675px) {
.checkout-header .actions-container {
flex-direction: column;
}
}
.checkout-header .actions-container .account-actions-container {
display: flex;
flex-direction: row;
align-items: center;
margin-left: auto;
margin-right: auto;
padding-right: 137px;
/* To offset 'Back to cart' header button */
}
.checkout-header .login-form-container {
min-width: 450px;
display: flex;
flex-direction: column;
align-items: center;
margin-left: auto;
margin-right: auto;
padding-right: 137px;
/* To offset 'Back to cart' header button */
}
.checkout-header .login-form-container .login-form {
width: 100%;
}
@media (max-width: 675px) {
.checkout-header .actions-container .account-actions-container {
flex-direction: column;
padding-right: 0px;
}
.checkout-header .login-form-container {
padding-right: 0px;
}
.checkout-header .login-form-container {
width: 100%;
min-width: 150px;
margin-left: 0;
margin-right: 0;
padding-right: 0px;
}
}
.checkout-header .actions-container .account-actions-container span {
margin-right: 12px;
}
@media (max-width: 675px) {
.checkout-header .actions-container .account-actions-container span {
margin-top: 12px;
margin-bottom: 12px;
margin-right: 0px;
}
.checkout-header .actions-container a.back-to-cart {
display: none;
}
}
.checkout-express-payment-options {
width: 100%;
display: flex;
flex-direction: column;
position: relative;
align-items: center;
justify-content: center;
}
.checkout-express-payment-options .express-payment-options-header {
position: absolute;
top: -11px;
font-size: 16px;
font-weight: 700;
background-color: white;
padding-left: 16px;
padding-right: 16px;
}
.checkout-express-payment-options .note {
font-size: 16px;
margin-top: 24px;
}
.checkout-express-payment-options .payment-options-container {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, 155px);
grid-gap: 40px;
max-width: 850px;
justify-content: center;
margin: auto;
padding: 24px 36px;
border: 1px solid;
border-color: #E2E2E2E2;
border-radius: 5px;
}
.checkout-express-payment-options .payment-options-container .payment-option-button:not(.paypal) {
width: 166px;
height: 50px;
border: 1px solid;
border-color: #555;
box-shadow: 0px 2px 5px 0px #00000040;
border-radius: 10px;
background-color: #FFFFFF;
}
.checkout-express-payment-options .payment-options-container img {
width: 60px;
}
.checkout-express-payment-options .payment-options-container .payment-option-button.credit-card img {
width: 140px;
}
.checkout-express-payment-options .payment-options-container #paypal-button-container {
margin: 0px;
}
.checkout-express-payment-options .payment-options-container .payment-option-button.selected {
border: 2px solid #6CBE4C;
}
@media (max-width: 1279px) {
.checkout .checkout-form-wrapper .action-buttons.complete-order {
display: none;
}
}
.checkout .checkout-form .form-field-wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.form-field {
display: flex;
flex-direction: column;
margin-bottom: 12px;
}
.form-field.half-width {
width: 48%;
}
.form-field.full-width {
width: 100%;
}
@media (max-width: 675px) {
.form-field,
.form-field.half-width,
.form-field.full-width {
width: 100%;
}
}
.form-field label {
margin-bottom: 8px;
}
.form-field.required label:after {
content: ' *';
}
.form-field.optional label:after {
content: ' (optional)';
}
.form-field .error {
color: #B71C1C;
min-height: 20px;
padding-top: 2px;
}
.form-field.checkbox .checkbox-wrapper {
cursor: pointer;
width: fit-content;
display: flex;
flex-direction: row-reverse;
}
.form-field.checkbox .checkbox-wrapper input[type='checkbox'] {
width: 20px;
height: 20px;
cursor: pointer;
margin-right: 8px;
accent-color: #6CBE4C;
cursor: pointer;
}
.form-field.checkbox .checkbox-wrapper label {
cursor: pointer;
margin-bottom: 0px;
}
.checkout .checkout-order-details {
width: 30%;
}
.checkout .checkout-shipping-details .form-field.address-validation {
border: 1px #D1D1D1 solid;
border-radius: 10px;
padding: 12px;
margin-bottom: 24px;
}
.form-field.address-validation .title {
font-size: 20px;
font-weight: 700;
margin-bottom: 8px;
}
.form-field.address-validation .address-container {
display: flex;
flex-direction: row;
border: 1px #000000 solid;
border-radius: 10px;
padding: 12px;
margin-bottom: 12px;
cursor: pointer;
}
@media (max-width: 675px) {
.form-field.address-validation .address-container.recommended {
flex-direction: column;
}
}
.form-field.address-validation .address-validation-actions {
display: flex;
flex-direction: row-reverse;
}
.form-field.address-validation .address-validation-actions button {
width: 50%;
background-color: #6CBE4C;
color: white;
border-radius: 10px;
min-height: 48px;
}
button.green {
background-color: #6CBE4C;
color: white;
border-radius: 10px;
min-height: 48px;
}
@media (max-width: 675px) {
.form-field.address-validation .address-validation-actions button {
width: 100%;
}
}
.checkout .checkout-shipping-details .form-field-wrapper:not(:first-child) {
padding: 12px;
}
.form-field.shipping-method .option-container {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px #E3E3E3 solid;
cursor: pointer;
}
@media (max-width: 675px) {
.form-field.shipping-method .option-container {
padding: 12px 24px 12px 24px;
border: 1px #808080 solid;
border-radius: 10px;
}
.form-field.shipping-method .option-container.selected {
border-color: #6CBE4C;
background-color: #EDFFE7
}
.form-field.shipping-method .option-container .option-details-container label {
font-weight: 700;
font-size: 16px;
}
}
.rates-delivery-times-container {
display: flex;
flex-direction: row-reverse;
}
@media (max-width: 675px) {
.checkout .checkout-form .rates-delivery-times-container {
width: 100%;
flex-direction: row;
justify-content: center;
}
.checkout .checkout-form .form-field.shipping-matches-billing .checkbox-wrapper {
width: 100%;
justify-content: center;
align-items: center;
}
.checkout .checkout-form .form-field.shipping-matches-billing .checkbox-wrapper input[type='checkbox'] {
width: 28px;
height: 28px;
}
}
.form-field.shipping-method .option-container .radio-container input,
.form-field.shipping-method .option-container .radio-container label {
cursor: pointer;
}
.form-field.shipping-method .option-container .radio-container label {
margin-bottom: 0;
}
.shipping-methods-note {
display: flex;
flex-direction: column;
justify-content: center;
margin-bottom: 12px;
}
.shipping-methods-note span {
margin-top: 12px;
margin-bottom: 12px;
font-weight: 700;
}
.po-box-note {
margin-top: 12px;
margin-bottom: 12px;
font-weight: 700;
}
@media (max-width: 675px) {
.shipping-methods-note {
text-align: center;
}
.po-box-note {
display: block;
text-align: center;
}
}
.form-field.shipping-method .option-container .option-details-container {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
@media (max-width: 675px) {
.form-field.shipping-method .option-container .option-details-container {
width: 100%;
flex-direction: column;
min-height: 100px;
}
.form-field.shipping-method .option-container .radio-container {
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
}
}
.form-field.address-validation .address-container.selected {
border: 1px #6CBE4C solid;
background-color: #DDFFCF;
}
.form-field.address-validation .error {
margin-bottom: 8px;
}
.form-field.address-validation .address-container .option-container {
width: 100%;
display: flex;
flex-direction: column;
}
.form-field.address-validation .address-container .option-container .radio-container {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 10px;
}
.form-field.address-validation .address-container .option-container .radio-container input[type="radio"],
.form-field.shipping-method .option-container .radio-container input[type="radio"] {
width: 0px;
height: 0px;
margin-right: 10px;
accent-color: #000000;
}
.form-field.address-validation .address-container .option-container .radio-container label {
font-size: 16px;
margin-bottom: 0;
}
.form-field.address-validation .address-container .option-container .radio-container label:after {
content: '';
}
.form-field.address-validation .address-container .option-container p {}
@media (max-width: 1279px) {
.checkout .checkout-order-details {
width: 100%;
}
}
.checkout .checkout-order-details .checkout-order-totals {
display: flex;
flex-direction: column;
justify-content: space-evenly;
padding: 16px 24px;
min-height: 220px;
background-color: #F8F8F8;
}
.checkout-order-details .checkout-order-totals .checkout-total {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
font-size: 16px;
}
.checkout-order-details .checkout-order-totals .checkout-total.promo-code .promo-code-entry {
cursor: pointer;
width: 100%;
text-align: center;
font-size: 14px;
}
.checkout .checkout-order-details .checkout-order-products {}
.checkout .checkout-order-products .checkout-order-product,
.order-details .order-products .products .order-review-order-product {
display: flex;
flex-direction: row;
align-items: center;
}
.checkout-order-products .checkout-order-product .order-product-image,
.order-details .order-products .products .order-review-order-product .order-product-image {
position: relative;
margin-right: 24px;
padding: 10px;
}
.checkout-order-products .checkout-order-product .order-product-image img,
.order-details .order-products .products .order-review-order-product .order-product-image img {
width: 120px;
}
.checkout-order-products .checkout-order-product .order-product-image .order-product-quantity,
.order-details .order-products .products .order-review-order-product .order-product-image .order-product-quantity {
position: absolute;
top: 0;
right: 0;
color: white;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 50%;
background-color: #6CBE4C;
}
.checkout-order-products .checkout-order-product .order-product-details,
.order-details .order-products .products .order-review-order-product .order-product-details {
display: flex;
flex-direction: column;
justify-content: space-evenly;
height: 100%
}
.checkout-order-products .checkout-order-product .order-product-details .order-product-description,
.order-details .order-products .products .order-review-order-product .order-product-details .order-product-description {
font-size: 16px;
}
.checkout-order-products .checkout-order-product .order-product-details .order-product-price,
.order-details .order-products .products .order-review-order-product .order-product-details .order-product-price {
font-size: 20px;
font-weight: 700;
}
.checkout .checkout-payment-details .payment-details-affirm-container {
display: flex;
flex-direction: row;
align-items: center;
height: 100px;
width: 100%;
justify-content: space-around;
}
.checkout .checkout-payment-details .payment-details-affirm-container img {
width: 90px;
margin-right: auto;
margin-left: auto;
}
.checkout .checkout-payment-details .payment-details-affirm-container .affirm-toggle {
margin-right: auto;
margin-left: auto;
background-color: #6CBE4C;
color: white;
border-radius: 10px;
min-height: 48px;
}
.checkout .checkout-payment-details .form-field.card-number {
position: relative
}
.checkout .checkout-payment-details .form-field.card-number .card-type-image {
width: 45px;
position: absolute;
top: 33px;
right: 4px;
}
button.button,
a.button {
min-width: 145px;
border: 2px solid;
border-color: #6CBE4C;
border-radius: 10px;
color: black;
font-weight: 700;
font-size: 16px;
text-align: center;
padding: 6px 8px;
cursor: pointer;
background-color: #FFF;
}
.hidden {
display: none;
}
input[type="text"],
input[type="email"],
input[type="password"],
select {
color: #555;
border: 1px solid #e5e5e5;
padding: 8px 10px;
font-size: 16px;
-webkit-border-radius: 2px;
border-radius: 2px;
line-height: normal;
}
.order-confirm .order-confirm-wrapper .order-confirm-header {
display: flex;
flex-direction: column;
}
.order-confirm .order-confirm-wrapper .thank-you-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.order-number-confirmation .order-number,
.thank-you-container p .billing-email {
font-weight: 700;
}
.order-confirm .order-confirm-wrapper .thank-you-container p {
font-size: 16px;
}
.order-confirm .order-details .detail.order-totals {
display: flex;
flex-direction: column;
justify-content: space-evenly;
min-height: 280px;
}
.order-details {
margin-bottom: 48px;
}
.order-details .detail {
padding: 24px;
border: 1px #DDDDDD solid;
margin-bottom: 24px;
}
.order-details .detail p {
font-size: 16px;
}
.order-details .detail.order-totals .total {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
font-size: 16px;
}
.order-details .detail.order-totals .total.order-total span,
.order-details .detail.order-totals .total.order-total label {
font-size: 22px;
font-weight: 700;
}
.order-details .detail h4 {
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
}
.order-details {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.order-details .shipping-billing-container,
.order-details .products-totals-container {
width: 48%
}
@media (max-width: 760px) {
.order-details {
flex-direction: column
}
.order-details .shipping-billing-container,
.order-details .products-totals-container {
width: 100%
}
}
.order-details .detail.payment-details .payment {
display: flex;
flex-direction: row;
align-items: center;
}
.order-details .detail.payment-details .payment img {
width: 45px;
}
.order-details .detail.payment-details .payment p {
margin-bottom: 0;
margin-left: 12px;
}