/**
 * Zestino designsystem – header, navigasjon, handlekurv-skuff og søk.
 */

/* ============================================================
   1. Topplinje (frakt- / USP-stripe)
   ============================================================ */

.z-topbar {
	background: var(--z-red);
	color: #fff;
	font-size: var(--z-fs-tiny);
	font-weight: var(--z-fw-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.z-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--z-space-md);
	min-height: var(--z-topbar-h);
	text-align: center;
}

.z-topbar a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ============================================================
   2. Header
   ============================================================ */

.z-header {
	position: sticky;
	top: 0;
	z-index: var(--z-z-header);
	background: rgba(0, 0, 0, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid transparent;
	transition:
		background-color var(--z-dur) var(--z-ease),
		border-color var(--z-dur) var(--z-ease),
		box-shadow var(--z-dur) var(--z-ease);
}

.z-header.is-scrolled {
	background: rgba(0, 0, 0, 0.97);
	border-bottom-color: var(--z-line);
	box-shadow: var(--z-shadow-md);
}

.z-header__inner {
	display: flex;
	align-items: center;
	gap: var(--z-space-md);
	min-height: var(--z-header-h);
	transition: min-height var(--z-dur) var(--z-ease);
}

.z-header.is-scrolled .z-header__inner {
	min-height: var(--z-header-h-scrolled);
}

/* Logo */
.z-brand {
	flex: none;
	display: flex;
	align-items: center;
	padding-right: var(--z-space-md);
	border-right: var(--z-border);
	align-self: stretch;
}

.z-brand img,
.z-brand svg {
	width: auto;
	height: clamp(34px, 4vw, 52px);
	transition: height var(--z-dur) var(--z-ease);
}

.z-brand__text {
	font-family: var(--z-font-display);
	font-size: 1.75rem;
	font-weight: var(--z-fw-black);
	font-style: italic;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	line-height: 1;
	color: #fff;
}

.z-brand__text span {
	color: var(--z-red);
}

/* ============================================================
   3. Hovednavigasjon
   ============================================================ */

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

.z-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 1.6vw, 2.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.z-nav__list a {
	position: relative;
	display: block;
	padding-block: 0.5rem;
	font-size: var(--z-fs-small);
	font-weight: var(--z-fw-semibold);
	letter-spacing: var(--z-ls-nav);
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
}

/* Rød understrek som vokser ut fra midten. */
.z-nav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background: var(--z-red);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--z-dur) var(--z-ease);
}

.z-nav__list a:hover,
.z-nav__list .current-menu-item > a,
.z-nav__list .current-menu-ancestor > a,
.z-nav__list .current_page_item > a {
	color: var(--z-red);
}

.z-nav__list a:hover::after,
.z-nav__list .current-menu-item > a::after,
.z-nav__list .current-menu-ancestor > a::after,
.z-nav__list .current_page_item > a::after {
	transform: scaleX(1);
}

/* Undermeny */
.z-nav__list li {
	position: relative;
}

.z-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, 8px);
	min-width: 230px;
	margin: 0;
	padding: var(--z-space-2xs);
	list-style: none;
	background: var(--z-surface);
	border: var(--z-border);
	border-radius: var(--z-radius-sm);
	box-shadow: var(--z-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--z-dur) var(--z-ease),
		transform var(--z-dur) var(--z-ease),
		visibility var(--z-dur);
}

.z-nav__list li:hover > .sub-menu,
.z-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.z-nav__list .sub-menu a {
	padding: 0.625rem 0.875rem;
	border-radius: var(--z-radius-xs);
	white-space: normal;
}

.z-nav__list .sub-menu a::after {
	display: none;
}

.z-nav__list .sub-menu a:hover {
	background: var(--z-surface-2);
}

/* ============================================================
   4. Handlinger til høyre (søk, konto, handlekurv)
   ============================================================ */

.z-header__actions {
	flex: none;
	display: flex;
	align-items: center;
	gap: var(--z-space-2xs);
}

.z-icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: none;
	border: 0;
	border-radius: var(--z-radius-xs);
	color: #fff;
	transition:
		color var(--z-dur-fast) var(--z-ease),
		background-color var(--z-dur-fast) var(--z-ease);
}

.z-icon-btn:hover {
	color: var(--z-red);
	background: rgba(255, 255, 255, 0.06);
}

.z-icon-btn svg {
	width: 22px;
	height: 22px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.z-cart-count {
	position: absolute;
	top: 4px;
	right: 3px;
	min-width: 18px;
	height: 18px;
	padding-inline: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--z-red);
	color: #fff;
	border-radius: var(--z-radius-pill);
	font-size: 0.6875rem;
	font-weight: var(--z-fw-bold);
	line-height: 1;
}

.z-cart-count:empty,
.z-cart-count[data-count="0"] {
	display: none;
}

/* ============================================================
   5. Mobilmeny
   ============================================================ */

.z-burger {
	display: none;
}

@media (max-width: 1024px) {
	.z-nav {
		display: none;
	}

	.z-burger {
		display: inline-flex;
		order: 3;
	}

	.z-header__inner {
		justify-content: space-between;
	}

	.z-brand {
		border-right: 0;
		padding-right: 0;
	}
}

.z-burger__box {
	position: relative;
	width: 22px;
	height: 14px;
}

.z-burger__box span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	transition: transform var(--z-dur) var(--z-ease), opacity var(--z-dur-fast) var(--z-ease);
}

