@import "/scripts/shop.css"; /* Import general CSS */

/* Variables */
html {
	--color1: #444;		/* Website background */
	--color2: #333;		/* Menu background */
	--color3: #eee;		/* Text color */
	--color4: #555;		/* Hover color */
}

/* Blocks template */
body			{ margin: 0; padding: 0; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; }

/* The header exists of 3 main containers with inside each of them a header container of 1180px wide */
#cont1			{ background: var(--color1); }
#cont2			{ background: var(--color2); }
#header1,
#header2,
#header3		{ display: flex; max-width: 1180px;  margin: 0 auto; padding: 0 6px; align-items: center; }
#header2		{ height: 110px; }

/* Header 1: Language, Main navigation, Mobile navigation */
#header1		{ justify-content: flex-end; }
#lang			{ font-weight: bold; }
#lang a			{ display: block; line-height: 50px; padding: 0 15px; color: var(--color3); text-decoration: none; transition: background 0.3s; }

/* Main navigation */
nav			{ max-height: auto; transition: max-height 1s;  }
nav ul, nav li		{ list-style: none; margin: 0; padding: 0;  }
nav > ul		{ max-width: 1200px; margin: 0; display: inline-block; margin-right: -15px }
nav li			{ display: inline-block; }
nav a {
	display: block; line-height: 50px; padding: 0 15px; text-decoration: none;
	font-weight: bold; outline: none; color: var(--color3); transition: background 0.3s;
}

/* Mobile navigation */
#mnav			{ display: none; } /* Hide mobile menu hamburger on wide screens */
#mnav a			{ outline: none; }

/* Header 2: Logo, Webshop, Searchbox, Cart */
#header2		{ display: flex; justify-content: space-between; align-items: center; }
#catbutton,
#searchbox		{ margin-right: 40px; }
#logo			{ margin: 3px 40px 3px 0; }

/* Webshop button */
#catbutton		{ max-height: auto; transition: max-height 1s; font-size: 1.4em; }
#catbutton ul,
#catbutton li		{ list-style: none; margin: 0; padding: 0; }
#catbutton > ul		{ max-width: 1200px; margin: 0; display: inline-block; }
#catbutton li		{ display: inline-block; }
#catbutton a {
	display: block; line-height: 40px; padding: 0 6px; text-decoration: none; min-width: 180px;
	font-weight: bold; outline: none; color: var(--color3); transition: background 0.3s;
}
#catbutton svg		{ width: 20px; height: 20px; margin-left: 8px; }
#catbutton > ul ul	{ font-size: 0.7em; }

/* Sub navigation */
nav > ul ul,
#catbutton > ul ul {
	position: absolute; display: block; min-width: 156px; z-index: 1;
	max-height: 0; opacity: 0; overflow-y: auto; z-index: 2; background: var(--color2); border-radius: 4px;
	transition: max-height 0.3s linear 0s, opacity 0.2s linear 0s; overflow: hidden;
}
nav > ul ul > li,
#catbutton > ul ul > li	{ display: block !important; text-align: left; }
#catbutton > ul ul > li a,
nav > ul ul a		{ padding: 0 12px; }
nav > ul li:hover > ul,
#cat > ul li:hover > ul,
#catbutton > ul li:hover > ul	{ opacity: 1; max-height: 100%; }

/* Search box */
#searchbox		{ border-radius: 3px; margin: 0; background: var(--color1); }
#searchbox input	{ width: 260px; border: none; margin: 0; border-radius: 3px; line-height: 28px; color: #fff; background: var(--color1); }
#searchbox svg		{ width: 24px; height: 24px; vertical-align: top; margin: 6px; }
#searchbox svg,
#searchbox svg path	{ fill: #ddd; }
#searchbox svg:hover,
#searchbox svg:hover path { cursor: pointer; fill: #fff; }

#cart, #lang		{ margin-left: 12px; }
#cart			{ flex-grow: 2; text-align: right; }
#cart a			{ text-decoration: none; }
#cart span {
	display: inline-block; margin: -3px 0 0 4px; vertical-align: top; padding: 5px 3px 2px 3px;
	color: #fff; background: #f90;
	font-size: 0.8em; font-weight: bold; border-radius: 3px;
}

/* Navigation hover */
nav a:hover,
#lang a:hover		{ background: var(--color4); }
#catbutton ul ul a:hover{ background: var(--color4); }
nav a:hover svg,
nav a:hover svg path,
#search:hover svg,
#search:hover svg path,
#cart:hover svg,
#cart:hover svg path,
#lang a:hover svg,	
#lang a:hover svg path,
#mnav a:hover svg,	
#mnav a:hover svg path		{ fill: #fff; }

