:root {
	--button-color: #fff;
	--button-color-background: #cc141b;
	--button-color-border: #cc141b;
	--button-hover-color: #cc141b;
	--button-hover-color-background: #fff;
	--button-hover-color-border: #cc141b;

	--button-alternative-color: #000;
	--button-alternative-color-background: #e3e3e3;
	--button-alternative-hover-color: #e3e3e3;
	--button-alternative-hover-color-background: #000;

	--color-text-link: #5d5d5d;
	--color-text: #5d5d5d;
	--color-red: red;
	--color-sold-out-icon: #fff;
	--color-sold-out-text: red;
	--color-amount-limit: rgba(255, 0, 0, 0.45);
	--color-cart-discount: green;
	--color-message-error: red;
	--color-message-ok: green;

	--background-quick-order-sub-product: #000;
	--color-quick-order-sub-product: #fff;
	--padding-quick-order-sub-product: 5px 30px;

	--image-background-color: #e4dede;
	--border-color: #e3e3e3;
	--fieldset-background-color: #e3e3e3;
	--select-caret-down: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0.63em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 320 512" style="vertical-align: -0.125em;"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" fill="%23999"/></svg>');
}

.iz-input[type="email"],
.iz-input[type="password"],
.iz-input[type="text"],
.iz-input[type="number"] {
	border: 2px solid var(--border-color);
	box-sizing: border-box;
	padding: 10px;
	width: 100%;
	font-size: 1rem;
}

.iz-dropdown {
	display: inline-block;
	position: relative;
	width: 100%;
	background: var(--select-caret-down) #fff top 10px right 10px no-repeat;
	background-size: 32px 32px;
}

.iz-dropdown select {
	appearance: none;
	background-color: transparent;
	border: 2px solid var(--border-color);
	box-sizing: border-box;
	cursor: pointer;
	padding: 14px 45px 11px 6px;
	margin: 0;
	position: relative;
	text-transform: uppercase;
	width: 100%;
	font-size: 1rem;
}

.iz-dropdown select:hover,
.iz-input[type="email"]:hover,
.iz-input[type="password"]:hover,
.iz-input[type="text"]:hover,
.iz-input[type="number"]:hover {
	border-color: var(--color-gray-3);
	transition-property: border-color;
	transition-duration: 500ms;
	outline: 1px solid transparent;
}

.iz-dropdown select:focus,
.iz-input[type="email"]:focus,
.iz-input[type="password"]:focus,
.iz-input[type="text"]:focus,
.iz-input[type="number"]:focus {
	outline: 1px solid var(--color-gray-3);
}

.iz-button {
	display: inline-block;
}

.button {
	font: var(--font-regular);
	line-height: 1;
	margin: 0;
	padding: 0;
}

.button::-moz-focus-inner {
	border: 0;
	margin: 0;
	padding: 0;
}

.button::-moz-focus-inner {
	border: 0 none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.addresses fieldset {
	background-color: #e1e1e1;
	margin-top: 32px;
	padding: 15px 20px 10px;
}

.addresses fieldset legend {
	background-color: #e1e1e1;
	float: left;
	font-weight: 500;
	margin-left: -20px;
	margin-top: -47px;
	padding: 7px 20px;
}

.authFormHeader {
	font-size: 3rem;
	margin-bottom: 25px;
}

.authFormHeader .iz-icon {
	width: 40px;
}

.authForm.address {
	background-color: var(--color-gray-5);
	padding: 20px;
	margin-top: 20px;
}

.stepContent .authForm.address {
	padding: 0;
}

.authForm > div {
	margin: 0 auto 10px auto;
	max-width: 100%;
}

.authForm.address > div {
	width: 100%;
}

.authForm h2 {
	margin-top: 40px;
}

.authForm.new form {
	margin-top: 12px;
}

.authForm.login form {
	margin-top: 56px;
}

.authForm form > div,
.authForm .billing-addresses > div {
	margin-bottom: 15px;
}

.authForm label {
	display: block;
	font-weight: bold;
	margin-bottom: 5px;
}

.authForm label.billing-label {
	margin: 20px 0;
	color: var(--color-text-link);
	user-select: none;
}

.authForm input,
.payment-method input {
	vertical-align: baseline;
}

.authForm input[type="checkbox"],
.payment-method input {
	margin-right: 7px;
}

.authForm .buttons {
	margin: 10px 0;
}

.customer-name-grid,
.customer-address-grid,
.customer-postal-city-grid,
.customer-postal-city-phone-grid,
.customer-postal-number-phone-grid,
.customer-address-city-grid {
	display: grid;
	grid-gap: 20px;
}

.customer-name-grid {
	grid-template-columns: auto 135px auto;
}

.customer-address-grid {
	grid-template-columns: auto 135px;
}

.customer-postal-city-grid {
	grid-template-columns: 135px auto;
}

.customer-postal-city-phone-grid {
	grid-template-columns: 135px auto auto;
}

.customer-postal-number-phone-grid {
	grid-template-columns: 135px 135px auto;
}

.customer-address-city-grid {
	grid-template-columns: auto 200px;
}

.button {
	cursor: pointer;
	font-size: 1rem;
	padding: 8px 16px;
	transition: background-color .3s, color .3s;
}

.button,
.button.inverse:hover {
	background-color: var(--button-color-background);
	border: 1px solid var(--button-color-border);
	color: var(--button-color);
}

.button:hover,
.button.inverse {
	background-color: var(--button-hover-color-background);
	border: 1px solid var(--button-hover-color-border);
	color: var(--button-hover-color);
}

.authForm .buttons button {
	float: right;
}

.authForm .buttons a {
	float: left;
	margin-bottom: 10px;
	margin-right: 5px;
}

#popup_notice {
	align-items: center;
	background-color: rgba(0, 0, 0, 0.88);
	bottom: 0;
	color: var(--color-red);
	display: none;
	justify-content: center;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 10000;
}

