/*
 * Fivany header — faithful port of "Fivany Header.html" from the Claude
 * Design project "Opnar E-commerce".
 *
 * Everything is scoped under `.fv-hdr` so the design's generic class names
 * (.lock, .srch, .r-cat, .mega …) cannot collide with the rest of the
 * theme. The source drives its responsive states from a preview switcher
 * (`.device[data-bp="1200"]` etc.); those are converted to real media
 * queries here:
 *
 *   bp 1440 -> default          bp 768 -> max-width: 1023px
 *   bp 1200 -> max-width: 1279px   bp 390 -> max-width: 479px
 *
 * The source's preview chrome (.pv toolbar, .canvas, .device, .stage, .note)
 * is scaffolding, not the design, and is not ported.
 */

.fv-hdr {
	/* The design's own palette. `--brand` here is #ff5c00, which differs
	 * slightly from the site token --fv-accent (#ff6b00) — kept exact so the
	 * header matches the source. */
	--bg: #fff;
	--surface: oklch(0.975 0.003 250);
	--surface-2: oklch(0.955 0.004 250);
	--ink: #0d0f12;
	--ink-2: oklch(0.42 0.008 250);
	--ink-3: oklch(0.62 0.008 250);
	--line: oklch(0.915 0.005 250);
	--line-2: oklch(0.85 0.006 250);
	--brand: #ff5c00;
	--brand-ink: #e85200;
	--brand-soft: #fff3ec;
	--skin: #e8c9b4;
	--font: 'Inter', ui-sans-serif, system-ui, sans-serif;
	--display: 'Archivo', var(--font);
	--mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

	font-family: var(--font);
	font-size: 14px;
	line-height: 1.4;
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
}

.fv-hdr *,
.fv-hdr *::before,
.fv-hdr *::after {
	box-sizing: border-box;
}

.fv-hdr a {
	color: inherit;
	text-decoration: none;
}

.fv-hdr button {
	font: inherit;
	color: inherit;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 0;
}

.fv-hdr .i {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	stroke-width: 1.7;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
}

.fv-hdr .i-sm {
	width: 14px;
	height: 14px;
}

.fv-hdr [hidden] {
	display: none !important;
}

/* ===== brand lockup ===== */

.fv-hdr .lock {
	display: inline-flex;
	align-items: center;
	gap: 11px;
}

.fv-hdr .mark {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--brand);
	color: #fff;
	display: grid;
	place-items: center;
	font-family: var(--display);
	font-weight: 800;
	font-size: 23px;
	letter-spacing: -0.03em;
	box-shadow: 0 4px 14px -4px rgba(255, 92, 0, 0.55);
}

.fv-hdr .word {
	display: flex;
	flex-direction: column;
	gap: 1px;
	line-height: 1;
}

/* The source hard-codes "FIVANY" in caps. The site name is bound here, so
 * the casing is applied in CSS to render identically. */
.fv-hdr .word .nm {
	font-family: var(--display);
	font-weight: 800;
	font-size: 26px;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}

.fv-hdr .word .tag {
	font-family: var(--display);
	font-weight: 700;
	font-size: 9px;
	letter-spacing: 0.34em;
	color: var(--brand);
	text-transform: uppercase;
}

/* ── Uploaded logo ─────────────────────────────────────────────────
 * The site logo is the full horizontal lockup (leaf + FIVANY), so it
 * stands alone — it replaces the design's mark tile and text wordmark.
 *
 * 46px tall sits just above the design's 44px mark: the artwork carries
 * internal padding, so matching 44px exactly would render the wordmark
 * visibly smaller than the design's. At the file's 3.78:1 ratio that is
 * ~174px wide, which clears the search field comfortably at 1440. */

.fv-hdr .lock .brandmark {
	display: block;
	height: 46px;
	width: auto;
	max-width: 100%;
}

/* ===== row: main ===== */

.fv-hdr .hdr {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: blur(18px) saturate(1.5);
	-webkit-backdrop-filter: blur(18px) saturate(1.5);
	border-bottom: 1px solid var(--line);
}

