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

/* =============================================
   VARIABLES — Elegant Pastel Palette
   ============================================= */
html {
	--color1: #f9f7f5;       /* Warm off-white background */
	--color2: #ffffff;       /* Pure white for header 2 */
	--color3: #2d2d2d;       /* Near-black text */
	--color4: #f0ebe5;       /* Warm hover tint */

	--accent:        #b08ecf; /* Soft lavender accent */
	--accent-dark:   #9370b8; /* Deeper lavender for hover */
	--accent-light:  #ede4f6; /* Very light lavender tint */

	--neutral-100:   #faf9f8;
	--neutral-200:   #f2eeeb;
	--neutral-300:   #e0d8d0;
	--neutral-400:   #b8afa6;
	--neutral-600:   #6b6460;
	--neutral-800:   #2d2d2d;

	--border-radius: 12px;
	--border-radius-sm: 8px;
	--border-radius-pill: 999px;

	--shadow-xs: 0 1px 3px rgba(0,0,0,.06);
	--shadow-sm: 0 2px 8px rgba(0,0,0,.07);
	--shadow-md: 0 4px 16px rgba(0,0,0,.09);

	--transition: 0.25s ease;
}

/* =============================================
   BASE
   ============================================= */
body {
	margin: 0;
	padding: 0;
	font-family: 'Segoe UI', Inter, 'Helvetica Neue', Arial, sans-serif;
	background: var(--neutral-100);
	color: var(--neutral-800);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* =============================================
   HEADER CONTAINERS
   ============================================= */
#cont1 {
	background: var(--neutral-800);
}

#cont2 {
	background: var(--color2);
	border-bottom: 1px solid var(--neutral-200);
	box-shadow: var(--shadow-xs);
}

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

#header2 {
	height: 80px;
}

/* =============================================
   HEADER 1 — Language bar & top nav
   ============================================= */
#header1 {
	justify-content: flex-end;
}

#lang {
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.03em;
}

#lang a {
	display: block;
	line-height: 44px;
	padding: 0 14px;
	color: var(--neutral-300);
	text-decoration: none;
	border-radius: var(--border-radius-sm);
	transition: background var(--transition), color var(--transition);
}

#lang a:hover {
	background: rgba(255,255,255,0.08);
	color: #ffffff;
}

/* Main navigation */
nav {
	max-height: auto;
	transition: max-height 0.4s ease;
}

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: 44px;
	padding: 0 14px;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.03em;
	outline: none;
	color: var(--neutral-300);
	border-radius: var(--border-radius-sm);
	transition: background var(--transition), color var(--transition);
}

nav a:hover {
	background: rgba(255,255,255,0.08);
	color: #ffffff;
}

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

#mnav a {
	outline: none;
}

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

#logo {
	margin: 0 24px 0 0;
	flex-shrink: 0;
}

#logo img {
	display: block;
	max-height: 48px;
	width: auto;
}

/* Category button */
#catbutton {
	max-height: auto;
	transition: max-height 0.4s ease;
	font-size: 0.95rem;
}

#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 18px;
	text-decoration: none;
	min-width: 160px;
	font-weight: 700;
	letter-spacing: 0.02em;
	outline: none;
	color: var(--neutral-800);
	border-radius: var(--border-radius-sm);
	transition: background var(--transition), color var(--transition);
}

#catbutton a:hover {
	background: var(--accent-light);
	color: var(--accent-dark);
}

#catbutton svg {
	width: 18px;
	height: 18px;
	margin-left: 6px;
	vertical-align: middle;
}

#catbutton > ul ul {
	font-size: 0.88em;
}