#popup_notice.open {
	display: flex;
}

#popup_notice h1 {
	margin-top: 0;
}

#popup_notice .buttons {
	margin-top: 25px;
}

#popup_notice .notification {
	background-color: var(--color-white);
	max-width: calc(100% - 40px);
	padding: 35px;
	width: 510px;
}

#popup_notice .notification p {
	color: var(--color-text);
}

#popup_notice .notification .button {
	display: inline-block;
	float: left;
}

#popup_notice .notification .button:focus {
	outline: none;
}

#popup_notice .notification .buttons .button:nth-child(1) {
	margin-right: 20px;
}

#popup_notice .close .iz-icon {
	cursor: pointer;
	float: right;
	width: 22px;
}

#popup_notice .close .iz-icon:before {
	background-color: var(--button-color-background);
}

#popup_notice .notification .product-name {
	font-size: 1.2rem;
}

/***********************************************************************
 * Shop
 ***********************************************************************/

/* Category and product blocks */
.shopBlocks .shopBlock.categories {
	background-color: var(--color-gray-2);
	display: flex;
	flex-direction: column;
	padding: 20px;
}

.shopBlocks .shopBlock.categories a.back {
	align-self: flex-end;
	margin-top: auto;
}

.shopBlocks .shopBlock.categories a {
	color: var(--color-black);
	display: block;
}

.shopBlocks .shopBlock.categories a.active,
.shopBlocks .shopBlock.categories a:hover {
	font: var(--font-bold);
}

.shopBlocks .shopBlock a {
	color: var(--color-text);
}

.shopBlocks {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	line-height: 155%;
	margin: 40px auto;
	max-width: 1140px;
}

.shopBlocks .shopBlock {
	display: block;
	padding-bottom: 20px;
	position: relative;
	transition: box-shadow .3s;
}

.shopBlocks .shopBlock.product {
	border: 2px solid var(--color-gray-2);
	display: flex;
	flex-direction: column;
	padding-bottom: 0;
}

.shopBlocks .shopBlock.product .soldout {
	display: none;
}

.shopBlocks .shopBlock.product[data-soldout="true"] .soldout {
	display: block;
	padding: 10px;
	text-align: center;
	width: 100%;
}

.shopBlocks .shopBlock.product[data-soldout="true"] .soldout .iz-icon {
	vertical-align: bottom;
	width: 22px;
}

.shopBlocks .shopBlock:not(.categories):hover {
	-webkit-box-shadow: 11px 11px 16px 9px rgba(142, 142, 142, 0.49);
	box-shadow: 11px 11px 16px 9px rgba(142, 142, 142, 0.49);
}

.shopBlocks .shopBlock .price {
	float: left;
	margin-left: 20px;
	margin-top: 6px;
}

.shopBlocks .shopBlock .positionBottom {
	align-self: flex-end;
	width: 100%;
}

.shopBlocks .shopBlock .buttons {
	bottom: 0;
	float: right;
	right: 0;
}

.shopBlocks .shopBlock .buttons:after {
	clear: both;
	display: block;
	content: '';
}

.shopBlocks .shopBlock .buttons a {
	float: left;
	padding: 6px 15px;
	transition: background-color .3s, color .3s;
}

