/*
 * NUÁURA — site header + footer
 * Palette from the logo: silver #CBCBCB / #A9A9A9, black #141414, ivory #F5F3EF.
 * Light-first. No prefers-color-scheme block — see note at end.
 */

:root {
	--nu-primary:      #141414;
	--nu-primary-dark: #000000;
	--nu-accent:       #cbcbcb;
	--nu-accent-deep:  #a9a9a9;
	--nu-ink:          #1a1a1a;
	--nu-ink-soft:     #55524e;
	--nu-ivory:        #f5f3ef;
	--nu-surface:      #ffffff;
	--nu-line:         #e4e1db;

	--nu-font-head: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--nu-font-body: "Jost", "Helvetica Neue", Arial, sans-serif;

	--nu-wrap: 1300px;
	--nu-head-h: 94px;
}

/* ===============================================================
   Announcement bar
   =============================================================== */
.nu-announce {
	background: var(--nu-primary);
	color: #fff;
	-webkit-text-fill-color: #fff;
	font-family: var(--nu-font-body);
	font-size: 11.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.nu-announce__inner {
	max-width: var(--nu-wrap);
	margin: 0 auto;
	padding: 9px 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	text-align: center;
}
.nu-announce__inner span { color: #fff; -webkit-text-fill-color: #fff; }
.nu-announce__dot { color: var(--nu-accent-deep); -webkit-text-fill-color: var(--nu-accent-deep); }

/* ===============================================================
   Header
   =============================================================== */
.nu-header {
	position: sticky;
	top: 0;
	z-index: 900;
	background: var(--nu-surface);
	border-bottom: 1px solid var(--nu-line);
	font-family: var(--nu-font-body);
	transition: box-shadow .25s ease;
}
.nu-header.is-stuck { box-shadow: 0 2px 18px rgba(0,0,0,.07); }

/* three columns keep the logo optically centred no matter the icon count */
.nu-header__inner {
	max-width: var(--nu-wrap);
	margin: 0 auto;
	padding: 0 20px;
	min-height: var(--nu-head-h);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 12px;
}
.nu-header__left  { display: flex; align-items: center; gap: 4px; justify-self: start; }
.nu-header__center{ display: flex; align-items: center; justify-content: center; }
.nu-header__right { display: flex; align-items: center; gap: 4px; justify-self: end; }

.nu-logo { display: inline-flex; align-items: center; text-decoration: none; }
.nu-logo__img {
	display: block;
	width: auto;
	height: auto;
	max-height: 68px;
	max-width: 230px;
	object-fit: contain;
}
.nu-logo--text {
	font-family: var(--nu-font-head);
	font-size: 26px;
	font-weight: 600;
	letter-spacing: .22em;
	color: var(--nu-primary);
	-webkit-text-fill-color: var(--nu-primary);
}

.nu-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--nu-primary);
	-webkit-text-fill-color: var(--nu-primary);
	cursor: pointer;
	text-decoration: none;
	border-radius: 50%;
	transition: background .2s ease;
}
.nu-icon-btn:hover { background: var(--nu-ivory); }
.nu-icon-btn svg { width: 21px; height: 21px; }

.nu-cart-count {
	position: absolute;
	top: 4px; right: 3px;
	min-width: 17px; height: 17px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--nu-primary);
	color: #fff;
	-webkit-text-fill-color: #fff;
	font-size: 10px;
	line-height: 17px;
	text-align: center;
	opacity: 0;
	transform: scale(.6);
	transition: opacity .2s ease, transform .2s ease;
}
.nu-cart-count.is-on { opacity: 1; transform: scale(1); }

/* ---- primary nav: CENTRED ---- */
.nu-nav {
	border-top: 1px solid var(--nu-line);
	background: var(--nu-surface);
}
.nu-nav__list {
	max-width: var(--nu-wrap);
	margin: 0 auto;
	padding: 0 20px;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: center;   /* centre the menu items */
	flex-wrap: wrap;
	gap: 4px 30px;
	min-height: 48px;
}
.nu-nav__list > li { position: relative; list-style: none; }
.nu-nav__list > li > a {
	display: inline-block;
	padding: 13px 2px;
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--nu-ink);
	-webkit-text-fill-color: var(--nu-ink);
	text-decoration: none;
	position: relative;
}
.nu-nav__list > li > a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 8px;
	height: 1px;
	background: var(--nu-primary);
	transform: scaleX(0);
	transition: transform .25s ease;
}
.nu-nav__list > li > a:hover::after,
.nu-nav__list > li.current-menu-item > a::after { transform: scaleX(1); }
.nu-nav__list > li.current-menu-item > a { color: var(--nu-primary); -webkit-text-fill-color: var(--nu-primary); }

