@import url("./fonts-zueriwerk-sans.css");
@import url("../../fonts.css");
@import url("./buttons.css");
@import url("./header.css");
@import url("./footer.css");
@import url("./account.css");
@import url("./cart.css");
@import url("./checkout.css");
@import url("./shop-table.css");
@import url("./form.css");
@import url("./notices.css");
@import url("./products.css");
@import url("./single-product.css");
@import url("./teaser.css");

:root {
	--font-sans: "Zueriwerk Sans", system-ui, sans-serif;
	--font-headline: "Zueriwerk Sans Headline", "Zueriwerk Sans", system-ui, sans-serif;
	--col-primary: #EC0062;
	--col-border: rgba(0, 0, 0, 0.20);
	--col-grey: #F5F5F5;
	--col-yellow: #FFEE9F;
	--col-green: #BADDBE;
	--base-padding: 7.5rem;
	--small-font-size: 16px;
	--medium-font-size: 24px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--font-sans);
	color: black;
	font-size: 18px;
	line-height: 1.25;
	font-weight: 300;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

a {
	color: black;
}

h1 {
	font-size: 48px;
	font-weight: 600;
}

h2 {
	font-size: 34px;
	font-weight: 600;
}

h3 {
	font-size: var(--medium-font-size);
	font-weight: 600;
}


.woocommerce h1, .woocommerce h2, .woocommerce h3 {
	text-transform: none;
}

strong, b {
	font-weight: 600;
}

.page-container,  .not-found, #primary {
	padding: 0 var(--base-padding);
	min-height: 19rem;
	margin-bottom: 125px;
}

.zueriwerk-front-catalog-page .page-container {
	margin-bottom: 0;
}

.not-found {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: column;
}



/* Breadcrumbs */
.breadcrumbs-outer {
	padding: 0 var(--base-padding);
	max-width: 100%;
}

.breadcrumbs-wrapper {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 70px;
	a, span {
		border: 1px solid var(--col-border);
		display: block;
		border-radius: 900px;
		font-size: 12px;
		font-weight: 600;
		padding: 10px 12px;
	}
	a {
		text-decoration: none;
		/*
		&:first-child {
			height: 38px;
			width: 38px;
			display: flex;
			align-items: center;
			border-radius: 50%;
			justify-content: center;

			img {
				width: 10px;
				height: 10px;
			}
		}*/
	}

}

/* Front page hero */
.zueriwerk-front-page-thumbnail {
	display: block;
	width: 100%;
	margin-bottom: 170px;
}

.zueriwerk-front-page-thumbnail__img {
	display: block;
	width: 100%;
	height: auto;
}

/* Product category archive header */
.zw-category-archive-header {
	margin-bottom: 72px;
	position: relative;
}

.zw-category-archive-header .page-title {
	margin: 0 0 16px;
}

.zw-category-archive-header .term-description {
	font-size: var(--medium-font-size);
	max-width: 948px;
	p {
		margin: 0;
	}
}

.zw-category-archive-header__image {
	position: absolute;
	width: 160px;
	height: 160px;
	top: -50px;
	right: -40px;
	transform: rotate(-10deg);
	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}


/* woocommerce page heading */

.page-heading.woocommerce-page-title, .cart-empty-title{
	margin-bottom: 50px;
	h1 {
		display: flex;
		flex-wrap: wrap;
		gap: 3px;
		margin: 0;
		small {
			width: 100%;
			font-size: var(--medium-font-size);
			font-weight: 300;
		}
	}
}

/* Products filter */

.zw-product-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-bottom: 56px;
	label {
		font-size: var(--medium-font-size);
		font-weight: 600;
	}
	#zw-category-filter {
		padding: 8px 24px;
		width: 300px;
		height: 48px;
		border-radius: 8px;
		border: 1px solid var(--col-primary);
	}
}

/* Load more button */
.zw-load-more-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin: 60px auto 24px;
	text-align: center;
}

.zw-load-more.button {
	min-width: 240px;
}

.zw-load-more.button:disabled {
	opacity: 0.7;
	cursor: wait;
}

.zw-load-more-status {
	font-size: var(--small-font-size);
	font-weight: 300;
	color: var(--col-grey-dark, #4e4c4f);
}




/* Quantity */
.quantity.buttons_added {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 1px solid var(--col-primary);
	border-radius: 900px;
	padding: 7px 8px;
	vertical-align: middle;
}


.quantity.buttons_added .plusminus {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--col-primary);
	font-family: var(--font-sans);
	font-size: 22px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	font-weight: 300;
}

.quantity.buttons_added .plusminus.minus {
	font-size: 26px;
}

.quantity.buttons_added input.qty {
	flex: 0 0 auto;
	width: 3ch;
	min-width: 2ch;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--col-primary);
	font-family: var(--font-sans);
	font-size: var(--small-font-size);
	font-weight: 600;
	line-height: 32px;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.quantity.buttons_added input.qty::-webkit-outer-spin-button,
.quantity.buttons_added input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

@media (max-width: 1200px) {
	:root {
		--base-padding: 40px;
		--small-font-size: 14px;
		--medium-font-size: 20px;
	}
	body {
		font-size: 16px;
	}

	h1 {
		font-size: 32px;
	}
	
	h2 {
		font-size: 30px;
	}

	.zueriwerk-front-page-thumbnail {
		margin-bottom: 60px;
	}

	.breadcrumbs-wrapper {
		margin-bottom: 40px;
	}
	.zw-category-archive-header__image {
		right: -10px;
		width: 100px;
		height: 100px;
		top: -40px;
	}
}

@media (max-width: 768px) {
	:root {
		--base-padding: 20px;
	}
	.page-container, .not-found, #primary {
		margin-bottom: 60px;
	}

	.zw-category-archive-header {
		margin-bottom: 40px;
	}
}