.shopBlocks .shopBlock .buttons .details {
	background-color: var(--button-alternative-color-background);
	border: 1px solid var(--button-alternative-color-background);
}

.shopBlocks .shopBlock .buttons .order {
	margin-left: 15px;
}

.shopBlocks .shopBlock .buttons .details:hover {
	background-color: var(--button-alternative-hover-color-background);
	color: var(--button-alternative-hover-color);
}

.shopBlocks .shopBlock .buttons .order {
	background-color: var(--button-color-background);
	border: 1px solid var(--button-color-border);
	color: var(--button-color);
}

.shopBlocks .shopBlock .buttons .order:hover {
	background-color: var(--button-hover-color-background);
	color: var(--button-hover-color);
}

.shopBlocks .shopBlock .image {
	background-color: var(--image-background-color);
	flex: 1;
	height: 240px;
	margin-bottom: 25px;
	text-align: center;
}

.shopBlocks .shopBlock img {
	object-fit: contain; /* Do not scale the image */
	object-position: center; /* Center the image within the element */
	height: 240px;
	mix-blend-mode: multiply;
	width: 500px;
}

.shopBlocks .shopBlock .title {
	font: var(--font-bold);
	margin-bottom: 15px;
	padding: 0 20px;
}

.shopBlocks .shopBlock .title .favorite .iz-icon {
	vertical-align: sub;
	width: 20px;
}

.shopBlocks .shopBlock .text {
	padding: 0 20px;
}

.product-detailXXX {
	float: right;
	max-width: 100%;
	position: relative;
	width: 100%;
}

.product-header {
	background-color: var(--color-gray-2);
}

.product-title {
	background-color: var(--color-white);
	box-sizing: border-box;
	font-size: 2.0rem;
	font: var(--font-bold);
	line-height: 120%;
	margin: 0 auto;
	max-width: 1150px;
	padding: 30px;
	text-align: center;
}

.product-title .favorite {
	cursor: pointer;
}

.product-title .favorite .iz-icon {
	width: 28px;
}

.product-grid {
	display: grid;
	grid-gap: 24px;
	grid-template-columns: 65fr 35fr;
	margin: 0 auto 30px;
	max-width: 1150px;
	width: 100%;
}

.product-introduction {
	background-color: var(--color-gray-2);
	box-sizing: border-box;
	padding: 25px;
}

.product-order-block {
	font-size: 1.05rem;
	grid-auto-rows: auto auto auto 45px;
	min-height: 270px;
	row-gap: 10px;
}

.product-order-block > div {
	margin-bottom: 10px;
	padding: 15px 20px;
}

.product-order-block .bulk-prices {
	margin-top: 10px;
}

.product-order-block > div.name {
	font: var(--font-bold);
}

.product-order-block > div.name .currency {
	float: right;
}

.product-order-block .button {
	display: block;
	width: 100%;
}

.product-order-block.sold-out .button,
.product-order-block.sold-out .amount input {
	display: none;
}

.product-order-block .amount input {
	border: none;
	padding: 2px;
	text-align: right;
	width: 80px;
}

.product-order-block .amount[data-stockable="true"][data-stock="0"] .stock {
	font-weight: bold;
}

.product-order-block .amount[data-stockable="true"][data-stock="0"] > span,
.product-order-block .amount[data-stockable="true"][data-stock="0"] input {
	display: none;
}

.product-order-block .amount .iz-icon {
	font-size: 1rem;
	/*margin-right: 5px;*/
	vertical-align: bottom;
}

.product-order-block .amount .iz-icon:before {
	/*background-color: var(--color-sold-out-icon);*/
}

/*.product-order-block .sold-out {*/
/*	color: var(--color-sold-out-text);*/
/*}*/

.iz-input.limit {
	background-color: var(--color-amount-limit);
}

/***********************************************************************
 * Shopping cart
 ***********************************************************************/
.cart {
	margin: 0 auto;
	max-width: 100%;
}

.cart h1 {
	margin-bottom: 0;
}

.new-customer-grid .authForm > a.button {
	display: inline-block;
	margin-bottom: 20px;
}

.new-customer-grid .cart h1 {
	margin-bottom: 30px;
}

.new-customer-grid h1 a {
	color: var(--color-black);
}

.new-customer-grid .cart h1 .iz-icon,
.new-customer-grid .shipping-addresses h1 .iz-icon,
.new-customer-grid .customer-data h1 .iz-icon {
	margin-right: 15px;
	width: 40px;
}

.cart label {
	color: var(--color-red);
}

.cart .buttons {
	float: right;
}

