/* ==================================== Shoppingcart [general] ==================================== */
body > header.shopping_cart > div {
	padding: 0 var(--shopping-cart-padding-sides);
}

section.shopping_cart_header, section.shopping_cart_header + section {
	padding: 20px var(--shopping-cart-padding-sides) 0;
}

section.shopping_cart_header main h1 {
	margin: 0;
}

body > header > div.main nav.cart {
	flex: 1 0 100%;
	margin: 2em 0 0 0;
	background: var(--blue-dark);
	padding: 1em 1em;
	box-sizing: border-box;
	border-radius: 3px;
}

body > header > div.main  nav.cart > ol li a {
	font-size: var(--shopping-cart-nav-font-size);
}


body > header > div.main nav.cart > ol {
	justify-content: space-evenly;
}

body > header > div.main nav.cart > ol > li {
	margin: 0;
}

body > header > div.main nav.cart > ol > li > a {
	color: var(--shopping-cart-nav-color);
}

nav.cart > ol > li > a:hover, nav.cart > ol > li > a.selected {
	color: var(--shopping-cart-nav-color);
	border-color: var(--shopping-cart-nav-color);
}

main.shopping_cart + aside {
	flex: 0 0 var(--shopping-cart-sidebar-width);
	margin: 0 0 0 var(--shopping-cart-sidebar-offset);
}

main.shopping_cart + aside .vouchers {
	margin: 0 0 1em;
}

main.shopping_cart + aside .widget {
	border: 0;
	text-align: left;
	margin: 1em 0;
	padding: 0;
}

.shopping_cart {
	position: relative;
}

.shopping_cart div h2, .shopping_cart div h2 a, .shopping_cart h3, .shopping_cart span.heading3 {
	font-size: var(--font-size-regular);
	font-weight: 600;
	line-height: var(--line-height-regular);
	margin: 0;
}

.shopping_cart div h2, .shopping_cart div h2 a {
	color: var(--black);

}

div.controls label {
	text-align: left;
}

div.controls > form {
	display: inline-flex;
	margin: 0;
}
div.controls input[type="text"], div.controls button, div.controls .button, .shopping_cart a.button.delete_item, .breakdown button.delete_voucher {
	box-sizing: border-box;
	width: var(--shopping-cart-controls-size);
	height: var(--shopping-cart-controls-size);
	margin: 0;
	padding: 0;
	text-align: center;
	box-shadow: none;
	border-color: var(--shopping-cart-border-color);
}

div.controls input[type="text"] {
	width: 32px;
	padding: 0;
	border-radius: 0;
}

.shopping_cart a.button.delete_item {
	border-radius: 3px;
	margin: 0 0 0 5px;
	line-height: var(--shopping-cart-controls-size);
}

.breakdown button.delete_voucher {
	width: 20px;
	height: 20px;
	margin: 0;
	border-radius: 3px;
	float: right;
}

div.controls button, div.controls .button, .shopping_cart a.button.delete_item, .breakdown button.delete_voucher {
	border: 1px solid var(--shopping-cart-border-color);
	color: var(--shopping-cart-button-color);
	background: var(--shopping-cart-button-background);
	font-weight: 600;
}

div.controls button:hover, div.controls .button:hover, .shopping_cart a.button.delete_item:hover, .breakdown button.delete_voucher:hover {
	color: var(--shopping-cart-button-color-hover);
	background: var(--shopping-cart-button-background-hover);
}

div.controls button[disabled], div.controls .button[disabled] {
	/**opacity: 0.3;**/
}

div.controls button.min {
	border-radius: 0;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
	border-right: 0;
}


div.controls button.plus {
	border-radius: 0;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
	border-left: 0;
}

div.controls button.cart {
	width: auto;
	flex: 0 0 auto;
	margin: 0 0 0 10px;
	padding: 0 10px;
}
/* ==================================== Shoppingcart [extended] ==================================== */
main.shopping_cart div.extended ul.cart_overview li::before {
	display: none;
}

main.shopping_cart div.extended ul.cart_overview {
	gap: 1em;
	display: flex;
	flex-wrap: wrap;
}

main.shopping_cart div.extended ul.cart_overview > li {
	flex: 0 0 100%;
	gap: 1em;
	padding: 0 0 20px 0;
	box-sizing: border-box;
	align-items: flex-start;
	border-bottom: 1px dotted var(--shopping-cart-border-color);
}

main.shopping_cart div.extended ul.cart_overview > li:last-of-type {
	border: 0;
}

main.shopping_cart div.extended ul.cart_overview > li.headers {
	display: var(--shopping-cart-extended-display-headers);
	border-bottom: 2px solid var(--shopping-cart-border-color);
	padding: 0;
}

main.shopping_cart div.extended ul.cart_overview > li.headers > div {
	font-weight: 600;
	font-size: var(--font-size-normal);
	line-height: var(--line-height-normal);
	padding: 0 0 0.5em;
	box-sizing: border-box;
	text-align: center;
}

main.shopping_cart div.extended ul.cart_overview > li.headers > div.product {
	flex: 1 0 calc(40% + var(--shopping-cart-extended-image) - 1em);
	text-align: left;
}

