/* -- START /shops/fashion/design/1008/design.css (base template CSS) -- */
@import "/scripts/shop.css"; /* Import general CSS */

/* =============================================
   VARIABLES
   ============================================= */
html {
	--color1: #1a1a1a;        /* Top bar / primary dark background */
	--color2: #242424;        /* Main header / footer background */
	--color3: #e8e8e8;        /* Primary text on dark */
	--color4: #2e2e2e;        /* Hover background */

	--accent:  #7ec94a;       /* Pastel green accent */
	--accent2: #a8d97f;       /* Lighter green for subtle highlights */
	--accent3: #f0f7e8;       /* Very light green tint for light surfaces */

	--neutral: #f7f7f5;       /* Page background - warm off-white */
	--neutral2: #efefec;      /* Card / panel background */
	--neutral3: #d8d8d4;      /* Borders, dividers */

	--text-dark: #1e1e1e;     /* Main body text */
	--text-mid:  #555550;     /* Secondary text */
	--text-light: #8a8a84;    /* Muted text */

	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--radius-xl: 28px;

	--shadow-soft: 0 2px 12px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
	--shadow-hover: 0 6px 24px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);

	--transition: 0.25s ease;
}

/* =============================================
   BASE
   ============================================= */
body {
	margin: 0;
	padding: 0;
	font-family: 'Droid Sans', 'Inter', 'Helvetica Neue', Arial, sans-serif;
	background: var(--neutral);
	color: var(--text-dark);
	line-height: 1.6;
}

/* Smooth transitions on interactive elements globally */
a, button, input[type=submit], input[type=button] {
	transition: background var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition);
}

/* =============================================
   HEADER CONTAINERS
   ============================================= */
#cont1 { background: var(--color1); }
#cont2 { background: var(--color2); }

#header1,
#header2,
#header3 {
	display: flex;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	align-items: center;
}

#header2 { height: 100px; }

/* =============================================
   HEADER 1 %u2014 Lang   Nav   Mobile
   ============================================= */
#header1 { justify-content: flex-end; }

#lang { font-weight: 600; letter-spacing: 0.03em; }
#lang a {
	display: block;
	line-height: 46px;
	padding: 0 14px;
	color: var(--color3);
	text-decoration: none;
	border-radius: var(--radius-sm);
	font-size: 0.85rem;
	opacity: 0.85;
	transition: background var(--transition), opacity var(--transition);
}
#lang a:hover {
	background: var(--accent);
	opacity: 1;
	color: #fff;
}

/* 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: -14px;
}
nav li { display: inline-block; }
nav a {
	display: block;
	line-height: 46px;
	padding: 0 14px;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.88rem;
	letter-spacing: 0.02em;
	outline: none;
	color: var(--color3);
	border-radius: var(--radius-sm);
	transition: background var(--transition), color var(--transition);
}
nav a:hover,
#lang a:hover { background: var(--accent); color: #fff; }

/* Mobile nav hamburger */
#mnav { display: none; }
#mnav a { outline: none; }

/* =============================================
   HEADER 2 %u2014 Logo, Catbutton, Search, Cart
   ============================================= */
#header2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#logo { margin: 0 36px 0 0; flex-shrink: 0; }
#logo img {
	display: block;
	transition: opacity var(--transition);
}
#logo:hover img { opacity: 0.85; }

/* Webshop/category button */
#catbutton, #searchbox { margin-right: 32px; }
#catbutton {
	max-height: auto;
	transition: max-height 1s;
	font-size: 1rem;
}
#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: 42px;
	padding: 0 20px;
	text-decoration: none;
	min-width: 160px;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	outline: none;
	color: var(--color3);
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.10);
	border-radius: var(--radius-md);
	transition: background var(--transition), border-color var(--transition), color var(--transition);
}
#catbutton a:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}
#catbutton svg { width: 18px; height: 18px; margin-left: 6px; vertical-align: middle; }
#catbutton > ul ul { font-size: 0.9em; }

