/*--------------------------------------------
	BTCshops CSS


	Block 0: General CSS
 	Block 1: Top navigation
 	Block 2: Search box
 	Block 3: Footer
 	Block 4: Slideout div from top
 	Block 5: Forms
 	Block 6: Buttons
	Block 7: Homepage
	Block 8: Category and Productlist display
	Block 9: Product detail page
	Block 10: Reviews
 	Block 11: Responsive
 	Block 12: Print
--------------------------------------------*/

/*--------------------------------
	Block 0: General CSS
-------------------------------*/

@font-face {
	font-family: 'Open Sans';
	src: local('Open Sans'), local('OpenSans'),
		url('/scripts/font/Open Sans.woff2') format('woff2'),
		url('/scripts/font/Open Sans.woff') format('woff');
	font-display: swap;
}

/* Variables */
html {
	--margin:		10px;		/* Consistent troughout application */
	--padding:		10px;

	--menucolor:		#999;
	--iconcolor:		#999;
	--hovercolor:		#f80;
	--titlecolor:		#555;

	--iconmargin:		6px;

	--bordercolor:		#ddd;
	--borderradius:		8px;

	--darkbg:		#222;
	--darkbg-fg:		#eee;
	--darkbg-bordercolor:	#555;

	--prod-detail-block-height: 196px;
}

body {
	font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 1em; color: #000; background: #fefefe;
	margin: 0; padding: 0;
}

header {
	display: flex; position: fixed; top: 0; width: 100%; height: 60px; z-index: 3; margin: 0; padding: 0;
	background: #fff;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
	/*border-width: 0 0 1px 0; border-style: solid; border-color: #666;*/
}


main	{ margin: var(--margin); margin-top: 90px; }
main ul				{ list-style-image: url(/img/template/bullet-grey.png); }