/*
 * The row shares the page's container.
 *
 * `.fv-hdr` is full-bleed so the sticky bar's background runs edge to edge,
 * but its contents must not: past `--fv-maxw` the logo and the cart sat
 * hundreds of pixels outside the column everything below them lines up with.
 * `.mega-in` already centred itself this way; this row now matches it.
 */
.fv-hdr .r-main {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 26px;
	padding: 15px 26px;
	max-width: var(--fv-maxw);
	margin-inline: auto;
}

.fv-hdr .srch-wrap {
	position: relative;
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
}

.fv-hdr .srch {
	display: flex;
	align-items: center;
	height: 46px;
	border: 1.5px solid var(--line);
	background: var(--surface);
	border-radius: 999px;
	padding: 3px 3px 3px 6px;
	transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
	max-width: 640px;
	margin: 0 auto;
	width: 100%;
	position: relative;
}

.fv-hdr .srch:hover {
	border-color: var(--line-2);
	background: #fff;
}

/* Border + white fill only. The design's 3px halo here read as a glow on
 * click, so it is dropped along with the other focus shadows. */
.fv-hdr .srch:focus-within {
	border-color: var(--brand);
	background: #fff;
}

.fv-hdr .srch .who {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 12px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-2);
	border-right: 1px solid var(--line);
	white-space: nowrap;
	height: 26px;
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border-radius: 0;
	border-top: 0;
	border-bottom: 0;
	border-left: 0;
	box-shadow: none;
	line-height: 1;
}

.fv-hdr .srch .who:hover {
	color: var(--ink);
}

.fv-hdr .srch .who:focus {
	outline: 0;
	box-shadow: none;
	border-color: var(--line);
}

.fv-hdr .srch input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	padding: 0 14px;
	font: inherit;
	font-size: 13.5px;
	color: var(--ink);
	height: auto;
	box-shadow: none;
}

.fv-hdr .srch input:focus {
	border: 0;
	box-shadow: none;
}

.fv-hdr .srch input::placeholder {
	color: var(--ink-3);
}

.fv-hdr .srch .go {
	height: 38px;
	padding: 0 20px;
	border-radius: 999px;
	background: var(--brand);
	color: #fff;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	transition: background 0.15s, transform 0.12s;
	border: 0;
	flex: none;
}

.fv-hdr .srch .go:hover {
	background: var(--brand-ink);
}

.fv-hdr .srch .go:active {
	transform: scale(0.97);
}

/* ===== suggestions ===== */

.fv-hdr .sugg {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 9px);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	box-shadow: 0 22px 44px -22px rgba(13, 15, 18, 0.3);
	padding: 6px;
	display: none;
	z-index: 40;
}

.fv-hdr .sugg.show {
	display: block;
}

.fv-hdr .sugg .h {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-3);
	padding: 11px 13px 6px;
}

.fv-hdr .sugg .r {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 13px;
	border-radius: 10px;
	font-size: 13.5px;
	color: var(--ink-2);
	cursor: pointer;
}

.fv-hdr .sugg .r:hover {
	background: var(--surface);
	color: var(--ink);
}

.fv-hdr .sugg .r .t {
	margin-left: auto;
	font-family: var(--mono);
	font-size: 10.5px;
	color: var(--ink-3);
}

.fv-hdr .sugg .r .sw {
	width: 16px;
	height: 16px;
	border-radius: 5px;
	flex: none;
	border: 1px solid var(--line-2);
}

/* ===== actions ===== */

.fv-hdr .acts {
	display: flex;
	align-items: center;
	gap: 2px;
}

.fv-hdr .act {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 8px 11px;
	border-radius: 11px;
	position: relative;
	transition: background 0.15s, color 0.15s;
}

.fv-hdr .act:hover {
	background: var(--surface);
}

.fv-hdr .act .tx {
	display: flex;
	flex-direction: column;
	line-height: 1.12;
	text-align: left;
}