main.shopping_cart div.extended ul.cart_overview > li > div {
	flex: 0 1 150px;
}

main.shopping_cart div.extended ul.cart_overview > li > div.image {
	flex: 0 0 var(--shopping-cart-extended-image);
}

main.shopping_cart div.extended ul.cart_overview > li > div.product {
	flex: 1 0 40%;
}

main.shopping_cart div.extended ul.cart_overview > li > div.product h2, main.shopping_cart div.extended ul.cart_overview > li > div.product h2 a {
	margin: 0 0 5px;
}

main.shopping_cart div.extended ul.cart_overview > li > div.price {
	display: var(--shopping-cart-extended-display-price);
}


main.shopping_cart div.extended ul.cart_overview > li > div.amount div.controls {
	margin: -4px 0 0;
	text-align: center;
}


main.shopping_cart div.extended ul.cart_overview > li > div.price, main.shopping_cart div.extended ul.cart_overview > li > div.total {
	text-align: right;
}
/* ==================================== Shoppingcart [minimal] ==================================== */
.shopping_cart.minimal {
	display: flex;
	flex-wrap: wrap;
}

.shopping_cart.minimal div.line {
	flex: 0 0 100%;
	display: flex;
	box-sizing: border-box;
	padding: 0 0 20px 0;
	border-bottom: 1px dotted var(--shopping-cart-border-color);
}

.shopping_cart.minimal div.line:last-of-type {
	border: 0;
}

.shopping_cart.minimal div.line + div.line {
	margin: 20px 0 0 0;
}

.shopping_cart.minimal div.line div.image {
	flex: 0 1 auto;
	margin: 0;
}

.shopping_cart.minimal div.line div.image img {
	max-width: 150px;
}

.shopping_cart.minimal div.line div.object {
	flex: 0 1 100%;
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 0 10px;
	align-content: flex-start;
}

.shopping_cart.minimal div.line div.object div {
	flex: 1 1 33%;
}

.shopping_cart.minimal div.line div.object div.title {
	flex: 0 0 100%;
	margin: 0 0 1em;
}

.shopping_cart.minimal div.line div.object div.price {
	flex: 1 1 100px;
	text-align: right;
}

.shopping_cart.minimal .breakdown {
	justify-content: flex-end;
	flex: 0 0 100%;
}

.shopping_cart.minimal div.breakdown div.shipping, .shopping_cart.minimal div.breakdown div.total, .shopping_cart.minimal div.breakdown div.vat_inclusive {
	flex: 0 0 100%;
}

.shopping_cart.minimal div.breakdown div.vat_inclusive div {
	text-align: right;
	font-size: 11px;
}

.shopping_cart h3.reference {
	font-size: 11px;
	margin: 0 0 10px 0;
}


/* ==================================== Shoppingcart [sidebar] ==================================== */
div.breakdown {
	display: flex;
	flex-wrap: wrap;
}

.breakdown > div {
	flex: 0 0 100%;
	display: flex;
	flex-wrap: wrap;
}

.breakdown > div + div {
	margin: 0!important;
}

.breakdown > div.reduction {
	align-items: center;
	flex-wrap: wrap;
	margin: 10px 0;
	padding: 5px 0;
	border-bottom: 1px dotted var(--shopping-cart-border-color);
}

.breakdown > div.shipping + div.reduction {
	border-top: 1px dotted var(--shopping-cart-border-color);
}

.breakdown > div > div {
	flex: 0 0 50%;
}

div.breakdown > div + div {
	margin: 0;
}

div.total {
	font-weight: bold;
}

.breakdown > div > div:nth-of-type(even) {
	text-align: right;
}

div.breakdown > div.vat_inclusive > div {
	flex: 0 0 100%;
	font-size: 10px;
	color: var(--gray);
	font-weight: normal;
}

div.breakdown button, div.breakdown .button {
	display: block;
	flex: 1;
	text-align: center;
	border-radius: 5px;
	margin: 1em 0;
}

div.vouchers div.flex {
	align-items: center;
}

div.vouchers div.flex h3, div.vouchers div.flex button, div.vouchers div.flex .button,  div.vouchers div.flex input {
	margin: 0;
}

div.vouchers div.flex button, div.vouchers div.flex .button {
	font-size: 14px;
}

main.shopping_cart + aside div.breakdown > div.payment_options {
	margin: 0 0 1em;
}

div.payment_options {
	display: flex;
	justify-content: center;
}

div.shopping_cart.extended div.breakdown div.payment_options {
	justify-content: flex-start;
}

div.payment_options img + img {
	margin: 0 0 5px 5px;
}

.unavailable {
	margin: 20px 0;
}


input[type="text"]:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/** ============================ product detail ============================ **/
form.cart_control div.flex {
	align-items: center;
	gap: 1em;
}

form.cart_control div.flex > div {
	flex: 3;
}

form.cart_control div.flex > div.controls {
	flex: 0 1 auto;
}

form > div.flex > div.controls > section {
	display:flex;
}

