@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;700&family=Lato:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    scrollbar-width: thin;
}

html {
    width: 100vw;
    height: 100vh;
    
    background: #f8f5f4;
    color: #333;

    font-family: Lato, sans-serif;
    font-family: 'Roboto Slab', sans-serif;
    font-size: 15px;
    
    --ff-large: 'Roboto Slab', monospace;
    
    &.no-scroll {
	overflow: hidden;
    }
}


body {
    width: 100%;
    height: 100%;    
    display: flex;
    flex-direction: column;
}

#root {
    width: 100%;
    height: 100%;
    
    display: flex;
    flex-direction: column;
}

#page {
    
    &.page {
	padding-top: 32px;
    }
}

a {
    text-decoration: none;
    
    &:hover {
	text-decoration: underline;
    }
}


input {
    outline: none;
    
    &:focus {
	outline: none;
    }
}

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

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

input[type="text"],
input[type="password"],
input[type="number"] {
    padding: 8px 8px;
    border-radius: 3px;
    border: none;
    overflow: hidden;
    border: 1px solid #aaa;
    
    &:focus {
	border-color: #1272d9;
	outline: 1px solid #1272d9;
    }
}

select {
    background: none;
    border: 2px solid #333;
    padding: 8px 12px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 3px;
    
    &:hover {
	background: #333;
	color: white;
    }
}

button {
    padding: 8px 8px;
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 3px;
    
    &:hover {
	background: #ccc;
	cursor: pointer;
    }
}

h1, h2, h3 {
    font-family: var(--ff-large);
    margin-bottom: 24px;
}

h1 {
    font-size: 22px;
    
}


.layout-sidebar {
    display: flex;
    
    
    .content-main {
	flex-grow: 1;
	flex-basis: 0;
    }
    
    .content-sidebar {
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: 330px;
	margin-left: 64px;
	
	h3 {
	    margin-bottom: 12px;
	    font-size: 16px;
	}
    }
}


.products-toolbar {
    margin-bottom: 24px;
}



.category-header {
    padding: 24px 0 24px 0;
    margin-bottom: 24px;
    
    p {
	max-width: 720px;
	line-height: 1.7;
    }
}

p.breadcrumbs {
    font-size: 14px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
    border-bottom: 1px solid #eee;
    padding-bottom: 2px;
    
    a {
	margin-right: 4px;
	border-radius: 5px;
	padding: 8px;
	line-height: 1;
	color: #3ea1ad;
	font-weight: bold;
	
	
	&:hover {
	    background: #333;
	    color: white;
	    text-decoration: none;
	}
    }
    
    svg {
	margin-right: 4px;
	font-size: 12px;
	color: #999;
    }
    
    span {
	display: inline-flex;
	margin-left: 8px;
    }
}