/* Sub navigation dropdowns */
nav > ul ul,
#catbutton > ul ul {
	position: absolute;
	display: block;
	min-width: 180px;
	z-index: 100;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	background: var(--color2);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: var(--radius-md);
	box-shadow: 0 8px 28px rgba(0,0,0,0.18);
	transition: max-height 0.3s ease, opacity 0.2s ease;
}
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 16px; font-size: 0.88rem; border-radius: 0; border: none; background: none; min-width: auto; }
#catbutton > ul ul > li a:hover,
nav > ul ul a:hover { background: var(--accent); color: #fff; }
nav > ul li:hover > ul,
#cat > ul li:hover > ul,
#catbutton > ul li:hover > ul { opacity: 1; max-height: 600px; }

/* Search box */
#searchbox {
	border-radius: var(--radius-md);
	margin: 0;
	background: rgba(255,255,255,0.07);
	border: 1px solid rgba(255,255,255,0.10);
	transition: border-color var(--transition), background var(--transition);
}
#searchbox:hover, #searchbox:focus-within {
	border-color: var(--accent);
	background: rgba(255,255,255,0.10);
}
#searchbox input {
	width: 240px;
	border: none;
	margin: 0;
	border-radius: var(--radius-md);
	line-height: 28px;
	color: var(--color3);
	background: transparent;
	font-family: inherit;
	font-size: 0.9rem;
}
#searchbox input::placeholder { color: rgba(232,232,232,0.45); }
#searchbox svg { width: 20px; height: 20px; vertical-align: middle; margin: 6px 8px; }
#searchbox svg, #searchbox svg path { fill: rgba(232,232,232,0.6); transition: fill var(--transition); }
#searchbox:hover svg, #searchbox:hover svg path,
#searchbox svg:hover, #searchbox svg:hover path { fill: var(--accent); cursor: pointer; }

/* Cart */
#cart, #lang { margin-left: 10px; }
#cart { flex-grow: 2; text-align: right; }
#cart a { text-decoration: none; }
#cart svg, #cart svg path { transition: fill var(--transition); }
#cart:hover svg, #cart:hover svg path { fill: var(--accent); }
#cart span {
	display: inline-block;
	margin: -3px 0 0 4px;
	vertical-align: top;
	padding: 4px 7px;
	color: #fff;
	background: var(--accent);
	font-size: 0.75rem;
	font-weight: 700;
	border-radius: 20px;
	letter-spacing: 0.01em;
	line-height: 1.4;
	transition: background var(--transition), transform var(--transition);
}
#cart:hover span { background: var(--accent2); transform: scale(1.1); }

/* Navigation hover SVG fill */
nav a:hover svg, nav a:hover svg path,
#search:hover svg, #search:hover svg path,
#mnav a:hover svg, #mnav a:hover svg path { fill: #fff; }

/* =============================================
   HEADER 3 / HEADER CONTENT
   ============================================= */
#header3 { padding: 0; }
#headercontent {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* =============================================
   SLIDESHOW
   ============================================= */
#slideshow {
	width: 100%;
	overflow: hidden;
}

/* =============================================
   MAIN CONTENT AREA
   ============================================= */
#cont5 { background: var(--neutral); }
#cont4 {
	max-width: 1200px;
	margin: 0 auto;
	padding: 8px 0 40px 0;
}

main {
	min-height: 60vh;
	padding: 32px 24px;
	color: var(--text-dark);
}

#asidecontent {
	width: 220px;
	float: right;
	padding: 32px 16px 20px 20px;
	color: var(--text-mid);
}

/* =============================================
   GENERAL OBJECTS (override shop.css)
   ============================================= */
svg, svg path { fill: var(--color3); transition: fill var(--transition); }

/* Links in main content */
main a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--transition), color var(--transition); }
main a:hover { color: #5aaa2e; border-bottom-color: var(--accent); }

/* Headings */
h1 { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-dark); }
h2 { font-size: 1.3rem; font-weight: 600; color: var(--text-dark); }

/* Breadcrumb */
.webshop_breadcrumb { color: var(--text-light); font-size: 0.88rem; }
.webshop_breadcrumb a { color: var(--text-light); text-decoration: none; transition: color var(--transition); }
.webshop_breadcrumb a:hover { color: var(--accent); }

/* =============================================
   BUTTONS
   ============================================= */