.new-customer-grid {
	display: grid;
	grid-column-gap: 40px;
	grid-row-gap: 40px;
	grid-template-columns: repeat(2, 1fr);
	grid-template-areas:
		'button-top button-top'
		'address cart'
		'button button';
	padding-bottom: 40px;
}

.new-customer-grid .address-block {
	grid-area: address;
}

.new-customer-grid .cart-overview {
	grid-area: cart;
}

.new-customer-grid .buttons {
	grid-area: button;
}

.new-customer-grid .buttons.top {
	grid-area: button-top;
}

.new-customer-grid .buttons button {
	float: right;
}

.new-customer-grid .authForm h1 {
	margin-top: 32px;
}

.orderFinished .cart .products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-row-gap: 20px;
	grid-column-gap: 20px;
}

.orderFinished .cart h1 {
	display: none;
}

.number-input .iz-input[type="number"] {
	background-color: transparent;
	border: none;
	font-size: 1em;
	text-align: center;
	-moz-appearance: textfield;
}

.number-input {
	display: grid;
	grid-gap: 0;
	grid-template-columns: 20px auto 20px;
	grid-template-areas: "down input up" "message message message";
	max-width: 100px;
}

.orderFinished .number-input .iz-icon {
	display: none;
}

.orderFinished .number-input input.iz-input {
	border-color: transparent !important;
	background: transparent !important;
}

.number-input input {
	height: 22px;
}

.number-input .number-input-button-down {
	grid-area: down;
}

.number-input .iz-input {
	grid-area: input;
}

.number-input .number-input-button-up {
	grid-area: up;
}

input[type='number'] {
	-moz-appearance: textfield;
}

.number-input .iz-input[type="number"]::-webkit-outer-spin-button,
.number-input .iz-input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
}

.products .product > .image {
	grid-area: image;
}

.products .product > .title {
	grid-area: title;
}

.products .product > .subtitle {
	grid-area: subtitle;
}

.products .product > .parameters {
	grid-area: parameters;
}

.products .product > .delete {
	grid-area: delete;
}

.products .product > .itemprice {
	grid-area: itemprice;
}

.products .product > .productoptions {
	grid-area: productoptions;
}

.products .product > .message {
	grid-area: message;
}

.products .product > .price {
	grid-area: price;
}

.products .product > .actions {
	grid-area: actions;
}

.products .product > .total {
	grid-area: total;
	font: var(--font-bold);
	font-size: initial;
}

.totals .currency {
	font: var(--font-bold);
	font-size: initial;
}

.cart .products .product,
.tablecart .products .product,
.tablecart .products .heading {
	display: grid;
	grid-template-areas: 'image title price actions total delete';
	grid-template-columns: 20% auto 10% 20% 10% 5%;
	grid-column-gap: 10px;
}

.account.tablecart .products .product,
.account.tablecart .products .heading {
	grid-template-areas: 'image title amount itemprice price';
	grid-template-columns: 10% auto 10% 15% 15%;
	border-bottom: 1px solid var(--color-gray-3);
}

.account.tablecart .products .product > div {
	margin: 10px 0 0 0;
}

.cart .products .heading,
.tablecart .products .heading {
	border-bottom: 2px solid var(--color-gray-5);
	margin: 10px 0 0 0;
	padding: 0 0 10px 0;
}

.tablecart .products .product > .amount,
.tablecart .products .heading > .amount,
.tablecart .products .heading > .itemprice,
.tablecart .products .heading > .price {
	text-align: right;
}

.products .product > div[data-link] {
	cursor: pointer;
}

.products .product > div[data-link]:hover {
	/*background-color: var(--color-gray-6);*/
}

.cart:not(.small) .products .product > div:first-child {
	padding-left: 10px;
}

.cart:not(.small) .products .product > div:last-child {
	padding-right: 10px;
}

.cart.small .products .product {
	grid-template-columns: 120px auto 60px 80px;
}

.cart .products .product > div.right {
	float: right;
	display: initial;
}

.cart .products .product.heading > div.right {
	display: inline-block;
}

.cart .products .heading > div,
.cart .products .heading > div span {
	font-weight: bold;
}

.favorites .favorite .image img,
.cart .products .product .image img {
	height: auto;
	mix-blend-mode: multiply;
	object-fit: contain;
	width: auto;
}

.cart .products .product .actions > div {
	margin: 0 15px 0 auto;
	float: left;
}

.cart .products .product .actions input.iz-input {
	width: 80px;
}

.cart .products .product .price .currency,
.cart .products .product .total .currency {
	margin-left: calc(100% - 80px);
}

.cart:not(.small) .products .product:nth-child(even),
.favorites .favorite:nth-child(odd) {
	background-color: var(--color-gray-6);
}