.variant-selector {
    
    .variant-options {
	display: flex;
	margin-bottom: 12px;
	
	&:last-child {
	    margin-bottom: 0;
	}
    }
    
    .variant-option {
	&.is-selected {
	    background: linear-gradient(146deg, #34c5d4, #4a76a5);
	    color: white;
	    border: 1px solid #36abe5;
	}
	&.is-unavailable {
	    opacity: 0.5;
	    pointer-events: none;
	}
    }
}

.with-variant-color {
    display: inline-flex;
    color: #555;
    margin-right: 4px;
    padding: 4px 6px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 6px;
    align-items: center;
    
    span.color {
	display: inline-flex;
	width: 12px;
	height: 12px;
	border-radius: 12px;
	background: ~"var(--color, transparent)";
	margin-right: 4px;
    }
    
    &.no-margin {
	margin-bottom: 0;
	margin-right: 0;
	
	> span {
	    margin-right: 0;
	}
    }

}


@media screen and (max-width: 767px) {
    
    html {
	overflow-x: hidden;
    }
    
    .page-wrapper .page-content {
	width: 100%;
    }
    
    .layout-sidebar {
	flex-direction: column;
    }
    
    .layout-sidebar .content-sidebar {
	margin-left: 0;
	margin-top: 48px;
    }
    
}



.ui-search {
    width: 100%;
    max-width: 515px;
    background: white;
    border-radius: 5px;
    display: flex;
    color: #333;
    border: 3px solid #333;
    background: #333;
    
    input {
	background: white;
	border: none;
	border-right: 3px solid #333;
	flex-grow: 1;
	flex-basis: 0;
	padding-top: 12px;
	padding-bottom: 12px;
	border-radius: 3px 0 0 3px;
    }
    
    select {
	
	flex-shrink: 0;
	flex-basis: 0;
	border: none;
	background: white;
	border-radius: 0;
    }
    
    button {
	flex-shrink: 0;
	flex-basis: 32px;
	background: #333;
	border: none;
	border-radius: 0 3px 3px 0;
	display: flex;
	padding-left: 16px;
	padding-right: 16px;
	color: white;
	align-items: center;
	font-weight: bold;
    }
}



.page-wrapper {
    max-width: 1140px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    
    &.full {
	max-width: unset;
    }
    
    &.horizontal {
	display: flex;
    }
    
    &.padding {
	padding: 24px;
    }
    
    .bg {
	background: white;
	box-shadow: 0 1px 8px 4px #00000003;
	border-radius: 3px;
	padding: 24px;
    }
    
    > side {
	width: 380px;
	flex-basis: 380px;
	flex-shrink: 0;
	margin-right: 48px;
	
	nav {
	    display: flex;
	    flex-direction: column;
	    font-weight: bold;
	    color: black;
	    
	    a {
		padding: 10px 8px;
		display: flex;
		align-items: center;
		border-radius: 5px;
		margin-bottom: 6px;
		color: #333;
		border: 2px solid #333;
		font-size: 15px;
		
		svg {
		    margin-right: 8px;
		    font-size: 18px;
		}
		
		&.selected {
		    background: #333;
		    color: white;
		}
	    }
	}
	
	h2 {
	    font-size: 23px;
	}

	.filters {
	    margin-top: 32px;
	    
	    .filter {
		display: flex;
		align-items: center;
		padding-bottom: 14px;
		padding-top: 14px;
		border-bottom: 1px solid #eee;
		
		&:first-child {
		    padding-top: 0;
		}
		
		.label {
		    flex-grow: 1;
		    margin-right: 8px;
		    font-weight: bold;
		    font-size: 15px;
		}
	
		&.h {
		    flex-direction: column;
		    align-items: unset;
		    
		    .label {
			margin-bottom: 8px;
			margin-right: 0;
		    }
		    
		    .input {
			display: flex;
			flex-direction: column;
			
			label {
			    margin-bottom: 4px;
			    padding: 5px;
			    display: flex;
			    align-items: center;
			    overflow: hidden;
			    cursor: pointer;
			    border-radius: 3px;
			    user-select: none;
			    
			    &:hover {
				background: #eee;
			    }
			    
			    input {
				width: 16px;
				height: 16px;
				margin-left: -16px;
				opacity: 0;
			    }
			    
			    span.check {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				width: 19px;
				height: 19px;
				border-radius: 3px;
				border: 2px solid #333;
				margin-right: 6px;
				
				svg {
				    font-size: 12px;
				    display: none;
				}
			    }
			    
			    input:focus + span.check {
				border-color: #52cc66;
			    }
			    
			    input:checked + span.check {
				background: #52cc66;
				border-color: #52cc66;
				
				color: white;
				
				svg {
				    display: inline;
				}
			    }
			    
			    span.sub-results {
				display: inline-block;
				margin-left: 8px;
				color: #999;
				font-size: 13px;
			    }

			    input:checked + span.check + span.sub-results {;
			    }
			}
		    }
		}
		
		&.i-h {
		    .input {
			flex-direction: row;
			overflow: hidden;
			align-items: center;
		    }
		}
	    }
	}
    }
    
    .page-content {
	flex-grow: 1;
	flex-basis: 0;
    }
}


@media screen and (max-width: 767px) {
    
    .page-wrapper {
	&.padding {
	   padding: 12px;
	}
	
	> side {
	    
	    nav {
		flex-direction: row;
		border: 2px solid #333;
		border-radius: 5px;
		padding: 0 !important;
		background: none !important;
		
		a {
		    border-radius: 0;
		    border: none;
		    flex-grow: 1;
		    flex-basis: 0;
		    margin-bottom: 0;
		    align-items: center;
		    justify-content: center;
		}
	    }
	}
    }
}

@media screen and (min-width: 768px) {
    
    .page-wrapper {
	&.padding {
	   
	}
    }
}

.ui-search {
    position: relative;
    
    .results {
	position: absolute;
	top: calc(100%);
	background: white;
	width: ~"calc(100% + 6px)";
	border: 3px solid #333;
	border-radius: 0 0 5px 5px;
	transform: translateX(-3px);
	display: none;
	
	&.show {
	    display: flex;
	    flex-direction: column;
	}
	
	h3 {
	    margin-bottom: 8px;
	    font-size: 15px;
	    color: #939393;
	}
	
	a {
	    padding: 6px 16px;
	    
	    &:hover {
		background: #333;
		color: white;
		text-decoration: none;
	    }
	}
	
	.products {
	    margin-bottom: 10px;
	    
	    .product {
		display: flex;
		align-items: center;
		font-weight: bold;
		margin-bottom: 0;
		
		picture {
		    margin-bottom: unset;
		    height: 50px;
		    width: 64px;
		    margin-right: 8px;
		    border: 2px solid #333;
		    background: white;
		    border-radius: 5px;
		    display: flex;
		    padding: 6px;
		    align-items: center;
		    justify-content: center;
		    
		    img {
			width: 100%;
			height: 100%;
			object-fit: contain;
		    }
		}
	    }
	}
    }
    
}

.content-wrapper {
    padding: 16px;
    
    &.no-bottom-padding {
	padding-bottom: 0;
    }
}
.decor-default {
    width: 100%;
    height: 100%;
    
    display: flex;
    flex-direction: column;
    
}

#header-main {
    
    .mobile {
	background: #b1dde2;
	height: 52px;
	padding: 0;
	display: flex;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	
	a {
	    font-size: 26px;
	    font-weight: bold;
	    margin-left: 8px;
	}
    }    
    
    #mobile-menu {
	width: 56px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	color: #333;
	padding: 8px;
	
	.wrapper {
	    background: rgba(0, 0, 0, 0.1);
	    border-radius: 5px;
	    width: 100%;
	    height: 100%;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	}
	
	svg {
	    font-size: 20px;
	}
    }
    
    .info-bar {
	height: 34px;
	background: #ffffff57;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 16px;
    }
    
    .main {
	height: 96px;
	background: linear-gradient(45deg ,#34c5d4 ,#4a76a5);
	background: #b1dde2;
	color: white;
	
	.page-wrapper {
	    display: flex;
	    align-items: center;
	    height: 100%;
	    
	    > * {
		flex-grow: 1;
		flex-basis: 0;
		flex-shrink: 0;
	    }
	    
	    #logo {
		font-family: var(--ff-large);
		font-weight: 600;
		font-size: 34px;
		color: #333;
	    }
	    
	    .search {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-grow: 2;
		
		input {
		    
		}
	    }
	    
	    .user {
		display: flex;
		display: none;
		align-items: center;
		justify-content: flex-end;
	    }
	}
    }
    
    nav {
	height: 40px;
	background: #333;
	color: white;

	display: flex;
	align-items: center;
	
	
	display: none;
	
	.top {
	    font-weight: bold;
	    font-size: 16px;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    
	    a {
		font-weight: bold;
		font-size: 16px;
		padding: 6px 12px;
		border-radius: 5px;
		margin-left: 2px;
		margin-right: 2px;
		
		&:hover {
		    background: white;
		    color: black;
		    text-decoration: none;
		}
	    }
	}
    }
}

