:root {
	--background-plainest: #fff;
	--background: #e2fce2;
	--background-2: #1fb8cc;
	--background-3: #c3b600;
	--accent-1: #2f2f2f;
	--dim-accent: #686868;
	--inv-accent: #e7e7e7;

	--blend: #fff;

	--accept: #009000;
	--reject: #af0000;

	--button: #28539c;
	--button-text: #fff;

	--asda: #78be20;
	--snsb: #f47320;
	--mor1: #00563f;
	--mor2: #ffc20e;
	--tsc1: #cc2131;
	--tsc2: #28539c;

	--pound: #fccd3f;
	--pound2: #a27b35;

	--n-cols: 9;
	--li-width: 10em;
	--col-gap: 12px;
	--row-gap: 5px;

	--list-item-h: 5em;

	--load-status: 0;
}




h1, h2, h3, h4, h5, h6, p {
	text-wrap-style: balance;
}

h1 {
	font-size: 3em;
	font-family: Roboto, sans-serif;
	font-weight: 900;
	line-height: 1;
}


h2 {
	font-family: "Playpen Sans", cursive;
	font-optical-sizing: auto;
	font-weight: 800;
	font-style: normal;
}

h3 {
	font-size: 1.2em;
	font-family: Roboto, sans-serif;
	font-weight: 375;
	line-height: 1;
}



p, a {
	font-size: 1em;
	font-family: Roboto, sans-serif;
	font-weight: 300;
	line-height: 1;

	text-decoration: none;
	color: unset;
}

a:hover[href] {
	text-decoration: underline;
}

label, input, legend {
	font-size: 0.8em;
	font-family: Roboto, sans-serif;
	font-weight: 400;
}

label {
	user-select: none;
}

li {
	list-style: none;
}


* {
	margin: 0;
	padding: 0;
	padding-inline: 0;
	border: 0;
	background: transparent;
	box-sizing: border-box;

	scrollbar-width: thin;
	scrollbar-color: var(--accent-1) rgba(0, 0, 0, 0);
}

input:focus {
	outline: none;
}





.svg-defs {
	width: 0;
	height: 0;
}


g#icon24-pound use:nth-child(2) {
	fill: var(--pound);
}

g#icon24-pound use:nth-child(1) {
	fill: var(--pound2);
}


g#logo81-asda path {
	fill: var(--asda);

	transform-origin: center;
	transform: scale(0.75);
}


g#logo80-morr path:nth-child(1),
g#logo80-morr path:nth-child(2) {
	fill: var(--mor1);
}

g#logo80-morr path:nth-child(3) {
	--scale: 0.5;
	fill: var(--mor2);
}


g#logo83-tsco path:nth-child(1) {
	fill: var(--tsc2);

	transform-origin: center;
	transform: scale(0.8);
}

g#logo83-tsco path:nth-child(2) {
	fill: var(--tsc1);

	transform-origin: center;
	transform: scale(0.8);
}


g#logo126-snsb path {
	fill: var(--snsb);

	transform-origin: center;
	transform: scale(0.95);
}

.asda {
	fill: var(--asda);
}

.sainsburys {
	fill: var(--snsb);
}

.morrisons {
	fill: url(#col-mor);
}

.aldi {

}

.tesco {
	fill: url(#col-tsc);
}

linearGradient#col-mor stop:nth-child(1),
linearGradient#col-mor stop:nth-child(2) {
	stop-color: var(--mor1);
}

linearGradient#col-mor stop:nth-child(3),
linearGradient#col-mor stop:nth-child(4) {
	stop-color: var(--mor2);
}

linearGradient#col-tsc stop:nth-child(1),
linearGradient#col-tsc stop:nth-child(2) {
	stop-color: var(--tsc1);
}

linearGradient#col-tsc stop:nth-child(3),
linearGradient#col-tsc stop:nth-child(4) {
	stop-color: var(--tsc2);
}


img[src="/static/assets/ico.svg"] {
	filter: brightness(0.2);
	opacity: 0.2;
}

.button {
	font-family: 'Roboto', sans-serif;
	background-color: var(--button);

	color: var(--button-text);
	font-weight: 700;

	border: 1px solid var(--button-text);
	border-radius: 4px;

	cursor: pointer;
	padding: 0.3em;
	font-size: 1em;
}