.cart .products .product,
.favorites .favorite {
	border-bottom: 2px solid var(--color-gray-5);
	line-height: 150%;
}

.orderFinished .cart .products .product {
	background-color: var(--color-gray-5);
	border: none;
	grid-template-columns: 25fr 45fr 35fr 20fr 30fr;
}

.cart .products .product > div {
	display: flex;
	align-items: center;
}

.cart .products .product .title .parameters {
	margin-top: 16px;
}

.cart .products .product .title {
	align-items: start;
	align-self: center;
	flex-direction: column;
}

.cart .products .product .actions {
	position: relative;
	margin-left: 10px;
}

.cart .products .product .title a {
	color: var(--color-black);
}

.cart .actions .iz-icon {
	cursor: pointer;
}

.cart .totals,
.tablecart .totals {
	line-height: 160%;
	margin: 20px 0 20px auto;
	max-width: 100%;
	width: 370px;
}

.cart .totals > div,
.tablecart .totals > div {
	display: grid;
	text-align: right;
	grid-template-columns: 200px auto;
}

.cart .totals .discount,
.tablecart .totals .discount {
	color: var(--color-cart-discount);
}

.cart .pdf {
	clear: both;
}

.cart .pdf a.iz-icon {
	width: 50px;
	float: left;
}

.cart .pdf a:not(.iz-icon) {
	float: left;
	margin: 15px 0 0 5px;
	color: #000;
	text-decoration: none;
}

.cart label {
	font: var(--font-bold);
	cursor: initial;
}

.cart .buttons {
	padding: 20px 0;
}

.cart > .discount {
	height: 70px;
	margin-top: 15px;
}

.discount {
	height: auto;
	position: relative;
	width: 100%;
}

.discount .input {
	margin-top: 25px;
	position: absolute;
	right: 0;
	width: 230px;
}

.discount span[data-jsevent] {
	position: absolute;
	right: 5px;
	top: 0;
}

.discount .message {
	text-align: right;
}

.discount input[type="text"] {
	width: 100%;
}

.discount .message.error {
	color: var(--color-message-error);
}

.discount .message.ok {
	color: var(--color-message-ok);
}

.discount .iz-icon {
	cursor: pointer;
	margin-top: 8px;
	margin-left: 10px;
	width: 28px;
}

.discount .iz-icon:before {
	background-color: var(--color-gray-2);
	transition: .3s background-color;
}

.discount .iz-icon:hover:before {
	background-color: var(--color-text-link);
}

/***********************************************************************
 * Order complete
 ***********************************************************************/
.billing-addresses {
	display: none;
}

.billing-addresses.active {
	display: block;
}

.shipping-addresses .addresslist,
.billing-addresses .addresslist {
	padding: 0 0 10px 0;
}

.billing-addresses .address,
.shipping-addresses .address {
	display: grid;
	grid-template-columns: auto;
	margin-bottom: 20px;
}

.shipping-addresses .address label,
.billing-addresses .address label {
	width: 100%;
}

.shipping-addresses .customer-address,
.billing-addresses .customer-address {
	background: var(--color-gray-7);
	border: 2px solid var(--color-gray-2);
	color: var(--color-gray-2);
	border-radius: 15px;
	margin-bottom: 15px;
	padding: 10px 15px;
	width: auto;
	cursor: pointer;
	box-sizing: border-box;
	position: relative;
}

.shipping-addresses .customer-address .check,
.billing-addresses .customer-address .check {
	position: absolute;
	right: 20px;
	top: 20px;
	color: var(--color-message-ok);
	font-size: 1.5rem;
	display: none;
}

.shipping-addresses .customer-address.hover,
.shipping-addresses .customer-address.active,
.billing-addresses .customer-address.hover,
.billing-addresses .customer-address.active {
	color: var(--color-black);
	background-color: var(--color-gray-5);
	transition: background-color .25s, color .25s;
	cursor: default;
}

.shipping-addresses .customer-address.hover,
.billing-addresses .customer-address.hover {
	background-color: var(--color-gray-4);
	cursor: pointer;
}

.shipping-addresses .customer-address.active .check,
.billing-addresses .customer-address.active .check {
	display: block;
}

.shipping-addresses .customer-address label input,
.billing-addresses .customer-address label input {
	float: left;
	margin-top: 6px;
}

.shipping-addresses .customer-address label div,
.billing-addresses .customer-address label div {
	float: left;
	margin-left: 10px;
	width: calc(100% - 30px);
}