.z-burger__box span:nth-child(1) {
	top: 0;
}

.z-burger__box span:nth-child(2) {
	top: 6px;
}

.z-burger__box span:nth-child(3) {
	top: 12px;
}

.z-burger[aria-expanded="true"] .z-burger__box span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.z-burger[aria-expanded="true"] .z-burger__box span:nth-child(2) {
	opacity: 0;
}

.z-burger[aria-expanded="true"] .z-burger__box span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* ============================================================
   6. Skuff (mobilmeny + minihandlekurv)
   ============================================================ */

.z-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--z-z-overlay);
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(4px);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--z-dur) var(--z-ease), visibility var(--z-dur);
}

.z-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.z-drawer {
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: calc(var(--z-z-overlay) + 1);
	width: min(420px, 92vw);
	display: flex;
	flex-direction: column;
	background: var(--z-ink);
	border-left: var(--z-border);
	box-shadow: var(--z-shadow-lg);
	transition: transform var(--z-dur-slow) var(--z-ease);
	overscroll-behavior: contain;
}

.z-drawer--right {
	right: 0;
	transform: translateX(100%);
}

.z-drawer--left {
	left: 0;
	border-left: 0;
	border-right: var(--z-border);
	transform: translateX(-100%);
}

.z-drawer.is-open {
	transform: translateX(0);
}

.z-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--z-space-sm);
	padding: var(--z-space-md) var(--z-space-md);
	border-bottom: var(--z-border);
	flex: none;
}

.z-drawer__title {
	margin: 0;
	font-size: var(--z-fs-h4);
}

.z-drawer__body {
	flex: 1;
	overflow-y: auto;
	padding: var(--z-space-md);
}

.z-drawer__foot {
	flex: none;
	padding: var(--z-space-md);
	border-top: var(--z-border);
	background: var(--z-surface);
}

/* Mobilnavigasjonens lenker */
.z-mobile-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.z-mobile-nav .sub-menu {
	padding-left: var(--z-space-sm);
	border-left: var(--z-border);
	margin-block: var(--z-space-3xs);
}

.z-mobile-nav a {
	display: block;
	padding: var(--z-space-xs) 0;
	border-bottom: var(--z-border-soft);
	font-family: var(--z-font-display);
	font-size: 1.25rem;
	font-weight: var(--z-fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.z-mobile-nav .sub-menu a {
	font-family: var(--z-font-body);
	font-size: var(--z-fs-small);
	font-weight: var(--z-fw-medium);
	text-transform: none;
	letter-spacing: 0;
	color: var(--z-text-muted);
}

/* ============================================================
   7. Minihandlekurv
   ============================================================ */

.z-mini-cart__item {
	display: grid;
	grid-template-columns: 72px 1fr auto;
	gap: var(--z-space-sm);
	padding-block: var(--z-space-sm);
	border-bottom: var(--z-border-soft);
	align-items: start;
}

.z-mini-cart__thumb img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: var(--z-radius-xs);
	background: var(--z-surface-2);
}

.z-mini-cart__name {
	font-weight: var(--z-fw-semibold);
	font-size: var(--z-fs-small);
	line-height: 1.3;
	margin-bottom: 0.25rem;
	display: block;
}

.z-mini-cart__meta {
	font-size: var(--z-fs-tiny);
	color: var(--z-text-dim);
}

.z-mini-cart__price {
	font-weight: var(--z-fw-bold);
	white-space: nowrap;
}

.z-mini-cart__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin-top: var(--z-space-3xs);
	background: var(--z-surface-2);
	border: 0;
	border-radius: var(--z-radius-xs);
	color: var(--z-text-dim);
	font-size: 1rem;
	line-height: 1;
}

.z-mini-cart__remove:hover {
	background: var(--z-red);
	color: #fff;
}

.z-mini-cart__totals {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: var(--z-space-sm);
	font-family: var(--z-font-display);
	font-size: var(--z-fs-h4);
	text-transform: uppercase;
}

.z-mini-cart__empty {
	text-align: center;
	padding-block: var(--z-space-2xl);
	color: var(--z-text-dim);
}

/* ============================================================
   8. Søkeoverlegg
   ============================================================ */

.z-search {
	position: fixed;
	inset: 0;
	z-index: var(--z-z-overlay);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 18vh;
	background: rgba(0, 0, 0, 0.94);
	backdrop-filter: blur(8px);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--z-dur) var(--z-ease), visibility var(--z-dur);
}

.z-search.is-open {
	opacity: 1;
	visibility: visible;
}

.z-search__form {
	width: min(720px, 88vw);
	display: flex;
	gap: var(--z-space-2xs);
	border-bottom: 2px solid var(--z-red);
	padding-bottom: var(--z-space-2xs);
}

.z-search__form input[type="search"] {
	background: transparent;
	border: 0;
	font-family: var(--z-font-display);
	font-size: clamp(1.5rem, 3vw, 2.5rem);
	font-weight: var(--z-fw-bold);
	text-transform: uppercase;
	padding: 0;
	min-height: auto;
}

.z-search__form input[type="search"]:focus {
	box-shadow: none;
	background: transparent;
}

.z-search__hint {
	width: min(720px, 88vw);
	margin-top: var(--z-space-sm);
	font-size: var(--z-fs-tiny);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--z-text-dim);
}

.z-search__close {
	position: absolute;
	top: var(--z-space-md);
	right: var(--z-gutter);
}