@import "/scripts/shop.css"; /* Import general CSS */
/* ============================================================
   ELEGANT, PLAYFUL, COLORFUL & MODERN REDESIGN
   - Clean sans-serif typography
   - Soft pastel accents   neutral base
   - Rounded corners, generous whitespace
   - Subtle hover animations
   - Minimal, uncluttered layout
   - Modern footer reorganization
   ============================================================ */

/* Google Fonts: Inter for clean modern sans-serif */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* %u2500%u2500 DESIGN TOKENS %u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500 */
html {
	--color1:        #fafaf8;        /* Warm off-white background */
	--color2:        #f0ebe4;        /* Soft warm nav/card background */
	--color3:        #3a3530;        /* Rich dark text */
	--color4:        #ff6b9d;        /* Playful pink accent */

	/* Extended palette */
	--accent-pink:   #ff6b9d;
	--accent-mint:   #4ecdc4;
	--accent-yellow: #ffe066;
	--accent-peach:  #ffb347;
	--accent-violet: #c084fc;
	--accent-sky:    #60c7f0;

	--surface:       #ffffff;
	--surface-2:     #f7f4f0;
	--border-soft:   rgba(0,0,0,0.07);

	--text-main:     #3a3530;
	--text-muted:    #8a8480;
	--text-light:    #b8b4b0;

	--radius-sm:     8px;
	--radius-md:     14px;
	--radius-lg:     22px;
	--radius-pill:   999px;

	--shadow-soft:   0 2px 16px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
	--shadow-hover:  0 8px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);

	--transition:    0.25s cubic-bezier(0.4, 0, 0.2, 1);

	/* Override shop.css variables */
	--bg:            #fafaf8;
	--fg:            #3a3530;
	--border-color:  #e8e4df;
	--border-radius: 14px;
	--shadow:        0 2px 16px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
	--hovercolor:    #ff6b9d;
	--hovercolor-fg: #fff;
	--menucolor:     #8a8480;
	--iconcolor:     #8a8480;
}

/* %u2500%u2500 BASE TYPOGRAPHY & BODY %u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500 */
body {
	margin: 0;
	padding: 0;
	font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
	background: var(--color1);
	color: var(--text-main);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
}

/* %u2500%u2500 GLOBAL SVG / ICONS %u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500 */
svg,
svg path {
	fill: var(--text-muted);
	transition: fill var(--transition);
}

/* %u2500%u2500 LINKS %u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500 */
main a {
	color: var(--accent-pink);
	text-decoration: none;
	transition: color var(--transition);
}

main a:hover {
	color: var(--accent-mint);
}

/* %u2500%u2500 LAYOUT CONTAINERS %u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500 */
#cont1 {
	background: var(--surface);
	border-bottom: 1px solid var(--border-soft);
	position: sticky;
	top: 0;
	z-index: 100;
}

#cont2,
#header2,
#cat {
	max-width: 1200px;
	margin: 0 auto;
}

main {
	width: 100%;
	padding: 32px 24px;
	min-height: 60vh;
	box-sizing: border-box;
}

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

/* %u2500%u2500 HEADER %u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500 */
#header2 {
	display: flex;
	align-items: center;
	padding: 12px 20px;
	margin-bottom: 0;
	gap: 16px;
}

#header3 {
	flex-grow: 2;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
	margin-right: 0;
	margin-bottom: 0;
}

/* Logo */
#logo a {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	transition: opacity var(--transition);
}

#logo a:hover {
	opacity: 0.8;
}

/* Search icon */
#search a,
#cart a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-pill);
	text-decoration: none;
	transition: background var(--transition), transform var(--transition);
}

#search a:hover,
#cart a:hover {
	background: var(--surface-2);
	transform: scale(1.08);
}

#search:hover svg,
#search:hover svg path {
	fill: var(--accent-pink);
}

/* Cart */
#cart,
#lang {
	margin-left: 4px;
}

#cart a {
	width: auto;
	padding: 0 6px;
	gap: 4px;
}

#cart:hover svg,
#cart:hover svg path {
	fill: var(--accent-pink);
}

#cart span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	margin: 0;
	vertical-align: middle;
	color: #fff;
	background: var(--accent-pink);
	font-size: 0.72em;
	font-weight: 700;
	border-radius: var(--radius-pill);
	letter-spacing: 0;
	line-height: 1;
}

/* Language */
#lang {
	float: none;
	margin: 0 0 0 4px;
	color: var(--text-muted);
}

