.customer-cover {
	h1 {
		color: white;
	}
}


.account {
	.message {
		margin-bottom: 0;
	}
	p, address {
		@include deskB2;
		color: $gray4;
	}

	.page-main {
		padding: 0;
	}

	.columns {
		display: flex;
		flex-wrap: nowrap;
		@include phone {
			flex-direction: column;
		}
	}

	.block-title {
		margin-bottom: 24px;
		display: flex;
		align-items: center;
		& > strong {
			@include deskH2;
			margin: 0 !important;
		}
	}

	.action.mobile,
	.box-actions .action {
		@extend .button;
		@extend .btn-link;
	}

	.box-actions {
		.action {
			&:hover {
				color: white;
			}
		}
	}

	.sidebar-main .box-actions {
		@include phone {
			display: none;
		}
	}

	a.action.mobile {
		display: none;
		@include phone {
			display: block;
		}
	}

	.link {
		text-decoration: underline;
		font-size: 1.3rem;
		letter-spacing: 0.03rem;
	}

	#selected--zg-ul-select {
		@include phone {
			text-transform: uppercase;
		}
	}

	.page-main {
		@include phone {
			padding-top: 0;
		}
	}
	.page.messages {
		@include phone {
			margin-bottom: 0;
		}
	}
	.column.main {
		.block:not(.widget) {
			.block-content {
				.box {
					&:nth-child(even),
					&:nth-child(odd) {
						float: none;
					}
					@include phone {
						margin-bottom: 32px;
					}
					.box-actions {
						margin-top: 0;
					}
				}
			}
			.block-title {
				margin-bottom: 24px;
				& > strong {
					@include deskH2;
				}
			}
		}
		.action.back {
			display: block;
			background: url(../images/icons/arrow_back_black.svg) center no-repeat;
			height: 24px;
			width: 24px;
			margin-right: 8px;
		}
	}
	.sidebar-main, .column.main {
		padding-top: 34px;
		@include tablet {
			padding-top: 40px;
			border-right: 1px solid $grayfilet;
		}
	}
	.sidebar-main {
		padding-right: 0;
	}
	.sidebar-additional, .column.main {
		padding-left: 12px;
		padding-right: 12px;
	}
	.product-image-photo {
		position: initial;
		width: revert-layer;
	}
}

.page-layout-3columns {
	.sidebar-main {
		flex-basis: 26.6%;
	}
	.column.main {
		flex-basis: 39.72%;
		order: 2;
		@include phone {
			border-top: 1px solid $grayfilet;
		}
	}
	.sidebar-additional {
		padding-top: 40px;
		margin-top: 0;
		flex-basis: 33.68%;
		@include phone {
			border-top: 1px solid $grayfilet;
			padding-top: 34px;
		}
	}
}

.account.page-layout-2columns-left,
.account.page-layout-2columns-right {
	.column.main {
		flex-basis: 66.32%;
		padding: 40px;
		@include desktop {
			padding-right: 120px;
		}
		@include phone {
			padding: 35px 16px;
		}
		border: none;
	}
	.sidebar-main {
		padding: 0;
		flex-basis: 33.68%;
		border-right: none;
		@include phone {
			display: none;
		}
	}
	.cover-image {
		min-height: 740px;
		height: 100%;
		background-image: url('../images/banners/account.jpg');
		background-size: cover;
	}
}

.block-collapsible-nav {
	margin-bottom: 0;
	border-top: 1px solid $grayfilet;
	border-bottom: 1px solid $grayfilet;
	padding: 0;
	position: sticky;
	.block-collapsible-nav-title {
		display: none;
	}
	.content.block-collapsible-nav-content {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
	}
	@include phone {
		.content.block-collapsible-nav-content {
			display: block;
			border: none;
		}
		.nav.items {
			overflow-x: scroll;
			&::-webkit-scrollbar {
				display: none;
			}
			-ms-overflow-style: none;
			scrollbar-width: none;
		}
	}
	.nav.items {
		grid-column: 2;
		display: flex;
		@include tablet {
			justify-content: center;
		}
    	align-items: center;
	}

	.content {
		background: transparent;
		padding: 0;
		.logout-link {
			@include deskBtn3;
			@include phone {
				display: none;
			}
			padding-right: 40px;
			padding-left: 20px;
			grid-column: 3;
			justify-self: end;
		}
	}
	.item {
		margin: 0;
		a,
		& > strong {
			@include deskB1;
			color: $gray4;
			padding: 30px 5px;
			margin: 0 15px;
			border-left: none;
			@include phone {
				color: $darkgray;
				white-space: nowrap;
				padding: 20px 0px;
				margin: 0 8px;
			}
			@include tablet {
				@include deskUI1;
			}

			&:hover {
				background: transparent;
				border-bottom: 1px solid $darkgray;
			}
		}
	}
	.item.current {
		 > *:first-child {
			color: $darkgray;
			font-weight: 700;
			border-left: none;
			border-bottom: 2px solid $darkgray;
		}
	}
	.title {
		border: none;
	}
}