a img				{ border: none; outline: none; }
hr				{ border-style: solid; border-width: 1px 0 0 0; border-color: #eee; clear: both; }
body a				{ color: #06c; text-decoration: none; }
body a:hover			{ text-decoration: underline; }
h1				{ margin: 0 0 30px 0; clear: both;font-size: 1.8em; font-weight: normal; color: var(--titlecolor); }
h2				{ margin: 25px 0 10px 0; font-size: 1.6em; font-weight: normal; color: var(--titlecolor); }
h3				{ margin: 25px 0 10px 0; font-size: 1.4em; font-weight: normal; color: var(--titlecolor); }
dt				{ font-weight: bold; }
dd				{ padding-bottom: 16px; }

div.ewloader			{ margin: 0; padding: 0; text-align: center; animation: fadein 0.4s ease-in; } /* AJAX loader */
.ewloader svg,
.ewloader svg path		{ fill: var(--hovercolor); width: 80px; height: 30px; }
main div.ewloader		{ margin: 100px auto; }
#ewloading			{ display: none; }

/* Up arrow when scrolling down */
#uparrow			{ display: none; position: fixed; bottom: 10vh; right: 0; z-index: 102;
	background: #fff; border-radius: var(--borderradius) 0 0 var(--borderradius);
	border-width: 1px 0 1px 1px; border-style: solid; border-color: var(--bordercolor);
 }
#uparrow a			{ display: block; width: 36px; height: 36px; outline: none; padding: 10px 10px 10px 12px; }
#uparrow svg,
#uparrow svg path		{ width: 36px; height: 36px; fill: #999; color: #999; }
#uparrow a:hover svg,
#uparrow a:hover svg path	{ fill: var(--hovercolor); }

.search_time			{ color: #aaa; font-size: 0.9rem; }

.fadein			{ animation: fadein 0.4s ease-in; }
@keyframes fadein	{ from { opacity: 0; } to { opacity: 1; }}

/* Columns with flex */
div.c2, div.c3, div.c4		{ display: flex; flex-flow: row wrap; justify-content: space-between; gap: calc(var(--padding) * 2); align-items: stretch; }
div.c3 > div			{ flex: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: stretch;  }
/*  margin: 60px 0 60px 0; border: 1px dashed var(--bordercolor); padding: 20px 20px 2px 20px; border-radius: var(--borderradius); */
div.c3 h2			{ margin-top: 0; }
div.c3 .spacer			{ flex-grow: 2; }

/*--------------------------------
 	Block 1: Top navigation
-------------------------------*/

header nav {
	display: flex; justify-content: space-between; align-items: center; gap: var(--margin); width: 100%; height: 51px;
	font-weight: bold; white-space: nowrap; color: #888; padding-right: 6px;
}

/* 0: Logo */
a#logo				{ width: 166px; min-width: 166px; outline: none; line-height: normal; }

/* 1: Main navigation */
header nav ul			{ list-style: none; margin: 0; padding: 0; display: flex; gap: 15px; padding-top: 4px }
header nav li			{ cursor: default; line-height: 46px; }
header nav:not(.loggedin):not(.mobile-menu) > ul > li::after { /* drop down icon on the right of each menu item */
	content: ''; display: inline-block; width: 12px; height: 12px; margin: 0 0 0 4px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23999999' d='M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: center; background-size: contain;
}
header nav a			{ display: inline-block; margin: 0; padding: 0; color: var(--menucolor); text-decoration: none; outline: none; line-height: 46px; }
header nav a:hover,
header nav li.active > a	{ color: var(--hovercolor); text-decoration: none; }

/* Topnav Sub navigation */
header nav ul ul {
	display: flex; flex-wrap: wrap; gap: 5px; position: absolute; margin-left: -4px; width: 770px; z-index: 100; max-height: 0; opacity: 0;
	border: 1px solid var(--bordercolor); border-radius: var(--borderradius); background: #fff;
	transition: max-height 0.3s linear 0s, opacity 0.2s linear 0s; overflow: hidden;
}

header nav ul ul li		{ display: inline-block; width: 250px; }
header nav:not(.loggedin) ul li:hover > ul
				{ opacity: 1; max-height: 260px; }
header nav ul ul a		{ display: block; padding: 0 12px; }

/* Navigation icons */
header nav svg			{ fill: var(--iconcolor); width: 26px; height: 26px; vertical-align: middle; cursor: pointer; }
header nav ul svg		{ margin-right: 10px; } /* subnav icons */
header nav a:hover svg,
header svg:hover path		{ fill: var(--hovercolor); }

/* Navigation quick action buttons when not logged in */
header nav div			{ display: flex; gap: var(--margin); }
header nav div a		{ display: block; border: 1px solid var(--bordercolor); border-radius: 3px; line-height: 36px; padding: 0 var(--padding); }
header nav div svg		{ height: 26px; padding: 5px 6px 5px 0; }

/* Mobile menu */
#mobile-menu-icon {
	display: none; width: 36px; height: 36px;
	background: #fff; border-radius: var(--borderradius) 0 0 var(--borderradius);
	border-width: 1px 0 1px 1px; border-style: solid; border-color: var(--bordercolor);
}
nav.mobile-menu > ul {
	display: block; position: absolute; top: 45px; left: 0; width: calc(100vw - 20px); height: calc(100vh - 80px); padding: 20px var(--padding) 14px var(--padding);
	overflow-y: auto; background: #fff;
}

/* Mobile menu titles */
nav.mobile-menu > ul > li	{ display: block; font-size: 1.8rem; color: var(--titlecolor); font-size: 1.6rem; }
nav.mobile-menu ul > li::after	{ background-image: none; }

/* Mobile menu subitems */
nav.mobile-menu ul ul {
	position: relative; max-height: none; opacity: 1;
	display: flex; flex-wrap: wrap; gap: 0;	margin: var(--margin) 0 20px 0;
	border: none; border-radius: 0;	font-size: 1rem; 
	max-height: 200px;
}
nav.mobile-menu ul ul li	{ flex: 1 1 calc(33% - 6px); min-height: 60px; display: flex; align-items: center; }
nav.mobile-menu ul ul li a	{ padding: 0; }
nav.mobile-menu ul ul li a img	{ vertical-align: middle; margin-right: var(--iconmargin); }
nav.mobile-menu.loggedin > ul > li > a 
				{ color: var(--titlecolor); } /* fix title colors in mobile menu when logged in */
nav.mobile-menu.loggedin > ul > li > a:hover
			 	{ color: var(--hovercolor); }

header nav.mobile-menu ul li:hover > ul,
header nav.mobile-menu ul li > ul
				{ opacity: 1; max-height: 100%; margin-bottom: 60px; } /* leave room for actionbuttons */
/*--------------------------------
 	Block 2: Search box
-------------------------------*/
header form			{ flex-grow: 1; margin-right: 54px; } /* Right margin to cover absolute search image */

header input[type="text"] {
	width: 100%; max-width: 400px; height: 20px; margin: 0; padding: 10px 8px 6px 8px;
	background: #fff; color: #888; text-indent: 3px; font-weight: bold;
	border-width: 1px 0 1px 1px; border-radius: 3px 0 0 3px; outline: none;
}

header input[type="image"] {
	float: right; margin: 0; height: 26px; position: absolute; background: #fff;
	border-width: 1px 1px 1px 0; border-style: solid; border-radius: 0 3px 3px 0;
}



/*--------------------------------
 	Block 3: Footer
-------------------------------*/
footer				{
	display: flex; justify-content: space-between;
	margin: 40px auto 0 auto; padding: 40px 0 60px 0;
	border-width: 1px 0 1px 0; border-style: solid; border-color: #f80;
	text-align: center;
}
footer > div			{ flex-grow: 1; }
footer nav			{ display: flex; margin-top: 10px; text-align: left; }
footer nav span			{ flex-grow: 1; }
footer nav a			{ display: inline-block; margin-bottom: 1px; line-height: 34px; color: #333; outline: none; }
footer nav a:hover		{ text-decoration: none; border-width: 0 0 1px 0; border-style: solid; border-color: #f60; margin-bottom: 0px; }
footer > div:last-child		{ padding-top: 80px; } /* social icons */

#footertext			{ margin: 12px auto; padding: 0 30px 0 10px; display: flex; justify-content: space-between; color: #666; }
#footertext span		{ flex-grow: 2; }
#footertext a			{ margin: 0 20px 0 0; color: #666; outline: none; }

a.social svg			{ vertical-align: bottom; width: 32px; height: 32px; margin: 8px; }
a.social use[href$="facebook"] 	{ fill: #1977f3; }
a.social use[href$="mastodon"] 	{ fill: #3088d4; }
a.social use[href$="nostr"] 	{ fill: #8d45dd; }
a.social use[href$="twitter"] 	{ fill: #333; }
a.social:hover 			{ filter: brightness(150%); }

/*--------------------------------
 	Block 4: Slideout div from top
-------------------------------*/
#slidedivcont		{ position: fixed; width: 100%; left: 0; top: 0; margin: 0; padding: 0; text-align: center; z-index: 5; }
#slidedivcont > div	{
	display: inline-block; width: 1130px; max-width: 90vw; vertical-align: top; text-align: left;
	background: #fff; box-shadow: 0px 0px 25px 0px rgba(165, 165, 165, 0.7);
	max-height: 0; transition: max-height 1s; overflow-y: hidden;
}
#slideup		{ text-align: right; opacity: 0; transition: opacity .5s; }
#slideup svg		{ position: absolute; width: 32px; height: 32px; margin: -5px 0 0 -52px; cursor: pointer; fill: #999; color: #999; }
#slideup svg		{ fill: #999; color: #999; }
#slideup svg:hover,
#slideup svg:hover path	{ fill: #ccc; color: #ccc; }

#slidediv		{
	height: calc(100% - 70px);
	padding: 10px 30px;
	opacity: 0; transition: opacity 0.5s;
	margin-bottom: 40px;
}

#slidediv .ewloader	{ margin-top: 40px; }
.slidelang a		{ display: inline-block; width: 190px; color: #333; text-decoration: none; padding: 10px; border-radius: 4px; }
.slidelang a:hover	{ background: #eee; text-decoration: none; }

/*--------------------------------
 	Block 5: Forms
-------------------------------*/

input, select, textarea	{
	border: 1px solid var(--bordercolor); border-radius: 3px; margin: 3px 0; padding: 5px;
	background: #fff; color: #000; font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 1rem;
}
select				{ padding: 4px; }
input:focus, textarea:focus	{ background: #eee; }
input[type="checkbox"],
input[type="radio"]		{ border: 0; outline: none; cursor: pointer; vertical-align: top; }
.formtable td:first-of-type	{ width: 30%; }
input[type="submit"]		{ float: right; margin: 10px 0 0 0; min-width: 224px; }
input + span, select + span	{ position: absolute; margin: 4px 0 0 4px; }
input[type="number"]		{ padding-right: 0; width: 80px; }
td.double input:first-child	{ margin-right: 8px; }
td.double input[size="10"]	{ width: 100px }

/*--------------------------------
 	Block 6: Buttons
-------------------------------*/
a.glowbutton, input[type="submit"], input[type="button"], button, label.glowbutton {
	white-space: nowrap; display: inline-block; min-width: 186px; margin: 0 0 10px 0; padding: 0 12px;
	text-decoration: none; text-align: center;
	color: #fff; background: #f80; border: 0; border-radius: 3px;
	line-height: 33px; height: 33px; font-weight: bold; font-size: 0.9em;
	transition: 0.3s background; cursor: pointer;
	font-family: Open Sans, Helvetica, Arial, sans-serif; /* -webkit-appearance: none; */
}

a.glowbutton:hover, input[type="submit"]:hover, input[type="button"]:hover, button:hover, label.glowbutton:hover {
	background: #f90; text-decoration: none;
}

input[type="submit"]:disabled, input[type="button"]:disabled {
	background: #ccc; cursor: default;
}

a.glowbutton.red		{ background: #ed333b !important; }
a.glowbutton.red:hover		{ background: #e54249 !important; }

.leftbuttons a			{ margin-right: 10px !important; }
.rightbuttons			{ text-align: right; }
.rightbuttons a			{ margin-left: 10px !important; }

p.bigbuttons			{ display: block; text-align: center; }
p.bigbuttons a {
	display: inline-flex; align-items: center;
	white-space: nowrap; min-width: 300px; margin: 23px; padding: 0 12px;
	text-decoration: none; text-align: center;
	border: 0; border-radius: 14px;
	line-height: 73px; height: 73px; font-weight: bold; font-size: 1.2rem;
	transition: 0.4s filter; cursor: pointer; outline: none;
	font-family: Open Sans, Helvetica, Arial, sans-serif; /* -webkit-appearance: none; */

	background: #fd2f1e; color: #fff;
	background: linear-gradient(145deg, rgba(255, 102, 0, 1) 20%, rgba(253, 47, 30, 1) 74%, rgba(255, 102, 0, 1) 100%);
}


p.bigbuttons a:hover {
	background: #ed5f00;
	background: linear-gradient(145deg,rgba(237, 95, 0, 1) 20%, rgba(255, 21, 0, 1) 74%, rgba(237, 95, 0, 1) 100%);
	background-position: 0 73px;
	filter: brightness(1.4); text-decoration: none;
}

p.bigbuttons a span		{ flex-grow: 2; margin-right: -20px; }
p.bigbuttons svg		{ fill: #fff; width: 26px; height: 26px; margin-right: 10px; }

@media all and (max-width: 500px) {
	 p.bigbuttons a	{ min-width: calc(100vw - 100px); }
}

/* Glowbutton with icon */
a.glowbutton			{ display: inline-flex; align-items: center; justify-content: center; }
a.glowbutton > span		{ flex-grow: 2; margin-right: -20px; }
a.glowbutton > svg		{ fill: #fff; width: 14px; height: 14px; margin-right: 10px; }

/*--------------------------------------------
	Block 7: Homepage
--------------------------------------------*/
#slide {
	display: flex; height: 240px; margin: -34px -10px 10px -10px; padding: 40px 10px 10px 10px;
	background: #ff8c00 url(/img/layout/pagebg9.webp) no-repeat center top; background-size: cover; background-position: top -20px left 0;
	/*background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
	background-image: url(/img/layout/pagebg9.webp);*/
	color: #222; text-align: center; font-weight: bold;
 }
#slide > div { flex-grow: 1; }

/*--------------------------------------------
	Block 8: Category and Productlist display
		<div id="productlist"> contains <ul id="prodlist"> instances which are added by lazy loading
--------------------------------------------*/

#catlist			{ width: 100%; font-weight: bold; }
#noproductsfound		{ color: #f60; font-size: 1.4em; text-align: center; font-weight: bold; opacity: 0; transition: opacity 0.3s;  }
#prodbody			{ display: flex; }
#filtersform {
	position: sticky; align-self: flex-start; top: 0; margin: 0; padding: 0; width: 200px; min-width: 200px;
	height: 100vh; overflow: auto;
	transition: opacity 0.3s, min-width 0.5s ease-out;
}
#prodbody > ul			{ flex-grow: 2; }
#prodlist, #catlist {
	display: inline-flex; flex-wrap: wrap; align-content: flex-start;	/* move content up the list */
	justify-content: space-evenly;						/* chagne to left for last items keep left */
	gap: 10px;								/* preserve template left and right margin */
	margin: 0; padding: 0; list-style: none; text-align: center;
	overflow: hidden; transition: opacity 0.2s linear, max-height 0.5s ease-out;
}

#prodlist > li, #catlist > li {
	flex-grow 1;		/* Prevent whitespace left & right in productlist */
	width: 260px;		/* 1180 / 4 = 295, -30px gap = 265 */
	max-width: 512px;	/* don't stretch photos */
	/*overflow: hidden;*/ transition: max-height 3s ease, height 3s ease, opacity 0.5s linear;
}

#catlist.hqphoto li,
#productlist.hqphoto li				{ width: calc(33% - 30px); margin: 0 12px; } /* 1180 / 3 = 393 */

#prodlist > li > a, #catlist > li > a		{ display: flex; flex-direction: column; height: 100%; margin: 0; padding: 0; text-decoration: none; outline: none; color: #666; }
#catlist > li > a > div:nth-of-type(1),									/* div around cat photo */
#prodlist > li > a > div:nth-of-type(1)		{ display: flex; align-items: center; height: 100%; overflow: hidden; }	/* div around cat and prod photo */
#catlist > li > a > div:nth-of-type(2)		{  }							/* cat name */
#prodlist > li > a > div:nth-of-type(2)		{  }							/* div around prod name and price */
#catlist > li > a > div > img,
#prodlist > li > a > div > img			{ margin: 10px auto; max-width: 100%; }			/* photo */
#catlist div > div,
#prodlist > li > a > div > div			{ padding: 2px 0; }					/* name, price */
#prodlist .webshop_subphotos			{ display: flex; align-items: flex-start; gap: 1%; }	/* subphotos */

#catlist.uniform_photos > li > a > div:nth-of-type(1),
#productlist.uniform_photos #prodlist > li > a > div:nth-of-type(1) {
	width: 230px; height: 230px; margin: 20px 0; /* align-items: flex-start; */
	background-position: center; background-size: contain; background-repeat: no-repeat;
} /* div around cat and prod photo */
#catlist.hqphoto.uniform_photos > li > a > div:nth-of-type(1),
#productlist.hqphoto.uniform_photos #prodlist > li > a > div:nth-of-type(1) { min-width: 230px; width: auto; }

/* Small category and product photos */
#prodlist, #catlist				{ text-align: left; gap: 20px 5px; }
#prodlist > li, #catlist > li			{ width: 200px; padding: 5px; transition: box-shadow 0.4s ease; } /* padding for box-shadow */
#catlist.uniform_photos > li > a > div:nth-of-type(1),
#productlist.uniform_photos #prodlist > li > a > div:nth-of-type(1) { /* photo */
	margin: 0 auto; width: 100%; height: 180px;
}
#catlist div > div, #prodlist > div:not(#prod-detail) > div	{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#prodlist div > div:first-child			{ font-size: 0.9rem; } /* name */
#prodlist div > div:last-child			{ font-weight: bold; } /* price */
#catlist > li:hover, #prodlist > li:hover	{ box-shadow: 0 0 16px rgba(0, 0, 0, 0.15); border-radius: 10px; }

/* Add a few products at the end of the product list to keep the last row on the left */
#catlist > li.hidden,
#prodlist > li.hidden		{ margin: 0; border: none; box-shadow: none; } /*margin: 0 12px; */

/* Price and stock display */
.webshop_price			{ font-weight: bold; }
.webshop_price > div		{ display: inline-block; }
.webshop_old_price		{ text-decoration: line-through; margin-right: 6px; color: #c00; }
.webshop_units			{ vertical-align: super; font-size: 0.9em; font-weight: normal; margin-left: 5px; }
.webshop_status_ok,
.webshop_status_warning,
.webshop_status_error		{ display: inline-block; padding: 6px 8px; border-radius: 6px; font-weight: bold;  }
.webshop_status_ok		{ background: #5fc331; color: #eee; }
.webshop_status_warning		{ padding: 0; color: #f60; }
.webshop_status_error		{ background: #d62828; color: #eee; }

/*--------------------------------------------
	Block 9: Product detail page
		#prod-detail gets created in JS in the product lists as a wrapper for .prod-detail
--------------------------------------------*/
#prodlist #prod-detail		{ width: 100%; margin: 0 16px; transition: min-height 0s, max-height 1s; }

/* Breadcrumb navigation */
.webshop_breadcrumb		{ color: #888; font-size: 0.9rem; }
.webshop_breadcrumb a		{ margin: 0 6px; color: #888; text-decoration: none; }
.webshop_breadcrumb a:hover	{ text-decoration: underline; }
.webshop_breadcrumb a:first-child { margin-left: 0; } /* first item */
.webshop_breadcrumb span	{ margin-left: 6px; } /* last item */
#prod-detail .webshop_breadcrumb { border-width: 0px 0 1px 0; border-style: dashed; border-color: #ddd; padding: var(--padding) 0; }

.prod-detail			{ display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; margin: var(--margin) 0; padding: 0; }
.prod-detail > div		{
	flex-grow: 2; min-width: 250px; max-height: var(--prod-detail-block-height); max-width: 600px; margin: 0; padding: 0;
	border-radius: var(--borderradius); color: #333;
}

.prod-detail > a		{ /* photos */
	flex-grow: 0; max-height: calc(var(--prod-detail-block-height) + 20px); flex-shrink: 2; padding: 0;
	border-radius: var(--borderradius);
	transition: box-shadow 0.4s ease;

 }
.prod-detail > a:hover		{ box-shadow: 0 0 16px rgba(0, 0, 0, 0.15); }
.prod-detail > a > img		{ height: calc(var(--prod-detail-block-height) + 20px); width: auto; max-height: 100%; border-radius: var(--borderradius); }

.prod-detail > div:first-child > p:first-child, /* titles */
.webshop-summary > p:first-child{ font-size: 1.3rem; font-weight: bold; margin: 0 0 20px 0; }

p.webshop_price			{ margin: 0 0 12px 0; font-size: 3em; }

/* Description */
.prod-detail div.prod-detail-desc{ flex-grow: 4; box-shadow: none; background: none; padding: 0; overflow-y: auto; } /* summary description */

#desc-div			{ /* container div for full description */
	position: fixed; top: 10px; left: 50%; width: 100%; max-width: 980px;
	transform: translateX(-50%); /* center */
	background: #fff; z-index: 2001; box-shadow: 0px 0px 25px 0px rgba(165, 165, 165, 0.7);
}
#prod-detail-desc-full		{ display: none; padding: var(--padding); height: calc(100vh - 40px); overflow-y: scroll; } /* full description */

#desc-div > svg			{ /* close icon */
	position: absolute; /*top: var(--padding); right: calc(var(--padding) * 2);*/ bottom: 1vh; right: 1vw;
	/*width: 36px; height: 36px;*/
	width: 10vw; height: 10vw; min-width: 50px; min-height: 50px; max-width: 90px; max-height: 90px;
	z-index: 2004; fill: #ccc; cursor: pointer;
}
#desc-div > svg path		{ fill: #ccc; }	
#desc-div > svg:hover,
#desc-div > svg:hover path	{ fill: #999; }

/* Close link */
.prod-close			{ border-width: 1px 0 0px 0; border-style: dashed; border-color: #ddd; text-align: right; }
.prod-close a			{ display: block; padding: var(--padding) 0; color: #999; }
.prod-close a:hover		{ text-decoration: none; color: var(--hovercolor); }
.prod-close a > svg 		{ width: 24px; height: 24px; fill: #999; vertical-align: middle; margin: 0 10px; }
.prod-close a:hover > svg	{ fill: var(--hovercolor); }


/* Photozoom */
#zp				{ position: absolute; width: 400px; height: 400px; border: 1px solid #999; z-index: 10; }

/* Fullscreen image */
#photo-div			{ position: fixed; top: 0; left; 0; width: 100%; height: 100%; background: #fff; z-index: 2001; }
#photo-div > svg		{
	position: fixed; top: 40vh; left: 5vw;
	width: 10vw; height: 10vw; min-width: 50px; min-height: 50px; max-width: 90px; max-height: 90px;
	z-index: 2004; fill: #ccc; cursor: pointer;
}
#photo-div > svg:last-child	{ left: auto; right: 5vw; }
#photo-div > svg path		{ fill: #ccc; }	
#photo-div > img		{
	position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0;
	max-width: 100%; max-height: 100%;
	object-fit: scale-down; cursor: pointer;
}
#photo-div > svg:hover,
#photo-div > svg:hover path	{ fill: #999; }

/*--------------------------------------------
	Block 10: Reviews
--------------------------------------------*/


span.userrating			{ display: block; margin: 0 0 6px 0; }
.review p:first-child		{ display: flex; margin-bottom: 6px; padding-bottom: 8px; border-width: 0 0 1px 0; border-style: solid; border-color: #eee; }
.review p:first-child strong	{ flex-grow: 2; }
span.rdate,
span.userip			{ display: block; margin-left: 10px; text-align: right; color: #666; font-size: 0.8em; }
.review p:last-child		{ margin-top: 0; }
.userrating svg			{ fill: #fa0; width: 16px; height: 16px; margin-right: 2px; }
.userrating svg.disabled,
.userrating svg.disabled path	{ fill: #ccc; }
span.translated			{ font-size: 0.8em; margin-right: 6px; padding: 3px 6px; border-radius: 3px; background: #cf6; }

/*--------------------------------
 	Block 11: Responsive
-------------------------------*/

@media all and (max-width: 1200px) {

	#slidedivcont > div		{ width: 100%; max-width: none; }
	.slidelang a			{ width: 130px; }
	#footertext			{ flex-wrap: wrap; justify-content: flex-end; margin: 12px; }
	#footertext span		{ margin-bottom: 12px; }
	#footertext a:last-of-type	{ margin: 0; }
}

/* SMALLSCREEN_WIDTH */
@media all and (max-width: 980px) {

	header nav > ul > li		{ display: none; } /* hide main menu */
	header nav ul ul		{ width: auto; }
	#mobile-menu-icon		{ display: block; position: fixed; bottom: 37vh; right: 0; padding: 10px 10px 10px 12px; z-index: 102; }
	header form			{ flex-grow: 2; }

	#quickactions			{ display: none; } /* Hide Start and Login buttons on top */
	nav.mobile-menu	#quickactions	{ display: flex; position: fixed; bottom: 0; width: calc(100vw - 20px); height: 36px; padding: 10px; background: #fff; justify-content: flex-end; z-index: 101; }

	img, video, iframe		{ max-width: calc(100% - 12px); height: auto; margin: 0; padding: 0; }

	div.c2 > div, div.c3 > div	{ min-width: calc(100% - 40px); }
	footer				{ flex-direction: column; margin: 20px 0 0 0; padding: 16px 0; }
	footer nav			{ padding: 20px 12px; }
	footer > div:last-child		{ padding-top: 0; } /* social icons */

	#slide 				{ background-position: 0; }

	#desc-div			{ top: 0; left: 0; transform: none; max-width: none; width: 100%; height: 100%; }
	#prod-detail-desc-full		{ height: calc(100vh - var(--padding) * 2); }
}



@media all and (max-width: 640px) {

	main				{ padding: 2px; }
	header nav			{  } /* Align menu right */
	nav.mobile-menu ul ul li	{ flex: 1 1 calc(50% - 6px); }

	/* Move search box to mobile menu */
	header form			{ display: none; }
	nav.mobile-menu form		{ display: block; position: fixed; top: 70px; left: var(--padding); width: calc(100vw - 30px); max-width: 100vw; z-index: 101; }
	nav.mobile-menu input[type="text"] { width: calc(100vw - 80px); }
	nav.mobile-menu > ul		{ padding-top: 80px; }

	nav.mobile-menu:not(.loggedin) > ul		{ height: calc(100vh - 137px); }


	#slide 				{ flex-wrap: wrap; height: auto; margin: -34px -12px 20px -12px; border-radius: 0; }


	#prodlist > li 			{ width: calc(50vw - 20px); padding: 0; }
	#prodlist > li:hover,
	.prod-detail > a:hover		{ box-shadow: none; }

	.prod-detail			{ justify-content: center; }
}

@media all and (max-width: 480px) {

	nav.mobile-menu ul ul		{ flex-direction: column;  }
	nav.mobile-menu ul ul li,
	nav.mobile-menu ul ul li a	{ width: 100%; }

	a.glowbutton,
	input[type="submit"],
	input[type="button"],
	button,
	label.glowbutton		{ min-width: auto; } /* smaller buttons on mobile */
	a.glowbutton > span		{ margin: 0; }
	a.glowbutton > svg		{ display: none; }
	.slidelang a			{ width: calc(50vw - 50px); }
	img:not(.noresize),
	video, iframe			{ max-width: 100vw; margin: 0 -10px; }
	#logo img,
	nav img				{ max-width: none; margin: 0; }
	.prod-detail > a		{ width: auto; max-width: none; max-height: none; }
	.prod-detail > a > img		{ height: auto; margin: 0; border-radius: 0; }
	p.webshop_price			{ font-size: 2em; }
}

@media all and (max-width: 400px) {
	#chat_inner			{ flex-direction: column; }
}

/* Don't color SVG hover on small screens, .active is used */
@media all and (min-width: 980px) {
	nav a:hover svg,
	nav a:hover svg path		{ color: #f80; fill: #f80; text-decoration: none; }
}

/* Make products bigger on very large screens */
@media all and (min-width: 2560px) {
	#prodlist > li, #catlist > li			{ width: 300px; }
	#productlist.uniform_photos #prodlist > li > a > div:nth-of-type(1) { /* photo */
		height: 230px; /* max 230 for thumbnails */
	}
}
/*--------------------------------
 	Block 12: Print
-------------------------------*/
@media print {
	.hideprint, nav,
	#lpanel, footer,
	#wiki > div:last-child		{ display: none !important; }
	header				{ position: relative; }
	#logo				{ display: block; margin: 0; }
	#logo img			{ width: 200px; content:url(/img/easywebshop.svg); margin-left: -8px; } /* 200x71px */
	main				{ display: block;  min-height: 0; margin: 0; padding: 0; }
	#rpanel				{ margin: 0 !important; padding: 0 !important; }
	#wiki				{ display: block; }
	#showprint 			{ display: block; }
	img				{ max-width: 100%; }
}