#lang a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 12px;
	border-radius: var(--radius-pill);
	font-size: 0.85em;
	font-weight: 600;
	color: var(--text-muted);
	text-decoration: none;
	transition: background var(--transition), color var(--transition);
}

#lang a:hover {
	background: var(--surface-2);
	color: var(--accent-pink);
}

#lang a:hover svg,
#lang a:hover svg path {
	fill: var(--accent-pink);
}

#lang span {
	vertical-align: middle;
}

/* %u2500%u2500 MAIN NAVIGATION %u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500 */
nav {
	max-width: 1200px;
	margin: 0 auto;
	max-height: none;
	transition: max-height 1s;
}

nav ul,
nav li {
	list-style: none;
	margin: 0;
	padding: 0;
}

nav > ul {
	display: inline-block;
	margin: 0;
}

nav li {
	display: inline-block;
}

nav a {
	display: block;
	font-size: 0.88em;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 48px;
	padding: 0 16px;
	text-decoration: none;
	color: var(--text-muted);
	border-radius: var(--radius-sm);
	transition: color var(--transition), background var(--transition);
	outline: none;
}

nav a:hover {
	color: var(--accent-pink);
	background: rgba(255, 107, 157, 0.07);
}

nav > ul > li > a {
	line-height: 44px;
	padding: 0 14px;
}

/* %u2500%u2500 SUB-NAVIGATION DROPDOWNS %u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500 */
nav > ul ul,
#cat > ul ul {
	position: absolute;
	display: block;
	margin: 4px 0 0 0;
	min-width: 180px;
	z-index: 200;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	background: var(--surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-hover);
	border: 1px solid var(--border-soft);
	transition: max-height 0.3s cubic-bezier(0.4,0,0.2,1),
	            opacity 0.2s cubic-bezier(0.4,0,0.2,1);
}

nav > ul ul > li,
#cat > ul ul > li {
	display: block !important;
}

nav > ul ul a {
	font-size: 0.85em;
	padding: 0 18px;
	line-height: 42px;
	border-radius: 0;
}

nav > ul ul a:hover,
#cat > ul ul a:hover {
	background: var(--surface-2);
	color: var(--accent-pink);
}

nav > ul li:hover > ul,
#cat > ul li:hover > ul {
	opacity: 1;
	max-height: 600px;
}

/* %u2500%u2500 CATEGORY NAVIGATION %u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500 */
#cat {
	padding: 0 20px 0;
}

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

#cat ul {
	display: flex;
	flex-flow: wrap;
	gap: 6px;
	padding-bottom: 12px;
}

#cat > ul > li {
	border-radius: var(--radius-pill);
	background: var(--surface-2);
	margin: 0;
	transition: transform var(--transition), box-shadow var(--transition);
	overflow: hidden;
}

#cat > ul > li:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}

#cat a {
	display: inline-block;
	line-height: 36px;
	padding: 0 16px;
	font-size: 0.85em;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	color: var(--text-main);
	outline: none;
	transition: color var(--transition), opacity var(--transition);
}

#cat a:hover {
	opacity: 0.85;
}

/* Colorful category tabs %u2014 bright & playful */
#cat > ul > li:nth-child(1) { background: #56c8ec; }
#cat > ul > li:nth-child(2) { background: #ff8fab; }
#cat > ul > li:nth-child(3) { background: #8dd87a; }
#cat > ul > li:nth-child(4) { background: #b5d8fc; }
#cat > ul > li:nth-child(5) { background: #ff6b9d; }
#cat > ul > li:nth-child(6) { background: #ffb347; }
#cat > ul > li:nth-child(7) { background: #4ecdc4; }
#cat > ul > li:nth-child(8) { background: #c084fc; }

#cat > ul > li > a { color: #fff; }

/* %u2500%u2500 MOBILE NAV %u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500 */
#mnav {
	display: none;
}

#mnav a {
	outline: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-sm);
	transition: background var(--transition);
}

#mnav a:hover {
	background: var(--surface-2);
}

/* %u2500%u2500 BREADCRUMB %u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500 */
.webshop_breadcrumb {
	color: var(--text-muted);
	font-size: 0.83rem;
	letter-spacing: 0.01em;
}

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

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