.complete .steps {
	display: grid;
	grid-template-columns: 40px auto 40px;
	margin: 0 auto 30px;
	width: 85%;
	padding-top: 40px;
}

.complete .steps.steps3 {
	grid-template-columns: 40px auto 40px auto 40px;
}

.complete .steps.steps4 {
	grid-template-columns: 40px auto 40px auto 40px auto 40px;
}

.complete .steps.steps5 {
	grid-template-columns: 40px auto 40px auto 40px auto 40px auto 40px;
}

.complete .steps.steps6 {
	grid-template-columns: 40px auto 40px auto 40px auto 40px auto 40px auto 40px;
}

.complete .steps .line {
	background-color: var(--button-color-background);
	height: 2px;
	margin-top: 18px;
	width: 100%;
}

.complete .steps .step {
	height: 66px;
	position: relative;
	color: var(--color-black);
	cursor: default;
}

.complete .steps .step span {
	background-color: var(--button-hover-color-background);
}

.complete .steps .step.active {
	cursor: pointer;
}

.complete .steps .step.active:hover span {
	background-color: var(--button-hover-color-background);
	color: var(--color-text-link);
}

.complete .steps .step.active span {
	background-color: var(--button-color-background);
	color: var(--button-color);
}

.complete .steps .step span {
	border: 2px solid var(--button-color-border);
	border-radius: 50%;
	color: var(--color-text);
	display: block;
	font: var(--font-bold);
	line-height: 1;
	padding: 11px 7px 9px;
	text-align: center;
	width: 40px;
}

.complete .steps .step div {
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
}

.cart-overview .cart {
	width: auto;
}

.user-order-form .buttons {
	text-align: right;
}

.user-order-form.noauth .authForm:nth-child(2) {
	border-left: 2px solid var(--button-color-border);
}

.user-order-form .block-data {
	margin: 10px 0;
}

.user-order-form .block-data.edit {
	background-color: var(--color-gray-2);
	padding: 15px;
}

.user-order-form .block-data.edit div[contenteditable] {
	background-color: var(--color-white);
	min-height: 44px;
	padding: 10px;
}

.user-order-form .block-data:not(.edit) .account-field,
.user-order-form .block-data:not(.edit) div[contenteditable] {
	display: inline-block;
}

.user-order-form .block-data:not(.edit) .account-field[data-empty="true"] {
	display: none;
}

.user-order-form .block-data:not(.edit) .account-field.email,
.user-order-form .block-data:not(.edit) .account-field.sPostal,
.user-order-form .block-data:not(.edit) .account-field.sCity,
.user-order-form .block-data:not(.edit) .account-field.sPhone {
	display: block;
}

.user-order-form .block-data.edit .account-field {
	margin-bottom: 10px;
}

.user-order-form .account-field label {
	display: none;
}

.user-order-form .edit label,
.user-order-form .edit .buttons,
.user-order-form .buttons {
	display: block;
}

.user-order-form .buttons.hidden {
	display: none;
}

.user-order-form h1 span {
	cursor: pointer;
}

.user-order-form h1 span .iz-icon:before {
	transition: .3s background-color;
}

.user-order-form h1 span:hover .iz-icon:before {
	background-color: var(--button-color-background);
}

.payment-methods,
.finished {
	margin: 0 auto;
}

.finished h3 {
	margin: 20px 0;
}

.payment-methods-wrapper .buttons .button {
	float: right;
}

.payment-methods {
	display: grid;
	grid-gap: 50px;
	grid-template-columns: repeat(4, 1fr);
	margin: 20px 0;
}

.payment-method {
	align-items: center; /* align vertical */
	background-color: #eeeeee;
	border-radius: 10px;
	cursor: pointer;
	display: flex;
	justify-content: center; /* align horizontal */
	min-height: 140px;
	padding: 15px;
	text-align: center;
	transition: background-color .2s;
}

.payment-method:has(.surcharge) {
	display: block;
}

.payment-method .surcharge {
	margin-top: 10px;
	font: var(--font-bold);
}

.payment-method.active,
.payment-method:hover {
	background-color: #ababab;
}

.payment-method img {
	width: 100px;
}

/***********************************************************************
 * Account
 ***********************************************************************/
.account,
.cart {
	margin: 0 auto;
	max-width: 100%;
}

.orderFinished .cart {
	width: 100%;
}

.new-customer-grid .cart {
	border-radius: 15px;
	margin: 40px 0;
	padding: 10px 0;
	width: 100%;
}

.new-customer-grid .cart > div {
	padding-left: 20px;
	padding-right: 20px;
}

.new-customer-grid .cart .products {
	border-bottom: 5px solid #fff;
}