/* 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: #ffffff;
	border-radius: var(--border-radius);
	box-shadow: var(--shadow-md);
	border: 1px solid var(--neutral-200);
	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;
	color: var(--neutral-800);
	border-radius: 0;
	font-weight: 500;
}

#catbutton > ul ul > li a:hover,
nav > ul ul a:hover {
	background: var(--accent-light);
	color: var(--accent-dark);
}

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(--border-radius-pill);
	margin: 0;
	background: var(--neutral-200);
	transition: background var(--transition), box-shadow var(--transition);
}

#searchbox:focus-within {
	background: var(--neutral-200);
	box-shadow: 0 0 0 2px var(--accent);
}

#searchbox input {
	width: 220px;
	border: none;
	margin: 0;
	border-radius: var(--border-radius-pill);
	line-height: 28px;
	color: var(--neutral-800);
	background: transparent;
	font-size: 0.9rem;
}

#searchbox input::placeholder {
	color: var(--neutral-400);
}

#searchbox svg {
	width: 20px;
	height: 20px;
	vertical-align: middle;
	margin: 8px 10px;
}

#searchbox svg,
#searchbox svg path {
	fill: var(--neutral-600);
}

#searchbox:hover svg,
#searchbox:hover svg path,
#searchbox:focus-within svg,
#searchbox:focus-within svg path {
	fill: var(--accent-dark);
	cursor: pointer;
}

/* Cart & lang spacing */
#cart,
#lang {
	margin-left: 8px;
}

#cart {
	flex-grow: 2;
	text-align: right;
}

#cart a {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 10px;
	border-radius: var(--border-radius-pill);
	transition: background var(--transition);
}

#cart a:hover {
	background: var(--accent-light);
}

#cart span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	color: #ffffff;
	background: var(--accent);
	font-size: 0.75rem;
	font-weight: 700;
	border-radius: var(--border-radius-pill);
	letter-spacing: 0.02em;
	transition: background var(--transition), transform var(--transition);
}

#cart a:hover span {
	background: var(--accent-dark);
	transform: scale(1.1);
}

/* Icon hover states */
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: var(--accent);
}

/* =============================================
   SVG defaults (override global for light pages)
   ============================================= */
svg,
svg path {
	fill: var(--neutral-600);
	transition: fill var(--transition);
}

/* =============================================
   MAIN CONTENT AREA
   ============================================= */
#cont4 {
	max-width: 1180px;
	margin: 0 auto;
}

main {
	min-height: 60vh;
	padding: 32px 24px;
}

#asidecontent {
	padding: 24px;
	width: 200px;
	float: right;
}

/* Links */
main a {
	color: var(--accent-dark);
	text-decoration: none;
	transition: color var(--transition);
}

main a:hover {
	color: var(--accent);
	text-decoration: underline;
}

/* Breadcrumb */
.webshop_breadcrumb {
	color: var(--neutral-400);
	font-size: 0.88rem;
}

.webshop_breadcrumb a {
	color: var(--neutral-400);
	text-decoration: none;
	transition: color var(--transition);
}

.webshop_breadcrumb a:hover {
	color: var(--accent-dark);
}

/* =============================================
   BUTTONS — Rounded, soft, playful
   ============================================= */
.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(--border-radius-pill);
	font-family: 'Segoe UI', Inter, 'Helvetica Neue', Arial, sans-serif;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.03em;
	white-space: nowrap;
	text-decoration: none;
	text-align: center;
	color: #ffffff;
	background: var(--accent);
	box-shadow: 0 2px 12px rgba(176, 142, 207, 0.25);
	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: var(--accent-dark);
	box-shadow: 0 4px 18px rgba(147, 112, 184, 0.35);
	transform: translateY(-1px);
	text-decoration: none;
}

.webshop_stylebutton:active,
input[type=submit]:active,
input[type=button]:active {
	transform: translateY(0);
	box-shadow: var(--shadow-xs);
}

input[type=submit]:disabled,
input[type=button]:disabled {
	background: var(--neutral-300);
	color: var(--neutral-400);
	cursor: default;
	box-shadow: none;
	transform: none;
}

/* =============================================
   FORMS — Clean & spacious
   ============================================= */
input,
select,
textarea {
	border: 1.5px solid var(--neutral-300);
	border-radius: var(--border-radius-sm);
	margin: 0 0 10px 0;
	padding: 10px 14px;
	font-size: 0.95rem;
	font-family: inherit;
	background: #ffffff;
	transition: border-color var(--transition), box-shadow var(--transition);
}

