/*
 * VoltNiq — Layout: container, header, footer, regions.
 */

/* --- Container -------------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--w-content);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.content-area {
	padding-block: var(--sp-7);
}

.prose {
	max-width: var(--w-prose);
}

/* --- Header ----------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: color-mix(in srgb, var(--c-bg) 92%, transparent);
	backdrop-filter: saturate(140%) blur(8px);
}

.topbar {
	background: var(--c-surface-2);
	border-bottom: 1px solid var(--c-line);
	font-size: var(--fs-xs);
	color: var(--c-text-dim);
}
.topbar__inner {
	display: flex;
	gap: var(--sp-5);
	align-items: center;
	justify-content: center;
	min-height: 34px;
	flex-wrap: wrap;
}
.topbar__item--badge {
	color: var(--c-volt);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.02em;
}

.header-main__inner {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	min-height: 72px;
}

.site-branding {
	flex: 0 0 auto;
}
.site-branding__name {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--fs-lg);
	letter-spacing: -0.01em;
	color: var(--c-text);
}
.custom-logo {
	max-height: 48px;
	width: auto;
}

.nav-primary {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

.header-actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--sp-4);
}

.header-search {
	border-top: 1px solid var(--c-line);
	padding-block: var(--sp-4);
	background: var(--c-surface);
}

/* --- Footer ----------------------------------------------------------- */
.site-footer {
	margin-top: var(--sp-9);
	background: var(--c-surface);
	border-top: 1px solid var(--c-line);
}
.site-footer__cols {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: var(--sp-7);
	padding-block: var(--sp-8);
}
.site-footer__tagline {
	color: var(--c-text-dim);
	margin-top: var(--sp-3);
	max-width: 38ch;
}
.site-footer__heading {
	font-family: var(--font-display);
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
	margin-bottom: var(--sp-3);
	color: var(--c-text);
}
.site-footer__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--sp-2);
}
.site-footer__list a {
	color: var(--c-text-dim);
}
.site-footer__list a:hover {
	color: var(--c-volt);
}
.site-footer__badges,
.site-footer__pay {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	padding: 0;
	margin: var(--sp-4) 0 0;
}
.site-footer__widgets {
	padding-bottom: var(--sp-6);
}
.site-footer__bar {
	border-top: 1px solid var(--c-line);
}
.site-footer__bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding-block: var(--sp-4);
	flex-wrap: wrap;
	color: var(--c-text-dim);
	font-size: var(--fs-sm);
}
.site-footer__trust {
	list-style: none;
	display: flex;
	gap: var(--sp-4);
	padding: 0;
	margin: 0;
}
.site-footer__trust li {
	position: relative;
	padding-left: var(--sp-4);
}
.site-footer__trust li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 8px;
	height: 8px;
	transform: translateY(-50%);
	background: var(--c-volt);
	border-radius: var(--r-pill);
}

/* --- Main content layout with optional sidebar ----------------------- */
.has-sidebar .content-area {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--sp-7);
}

/* --- Responsive ------------------------------------------------------- */
@media (max-width: 900px) {
	.site-footer__cols {
		grid-template-columns: 1fr 1fr;
		gap: var(--sp-6);
	}
	.site-footer__col--brand {
		grid-column: 1 / -1;
	}
	.has-sidebar .content-area {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.site-footer__cols {
		grid-template-columns: 1fr;
	}
	.site-footer__bar-inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 720px) {
	.header-main__inner {
		flex-wrap: wrap;
		gap: var(--sp-3);
	}
	.nav-primary {
		order: 3;
		flex-basis: 100%;
	}
	.account-link__label,
	.cart-link__label {
		display: none;
	}
}