/* dropdowns */
.nu-nav__list .sub-menu {
	position: absolute;
	top: 100%; left: 50%;
	transform: translateX(-50%) translateY(6px);
	min-width: 200px;
	margin: 0; padding: 8px 0;
	list-style: none;
	background: var(--nu-surface);
	border: 1px solid var(--nu-line);
	box-shadow: 0 10px 30px rgba(0,0,0,.08);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
	z-index: 20;
}
.nu-nav__list > li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nu-nav__list .sub-menu li { list-style: none; }
.nu-nav__list .sub-menu a {
	display: block;
	padding: 9px 18px;
	font-size: 13px;
	letter-spacing: .04em;
	color: var(--nu-ink);
	-webkit-text-fill-color: var(--nu-ink);
	text-decoration: none;
	white-space: nowrap;
}
.nu-nav__list .sub-menu a:hover { background: var(--nu-ivory); }

/* ---- burger only on small screens ---- */
.nu-burger { display: none; }

@media (max-width: 991px) {
	:root { --nu-head-h: 66px; }
	.nu-burger { display: inline-flex; }
	/* Search stays visible here on purpose — it was previously hidden
	   below 992px with no replacement entry point in the drawer, so
	   search was completely unreachable on phone/tablet. Account is
	   still hidden since the drawer's own footer already links to it. */
	.nu-header__account { display: none; }
	.nu-nav { display: none; }          /* drawer takes over */
	.nu-logo__img { max-height: 48px; max-width: 168px; }
	.nu-announce__inner { font-size: 10px; letter-spacing: .06em; gap: 7px; padding: 7px 14px; }
	.nu-header__inner { padding: 0 12px; gap: 6px; }
}

/* ===============================================================
   Mobile drawer
   =============================================================== */
.nu-drawer {
	position: fixed;
	inset: 0;
	z-index: 9998;
	visibility: hidden;
	pointer-events: none;
}
.nu-drawer.is-open { visibility: visible; pointer-events: auto; }

.nu-drawer__scrim {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	border: 0; padding: 0;
	background: rgba(20,20,20,.45);
	opacity: 0;
	transition: opacity .3s ease;
	cursor: pointer;
}
.nu-drawer.is-open .nu-drawer__scrim { opacity: 1; }

.nu-drawer__panel {
	position: absolute;
	top: 0; left: 0; bottom: 0;
	z-index: 2;
	width: min(86vw, 340px);
	background: var(--nu-surface);
	transform: translateX(-100%);
	transition: transform .3s ease;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	/* clear XStore's fixed mobile bottom panel, which otherwise
	   covers the drawer's account/cart links */
	padding-bottom: calc(74px + env(safe-area-inset-bottom));
	font-family: var(--nu-font-body);
}
.nu-drawer.is-open .nu-drawer__panel { transform: translateX(0); }

.nu-drawer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--nu-line);
}
.nu-drawer__top .nu-logo__img { max-height: 36px; max-width: 130px; }

.nu-drawer__nav { padding: 8px 0; flex: 1 1 auto; }
.nu-drawer__list { list-style: none; margin: 0; padding: 0; }
.nu-drawer__list li { list-style: none; }
.nu-drawer__list a {
	display: block;
	padding: 14px 18px;
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--nu-ink);
	-webkit-text-fill-color: var(--nu-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--nu-line);
}
.nu-drawer__list a:hover { background: var(--nu-ivory); }
.nu-drawer__list .sub-menu { margin: 0; padding: 0; list-style: none; }
.nu-drawer__list .sub-menu a {
	padding-left: 34px;
	font-size: 12.5px;
	letter-spacing: .06em;
	text-transform: none;
	color: var(--nu-ink-soft);
	-webkit-text-fill-color: var(--nu-ink-soft);
}

.nu-drawer__foot {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px;
	border-top: 1px solid var(--nu-line);
	background: var(--nu-ivory);
}
.nu-drawer__foot a {
	font-size: 13px;
	letter-spacing: .06em;
	color: var(--nu-primary);
	-webkit-text-fill-color: var(--nu-primary);
	text-decoration: none;
}
.nu-drawer__foot a:hover { text-decoration: underline; }

body.nu-drawer-open { overflow: hidden; }

/* ===============================================================
   Search overlay
   =============================================================== */
.nu-search {
	position: fixed;
	inset: 0;
	z-index: 9998;
	visibility: hidden;
	pointer-events: none;
}
.nu-search.is-open { visibility: visible; pointer-events: auto; }

.nu-search__scrim {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	padding: 0;
	background: rgba(20,20,20,.45);
	opacity: 0;
	transition: opacity .3s ease;
	cursor: pointer;
}
.nu-search.is-open .nu-search__scrim { opacity: 1; }