input:focus,
textarea:focus {
	border-color: var(--accent);
	background: #ffffff;
	box-shadow: 0 0 0 3px rgba(176, 142, 207, 0.18);
	outline: none;
}

/* =============================================
   PRODUCT CARDS — Rounded, airy
   ============================================= */
#prodlist > li,
#catlist > li {
	border-radius: var(--border-radius);
	overflow: hidden;
	transition: transform var(--transition), box-shadow var(--transition);
	background: #ffffff;
	box-shadow: var(--shadow-xs);
}

#prodlist > li:hover,
#catlist > li:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

#prodlist > li > a,
#catlist > li > a {
	color: var(--neutral-800);
}

/* =============================================
   SLIDEOUT / OVERLAY PANELS
   ============================================= */
#slidedivcont > div,
#photo-div {
	background: #ffffff;
	color: var(--neutral-800);
	border-radius: var(--border-radius) var(--border-radius) 0 0;
}

#slidedivcont a {
	color: var(--neutral-800);
}

.slidelang a:hover {
	background: var(--accent-light);
	color: var(--accent-dark);
}

/* Dividers */
hr,
#orderlist th,
#orderlist tr.separator td {
	border-color: var(--neutral-200);
}

/* =============================================
   PANEL HOVER ACCENT
   ============================================= */
.panel:hover span {
	color: var(--accent);
}

.panel:hover svg,
.panel:hover svg path {
	fill: var(--accent);
}

/* =============================================
   NUMNAV — Pagination
   ============================================= */
.numnav a {
	border: 1.5px solid var(--neutral-200);
	border-radius: var(--border-radius-sm);
	transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.numnav a:hover {
	background: var(--accent-light);
	border-color: var(--accent);
	color: var(--accent-dark);
	text-decoration: none;
}

/* =============================================
   FOOTER — Redesigned: organized & visually appealing
   ============================================= */

/* Outer footer wrapper */
#footer1 {
	background: var(--neutral-800);
	color: var(--neutral-400);
	font-size: 0.92rem;
	padding: 0;
	margin-top: 60px;
}

/* Decorative accent bar at the very top of the footer */
#footer1::before {
	content: '';
	display: block;
	height: 3px;
	background: linear-gradient(90deg, var(--accent-dark), var(--accent), var(--accent-light));
}

/* Inner footer content wrapper — use a grid for four tidy columns */
#footer2 {
	max-width: 1180px;
	margin: 0 auto;
	padding: 56px 24px 40px;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	grid-template-areas:
		"address footnav cat footercontent";
	gap: 40px 48px;
	align-items: start;
}

/* Generic footer links */
footer a {
	color: var(--neutral-400);
	text-decoration: none;
	transition: color var(--transition);
}

footer a:hover {
	color: #ffffff;
}

/* ---- Footer navigation column ---- */
#footnav {
	grid-area: footnav;
	margin-bottom: 0;
}

/* Small column headings — reuse ::before pseudo-element */
#footnav::before {
	content: 'Navigation';
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 16px;
}

#footnav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#footnav li {
	display: block;
	width: auto;
}

#footnav a {
	display: block;
	padding: 5px 0;
	font-weight: 500;
	border-radius: 0;
	line-height: 1.5;
	transition: color var(--transition), padding-left var(--transition);
}

#footnav a:hover {
	color: #ffffff;
	padding-left: 6px; /* subtle slide-in on hover */
	background: transparent;
}

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

/* ---- Categories column ---- */
footer #cat {
	grid-area: cat;
	margin-bottom: 0;
}

footer #cat::before {
	content: 'Categories';
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 16px;
}

footer #cat ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

footer #cat li {
	display: block;
	width: auto;
}

footer #cat a {
	display: block;
	padding: 5px 0;
	font-weight: 500;
	border-radius: 0;
	line-height: 1.5;
	transition: color var(--transition), padding-left var(--transition);
}