.fv-hdr .act .tx .s {
	font-family: var(--mono);
	font-size: 9.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.fv-hdr .act .tx .b {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.fv-hdr .act .cnt {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 17px;
	height: 17px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--brand);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	display: grid;
	place-items: center;
	border: 2px solid #fff;
}

.fv-hdr .cart-pill {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 44px;
	padding: 0 18px;
	border-radius: 999px;
	background: var(--brand);
	color: #fff;
	margin-left: 8px;
	box-shadow: 0 4px 14px -4px rgba(255, 92, 0, 0.5);
	transition: background 0.15s, transform 0.12s;
}

.fv-hdr .cart-pill:hover {
	background: var(--brand-ink);
	color: #fff;
}

.fv-hdr .cart-pill:active {
	transform: scale(0.98);
}

.fv-hdr .cart-pill .bag {
	position: relative;
	display: grid;
	place-items: center;
}

.fv-hdr .cart-pill .bag .i {
	width: 20px;
	height: 20px;
}

/*
 * Count badge — the mobile nav's FAB treatment, scaled to the pill.
 *
 * The source design pairs an 18px bag glyph with a 17px badge, so the two
 * are nearly the same size and the badge lands on top of the cart rather
 * than beside it — the glyph reads as damaged. The bottom nav solves the
 * same problem on the same orange ground: a dark badge with a white ring,
 * sitting clear of the icon's corner. Ink on white on orange separates at
 * a glance, where white-on-brand-ringed-with-brand did not.
 *
 * The glyph goes up to 20px and the badge down to 16px, so the badge is
 * decisively the smaller of the two.
 */
.fv-hdr .cart-pill .bag .n {
	position: absolute;
	top: -8px;
	right: -10px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--ink);
	color: #fff;
	border: 2px solid #fff;
	box-shadow: none;
	font-family: var(--display);
	font-size: 9.5px;
	font-weight: 800;
	line-height: 1;
	display: grid;
	place-items: center;
}

.fv-hdr .cart-pill .sep {
	width: 1px;
	height: 17px;
	background: rgba(255, 255, 255, 0.32);
}

.fv-hdr .cart-pill .amt {
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: -0.012em;
	font-variant-numeric: tabular-nums;
}