.button.inv {
	background-color: var(--button-text);
	color: var(--button);
	border: 1px solid var(--button);
}


body {
	width: 100vw;
	height: 100vh;

	display: flex;
	flex-direction: column;

	position: relative;

	overflow: hidden;

	background-color: var(--background);
}








#nav-bar {
	width: 100%;

	flex-shrink: 0;
	flex-grow: 0;

	display: flex;
	flex-direction: row;

	justify-content: space-between;
	align-items: center;

	background-color: var(--background-2);
}

#nav-bar > * {
	height: 100%;
	max-height: 100%;
}


#nav-bar .left-items {
	height: 100%;

	display: flex;
	justify-content: center;
}

#nav-bar .left-items svg.site-logo {
	height: 100%;

	padding: 5% 0;

	cursor: pointer;
}



#nav-bar .middle-items {
	display: flex;
	flex-direction: column;

	padding: 10px 0;

	width: 37.5%;
}

#nav-bar .middle-items .search-cont {
	height: 3lh;
}

#nav-bar .right-items {
	display: flex;
	flex-direction: row;

	margin: 0.8em 0.8em 0 0;
}

#nav-bar .right-items div[hidden] {
	display: none;
}

#nav-bar .right-items .not-authed a {
	display: inline-block;
}

#nav-bar .right-items .is-authed {
	display: flex;
	gap: 0.5em;
}

#nav-bar .right-items .is-authed svg {
	height: 2em;
	border: 1px solid var(--accent-1);
	border-radius: 50%;

	fill: var(--accent-1);

	cursor: pointer;
}

#nav-bar .right-items .is-authed svg use {
	transform: scale(0.8);
	transform-origin: center;
}


.buttons-cont {
	background-color: yellow;
}






main {
	width: 100vw;
	padding: 20px 20px 0 20px;

	flex-grow: 1;


	overflow: hidden scroll;
	
	scrollbar-gutter: stable;
}

main > header,
main > section {
	width: 100%;
}

main > * {
	opacity: var(--load-status);
}

main > :last-child {
	margin-bottom: 20vh;
}





#content.home {
	gap: 1em;
}

#content.home section:nth-of-type(1) {
	display: flex;
	justify-content: center;
}

#content.home section:nth-of-type(1) .carousel {
	width: 100%;
	height: 500px;
}



#content.home section:nth-of-type(1) .carousel-slides .slide {
	width: 100%;
	height: 100%;

	overflow: hidden;
}

#content.home section:nth-of-type(1) .slide.home-title .bkg {
	width: 100%;
	height: 100%;

	position: absolute;
	z-index: 0;

	overflow: hidden;
}

#content.home section:nth-of-type(1) .slide.home-title .bkg img {
	width: 120%;
	height: 120%;

	transform: translate(-10%, -10%);
	object-fit: cover;
	object-position: center center;

	filter: blur(10px) brightness(0.7) saturate(1.3) hue-rotate(10deg);
}

#content.home section:nth-of-type(1) .slide.home-title h2 {
	color: var(--background);
	filter: drop-shadow(1px 1px 2px #111111);

	padding: 5px 20px 10px 20px;

	font-size: 3.5em;
	line-height: 1;
}

#content.home section:nth-of-type(1) .slide.home-title p {
	color: var(--background);
	filter: drop-shadow(1px 1px 1px #111111);

	font-size: 1.5em;
	font-weight: 400;
	padding: 5px 30px 10px 30px;
}

#content.home section:nth-of-type(1) .slide.home-title p:last-of-type {
	position: absolute;
	bottom: 0.3em;

	max-width: 90%;

	text-align: left;
	text-wrap-mode: wrap;
	text-wrap-style: balance;
}



#content.home section:nth-of-type(2) {
	--li-width: 13em;
	--col-gap: 1em;
}





#content.search,
#content.brand,
#content.offer,
#content.list,
#content.home {
	background-color: var(--background-plainest);

	display: flex;
	flex-direction: column;
}


#content.search header h1,
#content.brand header h1,
#content.offer header h1,
#content.list header h1 {
	margin: 0.5em 0 0.5em 1em;
}

#content.search .contents,
#content.brand .contents,
#content.offer .contents,
#content.list .contents {
	display: flex;

	flex-grow: 1;
}

