/* ============================================================
   Header — pnza-redesign
   Dark-only, fixed, frosted-on-scroll.
   Cleaned up: the legacy .pnza-header--translucent / --solid /
   --fixed classes no longer repaint the background (their old
   rules were clobbering the new gradient).
   ============================================================ */

/* ============================================================
   Separate frosted-blur layer that fades in behind the header on
   scroll. Lives outside .pnza-header so it's unaffected by any
   mask / stacking on the header itself.
   ============================================================ */

/* iOS 26 fixed-clamp workaround: outer shell is the fixed element (small
   bbox), .pnza-header-blur is its absolute child whose bbox overflows up into
   the safe-area strip. Safari clamps the shell but renders the absolute
   child unclamped — so the blur paints behind the translucent status bar. */
.pnza-header-blur-shell {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	z-index: 998;
	pointer-events: none;
}

.pnza-header-blur {
	position: absolute;
	top: -200px;
	left: 0;
	right: 0;
	height: 360px;
	pointer-events: none;
	/* Non-zero tint keeps Chrome's compositing layer alive so the
	   backdrop-filter can be transitioned on and off. */
	background: rgba(14, 13, 11, 0.0001);
	-webkit-backdrop-filter: blur(0.01px) saturate(1);
	backdrop-filter: blur(0.01px) saturate(1);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 80px), transparent 100%);
	mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 80px), transparent 100%);
	transition:
		-webkit-backdrop-filter 0.4s ease,
		backdrop-filter 0.4s ease;
}

.pnza-header-blur.is-scrolled {
	-webkit-backdrop-filter: blur(6px) saturate(1.05);
	backdrop-filter: blur(6px) saturate(1.05);
}

@media (max-width: 1099px) {
	.pnza-header-blur {
		height: 288px;
	}
}

/* Skip link */
.pnza-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10000;
	background: #0e0d0b;
	color: #f4ecd8;
	padding: var(--sp-3) 18px;
	font-family: 'Outfit', sans-serif;
	font-size: var(--fs-14);
}

.pnza-skip-link:focus {
	left: 16px;
	top: 16px;
}

/* ============================================================
   Desktop header
   ============================================================ */

.pnza-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 1000;
	color: #f4ecd8;
	font-family: 'Outfit', sans-serif;
	padding-bottom: 48px;
	background: transparent;
	pointer-events: none;
	/* iOS 26 Safari clamps fixed elements to the safe area even with
	   viewport-fit=cover. The ::before / ::after pseudo-children below use
	   negative top to overflow upward into the status-bar strip; Safari
	   renders absolute descendants without the clamp. */
	overflow: visible;
}

.pnza-header > * {
	pointer-events: auto;
}

/* Blur layer: unmasked so Chrome captures the backdrop correctly. Keeps a
   0.01px blur at rest to prevent the compositing layer from being elided;
   .is-scrolled ramps to 22px in both directions. */
.pnza-header::before {
	content: '';
	position: absolute;
	/* Overflow upward past the iOS 26 fixed-clamp so the blur paints
	   behind the translucent status bar. 200px covers any device safe area. */
	top: -200px;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	background: rgba(14, 13, 11, 0.0001);
	-webkit-backdrop-filter: blur(0.01px) saturate(1);
	backdrop-filter: blur(0.01px) saturate(1);
	pointer-events: none;
	transition:
		-webkit-backdrop-filter 0.4s ease,
		backdrop-filter 0.4s ease;
}

.pnza-header.is-scrolled::before {
	-webkit-backdrop-filter: blur(22px) saturate(1.15);
	backdrop-filter: blur(22px) saturate(1.15);
}

/* Gradient + weave layer sits above the blur with its own mask. Always
   visible — only the blur fades in on scroll. */
.pnza-header::after {
	content: '';
	position: absolute;
	top: -200px;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	background:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'><line x1='0' y1='0' x2='6' y2='0' stroke='%23f4ecd8' stroke-width='0.6' opacity='0.10'/><line x1='0' y1='3' x2='6' y2='3' stroke='%23f4ecd8' stroke-width='0.4' opacity='0.06'/><line x1='0' y1='0' x2='0' y2='6' stroke='%23f4ecd8' stroke-width='0.5' opacity='0.08'/><line x1='3' y1='0' x2='3' y2='6' stroke='%23f4ecd8' stroke-width='0.5' opacity='0.08'/><line x1='3' y1='0' x2='3' y2='6' stroke='%23f4ecd8' stroke-width='0.3' opacity='0.05'/></svg>") repeat,
		linear-gradient(
			180deg,
			rgba(14, 13, 11, 0.48) 0px,
			rgba(14, 13, 11, 0.48) 200px,
			rgba(14, 13, 11, 0.32) 260px,
			rgba(14, 13, 11, 0.18) 320px,
			rgba(14, 13, 11, 0.0) 100%
		);
	background-size: 6px 6px, auto;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 80px), transparent 100%);
	mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 80px), transparent 100%);
	pointer-events: none;
}