.webshop_stylebutton,
input[type=submit],
input[type=button] {
	display: inline-block;
	min-width: 160px;
	margin: 0 0 10px 0;
	padding: 0 24px;
	min-height: 46px;
	cursor: pointer;
	line-height: 46px;
	border: 0;
	border-radius: var(--radius-lg);
	font-family: inherit;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	white-space: nowrap;
	text-decoration: none;
	text-align: center;
	color: #fff;
	background: var(--text-dark);
	background: linear-gradient(135deg, #1e1e1e, #3a3a3a);
	box-shadow: 0 2px 8px rgba(0,0,0,0.12);
	transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.webshop_stylebutton:hover,
input[type=submit]:hover,
input[type=button]:hover {
	background: linear-gradient(135deg, #2e2e2e, #4a4a4a);
	box-shadow: var(--shadow-hover);
	transform: translateY(-1px);
	text-decoration: none;
}
.webshop_stylebutton:active,
input[type=submit]:active,
input[type=button]:active {
	transform: translateY(0);
	box-shadow: var(--shadow-soft);
}
input[type=submit]:disabled,
input[type=button]:disabled {
	background: #ccc;
	cursor: default;
	transform: none;
	box-shadow: none;
}

/* =============================================
   FORMS / INPUTS
   ============================================= */
input, select, textarea {
	border: 1px solid var(--neutral3);
	border-radius: var(--radius-sm);
	margin: 0 0 10px 0;
	padding: 10px 14px;
	font-size: 0.95rem;
	font-family: inherit;
	background: #fff;
	color: var(--text-dark);
	transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus, textarea:focus, select:focus {
	border-color: var(--accent);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(126,201,74,0.12);
	outline: none;
}

/* =============================================
   PRODUCT LIST %u2014 Cards
   ============================================= */
#prodlist > li > a,
#catlist > li > a {
	background: #fff;
	border-radius: var(--radius-lg);
	border: 1px solid var(--neutral3);
	box-shadow: var(--shadow-soft);
	transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
	overflow: hidden;
}
#prodlist > li > a:hover,
#catlist > li > a:hover {
	box-shadow: var(--shadow-hover);
	transform: translateY(-3px);
	border-color: var(--accent2);
	text-decoration: none;
}

/* Product / category photos */
#productlist.uniform_photos #prodlist > li > a > div:nth-of-type(1),
#catlist.uniform_photos > li > a > div:nth-of-type(1) {
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	overflow: hidden;
}
#prodlist > li > a > div > img,
#catlist > li > a > div > img {
	border-radius: var(--radius-md);
	transition: transform 0.35s ease, opacity 0.25s ease;
}
#prodlist > li > a:hover > div > img,
#catlist > li > a:hover > div > img {
	transform: scale(1.04);
	opacity: 0.92;
}

/* =============================================
   PRODUCT DETAIL
   ============================================= */
.webshop_detail { gap: 28px; }
.webshop_detail_left { border-radius: var(--radius-lg); overflow: hidden; }

/* Prices */
.webshop_price { color: var(--text-dark); }
p.webshop_price { font-size: 1.4rem; }
.webshop_old_price { color: var(--text-light); }
.webshop_status_ok { background: var(--accent3); color: #3a7a14; border-radius: var(--radius-sm); }

/* =============================================
   PANEL (filters, sort, view)
   ============================================= */
.panel > span { color: var(--text-mid); font-weight: 600; }
.panel:hover span { color: var(--accent); }
.panel:hover svg, .panel:hover svg path { fill: var(--accent); }

/* =============================================
   NUMERIC NAVIGATION
   ============================================= */
.numnav a {
	border: 1px solid var(--neutral3);
	border-radius: var(--radius-sm);
	color: var(--text-mid);
	background: #fff;
	transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.numnav a:hover {
	background: var(--accent3);
	border-color: var(--accent);
	color: var(--text-dark);
	transform: translateY(-1px);
	text-decoration: none;
}

/* =============================================
   SLIDEOUT (language, cart slide panel)
   ============================================= */
#slidedivcont > div {
	background: var(--color2);
	color: var(--color3);
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
#slidedivcont a { color: var(--color3); }
.slidelang a { border-radius: var(--radius-sm); color: var(--color3); }
.slidelang a:hover { background: var(--accent); color: #fff; }

/* =============================================
   DARK SHARED ELEMENTS
   ============================================= */
#photo-div { background: var(--color2); color: var(--color3); }
hr { border-color: var(--neutral3); }
#orderlist th, #orderlist tr.separator td { border-color: rgba(255,255,255,0.12); }

/* =============================================
   FOOTER
   ============================================= */
#footer1 {
	color: var(--color3);
	background: var(--color2);
	padding-top: 48px;
	font-size: 0.93rem;
	border-top: 2px solid var(--accent);
}
#footer2 { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

footer a { color: rgba(232,232,232,0.8); transition: color var(--transition); }
footer a:hover { color: var(--accent); }

/* 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: 185px; vertical-align: top; }
footer #cat a,
#footnav a {
	display: block;
	line-height: 38px;
	padding: 0 10px;
	text-decoration: none;
	font-weight: 600;
	border-radius: var(--radius-sm);
	transition: background var(--transition), color var(--transition);
}
footer #cat a:hover,
#footnav a:hover { background: var(--accent); color: #fff; }

/* Hide sub-nav and icons in footer */
#footnav svg,
footer #cat ul ul { display: none; }

/* Footer address */
footer address {
	width: 360px;
	display: inline-block;
	font-style: normal;
	margin-left: 10px;
	color: rgba(232,232,232,0.75);
	line-height: 1.7;
}
address p { margin-top: 0; }
address a { text-decoration: none; color: rgba(232,232,232,0.75); }
address a:hover { color: var(--accent); }
address svg { width: 14px; height: 14px; margin-right: 6px; }
address svg path { fill: var(--color3); }

#footercontent { display: inline-block; vertical-align: top; }

/* Footer terms */
#terms {
	clear: both;
	padding: 14px 24px;
	font-size: 0.84rem;
	color: rgba(255,255,255,0.35);
	text-align: right;
	border-top: 1px solid rgba(255,255,255,0.06);
	margin-top: 20px;
}
#terms span { margin-right: 16px; }
#terms a { color: rgba(255,255,255,0.35); margin-right: 16px; transition: color var(--transition); }
#terms a:hover { color: rgba(255,255,255,0.7); }

/* =============================================
   UP ARROW
   ============================================= */
#uparrow a {
	background: var(--color2);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 50%;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--transition), border-color var(--transition);
}
#uparrow a:hover {
	background: var(--accent);
	border-color: var(--accent);
}