form > div.flex > div.controls > section > input[type="text"] {
	width: var(--shopping-cart-controls-size);
	border-radius: 0;
}

form > div.flex > div button {
	margin: 0;
}

ul.product_colors {
	list-style: none;
	margin: 10px 0 10px;
	display: flex;
	gap: 0.5em;
	align-items: center;
}

ul.product_colors.small {
	flex-wrap: wrap;
}

ul.product_colors li {
	margin: 0;
	padding: 0;
}

ul.product_colors li:before {
	content: none;
}

ul.product_colors li button, ul.product_colors li a.button {
	width: 40px;
	height: 40px;
	border-radius: 40px;
	padding : 2px;
	background: none;
	opacity: 0.3;
}

ul.product_colors li button span, ul.product_colors li a.button span {
	display:block;
	width: 100%;
	height: 100%;
	content: ' ';
	border-radius: 40px;
}

ul.product_colors li button.selected, ul.product_colors li button:hover, ul.product_colors li button.selected, ul.product_colors li a.button:hover, ul.product_colors li a.button.selected {
	border: 2px #000000 solid;
	opacity: 1;
}

div.active_filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

div.active_filters a {

}

div.active_filters a.button {
	display: flex;
	align-items: center;
	gap: 1em;
}

div.active_filters a.button:hover {
	background: var(--red-contrast);
}

div.active_filters a.button span {
	background: var(--red-contrast);
	display: block;
	width: 20px;
	height: 20px;
	font-size: var(--font-size-extra-small);
	line-height: 20px;
	font-weight: 600;
	text-align: center;
	color: var(--white);
	border-radius: 100%;
	transition: var(--transition-default);
}

div.active_filters a.button:hover span {
	background: var(--white);
	color: var(--black);
}


/* ==================================== RESPONSIVE ==================================== */
@media only screen and (max-width: 1020px) {
	:root {
		--shopping-cart-padding-sides: 20px;

		--shopping-cart-sidebar-offset: 0;
		--shopping-cart-sidebar-width: 100%;
	}

	body > section > main.shopping_cart, body > section > main.shopping_cart + aside {
		flex: 0 0 100%;
	}

	body > section > aside .widget {
		padding: 1em 2em;
		margin: 1em 0;
	}
}


@media only screen and (max-width: 999px) {
	body > header.shopping_cart > div.main nav.logo {
		flex: 0 0 100%;
	}

	body > header.shopping_cart > div.main nav.cart {
		flex: 1 0 100%;
		width: 100%;
		margin: 20px calc(-1 * var(--shopping-cart-padding-sides)) 0;
	}

	body > header.shopping_cart > div.main nav.cart ol {
		gap: 1em;
	}
}

@media only screen and (max-width: 1199px) {
	:root {
		--shopping-cart-padding-sides: 20px;
	}

	.shopping_cart.minimal div.line div.object div.title, .shopping_cart.minimal div.line div.object div.traits {
		flex: 0 0 100%;
		margin: 0 0 5px;
	}
}

@media only screen and (max-width: 767px) {
	:root {
		--shopping-cart-nav-font-size: 14px;
		--shopping-cart-extended-display-headers: none;
		--shopping-cart-extended-image: 75px;
		--shopping-cart-extended-display-price: none;
	}

	body > header > div.main nav.cart {
		border-radius: 0;
		margin: 10px calc(-1 * var(--shopping-cart-padding-sides)) 0
	}

	body > header > div.main nav.cart > ol > li::before {
		flex: 0 0 20px;
		width: 20px;
		height: 20px;
		line-height: 18px;
		font-size: 14px;
		font-weight: 400;
		margin: 0 4px 0 0;
	}

	body > header > div.main nav.cart > ol > li a {
		font-weight: 400;
		text-transform: none;
	}

	/* ==================================== Shoppingcart [extended] ==================================== */
	main.shopping_cart div.extended ul.cart_overview > li {
		flex-wrap: wrap;
	}

	main.shopping_cart div.extended ul.cart_overview > li > div.product {
		flex: 1 0 calc(100% - var(--shopping-cart-extended-image) - 1em);
	}

	main.shopping_cart div.extended ul.cart_overview > li > div.amount div.controls {
		text-align: left;
	}

	/* ==================================== Shoppingcart [minimal] ==================================== */
	.shopping_cart.minimal div.line div.image img {
		max-width: 75px;
	}

	.shopping_cart.minimal div h2, .shopping_cart.minimal div h2 a {
		font-size: 20px;
	}

	.shopping_cart.minimal div.line div.object div.traits {
		flex: 0 0 100%;
	}

	.shopping_cart.minimal div.line div.object div + div {
		margin: 5px 0 0 0;
	}

	div.controls input[type="text"], div.controls button, div.controls .button, .shopping_cart a.button.delete_item, .breakdown button.delete_voucher {
		width: 30px;
		height: 30px;
		padding: 0 4px;
	}

	div.controls input[type="text"] {
		width: 30px;
	}

	.shopping_cart a.button.delete_item {
		line-height: 30px;
	}
}

@media only screen and (max-width: 500px) {
	body > header > div.main nav.cart {
		display: none;
	}
}