.block-dashboard-info {
	border-bottom: 1px solid $grayfilet;
	.box-actions {
		margin-top: 16px;
	}
	@include phone {
		margin-bottom: 30px;
	}
	p {
		margin: 0;
	}
	.customer-name {
		display: block;
		padding-bottom: 8px;
	}
}
.block-dashboard-info, .block-dashboard-addresses {
	padding: 0 40px 40px;
	@include phone {
		padding: 0 16px 25px;
	}
}

.block-dashboard-addresses {
	.box-content {
		margin-top: 8px;
	}
	.box-billing-address {
		margin-top: 24px;
	}
	address {
		.name, .telephone {
			display: none;
		}
	}
}

.block-wishlist {
	.action.details {
		@extend .btn-link;
	}
	.box-actions {
		padding-top: 10px;
	}
}

.block-addresses-list {
	.block-content {
		color: $gray1;
		font-weight: 300;
		line-height: 1.57;
		letter-spacing: 1px;
		font-size: 1.4rem;
		li {
			width: 100%;
		}
	}
	.items.addresses {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	.actions {
		display: flex;
		justify-content: space-between;
		padding-top: 40px;
		@include phone {
			padding-top: 0px;
			margin-top: 0;
		}
		a {
			color: black;
			text-decoration: underline;
		}
	}
}

.block-dashboard-addresses {
	.box-actions {
		padding-top: 16px;
	}
}

.block-dashboard-orders {
	.block-content {
		flex-direction: column;
		list-style: none none;
	}
	.box-actions {
		padding-top: 10px;
	}
	.order-status {
		position: absolute;
		span {
			padding: 4px 8px;
			background-color: $darkgray;
			color: white;
			white-space: nowrap;
			@include deskUI3;
		}
	}
}

 .form-address-edit .actions-toolbar .action.primary {
 	@include deskBtn1;
	padding: 18px 25px;
 }

//RETURNS

.aw-rma-new {
	.title {
		font-weight: 500;
		text-transform: none;
		font-size: 1.4rem;
		letter-spacing: 0.1rem;
	}
}

.aw-rma__return-item-container .item-details.product-item {
	padding-left: 0;
}

.aw-rma__field {
	.select2-container,
	.select2-hidden-accessible{
		width: 100% !important;
	}
}

.aw-rma__actions,
.aw-rma__return-massaction {
	a, button {
		@include phone {
			width: 100%;
			margin-bottom: 15px !important;
			text-align: center;
		}
	}
}


//LOGIN SIGNUP

.customer-account-create,
.customer-account-login {
	.page-title {
		@extend h2;
	}
	.page-main {
		padding-top: 40px;
		max-width: 1260px;
	}
	.form.form-login {
		.actions-toolbar {
			.secondary {
				float: right;
			}
		}
	}
}

// Account Order List
.account.sales-order-history {
	.order-products-toolbar {
		.pages {
			position: relative;
			top: -22px;
		}
	}
}

.account .form {
    .fields {
        column-gap: 126px;

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

        .field.date input {
            width: 100%;

            & + .ui-datepicker-trigger {
                display: none;
            }
        }

        .field:not(:first-child) {
            margin-top: 16px;
        }

        .field.required > label:after {
            content: ' *';
        }

        .actions-toolbar .primary {
            width: 100%;

            & > .action.primary {
                margin-top: 30px;
                width: 100%;
            }
        }

        .label > span {
            @include deskB2;
        }

        .control {
            margin: 8px 0;

            &.set.billing {
                margin-top: 32px;
            }

            .yesno {
                display: flex;
                gap: 24px;
                margin-top: 8px;

                .choice {
                    margin-left: 4px;
                }
            }
        }

        .checkbox {
            @include customCheckbox;
        }

        .field + .message.info {
            margin-top: 32px;
        }

        .field .nested {
            display: flex;
            gap: 8px;
            margin-top: 16px;
            order: 3;

            .additional {
                width: 100%;
                margin-top: 0;
            }
        }
    }
}

.modal-custom.modal-slide .modal-inner-wrap .block-container .container-telephone-field-number {
    margin: 0;
}

.block-create-account,
.account {
    .form {
        .container-telephone {
            display: flex!important;
            flex-direction: row!important;

            .control {
                margin: 0;
            }

            .container-telephone-field-flag {
                min-width: 120px;
            }

            .container-telephone-field-number {
                flex: 1;

                input {
                    border-left: 0;
                }
            }
        }
    }
}

#wishlist-sidebar .product-item {
	@include listItem;
	.product-item-photo {
		line-height: 0;
	}
	.photo.image {
		width: 108px !important;
		height: auto !important;
	}
	.price-box {
		margin: 0;
	}
}