#content.list {
	padding: 0 10vw;
}

@media screen and (max-width: 1000px) {
	#content.list {
		padding: 0;
	}
}


#content.search p.mode-info,
#content.brand p.mode-info,
#content.offer p.mode-info {
	width: 100%;

	display: flex;
	flex-direction: column;

	font-size: 0.9em;

	margin-bottom: 0.3em;
}


#content.search div.grid,
#content.brand div.grid,
#content.offer div.grid {
	border: 1px solid var(--accent-1);

	flex-grow: 1;
}

#content.list div.list {
	margin: 0 5vw;
}


#content.login,
#content.signup {
	display: flex;
	flex-direction: column;

	align-items: center;
}

#content.login header,
#content.signup header {
	margin: 5vh 0 3vh 0;
	padding: 0 clamp(5vw, 500px, 25vw);

	font-size: 1.4em;
}

#content.login header p,
#content.signup header p {
	margin: 2vh 0;
}

#content.login header a,
#content.signup header a {
	padding: 0.3em;

	font-size: 1.2em;
}

#content.login .password-valid,
#content.login div.notif-pref {
	display: none;
}



#content.product {
	display: flex;
	flex-direction: column;
	gap: 2em;

	align-items: center;

	padding: 5vh 15vw 0 15vw;
}

#content.product > * {
	width: 100%;
}

#content.product section.product > div.product {
	display: flex;
	flex-direction: row;

	justify-content: space-between;
	gap: 4em;
}

@media screen and (max-width: 85rem) {
	#content.product {
		padding: 5vh 5vw 0 5vw;
		/*font-size: 2em;*/
	}

	#content.product section.product > div.product {
		flex-direction: column;
		align-items: center;
	}
}

#content.product section.product .left {
	width: min(35em, 45vh);

	flex-grow: 0;
	flex-shrink: 1;
}



#content.product section.product .left .img-cont {
	width: 100%
}

#content.product section.product .left img {
	width: 100%;
	max-height: 100%;

	border: 3px solid var(--accent-1);
}

#content.product section.product .left img[src="/static/assets/ico.svg"] {
	padding: 25%;
}

#content.product section.product .left .rating {
	width: 100%;
	height: 1em;

	position: relative;
	z-index: 0;

	font-family: "Playpen Sans", cursive;
	font-weight: 800;
	font-size: 1em;
}

#content.product section.product .left .rating > div {
	width: fit-content;
	height: 100%;
}

#content.product section.product .left .rating .bkg {
	display: inline-block;
}


#content.product section.product .left .rating .stars {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;

	fill: var(--pound);
}

#content.product section.product .left .rating svg {
	aspect-ratio: 1/1;
	height: 100%;
}

#content.product section.product .right {
	flex-grow: 1;
}

#content.product section.product .right {
	--list-item-h: 3em;
	font-family: Roboto, sans-serif;
}

#content.product section.product .right > .text-cont {
	margin-bottom: 2em;
}

#content.product section.product .right > .text-cont .data1 {
	display: flex;
	flex-direction: row;

	justify-content: space-between;
	
	font-size: 1.2em;
	color: var(--dim-accent);
}

#content.product section.product .right > .text-cont .pname {
	font-size: 2.2em;
	font-weight: 600;
}

#content.product section.product .right form.segmented-button {
	margin-left: auto;
}

#content.product section.product .right div.list {
	background-color: unset;
}


#content.product section.product .right .icons {
	display: flex;
}

#content.product section.product .add-to-list-cont {
	display: flex;
	justify-content: right;
	gap: 0.2em;
}



#content.account {
	display: flex;
	flex-direction: column;

	gap: 2em;

	align-items: center;
}

#content.account .controls {
	width: 100%;
}

#content.account > section {
	width: min(600px, 80vw);
}

#content.account table {
	width: 100%;

	font-family: Roboto, sans-serif;
	
	margin-bottom: 1em;
}

#content.account table tr :nth-child(1) {
	text-align: right;
	padding: 0 1em 0 0;
}

#content.account table tr :nth-child(3) > * {
	font-weight: 600;
	color: var(--button);
}

#content.account .lists-pane header {
	margin-bottom: 1em;
}

#content.account .lists-pane header > * {
	display: inline;
	vertical-align: middle;
}