.fv-hdr .cart-pill .amt .woocommerce-Price-amount {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

/* ===== row: categories ===== */

/*
 * Same container, applied as padding rather than a max-width: this row
 * paints its own background and border band, which has to stay full-bleed.
 *
 * `100%` resolves against the header's width — the viewport minus the
 * scrollbar — which is the containing block `.col-full` centres in, so the
 * two agree at every width without `100vw`'s scrollbar error. The inset
 * stops at the column's margin edge, not its padding edge, so the first
 * item's own hover padding keeps bleeding outward exactly as it does today.
 */
.fv-hdr .r-cat {
	position: relative;
	display: flex;
	align-items: stretch;
	background: var(--surface);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	font-size: 13px;
	padding-inline: max(0px, (100% - var(--fv-maxw)) / 2);
}

.fv-hdr .r-cat .all {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 12px 20px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin-right: 6px;
	transition: color 0.15s;
}

.fv-hdr .r-cat .all:hover {
	color: var(--brand);
}

.fv-hdr .r-cat .all .i {
	color: var(--brand);
}

/*
 * The source's navlist held nine curated entries and never overflowed. The
 * real catalogue puts eleven categories here, so the row now scrolls — and
 * a plain `overflow-x` clip severs the last visible label mid-word, hard
 * against "Fit chat", which reads as a rendering fault rather than as more
 * content.
 *
 * The mask fades the final 28px to transparent, so a clipped label trails
 * off instead of being guillotined, and the fade itself is the only cue
 * that the row scrolls (the scrollbar is hidden, per the design). It is
 * switched off once nothing is overflowing, otherwise the last item sits
 * permanently half-faded on a short list.
 */
.fv-hdr .navlist {
	display: flex;
	align-items: stretch;
	flex: 1;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
	padding-right: 4px;
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
	mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}

.fv-hdr .navlist > a {
	scroll-snap-align: start;
}

.fv-hdr .navlist::-webkit-scrollbar {
	display: none;
}

.fv-hdr .navlist a {
	display: flex;
	align-items: center;
	padding: 0 15px;
	color: var(--ink-2);
	white-space: nowrap;
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: -0.005em;
	position: relative;
	transition: color 0.15s;
}

.fv-hdr .navlist a::after {
	content: '';
	position: absolute;
	left: 15px;
	right: 15px;
	bottom: 0;
	height: 2px;
	background: var(--brand);
	border-radius: 2px 2px 0 0;
	transform: scaleX(0);
	transition: transform 0.2s;
}

.fv-hdr .navlist a:hover,
.fv-hdr .navlist a.hot {
	color: var(--ink);
}

.fv-hdr .navlist a:hover::after,
.fv-hdr .navlist a.hot::after {
	transform: scaleX(1);
}

.fv-hdr .navlist .tag {
	margin-left: 6px;
	font-family: var(--mono);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.06em;
	background: var(--brand);
	color: #fff;
	padding: 2px 6px;
	border-radius: 999px;
}

.fv-hdr .navlist .sale {
	color: var(--brand);
	font-weight: 600;
}

.fv-hdr .r-cat .end {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-left: auto;
	padding-left: 8px;
	padding-right: 12px;
	border-left: 1px solid var(--line);
	font-size: 12.5px;
	color: var(--ink-3);
	flex: none;
}

.fv-hdr .r-cat .end span {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border-radius: 8px;
	cursor: pointer;
	transition: color 0.15s, background 0.15s;
}

.fv-hdr .r-cat .end span:hover {
	color: var(--ink);
	background: #fff;
}

/* ===== mega ===== */

.fv-hdr .mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: #fff;
	border-bottom: 1px solid var(--line);
	box-shadow: 0 20px 34px -20px rgba(13, 15, 18, 0.2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.13s, transform 0.13s, visibility 0s 0.13s;
	z-index: 30;
}

.fv-hdr .mega.open {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.13s, transform 0.13s;
}

.fv-hdr .mega-in {
	max-width: var(--fv-maxw);
	margin: 0 auto;
	padding: 24px 26px 26px;
	display: grid;
	grid-template-columns: 190px 1fr 268px;
	gap: 30px;
}

.fv-hdr .mlist {
	display: flex;
	flex-direction: column;
}

.fv-hdr .mlist a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 11px;
	font-size: 13px;
	color: var(--ink-2);
	border-left: 2px solid transparent;
	border-radius: 0 8px 8px 0;
	cursor: pointer;
}

.fv-hdr .mlist a:hover,
.fv-hdr .mlist a.active {
	color: var(--ink);
	background: var(--surface);
	border-left-color: var(--brand);
}

.fv-hdr .mlist a .k {
	font-family: var(--mono);
	font-size: 10px;
	color: var(--ink-3);
}