.wishlist-index-index {
	.item-info {
		@include listItem;
    	width: 100%;
		&:not(:last-child) {
			border-bottom: 1px solid $grayfilet;
		}
		.item-price {
			@include phone {
				display: none;
			}
		}
	}
	.products-grid .product-item {
		display: flex;
		width: 100%;
		margin: 0;
		border-bottom: none;
		.product-item-photo {
			margin: 0;
		}
		.field.qty {
			display: none;
		}
		.product-item-actions {
			margin-top: 0;
		}
		.product-item-options {
			padding-top: 15px;
			span {
				color: $darkgray;
			}
		}
		&:first-child {
			border-top: none;
		}
		.product-item-inner .price-box {
			margin: 0;
		}
	}
	.action.delete {
		display: block;
		background: url(../images/icons/bin.svg) center no-repeat;
		height: 20px;
		width: 20px;
	}
	.actions-toolbar {
		margin-top: 30px;
	}
	.action.tocart.primary {
		padding: 18px 55px;
	}
	.item-price {
		@include phone {
			padding: 20px 0 20px 0;
		}
		white-space: nowrap;
		span.price {
			color: $darkgray;
			@include deskB1;
		}
	}
	.item-remove {
		@include phone {
			padding: 20px 0 20px 0;
		}
		margin-left: 20px;
	}
}

.block-dashboard-orders .order-item,
.sales-order-history .item-info,
.sales-order-view .order-item,
.alert-stock-index .product-item {
	@include listItem;
	.order-number {
		margin-bottom: 10px;
	}
}

.sales-order-history {
	.order-list {
		padding: 0;
		margin-bottom: 28px;
		.order-item {
			display: flex;
			justify-content: space-between;
			margin-bottom: 8px;
			padding-bottom: 8px;
			&:not(:last-child) {
				border-bottom: 1px solid $grayfilet;
			}
			.order-status span {
				@include orderStatus;

			}
			@include phone {
				padding: 20px 0;
				margin-bottom: 0px;
				.order-status {
					position: absolute;
				}
			}
			.item-info {
				padding: 0;
				margin: 0;
				width: 100%;
				.item-details {
					width: 100%;
					padding: 0px 0px 5px 20px;
					.order-number {
						padding-top: 5px;
					}
					.action {
						margin-top: 8px;
					}
					.actions, .order-header {
						display: flex;
						justify-content: space-between;
					}
					.order-status {
						margin-bottom: 0;
					}
					@include phone {
						.actions {
							flex-direction: column;
						}
					}
				}
			}
		}
	}
}

.account .pager {
	.pages {
		justify-content: center;
		.item {
			border: none;
			min-width: auto;
			margin: 0;
			&.current {
				background: transparent;
				.page {
					text-decoration: underline;
				}
			}
			.action, .action:before {
				color: $darkgray;
			}
			a.page {
				color: $darkgray;
			}
		}
	}
}