#content.account .lists-pane header button {
	margin-left: 1em;
}

#content.account .lists-pane div.list {
	--list-item-h: 3em;

	background-color: unset;
}

#content.account .lists-pane div.list .list-item {
	cursor: pointer;
	user-select: none;
}






#content.adminhome {
	padding: 5vh 20vw;
}

#content.adminhome header {
	margin-bottom: 2vh;
}

#content.adminhome ul.contents {
	display: grid;

	justify-content: center;

	grid-template-columns: 22em 22em;
	grid-auto-rows: 6.5em;

	row-gap: 70px;
	column-gap: 100px;
}

#content.adminhome ul.contents a {
	padding: 10px;
	
	text-align: center;
	vertical-align: middle;

	border: 2px solid var(--accent-1);
	border-radius: 8px;

	background-color: var(--background-plainest);

	font-family: Roboto, sans-serif;

	user-select: none;
}

#content.adminhome ul.contents a p.title {
	font-size: 1.3em;
	font-weight: 700;
}

#content.adminhome ul.contents a p.detail {
	font-size: 0.8em;
	font-weight: 300;
}










form div.text-input {
	position: relative;
}

form div.text-input input.text {
	padding: 0.2em 0.2em 0.2em 0.3em;
}

form div.text-input input.text::placeholder {
	opacity: 0;
}

form div.text-input label {
	position: absolute;
	left: 0.3em;

	top: 50%;
	transform: translateY(-50%);
	height: fit-content;
	
	pointer-events: none;

	opacity: 1;
}

form div.text-input input.text:focus {
	transition: 
		border linear 0.05s,
		background-color linear 0.05s;
}

form div.text-input:has(input.text:focus) label,
form div.text-input:has(input.text:not(:placeholder-shown)) label {
	opacity: 0;
	transition: opacity linear 0.07s;
}




form.login {
	display: flex;
	flex-direction: column;
	gap: 25px;

	width: min(600px, 80vw);

	padding: 1em;

	font-size: 1.2em;

	border: 2px solid var(--accent-1);
	border-radius: 6px;

	background-color: var(--background-plainest);
}

form.login input.text {
	width: min(100%, 64ch);
	padding: 0.3em;
	
	background-color: var(--inv-accent);

	border-radius: 4px;

	border: 2px solid rgba(0,0,0,0)
}

form.login input.text:valid {
	border: 2px solid var(--accept);
}

form.login input.text:not(:valid) {
	border: 2px solid var(--reject);
}

form.login .text-input:has(input.text:focus:placeholder-shown) input {
	border: 2px solid var(--accent-1);
}

form.login .text-input:has(input.text#password) {
	display: flex;
	flex-direction: row;

	justify-content: space-between;
	align-items: center;
}

form.login .text-input .view-password {
	height: 1.2em;

	margin-left: 0.3em;

	position: relative;
}

form.login .text-input .view-password svg {
	display: none;
	height: 100%;
}

form.login .text-input .view-password input {
	width: 100%;
	height: 100%;

	position: absolute;
	left: 0;
	top: 0;

	opacity: 0;
}

form.login .text-input:has(.view-password input:not(:checked)) input.text {
	text-security: disc;
	-webkit-text-security: disc;
}

form.login .text-input .view-password:has(input:checked) svg.visible,
form.login .text-input .view-password:has(input:not(:checked)) svg.hidden {
	display: inline;
}

form.login input[type='submit'] {
	width: min(300px, 80%);
	height: 1.7em;
	
	place-self: center;

	font-weight: 600;
	font-size: 1.1em;

	cursor: pointer;

	border-radius: 4px;
	border: 1px solid var(--accent-1);

	background-color: var(--background-2);
}

form.login .buttons:has(#signup) input[type='submit'] {
	width: 40%;
}

form.login input#signup {
	background-color: var(--background-3);
}


form.login input[type='checkbox'] {
	cursor: pointer;
}

form.login .buttons {
	display: flex;
	flex-direction: row;

	justify-content: space-evenly;
}

form.login .password-valid {
	font-size: 1em;
}

form.login .password-valid ul {
	width: calc(100% - 1ch);

	margin-left: auto;
}

form.login .password-valid li {
	font-size: 0.8em;
	font-family: Roboto, sans-serif;

	padding-left: 5px;

	color: var(--reject)
}