footer #cat a:hover {
	color: #ffffff;
	padding-left: 6px;
	background: transparent;
}

/* Hide nested category sub-lists */
footer #cat ul ul {
	display: none;
}

/* ---- Address / contact column ---- */
footer address {
	grid-area: address;
	display: block; /* override inline-block */
	width: auto;
	float: none;
	font-style: normal;
	margin: 0;
}

/* Address column heading */
footer address::before {
	content: 'Contact';
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 16px;
}

footer address p {
	margin: 0 0 10px;
	line-height: 1.7;
	color: var(--neutral-400);
}

footer address strong {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	color: #ffffff;
	margin-bottom: 4px;
}

footer address a {
	color: var(--neutral-400);
	text-decoration: none;
}

footer address a:hover {
	color: #ffffff;
}

footer address svg {
	width: 14px;
	height: 14px;
	margin-right: 6px;
	vertical-align: middle;
}

footer address svg path {
	fill: var(--accent);
}

/* ---- CMS footer content column ---- */
#footercontent {
	grid-area: footercontent;
	display: block;
	vertical-align: top;
}

/* Add a matching column heading if CMS content is present */
#footercontent::before {
	content: 'More';
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 16px;
}

/* ---- Terms bar at the very bottom ---- */
#terms {
	clear: both;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 8px 20px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 16px 24px;
	font-size: 0.82rem;
	color: var(--neutral-600);
	border-top: 1px solid rgba(255,255,255,0.07);
}

#terms span {
	margin-right: auto; /* push links to the right */
	color: var(--neutral-600);
}

#terms a {
	color: var(--neutral-600);
	margin: 0;
	transition: color var(--transition);
}

#terms a:hover {
	color: #ffffff;
}

/* =============================================
   RESPONSIVE — Mobile
   ============================================= */
@media all and (max-width: 1400px) {
	#cont5 { padding-bottom: 120px; }
}

@media all and (max-width: 1000px) {
	#cont5 { padding-bottom: 40px; }

	/* Footer: collapse to two columns on mid-size screens */
	#footer2 {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"address footnav"
			"cat     footercontent";
		gap: 32px 40px;
	}
}

@media all and (max-width: 600px) {
	/* Mobile nav */
	nav {
		position: absolute;
		z-index: 10;
		left: 0;
		max-height: 0;
		width: 100%;
		overflow: hidden;
		background: var(--neutral-800);
		border-radius: 0 0 var(--border-radius) var(--border-radius);
		box-shadow: var(--shadow-md);
	}

	nav ul,
	nav ul li {
		display: block;
	}

	nav > ul > li > a {
		padding: 0 20px;
		line-height: 50px;
		border-radius: 0;
	}

	nav > ul li:hover > ul {
		max-height: 0;
	}

	nav > ul ul {
		position: static;
		opacity: 1;
		border-radius: 0;
		box-shadow: none;
		border: none;
		background: rgba(255,255,255,0.05);
	}

	nav > ul ul a {
		padding-left: 36px;
		color: var(--neutral-300);
	}

	#catbutton > ul ul {
		border-radius: 0;
	}

	#mnav {
		display: inline-block;
		margin: 2px 2px 0 0;
	}

	#header2 {
		width: 100%;
		padding: 0 12px;
		height: 64px;
	}

	#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: 12px;
	}

	#cont5 {
		padding-bottom: 0;
	}

	/* Footer: single column on mobile */
	#footer2 {
		grid-template-columns: 1fr;
		grid-template-areas:
			"address"
			"footnav"
			"cat"
			"footercontent";
		padding: 32px 16px 24px;
		gap: 28px;
	}

	footer address {
		float: none;
		width: auto;
	}

	#terms {
		justify-content: center;
		text-align: center;
		padding: 16px;
	}

	#terms span {
		margin-right: 0;
		width: 100%;
		text-align: center;
	}
}

/* =============================================
   WIDE SCREEN — Hide redundant elements
   ============================================= */
@media all and (min-width: 600px) {
	div#search,
	nav a[href$="/webshop"] {
		display: none;
	}
}