.customer-account-logoutsuccess .page-wrapper {
	background-image: url('../images/banners/logout-banner.webp');
	background-size: cover;
	@include phone {
		background-image: url('../images/banners/logout-banner-mobile.webp');
	}
	.page-main {
		height: calc( 100vh - #{$header-height} );
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		text-align: center;
		color: $white;
		.page-title span {
			@include deskH1;
		}
		.content {
			max-width: 485px;
			padding-bottom: 25px;
		}
		.continue {
			@include deskBtn1;
			color: $white;
		}
	}
}

.account.customer-address-index .column.main {
	.block-addresses-default {
		margin-bottom: 0;
	}
	.box {
		display: flex;
		flex-direction: row;
		min-width: 100%;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 24px;
		gap: 7px;
		@include phone {
			flex-direction: column;
		}
		.box-title {
			margin: 0;
			& > span {
				@include deskB1;
			}
		}
		.box-actions {
			display: flex;
    		gap: 16px;
		}
	}
	address {
		.name {
			@include deskB1bold;
			color: $darkgray;
		}
	}
	.empty {
		margin-bottom: 24px;
	}
}

.customer-account-index .block-title {
	justify-content: space-between;
}

.sales-order-view {
	.order-details-items {
		padding: 0;
		margin-bottom: 16px;
		border-bottom: 1px solid $grayfilet;
	}
	.order-grid-container {
		display: grid;
		grid-template-columns: 72% 28%;
		@include phone {
			grid-template-columns: 80% 20%;
		}
		color: $gray4;
		.subtitle {
			color: $darkgray;
			@include deskB1;
		}
		.item {
			@include deskB2;
		}
		.full-line {
			grid-column: span 2;
		}
	}
	.order-totals {
		padding-top: 16px;
		border-top: 1px solid $grayfilet;
		.black {
			color: $darkgray;
		}
		.subtitle {
			padding-bottom: 8px;
		}
		@include phone {
			.item.value {
				justify-self: end;
				white-space: nowrap;
			}
		}
	}
	.order-summary {
		margin-bottom: 12px;
		@include phone {
			.item {
				grid-column: span 2;
			}
		}
	}
	.order-item-list {
		margin-top: 12px;
		border-top: 1px solid $grayfilet;
		.order-item {
			margin: 12px 0;
    		padding: 0;
		}
		.item-subtotal {
			margin: 13px 0;
			.cart-price .price {
				font-weight: 400;
			}
			@include phone {
				justify-self: end;
			}
		}
		.image-container {
			width: 168px;
			height: 168px;
			img {
				width: 100%;
			}
		}
		.item-options {
			display: flex;
			column-gap: 16px;
			margin-top: 18px;
			flex-wrap: wrap;
			@include phone {
				flex-direction: column;
			}
			p {
				color: $darkgray;
				margin-bottom: 0;
			}
		}
		.engraving {
			margin-top: 20px;
			@include phone {
				margin-top: 8px;
			}
		}
	}
	.order-details-gift-message {
		span {
			@include deskB2;
		}
		.message-content {
			margin-top: 8px;
			border: 1px solid $grayfilet;
			padding: 14px 16px;
			color: $gray4;
		}
	}
	.order-payment-method {
		padding: 16px 0;
		margin-top: 16px;
		border-top: 1px solid $grayfilet;
		align-items: center;
		dl, dt, .payment-icon {
			margin: 0;
			@include phone {
				justify-self: end;
			}
		}
		.payment-icon {
			display: inherit;
		}

	}
	@include phone {
		.shipping-address .subtitle {
			grid-column: span 2;
			padding-bottom: 8px;
		}
	}
}

.alert-stock-index {
	.item-info {
		display: flex;
		padding: 8px 0;
		&:not(:last-child) {
			border-bottom: 1px solid $grayfilet;
		}
		.product-item {
			padding: 0;
			margin: 0;
			width: 100%;
		}
		@include desktop {
			.options {
				margin-top: 18px;
				span {
					color: $darkgray;
				}
			}
		}
		.item-price {
			padding: 5px 0;
			.price {
				white-space: nowrap;
				padding: 5px 0;
				@include deskB1;
			}
			@include phone {
				display: none;
			}
		}
		span.availability {
			margin-top: 23px;
			color: $darkgray;
			@include phone {
				margin-top: 16px;
			}
		}
	}
}