form.login .password-valid li.valid {
	color: var(--accept);
}

form.login .password-valid li::marker {
	content: '✖';
}

form.login .password-valid li.valid::marker {
	content: '✔';
}


search:has(form.search-bar) {
	height: fit-content;
}

form.search-bar {
	width: 100%;

	display: flex;

	font-size: 1.1em;
}

form.search-bar div.query {
	flex-grow: 1;
	flex-shrink: 1;
}

form.search-bar div.query input,
form.search-bar div.query label {
	width: 100%;
	max-width: 100%;
	overflow: hidden;

	white-space: pre;
	
	font-size: 1.1em;
	line-height: 1.1em;
}

form.search-bar div.query input {
	background-color: var(--background);

	border-radius: 4px;
	border: 2px solid var(--accent-1);	
}


form.search-bar div.query input:focus {	
	border-color: color-mix(in srgb, var(--background-2), var(--blend) 50%);
	background-color: color-mix(in srgb, var(--background), var(--blend) 50%);
}



form.search-bar div.submit {
	width: 2em;
	height: 2em;

	position: relative;

	flex-grow: 0;
	flex-shrink: 0;
}

form.search-bar div.submit input {
	width: 100%;
	height: 100%;
	opacity: 1;
	
	border: none;
	background: none;

	position: relative;
	z-index: 1;

	cursor: pointer;
}

form.search-bar div.submit svg {
	width: 100%;
	height: 100%;
	padding: 7px;

	pointer-events: none;

	position: absolute;
	z-index: 0;

	fill: var(--accent-1);
}







button.icobutton {
	border: 2px solid var(--accent-1);
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--inv-accent) 100%, #ffffff00 20%);

	fill: var(--accent-1);
}

button.icobutton svg {
	width: 100%;
	height: 100%;
}





div.carousel {
	position: relative;
}

div.carousel.fit-to-slide {
	border: 1px solid var(--accent-1);
}

div.carousel.fit-to-slide button {
	position: absolute;

	width: 50px;
	height: 50px;
	
	top: 50%;
	transform: translateY(-50%);

	padding: 8px;

	margin: 0 5px;
}

div.carousel.fit-to-slide button:last-of-type {
	right: 0;
}


div.carousel ol.carousel-slides {
	margin: 0;
	padding: 0;
}


section:has(div.grid) {
	background-color: var(--background-plainest);
}

div.list {
	--col-gap: 0;
	--row-gap: 1em;
}

div.grid,
div.list {
	width: 100%;
	font-family: Roboto, sans-serif;

	position: relative;

	padding: calc(var(--row-gap) / 2) calc(var(--col-gap) / 2);

	background-color: var(--background-plainest);

	margin-bottom: 10vh;
}

div.grid ul.grid-items {
	display: grid;

	column-gap: var(--col-gap);
	row-gap: var(--row-gap);
}

div.list ul.list-items {
	display: grid;

	grid-auto-flow: row;
	row-gap: var(--row-gap);
}

div.grid:not(.scroll) ul.grid-items {
	grid-template-columns: repeat(
		auto-fill, minmax(var(--li-width), 1fr));
		grid-auto-flow: row;
	
	overflow-x: hidden;
	overflow-y: hidden;
	height: fit-content;
}

div.grid.scroll ul.grid-items {
	grid-auto-flow: column;
	grid-auto-columns: var(--li-width);
	overflow: auto hidden;
}



div.grid .grid-item,
div.list .list-item {
	position: relative;

	display: flex;
}

div.list .list-item {
	height: fit-content;
	min-height: var(--list-item-h);

	align-items: center;
	gap: 0.4em;
}

div.list.products .list-item:has(.logos:empty),
div.grid.products .grid-item:has(.logos:empty) {
	filter: grayscale(1);
}

div.grid .grid-item {
	flex-direction: column;
	cursor: pointer;
}


div.grid .grid-item:not(:last-of-type)::after {
	content: '';
	width: 1px;
	height: 90%;

	display: block;

	position: absolute;

	bottom: 50%;
	right: calc(var(--col-gap) / -2);

	transform: translateY(50%);

	background-color: var(--accent-1);
}