/* %u2500%u2500 BUTTONS %u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500 */
.webshop_stylebutton,
input[type=submit],
input[type=button] {
	display: inline-block;
	min-width: 160px;
	margin: 0 0 10px 0;
	padding: 0 24px;
	min-height: 44px;
	cursor: pointer;
	line-height: 44px;
	border: 0;
	border-radius: var(--radius-pill);
	font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	white-space: nowrap;
	text-decoration: none;
	text-align: center;
	color: #ffffff;
	background: linear-gradient(135deg, var(--accent-pink) 0%, #ff9ec2 100%);
	box-shadow: 0 2px 12px rgba(255, 107, 157, 0.25);
	transition: transform var(--transition),
	            box-shadow var(--transition),
	            background var(--transition);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.webshop_stylebutton:hover,
input[type=submit]:hover,
input[type=button]:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(255, 107, 157, 0.38);
	background: linear-gradient(135deg, #ff5290 0%, #ff6b9d 100%);
	text-decoration: none;
}

.webshop_stylebutton:active,
input[type=submit]:active,
input[type=button]:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(255, 107, 157, 0.20);
}

input[type=submit]:disabled,
input[type=button]:disabled {
	background: #d8d4d0;
	box-shadow: none;
	cursor: default;
	transform: none;
}

/* %u2500%u2500 FORM INPUTS %u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500 */
input,
select,
textarea {
	border: 1.5px solid var(--border-color);
	border-radius: var(--radius-sm);
	margin: 0 0 10px 0;
	padding: 10px 14px;
	font-size: 0.95rem;
	font-family: 'Inter', Arial, sans-serif;
	background: var(--surface);
	color: var(--text-main);
	transition: border-color var(--transition), box-shadow var(--transition);
}

input:focus,
textarea:focus {
	background: var(--surface);
	border-color: var(--accent-pink);
	box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.12);
	outline: none;
}

/* %u2500%u2500 PRODUCT LIST %u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500 */
#prodlist > li,
#catlist > li {
	background: var(--surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
	border: 1px solid var(--border-soft);
	overflow: hidden;
	transition: transform var(--transition),
	            box-shadow var(--transition);
}

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

/* %u2500%u2500 PANELS %u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500 */
.panel > span {
	font-weight: 600;
	color: var(--text-muted);
	transition: color var(--transition);
}

.panel:hover span {
	color: var(--accent-pink);
}

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

/* %u2500%u2500 NUMBER NAVIGATION %u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500 */
.numnav a:hover,
.numnav span.active {
	background: var(--accent-pink);
	color: #fff;
	border-radius: var(--radius-pill);
}

/* %u2500%u2500 STATUS BADGES %u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500 */
.webshop_status_ok {
	background: #4ecdc4;
	color: #fff;
	border-radius: var(--radius-pill);
}

.webshop_status_error {
	background: var(--accent-pink);
	color: #fff;
	border-radius: var(--radius-pill);
}

/* %u2500%u2500 PRICE %u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500 */
.webshop_price {
	font-weight: 700;
	color: var(--text-main);
}

p.webshop_price {
	font-size: 1.4em;
	color: var(--accent-pink);
}

/* %u2500%u2500 SLIDESHOW %u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500 */
#slideshow {
	border-radius: 0;
	overflow: hidden;
}

/* %u2500%u2500 FOOTER %u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500 */
/* Modern, airy, clean footer */
#cont3 {
	background: #2b2825;
	color: #c8c4c0;
	margin-top: 60px;
}

#footer1 {
	background: transparent;
	color: #c8c4c0;
	padding: 56px 24px 0;
}

#footer2 {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 48px 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Footer navigation column */
footer #cat,
#footnav {
	margin-bottom: 0;
	flex: 1 1 180px;
	min-width: 140px;
}

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

footer #cat li,
#footnav li {
	display: block;
	width: auto;
	vertical-align: top;
}

footer #cat ul ul,
#footnav ul ul {
	margin: 0;
	font-size: 0.88em;
}

footer #cat a,
#footnav a {
	display: inline-block;
	line-height: 2em;
	font-size: 0.88rem;
	font-weight: 400;
	color: #a0a09c;
	text-decoration: none;
	transition: color var(--transition);
}

footer #cat > ul > li > a,
#footnav > ul > li > a {
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #e0ddd8;
	margin-bottom: 8px;
	display: block;
}

footer #cat a:hover,
#footnav a:hover {
	color: var(--accent-pink);
}

#footnav svg {
	display: none;
}

/* Footer address */
footer address {
	flex: 1 1 220px;
	min-width: 180px;
	width: auto;
	display: block;
	float: none;
	font-style: normal;
	font-size: 0.88rem;
	color: #a0a09c;
	line-height: 1.8;
}

