:root {
	--cws-dark:       #222222;
	--cws-green:      #0f8434;
	--cws-green-dark: #0a6b28;
	--cws-light:      #f7f7f7;
	--cws-border:     #dddddd;
	--cws-header-h:   64px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Roboto', sans-serif; color: #333; line-height: 1.6; }
h1,h2,h3,h4,h5 { font-family: 'Lato', sans-serif; }
img { max-width: 100%; }
a { color: var(--cws-green); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

/* ---- Sections ---- */
.cws-section       { padding: 3.5rem 1.5rem; }
.cws-section-light { background: var(--cws-light); }
.cws-section-white { background: #fff; }
.cws-section-dark  { background: var(--cws-dark);  color: #fff; }
.cws-section-green { background: var(--cws-green); color: #fff; }

.green-accent { height: 4px; width: 80px; background: var(--cws-green); margin: 0.75rem auto 1.75rem; }

/* ---- Buttons ---- */
.btn-primary {
	display: inline-block;
	background: var(--cws-green);
	color: #fff !important;
	padding: 0.8rem 2rem;
	border-radius: 4px;
	font-weight: 500;
	font-size: 1rem;
	text-decoration: none !important;
	border: none;
	cursor: pointer;
	transition: background 0.2s, transform 0.15s;
}
.btn-primary:hover { background: var(--cws-green-dark); transform: translateY(-1px); }

.btn-outline-white {
	display: inline-block;
	border: 2px solid #fff;
	color: #fff !important;
	padding: 0.7rem 1.8rem;
	border-radius: 4px;
	font-weight: 500;
	text-decoration: none !important;
	transition: background 0.2s, color 0.2s;
}
.btn-outline-white:hover { background: #fff; color: var(--cws-green) !important; }

/* ---- Hero background ---- */
.cws-hero-bg {
	background-color: #2a3a2a;
	background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), url('/img/hero-bg.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* ---- Header ---- */
.cws-header {
	background: var(--cws-dark);
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.cws-header-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
	height: var(--cws-header-h);
	display: flex;
	align-items: center;
	gap: 1rem;
	position: relative;
}
.cws-logo {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none !important;
	flex-shrink: 0;
	margin-right: auto;
}
.cws-logo-img {
	height: 40px;
	width: auto;
	display: block;
}
.cws-logo-text {
	font-family: 'Lato', sans-serif;
	font-weight: 900;
	font-size: 1.05rem;
	letter-spacing: 0.06em;
	color: #fff;
	line-height: 1.2;
}
.cws-logo-text span {
	display: block;
	font-weight: 400;
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	color: #aaa;
}

.cws-nav { display: flex; align-items: center; gap: 1.75rem; }
.cws-nav a {
	color: #ccc;
	font-weight: 500;
	font-size: 0.93rem;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s;
	padding-bottom: 2px;
	border-bottom: 2px solid transparent;
}
.cws-nav a:hover  { color: #fff; text-decoration: none; }
.cws-nav a.active { color: #fff; border-bottom-color: var(--cws-green); }

.cws-cart-link {
	display: flex;
	align-items: center;
	position: relative;
	color: #ccc;
	text-decoration: none !important;
	padding: 0.3rem;
	transition: color 0.2s;
}
.cws-cart-link:hover { color: #fff; }
.cws-cart-icon { width: 22px; height: 22px; display: block; }
.cws-cart-badge {
	position: absolute;
	top: -2px; right: -5px;
	background: var(--cws-green);
	color: #fff;
	font-size: 0.6rem;
	font-weight: 700;
	min-width: 16px; height: 16px;
	border-radius: 8px;
	display: flex; align-items: center; justify-content: center;
	padding: 0 3px;
	line-height: 1;
}

.cws-hamburger {
	display: none;
	background: none;
	border: none;
	color: #ccc;
	cursor: pointer;
	padding: 0.3rem;
	line-height: 1;
}
.cws-hamburger:hover { color: #fff; }

/* ---- Mobile ---- */
@media (max-width: 768px) {
	.cws-hamburger { display: block; }
	.cws-nav {
		display: none;
		flex-direction: column;
		gap: 0;
		position: absolute;
		top: var(--cws-header-h);
		left: 0; right: 0;
		background: var(--cws-dark);
		padding: 0.5rem 1.5rem 1rem;
		box-shadow: 0 4px 8px rgba(0,0,0,0.4);
	}
	.cws-nav.open { display: flex; }
	.cws-nav a { padding: 0.65rem 0; border-bottom: 1px solid #333; border-left: none; }
	.cws-logo-text span { display: none; }
}