div.grid:not(.scroll) .grid-item:not(:last-of-type)::before {
	content: '';
	width: 90%;
	height: 1px;

	display: block;

	position: absolute;

	bottom: calc(var(--row-gap) / -2);
	right: 50%;

	transform: translateX(50%);

	background-color: var(--accent-1);
}

div.grid .grid-item .img-cont {
	width: 100%;
	max-width: 100%;

	position: relative;

	padding: 10% 10% 0 10%;

	flex-grow: 0;
}


div.list .list-item:not(:last-of-type)::before {
	content: '';
	width: calc(100% - var(--list-item-h));
	height: 1px;

	display: block;

	position: absolute;

	bottom: calc(var(--row-gap) / -2);
	right: 0;

	background-color: var(--accent-1);
}

div.list.price-only .list-item:not(:last-of-type)::before {
	right: 50%;
	transform: translateX(50%);
}


div.list .list-item .img-cont {
	width: var(--list-item-h);
	height: var(--list-item-h);

	display: flex;
	flex-direction: column;
	justify-content: left;
	align-items: center;
	flex-shrink: 0;

	position: relative;
}

div.list .list-item .img-cont:has(svg.logo) {
	width: 6em;
	
	padding: 0 0.2em 0 0;
}

div.list .list-item .img-cont:has(svg.logo) span {
	font-size: 0.6em;
}

div.list .list-item .img-cont svg.logo {
	flex-shrink: 0;
}

div.grid .grid-item .img-cont a.ref,
div.list .list-item .img-cont a.ref {
	display: block;
}

div.grid .grid-item .img-cont img,
div.list .list-item .img-cont img  {
	width: 100%;
	max-height: 100%;
}

div.grid .grid-item .img-cont img[src="/static/assets/ico.svg"],
div.list .list-item .img-cont img[src="/static/assets/ico.svg"] {
	transform: scale(0.8);
	transform-origin: center;
}

div.grid .grid-item .img-cont .overlay,
div.list .list-item .img-cont .overlay {
	display: flex;
	flex-direction: row;

	position: absolute;
	bottom: 0;
	right: 0;
}

div.grid .grid-item .img-cont .overlay svg,
div.list .list-item .img-cont .overlay svg {
	height: 1.3em;
	filter: drop-shadow(0.1em 0.1em 0.05em black);
}

div.list .list-item .img-cont > svg {
	width: 100%;
}


div.grid .grid-item .text-cont,
div.list .list-item .text-cont {
	display: flex;
	justify-content: space-between;
	flex-grow: 1;
}

div.grid .grid-item .text-cont {
	flex-direction: column;
}

div.list .list-item .text-cont {
	align-items: center;
}

div.grid .grid-item .data1,
div.list .list-item .data1 .brand,
div.list .list-item .data1 .size,
.price sub {
	font-size: 0.8em;
	color: var(--dim-accent);
}

.price.strikethrough {
	color: #aa0000;
	text-decoration: line-through;
	
	height: 1.2em;
	font-size: 0.9em;
}

div.grid .grid-item .data2 .price.strikethrough sub,
div.list .list-item .data2 .price.strikethrough sub {
	color: #aa0000;
}

div.grid .grid-item .data2 .price:empty {
	display: none;
}