/* =============================================
   SEARCH FORM (page search)
   ============================================= */
#search_form input[type="search"] {
	border-radius: var(--radius-sm);
	border-width: 1px;
	border-color: var(--neutral3);
	background: #fff;
	color: var(--text-dark);
	transition: border-color var(--transition), box-shadow var(--transition);
}
#search_form input[type="search"]:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(126,201,74,0.12);
}

/* =============================================
   BREADCRUMB OVERRIDE
   ============================================= */
.webshop_breadcrumb { padding: 8px 0 4px 0; }

/* =============================================
   ASIDE / SIDE PANEL
   ============================================= */
#asidecontent {
	color: var(--text-mid);
	font-size: 0.93rem;
}

/* =============================================
   COLOR SWATCHES (product detail)
   ============================================= */
#detail_colors > a.selected { border-color: var(--accent); }
#detail_colors > a::after { background-color: var(--text-dark); }
#detail_colors > a::before { border-top-color: var(--text-dark); }

/* =============================================
   RESPONSIVE
   ============================================= */
@media all and (max-width: 600px) {
	/* Give #cont1 a stacking context so the nav dropdown appears
	   above #cont2 and the green border-bottom does not block clicks */
	#cont1 {
		position: relative;
		z-index: 50;
	}

	nav {
		position: absolute; z-index: 20;
		left: 0; top: 50px; width: 100%; max-height: 0;
		overflow: hidden;
		background: var(--color2);
	
	}

	nav ul, nav ul li { display: block; }
	nav > ul > li > a { padding: 0 18px; border-radius: 0; }
	nav > ul li:hover > ul { max-height: 0; }
	nav > ul ul { position: static; opacity: 1; border-radius: 0; border: none; box-shadow: none; }
	nav > ul ul a { padding-left: 32px; }
	#catbutton > ul ul { border-radius: 0; }

	#mnav { display: inline-block; margin: 2px 4px 0 0; }
	#header1, #header2 { padding: 0 12px; }
	#header2 { width: 100%; box-sizing: border-box; }
	#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: 10px; }
	footer address { float: none; width: auto; }

	#footer2 { padding: 0 12px; }
	#terms { padding: 10px 12px; text-align: center; }
}

/* Wide screen %u2014 hide redundant icons */
@media all and (min-width: 600px) {
	div#search,
	nav a[href$="/webshop"] { display: none; }
}

/* Responsive padding for cont5 */
@media all and (max-width: 1400px) { #cont5 { padding-bottom: 80px; } }
@media all and (max-width: 1000px) { #cont5 { padding-bottom: 20px; } }
@media all and (max-width: 600px)  { #cont5 { padding-bottom: 0; } }

/* =============================================
   FONT
   ============================================= */
@font-face {
	font-family: 'Droid Sans';
	src: local('Droid Sans'),
		url('/scripts/font/Droid Sans.woff2') format('woff2'),
		url('/scripts/font/Droid Sans.woff') format('woff');
}