.nu-search__panel {
	position: absolute;
	top: 0; left: 0; right: 0;
	z-index: 2;
	background: var(--nu-surface);
	border-bottom: 1px solid var(--nu-line);
	box-shadow: 0 12px 30px rgba(0,0,0,.10);
	padding: 22px 20px;
	transform: translateY(-100%);
	transition: transform .3s ease;
}
.nu-search.is-open .nu-search__panel { transform: translateY(0); }

.nu-search__form {
	max-width: 720px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	padding-top: env(safe-area-inset-top);
}
.nu-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 52px;
	border: 1px solid var(--nu-line);
	border-radius: 2px;
	padding: 0 16px;
	font-family: var(--nu-font-body);
	font-size: 15px;
	background: var(--nu-ivory);
	color: var(--nu-ink);
	-webkit-text-fill-color: var(--nu-ink);
	-webkit-appearance: none;
	appearance: none;
}
.nu-search__input::placeholder { color: var(--nu-accent-deep); -webkit-text-fill-color: var(--nu-accent-deep); }
.nu-search__input:focus { outline: none; border-color: var(--nu-primary); }
/* remove the native webkit "x" clear control so it doesn't collide with our own close button */
.nu-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.nu-search__submit,
.nu-search__panel .nu-icon-btn { flex: 0 0 auto; }

@media (max-width: 480px) {
	.nu-search__panel { padding: 16px 14px; }
	.nu-search__form { gap: 6px; }
	.nu-search__input { height: 46px; font-size: 14px; padding: 0 12px; }
}

/* ===============================================================
   Footer
   =============================================================== */
/*
 * No margin-top here on purpose: the footer has a solid dark background,
 * so any breathing room ABOVE it via margin sits outside that background
 * and renders as a blank white stripe between the page content and the
 * black footer band — exactly the "gap" this used to leave. Spacing
 * before the footer belongs to whatever content sits above it (each
 * page's own .np-section / .np-related margins already provide that),
 * not to the footer itself.
 */
.nu-footer {
	background: var(--nu-primary);
	color: #fff;
	-webkit-text-fill-color: #fff;
	font-family: var(--nu-font-body);
}
.nu-footer__inner {
	max-width: var(--nu-wrap);
	margin: 0 auto;
	padding: 54px 20px 34px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 34px;
}
@media (min-width: 700px) {
	.nu-footer__inner { grid-template-columns: repeat(2, 1fr); gap: 38px 30px; }
}
@media (min-width: 992px) {
	.nu-footer__inner { grid-template-columns: 1.6fr 1fr 1.2fr 1.3fr; gap: 44px; }
}