div.grid .grid-item .data1 {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

div.list .list-item .data1 {
	display: flex;
	justify-content: center;
}

div.grid .grid-item .data1 .size,
div.list .list-item .data1 .size {
	font-weight: 600;
}

div.list .list-item .data1 {
	flex-direction: column;
	text-wrap-style: balance;
	flex-grow: 1;
}

div.list .list-item > div {
	height: 100%;
}

div.grid .grid-item span.pname,
div.list .list-item span.pname {
	font-size: 1em;
}

div.grid .grid-item .data2 {
	margin-top: auto;

	text-decoration: none;
}

div.list .list-item a.ref:not(.pname) {
	text-decoration: none;
}


div.grid .grid-item .data2,
div.list .list-item .data2 {
	display: flex;	
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 0.3em;
}

div.grid .grid-item .data2 {
	flex-direction: column;
	padding-top: 10px;
}

div.grid .grid-item .data2 .logos,
div.list .list-item .data2 .logos {
	display: flex;
	flex-direction: row;

	justify-content: center;
	align-items: center;

	height: 2em;
}

div.grid .grid-item .data2 .logos {
	width: 100%;
	margin-bottom: 0.2em;
}

div.list .list-item .data2 .logos {
	flex-shrink: 1;
	flex-wrap: wrap;
}

div.grid .grid-item .data2 svg {
	max-width: 60%;
	height: 100%;
}

div.list .list-item .data2 svg {
	height: 60%;
}

div.grid .grid-item .data2 .price,
div.list .list-item .data2 .price  {
	position: relative;

	text-align: center;
	flex-shrink: 0;
	line-height: unset;
}

div.grid .grid-item .data2 .price a,
div.list .list-item .data2 .price a {
	text-decoration: none;
}

div.grid .grid-item .data2 .price {
	width: 100%;
	height: 1.4em;
	align-self: flex-end;
}

div.list .list-item .data2 .price:not(:empty) {
	min-width: 10ch;
}

div.grid .grid-item .data2 .price sub,
div.list .list-item .data2 .price sub {
	text-wrap: nowrap;
	bottom: 0.1em;
}

div.list .list-item .icons:not(:empty) {
	height: 100%;

	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.2em;
	
	padding-left: 0.2em;
}

a.goto {
	display: block;
	text-wrap-mode: nowrap;
	
	height: 2em;
	line-height: 1.25em;
}

svg.bin {
	width: 2em;
	height: auto;
	max-height: 100%;

	cursor: pointer;
}

div.list .list-item .icons .count {
	display: flex;
	flex-direction: row;
	gap: 0.1em;

	align-items: center;
}

div.list .list-item .icons .count span {
	user-select: none;
}

div.list .list-item .icons .count svg {
	width: 1em;
	height: 1em;

	cursor: pointer;
}

div.list .list-item .icons .count svg:hover {
	scale: 1.3;
	transform-origin: center;
}


div.grid .grid-item .icons,
div.list .list-item .icons:empty,
div.list.price-only .list-item .img-cont,
div.list.price-only .list-item .data1 {
	display: none;
}


div.list .list-cost {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	gap: 1.5em;
	flex-wrap: wrap;
}

div.list .list-cost .list-cost-item {
	display: flex;
	flex-direction: column;
}

div.list .list-cost .list-cost-item .data1 {
	height: 2.5em;
	display: flex;
	flex-direction: row;
}

div.list .list-cost .list-cost-item .costs-cont {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

div.list .list-cost .list-cost-item .logo-cont svg {
	height: 100%;
}

div.list .list-cost .list-cost-item .n-products {
	font-size: 0.8em;
}
div.list .list-cost .list-cost-item p.reductions span {
	display: block;

	font-size: 0.9em;
	font-weight: 300;
}



.tag {
	position: relative;
}

.tag p.onhover {
	display: none;
}

.tag:hover p.onhover {
	display: initial;
	position: absolute;
	top: 100%;
	left: 100%;
	z-index: 2;
	
	font-size: 0.9em;
	font-weight: 400;
	text-wrap: balance;
	width: max-content;
	
	background: var(--background);
	padding: 0.1em;
	border: 1px solid var(--accent-1);
	border-radius: 2px;	
}




aside.controls.horizontal {
	width: 100%;

	display: inline-flex;
	flex-direction: row;
	flex-wrap: wrap;
	

	justify-content: right;
	align-items: center;
	column-gap: 20px;

	position: relative;

	margin: 1em 0 0.5em 0;
	padding: 0 10px 0 0;
}


aside.controls.vertical {
	width: 16em;

	position: relative;

	margin: 0 1em 0 0;
}

aside.controls.vertical h2 {
	width: 100%;

	text-align: center;

	font-size: 1.5em;
	margin: 0.25em 0 0.25em 0;
}

aside.controls.vertical h3 {
	padding: 0.5em 0 0.25em 0;
}

aside.controls.vertical div.select-stores {
	position: relative;

	padding: 0 0.5em 1.5em 0;
}

aside.controls.vertical div.select-stores::before,
aside.controls.vertical div.select-stores::after {
	content: '';
	width: 90%;
	height: 1px;

	display: block;

	position: absolute;

	right: 50%;

	transform: translateX(50%);

	background-color: var(--accent-1);
}

aside.controls.vertical div.select-stores::before {
	top: 0;
}

aside.controls.vertical div.select-stores::after {
	bottom: 0;
}

aside.controls.vertical form.unavailable {
	display: flex;
	justify-content: center;
	gap: 3px;

	margin-top: 0.3em;
}


form.segmented-button {
	width: fit-content;

	font-size: 1em;	
}

form.segmented-button fieldset {
	height: 1.6em;

	display: inline-flex;
	flex-direction: row;
	flex-wrap: nowrap;

	align-items: center;

	border: 1px solid var(--accent-1);
	background-color: var(--background);
	border-radius: 4px;
}

form.segmented-button legend {
	display: contents;

	width: fit-content;

	font-size: 1em;
}

form.segmented-button div.option {
	height: 100%;

	display: flex;
	align-items: center;

	font-weight: 500;

	user-select: none;
	cursor: pointer;

	padding: 5px;

	background-color: var(--background);
}

form.segmented-button div.option:first-of-type {
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

form.segmented-button div.option:last-of-type {
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}

form.segmented-button div.option:not(:last-of-type) {
	border-right: 1px solid var(--accent-1);
}

form.segmented-button div.option input {
	display: none;
}

form.segmented-button div.option:has(input:checked) {
	background-color: var(--background-2);
}

form.segmented-button div.option label {
	cursor: pointer;
}

form.sort {
	height: 1em;

	display: flex;
	flex-direction: row;

	font-size: 1.3em;
}

form.sort label {
	display: none;
}

form.sort svg {
	aspect-ratio: 1/1;
	height: 100%;
}

form.sort select {
	font-family: Roboto;
	font-weight: 450;

	cursor: pointer;
	text-align: right;
}


form.stores {
	width: 100%;

	display: grid;

	grid-auto-flow: row;
	grid-auto-rows: 3.5em;
	row-gap: 1em;
}


form.stores div.option {
	width: 100%;

	display: flex;
	justify-content: space-evenly;
	flex-direction: row;

	position: relative;
	cursor: pointer;
}

form.stores div.option label {
	max-width: 80%;
	height: 100%;

	cursor: pointer;
}

form.stores div.option svg {
	max-width: 100%;
	height: 100%;
}

form.stores div.option input {
	position: absolute;

	top: 50%;
	right: 0;

	transform: translateY(-50%);

	cursor: pointer;
}



#notif-cont {
	position: absolute;

	left: 1em;
	bottom: 1em;
}


#notif-cont p {
	padding: 0.2em;
	margin-bottom: 0.2em;
	background: var(--accent-1);
	color: var(--inv-accent);
	border-radius: 6px;

	font-size: 1.6em;
	max-width: 80vw;
	text-wrap: wrap;

	transform: translateY(125%);
	opacity: 0;
	will-change: transform, opacity;
	transition: transform 0.5s ease, opacity 0.3s ease;
}

#notif-cont p.open {
	transform: none;
	opacity: 1;
}