@media screen and (max-width: 767px) {
    
    #header-main {
	padding-top: 52px;
	
	#logo {
	    display: none;
	}
	
	.main {
	    height: auto;
	    border-radius: 0 0 5px 5px;
	}
	
	.main .search .ui-search {
	    max-width: unset;
	    
	    input {
		padding-top: 10px;
		padding-bottom: 10px;
	    }
	}
	
	nav {
	    display: none;
	}
    }
}

@media screen and (min-width: 768px) {
    
    #header-main {
	.mobile {
	    display: none;
	}
    }
}

.page-product {
    
    .specifications {
	border-radius: 5px;
	overflow: hidden;
	
	
	.specification {
	    display: flex;
	    align-items: flex-start;
	    line-height: 1.6;
	    margin-bottom: 1px;
	    background: white;
	    font-size: 15px;
	    
	    .label {
		flex-basis: 300px;
		flex-shrink: 0;
		margin-right: 32px;
		padding: 12px 14px;
		color: #000;
		font-weight: 600;
		
		max-width: 40%;
	    }
	    
	    .value {
		flex-grow: 1;
		flex-basis: 0;
		padding: 12px 14px;
		
		> span {
		    margin-left: 6px;
		}
	    }
	}
    }
    
    h1 {
	font-size: 24px;
    }
    
    h2 {
	font-size: 19px;
    }
    
    .layout-sidebar {
	.content-main {
	    .image {
		background: white;
		border-radius: 5px;
		padding: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 0 20px 7px #0000000a;
		margin-bottom: 32px;
		
		img {
		    max-width: 480px;
		    width: 100%;
		}
	    }
	}
    }
    
    .prices-stores {
	background: white;
	border-radius: 5px;
	box-shadow: 0 0 20px 7px #0000000a;
	margin-bottom: 32px;

	.store {
	    display: flex;
	    border-bottom: 1px solid #ddd;
	    padding: 16px 24px;
	    align-items: center;
	    
	    .label {
		flex-shrink: 0;
		flex-grow: 1;
		flex-basis: 0;
		display: flex;
		align-items: center;
		
		.logo {
		    flex-basis: 200px;
		    display: flex;
		    align-items: center;
		}
		
		.name {
		    display: flex;
		    flex-direction: column;
		    
		    .store-name {
			font-size: 16px;
			margin-bottom: 4px;
			font-weight: bold;
		    }
		    
		    .delivery {
			
			&.in-stock {
			    color: #3bab3b;
			}
		    }
		}
		
		
		img {
		    max-height: 46px;
		    max-width: 164px;
		}
	    }
	    
	    .value {
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		font-weight: 700;
		font-size: 17px;
	    }
	}
    }
}