.new-customer-grid .cart .products .product {
	display: grid;
	gap: 10px;
	grid-template-areas: "image title title title"
						 "image price actions total";
	grid-template-columns: 80fr 72fr 111fr 72fr;
}

.account button {
	background-color: var(--button-color-background);
	color: var(--color-white);
	float: right;
	margin-top: 15px;
}

.account a.button {
	margin-top: 15px;
}

.account.cart a.button {
	bottom: 0;
	margin-bottom: 10px;
	position: relative;
}

.account button:hover {
	background-color: var(--color-white);
	color: var(--button-color-background);
}

.account h1 {
	font: var(--font-bold);
	padding-bottom: 30px;
}

.account-grid {
	display: grid;
	grid-gap: 40px;
	grid-template-columns: 220px auto;
}

.account-navigation {
	background-color: var(--color-white);
}

.account-navigation ul,
.account-navigation li {
	margin: 0;
	list-style-type: none;
}

.account-navigation a {
	color: var(--color-text);
	cursor: pointer;
	line-height: 155%;
}

.account-navigation a:hover {
	color: var(--color-text-link);
	text-decoration: underline;
}

.account-content .account-field {
	display: grid;
	grid-template-columns: 260px auto;
	margin-bottom: 10px;
}

.account-content .account-field:after {
	clear: both;
	content: '';
	display: block;
}

.account-content .account-field label {
	display: inline-block;
	float: left;
	padding-top: 8px;
	padding-right: 10px;
}

.account-content .account-field label.required:after {
	content: '*';
	margin: 0 0 0 5px;
	color: var(--color-red);
}

.account-content .account-field div.error {
	color: var(--color-red);
}

.account-content .account-field input:not(.iz-checkbox) {
	float: left;
}

.account-grid .messages {
	color: var(--color-red);
	margin-bottom: 20px;
}