#popup-cont {
	position: absolute;
}

#popup-cont:not(:empty) {
	width: 100%;
	height: 100%;
	background-color: #1111118f;

	display: flex;
	justify-content: center;
	align-items: center;
}


.add-to-list-popup,
.create-list-popup {
	width: min(600px, 80vw);
	min-height: min(400px, 80vh);
	background: var(--background);
	
	position: relative;
	padding: 1em;
}

.add-to-list-popup svg,
.create-list-popup svg {
	position: absolute;
	top: 1em;
	right: 1em;
	height: 2em;

	cursor: pointer;
}

.add-to-list-popup h2,
.create-list-popup h2 {
	margin-bottom: 1em;
}

.add-to-list-popup ul {
	display: flex;
	flex-direction: column;	
}

.add-to-list-popup li {
	font-family: Roboto, sans-serif;
	font-size: 1.2em;
	padding: 0.3em;

	list-style-position: inside;
	list-style-type: "- ";
	cursor: pointer;

	border-top: 1px solid var(--accent-1);
}

.add-to-list-popup li:last-of-type {
	border-bottom: 1px solid var(--accent-1);
}

.create-list-popup form {
	font-size: 1.3em;
}
.create-list-popup input#name {
	border: 2px solid var(--accent-1);
	border-radius: 4px;
	background-color: var(--background);

	width: 100%;
}

.create-list-popup .text-input {
	margin-bottom: 1em;
}