.fv-hdr .mcols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.fv-hdr .mcol h4 {
	margin: 0 0 11px;
	padding-bottom: 7px;
	border-bottom: 1px solid var(--line);
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.fv-hdr .mcol ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.fv-hdr .mcol li {
	list-style: none;
	margin: 0;
}

.fv-hdr .mcol a {
	font-size: 13px;
	color: var(--ink-2);
}

.fv-hdr .mcol a:hover {
	color: var(--brand);
}

.fv-hdr .sizes {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 2px;
}

.fv-hdr .sizes a {
	min-width: 34px;
	height: 28px;
	padding: 0 8px;
	border: 1px solid var(--line-2);
	border-radius: 7px;
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 500;
	color: var(--ink-2);
	transition: 0.13s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.fv-hdr .sizes a:hover {
	border-color: var(--brand);
	color: var(--brand);
	background: var(--brand-soft);
}

.fv-hdr .mpromo {
	background: var(--brand-soft);
	border: 1px solid oklch(0.9 0.04 55);
	border-radius: 12px;
	padding: 15px;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.fv-hdr .mpromo .ph {
	aspect-ratio: 4 / 3;
	border-radius: 9px;
	background: repeating-linear-gradient(135deg, oklch(0.93 0.03 55) 0 9px, oklch(0.91 0.035 55) 9px 18px);
	display: grid;
	place-items: center;
	font-family: var(--mono);
	font-size: 10px;
	color: var(--ink-3);
	overflow: hidden;
}

.fv-hdr .mpromo .ph img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fv-hdr .mpromo h5 {
	margin: 0;
	font-family: var(--display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.015em;
}

.fv-hdr .mpromo p {
	margin: 0;
	font-size: 12px;
	color: var(--ink-2);
	line-height: 1.5;
}

.fv-hdr .mpromo .more {
	margin-top: auto;
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 600;
	color: var(--brand);
}

/* ===== mobile bar ===== */

.fv-hdr .m-bar {
	display: none;
	align-items: center;
	gap: 11px;
	padding: 12px 14px;
	background: #fff;
	border-bottom: 1px solid var(--line);
}

.fv-hdr .m-bar .burger {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--line);
	display: grid;
	place-items: center;
	flex: none;
	color: var(--ink);
}

.fv-hdr .m-bar .burger:hover {
	border-color: var(--brand);
	color: var(--brand);
}

.fv-hdr .m-bar .burger svg {
	width: 17px;
	height: 17px;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	fill: none;
}

.fv-hdr .m-bar .lock {
	flex: 1;
	min-width: 0;
}

.fv-hdr .m-bar .mark {
	width: 40px;
	height: 40px;
	font-size: 21px;
	border-radius: 11px;
}

.fv-hdr .m-bar .word .nm {
	font-size: 22px;
}

.fv-hdr .m-bar .lock .brandmark {
	height: 38px;
}

.fv-hdr .m-bar .word .tag {
	font-size: 8px;
	letter-spacing: 0.3em;
}

.fv-hdr .m-bar .mact {
	display: flex;
	align-items: center;
	gap: 9px;
	flex: none;
}

.fv-hdr .m-bar .circ {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--line);
	display: grid;
	place-items: center;
	color: var(--ink);
}

.fv-hdr .m-bar .circ:hover {
	border-color: var(--brand);
	color: var(--brand);
}

/* Toggle reads as pressed while the search row is open. */
.fv-hdr .m-bar .circ[aria-expanded="true"] {
	border-color: var(--brand);
	background: var(--brand-soft);
	color: var(--brand);
}

.fv-hdr .m-bar .mcart {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	height: 40px;
	padding: 0 16px;
	border-radius: 999px;
	background: var(--brand);
	color: #fff;
	box-shadow: 0 4px 12px -4px rgba(255, 92, 0, 0.5);
}

.fv-hdr .m-bar .mcart .bag {
	position: relative;
	display: grid;
	place-items: center;
}

/* Same treatment as the desktop pill; see the note there. */
.fv-hdr .m-bar .mcart .bag .n {
	position: absolute;
	top: -8px;
	right: -9px;
	min-width: 15px;
	height: 15px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--ink);
	color: #fff;
	border: 2px solid #fff;
	box-shadow: none;
	font-family: var(--display);
	font-size: 9px;
	font-weight: 800;
	line-height: 1;
	display: grid;
	place-items: center;
}

.fv-hdr .m-bar .mcart .bag .i {
	width: 19px;
	height: 19px;
}

.fv-hdr .m-bar .mcart .amt {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: -0.012em;
	font-variant-numeric: tabular-nums;
}

.fv-hdr .m-srch {
	display: none;
	padding: 0 14px 12px;
	background: #fff;
	border-bottom: 1px solid var(--line);
}

.fv-hdr .m-srch .box {
	display: flex;
	align-items: center;
	gap: 9px;
	height: 42px;
	padding: 0 15px;
	border-radius: 999px;
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--ink-3);
	font-size: 13px;
	width: 100%;
}

.fv-hdr .m-srch .box input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	padding: 0;
	font: inherit;
	color: var(--ink);
	height: auto;
	box-shadow: none;
}

.fv-hdr .m-srch .box input::placeholder {
	color: var(--ink-3);
}