/* Legacy JS classes kept as neutral. Do NOT repaint background — the base
   .pnza-header rule owns it. Explicitly reset the things old CSS touched
   (border, blend mode, transform) without clobbering background. */
.pnza-header--translucent,
.pnza-header--solid,
.pnza-header--fixed {
	border-bottom: none;
	mix-blend-mode: normal;
	transform: none;
}

/* ============================================================
   Desktop nav
   ============================================================ */

.pnza-header__nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 32px;
	padding: 22px 40px;
	width: 100%;
	max-width: none;
	position: relative;
	/* Above both pseudo layers (blur z=0, gradient+weave z=1). */
	z-index: 2;
}

.pnza-header__left,
.pnza-header__right {
	display: flex;
	align-items: center;
	gap: 28px;
}

.pnza-header__right {
	justify-content: flex-end;
}

.pnza-header__logo svg {
	height: 64px;
	width: 64px;
	display: block;
}

.pnza-header__logo a {
	display: inline-flex;
	text-decoration: none;
}

.pnza-header a,
.pnza-header .doodle-hover {
	font-weight: 500;
	font-size: var(--fs-15);
	color: inherit;
	text-decoration: none;
	text-transform: lowercase;
	letter-spacing: 0.01em;
}

.pnza-header__icon {
	display: inline-flex;
	align-items: center;
	color: inherit;
	position: relative;
}

.pnza-header__icon svg.doodle-icon {
	width: 26px;
	height: 26px;
}

.pnza-header__cart {
	position: relative;
}

.pnza-header__cart-count {
	position: absolute;
	top: -8px;
	right: -10px;
	background: #d9b36e;
	color: #0e0d0b;
	font-size: var(--fs-12);
	font-weight: 700;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: 'Space Mono', monospace;
}

/* ============================================================
   Mobile header
   ============================================================ */

.pnza-mobile-header {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	/* Pad the row down so it clears the iOS 26 liquid glass status bar; the
	   ::before/::after layers use negative top to overflow into the safe area
	   (Safari clamps the fixed parent but renders absolute children unclamped). */
	padding: calc(12px + env(safe-area-inset-top, 0px)) 20px 18px;
	overflow: visible;
	align-items: center;
	justify-content: space-between;
	color: #f4ecd8;
	background: transparent;
	pointer-events: none;
}

.pnza-mobile-header > * {
	pointer-events: auto;
	position: relative;
	z-index: 2;
}

.pnza-mobile-header::before {
	content: '';
	position: absolute;
	top: -200px;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	background: rgba(14, 13, 11, 0.0001);
	-webkit-backdrop-filter: blur(0.01px) saturate(1);
	backdrop-filter: blur(0.01px) saturate(1);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 60px), transparent 100%);
	mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 60px), transparent 100%);
	pointer-events: none;
	transition:
		-webkit-backdrop-filter 0.4s ease,
		backdrop-filter 0.4s ease;
}

.pnza-mobile-header.is-scrolled::before {
	-webkit-backdrop-filter: blur(9px) saturate(1.15);
	backdrop-filter: blur(9px) saturate(1.15);
}

.pnza-mobile-header::after {
	content: '';
	position: absolute;
	top: -200px;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	background:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'><line x1='0' y1='0' x2='6' y2='0' stroke='%23f4ecd8' stroke-width='0.6' opacity='0.10'/><line x1='0' y1='3' x2='6' y2='3' stroke='%23f4ecd8' stroke-width='0.4' opacity='0.06'/><line x1='0' y1='0' x2='0' y2='6' stroke='%23f4ecd8' stroke-width='0.5' opacity='0.08'/><line x1='3' y1='0' x2='3' y2='6' stroke='%23f4ecd8' stroke-width='0.5' opacity='0.08'/><line x1='3' y1='0' x2='3' y2='6' stroke='%23f4ecd8' stroke-width='0.3' opacity='0.05'/></svg>") repeat,
		linear-gradient(
			180deg,
			rgba(14, 13, 11, 0.50) 0px,
			rgba(14, 13, 11, 0.50) 200px,
			rgba(14, 13, 11, 0.32) 250px,
			rgba(14, 13, 11, 0.0) 100%
		);
	background-size: 6px 6px, auto;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 60px), transparent 100%);
	mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 60px), transparent 100%);
	pointer-events: none;
}

.pnza-mobile-header__logo {
	position: absolute;
	left: 50%;
	top: calc(14px + env(safe-area-inset-top, 0px));
	transform: translateX(-50%);
	z-index: 2;
	pointer-events: auto;
}