.account-grid .orders-head,
.account-grid .order {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.account-grid .orders-head > div:last-child {
	text-align: right;
}

.account-grid .order {
	grid-template-areas:
		'. . . .'
		'order order order order';
	grid-template-columns: repeat(4, 1fr);
	border-bottom: 1px solid var(--color-gray-4);
	padding: 5px 0;
}

.account-grid .order > div.ordercontent {
	grid-area: order;
	overflow: hidden;
	height: 0;
	transition-property: height;
	transition-duration: 500ms;
}

.account-grid .order > div.ordercontent > div {
	padding-bottom: 20px;
	border-bottom: 2px solid var(--dark);
}

.account-grid .order a {
	color: var(--dark);
}

.account-grid .orders-head {
	font: var(--font-bold);
}

.account.cart .products .heading {
	grid-template-columns: 160px auto 140px 120px 130px;
}

.account.cart .products .heading > div:nth-child(3),
.account.cart .products .heading > div:nth-child(4),
.account.cart .products .heading > div:nth-child(5) {
	padding-right: 15px;
	text-align: right;
}

.account.cart .products .price,
.account.cart .products .amount,
.account.cart .products .total {
	justify-content: flex-end;
	padding-right: 15px;
}

.tablecart .reorder {
	margin-top: 15px;
	height: 50px;
	text-align: right;
}

.tablecart .reorder a.button,
.tablecart .reorder a.button:active {
	margin-top: 0;
	display: block;
	color: var(--color-white);
	text-align: center;
	background-color: var(--light);
	float: right;
}

.tablecart .reorder a.button:hover {
	background-color: var(--color-white);
	border: 1px solid var(--light);
	color: var(--dark);
	text-decoration: none;
}

.order-history td {
	min-width: 130px;
}

.order-history-address {
	margin-bottom: 25px;
}

/* Favorites */
.favorites {
	border-top: 2px solid var(--color-gray-2);
}

.favorites .favorite {
	border-bottom: 2px solid var(--color-gray-2);
	display: grid;
	grid-gap: 25px;
	grid-template-columns: 200px auto 26px;
	padding: 20px;
}

.favorite a {
	color: var(--color-text);
}

.favorite a:hover {
	color: var(--color-text-link);
	text-decoration: underline;
}

.favorite .iz-icon {
	vertical-align: top;
}

.favorite .iz-icon:before {
	background-color: var(--color-text-link);
	cursor: pointer;
	transition: .3s background-color;
}

.favorite .iz-icon:hover:before {
	background-color: var(--color-text);
}

/* Addresses */
.addresses {
	display: grid;
	grid-gap: 20px;
	grid-template-columns: repeat(2, 1fr);
}

.addresses.account-fields {
	display: block;
}

.addresses legend .iz-icon {
	margin-left: 10px;
	vertical-align: sub;
}

.addresses legend .iz-icon:before {
	background-color: var(--color-text);
	cursor: pointer;
	transition: .3s background-color;
}

.addresses legend .iz-icon:hover:before {
	background-color: var(--color-text-link);
}

.addresses .address label {
	display: inline-block;
	float: left;
	font: var(--font-bold);
	margin: 0;
	width: 150px;
}

.addresses .address .defaultAddressSelect label {
	width: auto;
}

.addresses .address div.error {
	display: none;
	font: var(--font-bold);
	color: var(--color-red);
}

.addresses .address div.error.active {
	display: block;
}

.addresses .address:not(.edit) input[type="text"],
.addresses .address:not(.edit) .iz-dropdown {
	background-color: unset;
	border: 0;
	margin: 0 0 10px 10px;
	padding: 0;
	pointer-events: none;
	width: calc(100% - 200px);
}

.addresses .address:not(.edit) .iz-dropdown {
	margin-top: 0;
}

.addresses .address:not(.edit) .iz-dropdown {
	background: none;
}

.addresses .address:not(.edit) .iz-dropdown select,
.addresses .address:not(.edit) .iz-dropdown option {
	padding: 0;
}

.addresses .address .default {
	clear: both;
	float: left;
}

.addresses .address .iz-checkbox {
	vertical-align: unset;
	margin-right: 5px;
}

.addresses .address:not(.edit) .iz-checkbox + span {
	opacity: 0.5;
	font: var(--font-regular);
}

.addresses .address:not(.edit) .iz-checkbox:checked + span {
	opacity: 1;
}

.addresses .address:not(.edit) select {
	border: none;
	margin-top: -6px;
	margin-left: -4px;
	padding: 0;
	text-transform: unset;
}

.addresses .address.edit fieldset > div {
	margin-bottom: 12px;
}

.addresses .address.edit select {
	margin-left: 0;
}

.addresses input[type="radio"] {
	margin-right: 3px;
	vertical-align: baseline;
}

.address .button {
	display: none;
	float: right;
}

.address.edit .button {
	bottom: 0;
	display: block;
	position: relative;
}

.addAddress {
	cursor: pointer;
	font: var(--font-bold);
	margin-bottom: 20px;
	transition: .3s color;
}

.addAddress:hover {
	color: var(--color-text-link);
}

.addAddress .iz-icon {
	margin-right: 7px;
	margin-top: -5px;
}

.addAddress .iz-icon:before {
	transition: .3s background-color;
}

.addAddress:hover .iz-icon::before {
	background-color: var(--color-text-link);
}

[data-hovertext] {
	cursor: pointer;
	position: relative;
}

[data-hovertext]:hover:after {
	opacity: 1;
	transition: opacity .3s;
	visibility: visible;
}

[data-hovertext]:after {
	background-color: var(--button-color-background);
	color: var(--button-color);
	content: attr(data-hovertext);
	opacity: 0;
	padding: 8px 12px;
	position: absolute;
	right: 0;
	text-align: left;
	top: -117px;
	transition: opacity .3s;
	visibility: hidden;
	width: 230px;
}

.frontendLogin .authForm {
	margin: 0 auto;
	width: 50%;
}

.frontendLogin .authForm button[type="submit"] {
	bottom: 0;
	position: relative;
}

.frontendLogin .authForm form .block {
	margin-top: 40px;
}

.payment-cancelled .buttons {
	height: 40px;
	margin-top: 20px;
}

.payment-cancelled .button {
	margin-right: 10px;
}

.product-sub-order {
	margin: 0 auto 30px;
	max-width: 1150px;
	width: 100%;
}

.product-sub-order .sub-product {
	display: grid;
	grid-template-columns: auto 150px 145px 170px;
	line-height: 165%;
	margin-bottom: 2px;
	min-height: auto;
}

.product-sub-order .sub-product > div {
	margin-bottom: 0;
}

.product-sub-order .sub-product input[name="amount"] {
	border: none;
	font-size: 0.9rem;
	padding: 5px 6px;
	width: 100px;
}

.product-sub-order .sub-product .sub-product-button {
	margin-bottom: 0;
	padding: 0;
}

.product-sub-order .sub-product .sub-product-button .button {
	height: 100%;
}

.product-sub-order .sub-product .sub-product-button .button {
	padding: 10px 16px;
}

.product-sub-order .sub-product > *:not(.sub-product-button) {
	background-color: var(--background-quick-order-sub-product);
	color: var(--color-quick-order-sub-product);
	padding: var(--padding-quick-order-sub-product);
}