.category-wizard {
    
    .screen {
	padding: 16px;
	border: 1px solid #ddd;
	margin-bottom: 8px;
	max-width: 620px;
	
	P {
	    margin-bottom: 16px;
	    font-weight: bold;
	}
	
	.choice-list {
	    display: flex;
	    flex-direction: column;
	    
	    label {
		margin-bottom: 8px;
	    }
	}
    }
    
    
}

.product-results {
    display: flex;
    flex-wrap: wrap;
    margin-top: 24px;
    margin-right: -24px;
    /*margin-bottom: -24px;*/
    

    .product,
    .product-placeholder {
	flex-grow: 1;
	max-width: 378px;
	padding: 16px;
	border-radius: 5px;
	margin-right: 24px;
	margin-bottom: 24px;
	overflow: hidden;
	flex-basis: 0;
	min-width: 220px;

	.image {
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    margin-bottom: 10px;
	    height: 200px;
	    border: 2px solid #333;
	    background: white;
	    border-radius: 5px;
	    
	    picture {
		display: block;
		padding: 0;
		margin: 0;
		height: 100%;
		overflow: hidden;
	    }

	    img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		border-radius: 5px;
		padding: 24px;
		background: white;
	    }
	}

	.product-title {
	    text-align: left;
	    line-height: 1.5;
	    font-weight: bold;
	    color: #333;
	    margin-bottom: 10px;
	    font-size: 15px;
	}

	.specifications {
	    text-align: center;
	    margin-bottom: -6px;
	    display: flex;
	    flex-wrap: wrap;
	    font-size: 13px;


	}
    }

    .product-placeholder {
	background: none;
	padding-top: 0;
	padding-bottom: 0;
	margin-bottom: 0;
    }
    
    .product {
	&:hover {
	    text-decoration: none;
	    
	    background: #333;
	    color: white !important;
	    
	    .product-title {
		color: white !important;
	    }
	    
	    .specifications span.spec {
		color: white !important;
		border-color: #fff6 !important;
	    }
	}
	
	.availability {
	    display: flex;  
	    margin-bottom: 10px;
	    flex-shrink: 0;
	    
	    .price {
		margin-right: auto;
		font-weight: bold;
		font-size: 16px;
	    }
	    
	    .stores {
		opacity: 0.3;
		font-size: 13px;
	    }
	}
    }
    
    &.list {
	flex-wrap: unset;
	flex-direction: column;

	.product {
	    flex-basis: unset;
	    display: flex;
	    padding: 4px 16px;
	    align-items: center;
	    max-width: unset;
	    margin-bottom: 3px;
	    
	    .availability {
		flex-direction: column;
		margin-bottom: unset;
		margin-right: 16px;
		
		width: 86px;
		align-items: center;
		
		.price {
		    margin-right: unset;
		    margin-bottom: 6px;
		}
	    }
	    
	    .image {
		margin-bottom: unset;
		height: 80px;
		width: 94px;
		margin-right: 8px;
		
		img {
		    padding: 8px;
		}
	    }
	    
	    .product-title {
		margin-right: auto;
		margin-bottom: unset;
		flex-grow: 1;
		flex-basis: 0;
	    }
	}
    }
}