.pnza-mobile-header__logo svg {
	height: 42px;
	width: 42px;
	display: block;
}

.pnza-hamburger {
	position: relative;
	/* Sit above the ::after gradient/weave (z:1) so the icon stays visible. */
	z-index: 3;
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	color: #f4ecd8;
}

.pnza-hamburger svg:first-child {
	width: 26px;
	height: 20px;
}

.pnza-mobile-header .pnza-header__icon {
	position: relative;
	/* Match the hamburger so the cart icon also clears the gradient overlay. */
	z-index: 3;
}

.pnza-mobile-header .pnza-header__icon svg.doodle-icon {
	width: 24px;
	height: 24px;
}

/* ============================================================
   Mobile menu (slide-in panel — same pattern as mini-cart)
   ============================================================ */

.pnza-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 9998;
}

.pnza-mobile-menu__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	-webkit-backdrop-filter: blur(6px) saturate(1.05);
	backdrop-filter: blur(6px) saturate(1.05);
	opacity: 0;
	transition: opacity 0.35s cubic-bezier(.2, .7, .3, 1);
}

.pnza-mobile-menu--open .pnza-mobile-menu__overlay {
	opacity: 1;
}

.pnza-mobile-menu__panel {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 420px;
	max-width: 92vw;
	background:
		url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cline x1='0' y1='0' x2='6' y2='0' stroke='%23f4ecd8' stroke-width='0.6' opacity='0.10'/%3E%3Cline x1='0' y1='3' x2='6' y2='3' stroke='%23f4ecd8' stroke-width='0.4' opacity='0.06'/%3E%3Cline x1='0' y1='0' x2='0' y2='6' stroke='%23f4ecd8' stroke-width='0.5' opacity='0.08'/%3E%3Cline x1='3' y1='0' x2='3' y2='6' stroke='%23f4ecd8' stroke-width='0.3' opacity='0.05'/%3E%3C/svg%3E") repeat,
		linear-gradient(180deg, #171612 0%, #0e0d0b 100%);
	background-size: 6px 6px, auto;
	border-right: 1px solid #2a2822;
	color: #f4ecd8;
	padding: 28px 28px 32px;
	overflow-y: auto;
	transform: translateX(-100%);
	transition: transform 0.35s cubic-bezier(.2, .7, .3, 1);
	font-family: 'Outfit', sans-serif;
	box-shadow: 24px 0 60px rgba(0, 0, 0, 0.45);
	z-index: 1;
}

.pnza-mobile-menu--open .pnza-mobile-menu__panel {
	transform: translateX(0);
}

.pnza-mobile-menu__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	padding-bottom: 18px;
	border-bottom: 1px solid #2a2822;
}

.pnza-mobile-menu__header h3 {
	font-family: 'Outfit', sans-serif;
	font-size: var(--fs-display-xs);
	letter-spacing: var(--ls-tight);
	font-weight: 800;
	color: #f4ecd8;
	text-transform: lowercase;
	margin: 0;
}

.pnza-mobile-menu__close {
	background: transparent;
	border: 1px solid rgba(244, 236, 216, 0.28);
	color: #f4ecd8;
	width: 36px;
	height: 36px;
	line-height: 1;
	cursor: pointer;
	border-radius: 9999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	padding: 0;
	transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease, transform 0.25s cubic-bezier(.2, .7, .3, 1);
}

.pnza-mobile-menu__close:hover,
.pnza-mobile-menu__close:focus-visible {
	background: rgba(217, 179, 110, 0.15);
	border-color: #d9b36e;
	color: #d9b36e;
	transform: translateY(-1px);
}

.pnza-mobile-menu__nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pnza-mobile-menu__nav a {
	position: relative;
	color: #f4ecd8;
	text-decoration: none;
	text-transform: lowercase;
	padding: 18px 4px;
	font-weight: 500;
	font-size: var(--fs-display-xs);
	letter-spacing: var(--ls-tight);
	border-bottom: 1px solid #2a2822;
	transition: color 0.25s ease, padding-left 0.25s cubic-bezier(.2, .7, .3, 1);
}

.pnza-mobile-menu__nav a:last-child {
	border-bottom: none;
}

.pnza-mobile-menu__nav a:hover,
.pnza-mobile-menu__nav a:focus-visible {
	color: #d9b36e;
	padding-left: 10px;
}

.pnza-mobile-menu__eyebrow {
	font-family: 'Amatic SC', cursive;
	font-size: var(--fs-eyebrow-sm);
	color: #d9b36e;
	letter-spacing: var(--ls-eyebrow);
	margin: 0 0 var(--sp-3);
	line-height: var(--lh-eyebrow);
}

body.pnza-menu-open {
	overflow: hidden;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1099px) {
	.pnza-header {
		display: none;
	}
	.pnza-mobile-header {
		display: flex;
	}
}