/* Header 3 */
/* Slideshow */

/* Main container */
#cont4			{ max-width: 1180px; margin: 0 auto;}
main			{ min-height: 60vh; padding: 20px; }
#asidecontent		{ padding: 20px; }
#asidecontent		{ width: 200px; float: right; }

/* Objects */
svg, svg path		{ fill: var(--color3); transition: 0.3s fill; }
main a			{ color: #06c; }
.webshop_breadcrumb	{ color: #444; }
.webshop_breadcrumb a	{ color: #444; text-decoration: none; }
.webshop_breadcrumb a:hover	{ color: #958f89; }


/* Forms */
.webshop_stylebutton, input[type=submit], input[type=button] {
	display: inline-block;  margin: 0 0 10px 0; padding: 10px 8px;
	white-space: nowrap; text-decoration: none; -webkit-appearance: none; border: 0;
	text-align: center; font-family: inherit; font-size: inherit; cursor: pointer;
	color: #fff; background: #C13100; border-radius: 0; outline: none;
	transition: 0.3s background;
}

.webshop_stylebutton:hover, input[type=submit]:hover, input[type=button]:hover {
	background: #c60;
}

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

/* Dark objects */
#slidedivcont > div,
#photo-div		{ background: var(--color2); color: var(--color3); }

#slidedivcont a		{ color: var(--color3); }
.slidelang a:hover	{ background: var(--color4); }
hr,
#orderlist th,
#orderlist tr.separator td { border-color: #666; }

/* Footer */
#footer1		{ color: var(--color3); background: var(--color2); padding-top: 40px; font-size: 0.95em; }
footer a		{ color: var(--color3); }
footer a:hover		{ color: #fff; }
#footer2		{ max-width: 1180px; margin: 0 auto; }

/* Footer navigation */
footer #cat,
#footnav		{ margin-bottom: 40px; }
footer #cat ul,
#footnav ul		{ list-style: none; margin: 0; padding: 0; }
footer #cat li,
#footnav li		{ display: inline-block; width: 190px; vertical-align: top; }
footer #cat a,
#footnav a		{ display: block; line-height: 40px; padding: 0 12px; text-decoration: none; transition: background 0.3s; border-radius: 4px; font-weight: bold; }
footer #cat a:hover,
#footnav a:hover	{ background: var(--color4); }
#footnav svg,		
footer #cat ul ul	{ display: none; } /* hide sub navigation in footer */

/* Footer address */
footer address		{ width: 390px; display: inline-block; font-style: normal; margin-left: 12px; }
address p		{ margin-top: 0; }
address a		{ text-decoration: none; }
address svg		{ width: 14px; height: 14px; margin-right: 6px; fill: var(--color2); }
address svg path	{ fill: var(--color3); }
#footercontent		{ display: inline-block; vertical-align: top; }

/* Footer terms */
#terms			{ clear: both; padding: 10px; font-size: 0.9em; color: #999; text-align: right; }
#terms span		{ margin-right: 16px; }
#terms a		{ color: #999; margin-right: 16px; transition: color 0.3s; }
#terms a:hover		{ color: #ccc; }

/* Responsive */
@media all and (max-width: 600px) {
	nav			{ position: absolute; z-index: 2; left: 0; max-height: 0; width: 100%; overflow: hidden; background: var(--color2); }
	nav ul, nav ul li	{ display: block; }
	nav > ul > li > a	{ padding: 0 14px; }
	nav > ul li:hover > ul	{ max-height: 0; }
	nav > ul ul		{ position: static; opacity: 1; border-radius: 0; }
	nav > ul ul a		{ padding-left: 30px; }
	#catbutton > ul ul { border-radius: 0;  }
	#mnav			{ display: inline-block; margin: 2px 2px 0 0; }
	#header2		{ width: 100%; padding: 0 8px; }
	#logo			{ flex-grow: 1; }
	#cart			{ flex-grow: 0; }

	#catbutton, #searchbox	{ display: none; }

	#cont2			{ display: flex; flex-flow: row wrap-reverse; }
	#asidecontent		{ align-self: flex-end; width: auto; float: none; }
	#mnav,
	main,
	#asidecontent,
	#footer1		{ padding: 8px; }
	footer address		{ float: none; width: auto; }
}

/* Wide screen */
@media all and (min-width: 600px) {
	/* Hide search icon but keep it in the search box
	   Hide the word webshop in main navigation
	*/
	div#search,
	nav a[href$="/webshop"] 	{ display: none; }
}