.fv-hdr .m-cat {
	display: none;
	gap: 0;
	overflow-x: auto;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	scrollbar-width: none;
}

.fv-hdr .m-cat::-webkit-scrollbar {
	display: none;
}

.fv-hdr .m-cat a {
	padding: 11px 15px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ink-2);
	white-space: nowrap;
	border-right: 1px solid var(--line);
}

.fv-hdr .m-cat a.hot {
	color: var(--ink);
	font-weight: 600;
	box-shadow: inset 0 -2px 0 0 var(--brand);
}

/* ===== responsive (ported from the preview's breakpoint switcher) ===== */

@media (max-width: 1279px) {
	.fv-hdr .navlist a {
		padding: 0 11px;
		font-size: 12.5px;
	}

	.fv-hdr .r-main {
		gap: 16px;
		padding: 14px 20px;
	}

	.fv-hdr .mega-in {
		grid-template-columns: 180px 1fr;
	}

	.fv-hdr .mpromo {
		display: none;
	}

	.fv-hdr .acts .act .tx {
		display: none;
	}
}

/* ══════════════════════════════════════════════════════════════
   Mobile navigation drawer

   Opened by the burger. Hidden outright above 1023px, so the markup is
   rendered once for everyone and nothing sniffs the user agent.
   ══════════════════════════════════════════════════════════════ */

.fv-hdr .m-menu,
.fv-hdr .m-menu-veil {
	display: none;
}

/* The panel is fixed to the viewport, so it escapes the sticky header's
 * stacking context — it sits above the page, not inside the bar. */
.fv-hdr .m-menu {
	position: fixed;
	inset: 0 auto 0 0;
	z-index: 120;
	width: min(86vw, 340px);
	background: var(--bg);
	border-right: 1px solid var(--line);
	box-shadow: 0 0 40px -12px rgba(13, 15, 18, 0.35);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	transform: translateX(-100%);
	transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

.fv-hdr .m-menu.is-open {
	transform: none;
}

.fv-hdr .m-menu-veil {
	position: fixed;
	inset: 0;
	z-index: 119;
	background: rgba(13, 15, 18, 0.45);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

/* Scroll lock while the panel is open. */
html.fv-menu-open,
html.fv-menu-open body {
	overflow: hidden;
}

.fv-hdr .m-menu .mm-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: 0;
	background: var(--bg);
	z-index: 2;
}

.fv-hdr .m-menu .mm-x {
	width: 34px;
	height: 34px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--line);
	background: var(--bg);
	color: var(--ink-2);
}

.fv-hdr .m-menu .mm-x:hover {
	color: var(--ink);
	border-color: var(--line-2);
}

/* ── Account row ───────────────────────────────────────────────── */

.fv-hdr .m-menu .mm-acct {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 12px;
	padding: 12px;
	border-radius: 14px;
	background: var(--brand-soft);
}

.fv-hdr .m-menu .mm-acct-ic {
	width: 38px;
	height: 38px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--brand);
	color: #fff;
}