footer address strong {
	color: #e0ddd8;
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

address p {
	margin-top: 0;
	margin-bottom: 10px;
}

address a {
	color: #a0a09c;
	text-decoration: none;
	transition: color var(--transition);
}

address a:hover {
	color: var(--accent-pink);
}

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

address svg,
address svg path {
	fill: #a0a09c;
}

/* Footer CMS content */
#footercontent {
	display: block;
	vertical-align: top;
	flex: 1 1 200px;
	min-width: 160px;
	font-size: 0.88rem;
	color: #a0a09c;
}

/* Footer terms row */
#terms {
	max-width: 1200px;
	margin: 0 auto;
	clear: both;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 4px 20px;
	padding: 16px 0 28px;
	font-size: 0.8em;
	color: #706c68;
}

#terms span {
	margin-right: 0;
	margin-left: auto;
}

#terms a {
	color: #706c68;
	margin-right: 0;
	text-decoration: none;
	transition: color var(--transition);
}

#terms a:hover {
	color: var(--accent-pink);
}

/* Footer links general */
footer a {
	color: #a0a09c;
	transition: color var(--transition);
}

footer a:hover {
	color: var(--accent-pink);
}

/* %u2500%u2500 CHECKOUT PROGRESS %u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500 */
ul.checkoutprogress li {
	background: var(--surface-2);
	border-radius: var(--radius-sm);
}

ul.checkoutprogress li.active {
	background: #c9f0d8;
}

ul.checkoutprogress li.active::after {
	border-left-color: #c9f0d8;
}

ul.checkoutprogress li::after {
	border-left-color: var(--surface-2);
}

/* %u2500%u2500 PANEL POP (FILTER OVERLAY) %u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500 */
#panelpop > div > div:hover:not(.active) {
	background: rgba(255,255,255,0.12);
}

/* %u2500%u2500 SOCIAL ICONS %u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500 */
a.social svg {
	transition: transform var(--transition), filter var(--transition);
}

a.social:hover {
	filter: none;
}

a.social:hover svg {
	transform: scale(1.15);
}

/* %u2500%u2500 UP ARROW %u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500 */
#uparrow a {
	background: var(--accent-pink);
	border-radius: var(--radius-pill);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(255,107,157,0.30);
	transition: transform var(--transition), box-shadow var(--transition);
}

#uparrow a:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(255,107,157,0.40);
}

#uparrow svg,
#uparrow svg path {
	fill: #fff;
	color: #fff;
}

/* %u2500%u2500 PRODUCT DETAIL %u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500 */
.webshop_detail {
	gap: 32px;
}

.webshop_detail_photos a img {
	border-radius: var(--radius-md);
	transition: transform var(--transition);
}

.webshop_detail_photos a:hover img {
	transform: scale(1.02);
}

/* %u2500%u2500 CHAT WIDGET %u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500 */
#webshop_chat {
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	box-shadow: 0 -4px 24px rgba(0,0,0,0.10);
	border-color: var(--border-soft);
}

/* %u2500%u2500 USER REVIEWS (STARS) %u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500 */
.userrating svg,
.userrating svg path {
	fill: var(--accent-yellow);
}

/* %u2500%u2500 RESPONSIVE %u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500%u2500 */
@media all and (max-width: 800px) {
	#footer2 {
		gap: 32px 24px;
		padding-bottom: 28px;
	}

	footer address {
		min-width: 100%;
	}
}

@media all and (max-width: 600px) {
	nav {
		position: absolute;
		z-index: 200;
		left: 0;
		max-height: 0;
		width: 100%;
		overflow: hidden;
		background: var(--surface);
		border-bottom: 1px solid var(--border-soft);
		box-shadow: var(--shadow-hover);
	}

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

	nav > ul ul {
		position: static;
		opacity: 1;
		margin-left: 20px;
		box-shadow: none;
		border: none;
		background: transparent;
	}

	nav > ul > li > a {
		padding: 0 20px;
	}

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

	#mnav {
		display: inline-block;
	}

	#cat > ul > li {
		margin: 0;
		border-radius: var(--radius-pill);
	}

	#cont2 {
		display: flex;
		flex-flow: row wrap-reverse;
	}

	#asidecontent {
		align-self: flex-end;
		width: auto;
		float: none;
	}

	#mnav,
	main,
	#asidecontent {
		padding: 12px;
	}

	#footer2 {
		flex-direction: column;
		gap: 28px;
	}

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

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