.nu-footer__brand .nu-logo { margin-bottom: 14px; }
.nu-footer__brand .nu-logo__img {
	/* This is now the transparent silver PNG cutout (attachment 7414),
	 * not the white-background JPEG — it sits directly on the black
	 * footer with no wrapper. A white background/padding box used to sit
	 * here to "lift the logo off the panel", but the source JPEG already
	 * had a solid white background baked into its own pixels, so that box
	 * just doubled up into a visible blank white rectangle on black. */
	max-height: 74px;
	max-width: 210px;
}
.nu-footer__brand .nu-logo--text { color: #fff; -webkit-text-fill-color: #fff; }

.nu-footer__tag {
	font-family: var(--nu-font-head);
	font-size: 19px;
	letter-spacing: .06em;
	color: var(--nu-accent);
	-webkit-text-fill-color: var(--nu-accent);
	margin: 0 0 10px;
}
.nu-footer__blurb {
	font-size: 13.5px;
	line-height: 1.75;
	color: var(--nu-accent);
	-webkit-text-fill-color: var(--nu-accent);
	margin: 0 0 18px;
	max-width: 34ch;
}

.nu-social { list-style: none; display: flex; gap: 10px; margin: 0; padding: 0; }
.nu-social li { list-style: none; }
.nu-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	border: 1px solid rgba(255,255,255,.28);
	border-radius: 50%;
	color: #fff;
	-webkit-text-fill-color: #fff;
	text-decoration: none;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.nu-social a:hover {
	background: #fff;
	border-color: #fff;
	color: var(--nu-primary);
	-webkit-text-fill-color: var(--nu-primary);
}
.nu-social svg { width: 18px; height: 18px; }

/*
 * .nu-footer__h is a <summary> now — the accordion trigger on phone,
 * inert on tablet/desktop. list-style / ::-webkit-details-marker strip
 * the browser's own disclosure triangle so our own chevron (::after) is
 * the only one, and it stays centred with the label rather than shoved
 * to whatever edge the UA marker defaults to.
 */
.nu-footer__h {
	position: relative;
	display: block;
	list-style: none;
	cursor: pointer;
	font-family: var(--nu-font-body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #fff;
	-webkit-text-fill-color: #fff;
	margin: 0 0 16px;
	padding: 0 26px 10px;
	border-bottom: 1px solid rgba(255,255,255,.16);
}
.nu-footer__h::-webkit-details-marker { display: none; }
.nu-footer__h::marker { content: ""; }

/* plus/minus chevron: horizontal bar always on, vertical bar rotates away
 * to nothing when open, same construction as the FAQ accordion icon. */
.nu-footer__h::before,
.nu-footer__h::after {
	content: "";
	position: absolute;
	right: 2px;
	top: 5px;
	background: var(--nu-accent);
	transition: transform .25s ease, opacity .25s ease;
}
.nu-footer__h::before { width: 10px; height: 1.4px; }
.nu-footer__h::after { width: 1.4px; height: 10px; right: 6.3px; top: 0.5px; }
.nu-footer__acc[open] .nu-footer__h::after { transform: rotate(90deg); opacity: 0; }
.nu-footer__col ul { list-style: none; margin: 0; padding: 0; }
.nu-footer__col li { list-style: none; margin-bottom: 11px; }
.nu-footer__col a {
	font-size: 13.5px;
	color: var(--nu-accent);
	-webkit-text-fill-color: var(--nu-accent);
	text-decoration: none;
	transition: color .2s ease;
}
.nu-footer__col a:hover { color: #fff; -webkit-text-fill-color: #fff; text-decoration: underline; }
.nu-footer__note {
	display: block;
	font-size: 11.5px;
	color: var(--nu-accent-deep);
	-webkit-text-fill-color: var(--nu-accent-deep);
	margin-top: 2px;
}
.nu-footer__contact a { font-size: 14.5px; font-weight: 500; color: #fff; -webkit-text-fill-color: #fff; }

/* ---- Phone: accordion + everything centred ---- */
@media (max-width: 767px) {
	.nu-footer__inner { text-align: center; }

	.nu-footer__brand { display: flex; flex-direction: column; align-items: center; }
	.nu-footer__blurb { margin-left: auto; margin-right: auto; }
	.nu-social { justify-content: center; }

	/* the chevron sits at a fixed right offset, so the label itself must
	   be centred within the remaining space rather than the full row —
	   padding-left mirrors the chevron's reserved width on the right. */
	.nu-footer__h { text-align: center; padding-left: 26px; }

	.nu-footer__col ul { display: inline-block; text-align: center; }
	.nu-footer__col li { text-align: center; }
}

/* ---- Tablet/desktop: accordion is inert, always open (see the JS that
   sets/removes [open]) — hide the chevron and stop the cursor implying
   it is interactive, so nobody tries to collapse the footer here. ---- */
@media (min-width: 768px) {
	.nu-footer__h { cursor: default; padding-right: 0; }
	.nu-footer__h::before,
	.nu-footer__h::after { display: none; }
}

.nu-footer__bar {
	border-top: 1px solid rgba(255,255,255,.14);
}
.nu-footer__bar > * { max-width: var(--nu-wrap); margin: 0 auto; }
.nu-footer__bar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
	text-align: center;
}
.nu-footer__bar p {
	margin: 0;
	font-size: 12.5px;
	color: var(--nu-accent-deep);
	-webkit-text-fill-color: var(--nu-accent-deep);
}
.nu-footer__credit {
	display: block;
	margin-top: 3px;
	font-size: 11px;
	color: var(--nu-accent-deep);
	-webkit-text-fill-color: var(--nu-accent-deep);
}
.nu-footer__credit a {
	margin-left: 4px;
	color: var(--nu-accent-deep) !important;
	-webkit-text-fill-color: var(--nu-accent-deep) !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.nu-footer__credit a:hover { color: #fff !important; -webkit-text-fill-color: #fff !important; }
@media (min-width: 768px) {
	.nu-footer__credit { display: inline; margin-top: 0; margin-left: 10px; }
	.nu-footer__credit::before { content: "·"; margin-right: 10px; color: var(--nu-accent-deep); }
}
.nu-footer__legal {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 18px;
	margin: 0;
	padding: 0;
}
.nu-footer__legal li { list-style: none; }
.nu-footer__legal a {
	font-size: 12px;
	color: var(--nu-accent-deep);
	-webkit-text-fill-color: var(--nu-accent-deep);
	text-decoration: none;
}
.nu-footer__legal a:hover { color: #fff; -webkit-text-fill-color: #fff; text-decoration: underline; }

@media (min-width: 768px) {
	.nu-footer__bar { flex-direction: row; justify-content: space-between; text-align: left; }
	.nu-footer__legal { justify-content: flex-end; }
}

/* The theme's mobile bottom panel would sit on top of the footer links. */
@media (max-width: 991px) {
	.nu-footer__bar { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/*
 * Deliberately NO @media (prefers-color-scheme: dark) block.
 * Header text is pinned dark-on-white and footer text light-on-black with
 * both `color` and `-webkit-text-fill-color`, so a device in dark mode
 * cannot repaint either into invisibility.
 */