@media screen and (max-width: 767px) {
    
    .product-results.list {
	padding-bottom: 72px;
    }
    
    .product-results.list .product {
	border: 2px solid #ede4e1;
	padding: 0 !important;
	
    }
    
    .product-results .product .product-title {
	font-size: 14px;
	margin-right: 8px !important;
    }
    
    .product-results.list .product .image {
	width: 92px;
	background: #ede4e1;
	border: none;
	order: 2;
	margin-right: 0;
	border-radius: 5px 0 0 5px;
	flex-shrink: 0;
	
	img {
	    background: none;
	    border-radius: 0;
	    padding: 12px;
	}
    }
    
    
    .product-results.list .product .availability .price {
	white-space: nowrap;
	font-size: 15px;
    }
    
    .product-results.list .product .availability .stores {
	font-size: 11px;
	white-space: nowrap;
    }
    
    .desktop {
	display: none !important;
    }
    
    .mobile-filter-actions {
	position: fixed;
	display: flex;
	bottom: 0;
	right: 0;
	left: 0;
	padding: 8px;
	background: #ebe9e8;
	height: 64px;
	
	button {
	    display: none;
	    flex-grow: 1;
	    flex-basis: 0;
	    background: #333;
	    color: white;
	    font-weight: bold;
	    border-radius: 5px;
	    border: 3px solid #333;
	    align-items: center;
	    justify-content: center;
	    
	    &.show {
		display: flex;
	    }
	}
    }

    #page.page-category {
	.mobile-filter-screen {
	    display: none;
	    
	    &.show {
		display: flex;
		position: fixed;
		z-index: 500;
		top: 52px;
		left: 0;
		right: 0;
		bottom: 54px;
		flex-direction: column;
		background: #f8f5f4;
		overflow-y: scroll;
		padding: 16px;
	    }
	}
	
	.page-wrapper.horizontal {
	    flex-direction: column;
	}
	
	.page-wrapper > side {
	    margin-right: 0;
	    width: unset;
	    flex-basis: unset;
	}
	
	
    }
   
}

@media screen and (min-width: 768px) {
    
    .mobile {
	display: none !important;
    }
    
    .mobile-view-list {
	display: none;
    }
    
    .mobile-filter-actions {
	display: none;
    }
}