.fv-hdr .m-menu .mm-acct-tx {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.fv-hdr .m-menu .mm-acct-tx .b {
	font-weight: 700;
	font-size: 14px;
	color: var(--ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fv-hdr .m-menu .mm-acct-tx .s {
	font-size: 11px;
	color: var(--ink-3);
}

/* ── Sections ──────────────────────────────────────────────────── */

.fv-hdr .m-menu .mm-sec {
	padding: 6px 12px 12px;
}

.fv-hdr .m-menu .mm-cap {
	margin: 6px 4px 6px;
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.fv-hdr .m-menu .mm-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The row is the grid: the link takes the space and the disclosure button
 * sits beside it, so tapping the name navigates and tapping the chevron
 * opens the children — two targets, never one guessing at intent. */
.fv-hdr .m-menu .mm-list > li {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	margin: 0;
}

.fv-hdr .m-menu .mm-list > li > a {
	grid-column: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
	border-radius: 10px;
	min-height: 44px;
}

.fv-hdr .m-menu .mm-list > li > a:hover,
.fv-hdr .m-menu .mm-list > li > a.hot {
	background: var(--surface);
	color: var(--brand-ink);
}

.fv-hdr .m-menu .mm-list .mm-sale {
	color: var(--brand);
}

.fv-hdr .m-menu .mm-more {
	grid-column: 2;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: 10px;
	color: var(--ink-3);
	background: none;
	border: 0;
}

.fv-hdr .m-menu .mm-more:hover {
	background: var(--surface);
	color: var(--ink);
}

.fv-hdr .m-menu .mm-more .i {
	transition: transform 0.18s ease;
}

.fv-hdr .m-menu .mm-more[aria-expanded="true"] .i {
	transform: rotate(180deg);
}

/* Children sit in the full row width under both columns. */
.fv-hdr .m-menu .mm-sub {
	grid-column: 1 / -1;
	list-style: none;
	margin: 0 0 4px;
	padding: 2px 0 2px 12px;
	border-left: 2px solid var(--line);
	margin-left: 10px;
}

.fv-hdr .m-menu .mm-sub a {
	display: block;
	padding: 9px 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink-2);
	border-radius: 8px;
	min-height: 38px;
}

.fv-hdr .m-menu .mm-sub a:hover,
.fv-hdr .m-menu .mm-sub a.hot {
	background: var(--surface);
	color: var(--brand-ink);
}

.fv-hdr .m-menu .mm-help > li > a {
	font-weight: 500;
	color: var(--ink-2);
}

.fv-hdr .m-menu .mm-help .i {
	color: var(--ink-3);
	flex: none;
}

/*
 * `fivany_icon()` emits `class="fv-i"` with no fill or stroke attributes, so
 * its paths render filled black by default — fine for the square grid glyph
 * it was written for, a solid blob for the outline shapes used here. The
 * header's own `.i` rule does not match that class, so the drawer states it.
 */
.fv-hdr .m-menu .fv-i {
	width: 18px;
	height: 18px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fv-hdr .m-menu .mm-acct-ic .fv-i {
	width: 20px;
	height: 20px;
}

.fv-hdr .m-menu .mm-foot {
	padding: 4px 12px 24px;
}

.fv-hdr .m-menu .mm-tel {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--bg);
}

.fv-hdr .m-menu .mm-tel-ic {
	width: 34px;
	height: 34px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 10px;
	background: var(--brand);
	color: #fff;
}

.fv-hdr .m-menu .mm-tel-tx {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.fv-hdr .m-menu .mm-tel-tx .k {
	font-family: var(--mono);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.fv-hdr .m-menu .mm-tel-tx .v {
	font-size: 14px;
	font-weight: 700;
	color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
	.fv-hdr .m-menu {
		transition: none;
	}

	.fv-hdr .m-menu .mm-more .i {
		transition: none;
	}
}

@media (max-width: 1023px) {
	.fv-hdr .only-d {
		display: none !important;
	}

	.fv-hdr .m-bar {
		display: flex;
	}

	/* Collapsed by default — the .circ toggle in the mobile bar opens it.
	 * The source shipped this row always-expanded, which cost a whole strip
	 * of vertical space above the fold on every page. */
	.fv-hdr .m-srch {
		display: none;
	}

	.fv-hdr .m-srch.is-open {
		display: block;
	}

	.fv-hdr .m-cat {
		display: flex;
	}

	.fv-hdr .m-menu {
		display: block;
	}

	.fv-hdr .m-menu-veil:not([hidden]) {
		display: block;
	}
}

@media (max-width: 479px) {
	.fv-hdr .m-bar {
		gap: 8px;
		padding: 11px 12px;
	}

	.fv-hdr .m-bar .word .nm {
		font-size: 20px;
	}

	/* Narrow phones: the burger, logo, search circle and cart pill share one
	 * row, so the logo steps down to keep them all on it. */
	.fv-hdr .m-bar .lock .brandmark {
		height: 32px;
	}

	.fv-hdr .m-bar .mcart {
		padding: 0 13px;
		gap: 9px;
	}

	.fv-hdr .m-bar .mcart .amt {
		display: none;
	}
}