/* LC Search Overlay v4.2.0
   Tokens: teal #12cfca · ink #414b56 · accent #FFA200
   Fonts: Unna/Lora serif · Oswald labels · Lato small text

   HEADER GRAMMAR
   - Mobile (<= 1199.98px), UNCHANGED from v4.1.8:
       [burger, search] left — logo center — [location, bag] right
     JS layoutHeader() absolute-positions the icons against the measured
     logo row; CSS below is the no-JS fallback.
   - Desktop (>= 1200px), single row (v4.2.0):
       [logo] hard-left — [7 mega items] dead-centered — [pin
       search account bag] hard-right (full-width row).
     Driven entirely by the `@media (min-width: 1200px)` block near the end
     of this file: #masthead becomes a 1-cell grid where .col-full (logo +
     icon cluster) and the full-width #lc-mega bar overlap in the same row.
     The mega panels are untouched — they still drop full-width from the
     header's bottom edge. See that block for the details.

   POSITION NUDGING — the only knobs you should ever need:
   --lc-hd-edge      : inset of the outermost icons from the frame edges
   --lc-hd-gap       : gap between paired icons (burger|search, pin|bag)
   --lc-hd-frame     : content-column width the icons align to (matches
                       .col-full; JS measures the real container, this
                       is the no-JS fallback)
   --lc-so-top       : vertical fallback only; JS anchors to the logo row
   --lc-so-top-adjust: fine-tune vertical: positive = down, negative = up */

:root {
	--lc-hd-edge: 26px;       /* desktop inset from the frame edges */
	--lc-hd-gap: 4px;
	--lc-hd-frame: 1100px;    /* desktop icon column: icons clamp to this
	                             centered width even though .col-full is 1330px;
	                             same column as the overlay panel */
	--lc-so-top: 50%;         /* fallback only; JS anchors to the logo row */
	--lc-so-top-adjust: 0px;  /* fine-tune: positive = down, negative = up */
}
@media (max-width: 767px) {
	:root {
		--lc-hd-edge: 0px;   /* boxes flush with the header frame; with the
		                        header's 16px page margin + icon padding the
		                        glyphs sit ~28pt from the screen edge */
		--lc-hd-gap: -8px;   /* pairs pull together: glyph gap ~16px (tap
		                        areas overlap slightly; targets stay 40px+) */
		--lc-so-top: 31px;   /* aligned with the logo centerline */
	}
	/* Refined icon scale for the luxury read */
	.lc-so-trigger svg,
	.lc-hd-loc svg {
		width: 18px !important;
		height: 18px !important;
	}
	#masthead .site-header-cart a.cart-contents,
	ul.site-header-cart.menu a.cart-contents,
	#masthead .site-header-cart a.cart-contents:hover,
	ul.site-header-cart.menu a.cart-contents:hover,
	#masthead .site-header-cart a.cart-contents:focus,
	ul.site-header-cart.menu a.cart-contents:focus {
		background-size: 19px 19px !important;
	}
}

/* ---- Retire the old search UI everywhere ---- */
.site-header .site-search { display: none !important; }

/* ---- Retire the old text utility nav (Locations / Newsletter /
   Account): replaced by the location pin; account lives in the menu. ---- */
#masthead .secondary-navigation { display: none !important; }

/* ---- Retire Storefront's handheld footer bar (search/account/cart
   now live in the header on mobile). ---- */
.storefront-handheld-footer-bar { display: none !important; }
@media (max-width: 767px) {
	body { margin-bottom: 0 !important; } /* space Storefront reserves for the bar */
}

.site-header { position: relative; }

/* ---- Injected icons: search trigger (left) + location pin (right).
   ID-level container (#masthead) so these outrank custom/style.css,
   which loads after this sheet. Every property locked identically on
   normal/hover/focus so no template can restyle or resize them. ---- */
.lc-so-trigger,
.lc-hd-loc,
.lc-so-trigger:hover,
.lc-hd-loc:hover,
.lc-so-trigger:focus,
.lc-hd-loc:focus {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 11px !important;          /* ~44px tap targets */
	margin: 0 !important;
	cursor: pointer;
	color: #414b56 !important;
	line-height: 1 !important;
	text-decoration: none !important;
}
.lc-so-trigger:hover,
.lc-hd-loc:hover,
.lc-so-trigger:focus,
.lc-hd-loc:focus { opacity: .6; }
.lc-so-trigger svg,
.lc-hd-loc svg {
	display: block !important;
	width: 19px !important;
	height: 19px !important;
}
/* The "Search" text label is desktop-only; hidden everywhere by default
   (mobile search stays icon-only), revealed in the >=1200 block. */
#masthead .lc-so-trigger__label { display: none; }

/* No-JS fallback positions (JS refines with measured anchors).
   Desktop has no visible burger, so search sits at the left edge;
   mobile leaves room for the burger. */
#masthead .lc-so-trigger {
	position: absolute !important;
	top: var(--lc-so-top);
	left: max(var(--lc-hd-edge), calc(50% - var(--lc-hd-frame) / 2 + var(--lc-hd-edge))) !important;
	right: auto !important;
	transform: translateY(-50%) !important;
	z-index: 50;
}
#masthead .lc-hd-loc {
	position: absolute !important;
	top: var(--lc-so-top);
	right: max(calc(var(--lc-hd-edge) + 44px + var(--lc-hd-gap)), calc(50% - var(--lc-hd-frame) / 2 + var(--lc-hd-edge) + 44px + var(--lc-hd-gap))) !important;
	left: auto !important;
	transform: translateY(-50%) !important;
	z-index: 50;
}
@media (max-width: 767px) {
	#masthead .lc-so-trigger { left: calc(var(--lc-hd-edge) + 44px + var(--lc-hd-gap)) !important; }
}

/* ---- Burger: no first-paint fly-in. Mega-menu.css first paints the
   toggle at ITS fallback spot (top-right / inside the nav row), then
   mega-menu.js relocates it, then layoutHeader() places it left — a
   visible hop. Hold it invisible until placed (scoped to .lc-js so a
   JS failure can never hide the menu), and forbid transitions on the
   toggle so repositioning can never animate. The burger->X span morph
   keeps its own transition (not inherited). ---- */
.lc-js #masthead .lc-mega__drawer-toggle:not(.lc-hd-placed) { visibility: hidden !important; }
#masthead .lc-mega__drawer-toggle,
.lc-mega__drawer-toggle { transition: none !important; }

/* ---- Burger: pulled to the far left (JS positions it; this fallback
   covers first paint). Mega-menu drawer behaviour is untouched. ---- */
@media (max-width: 767px) {
	#masthead .lc-mega__drawer-toggle {
		position: absolute !important;
		left: var(--lc-hd-edge) !important;
		right: auto !important;
		top: var(--lc-so-top);
		transform: translateY(-50%) !important;
		margin: 0 !important;
		z-index: 50;
	}
}

/* ---- Cart: icon-only bag, far right (Cartier grammar). The bag is a
   CSS background so it survives WooCommerce cart-fragment refreshes,
   which replace a.cart-contents outright. Price + count hidden; to
   bring a count badge back, restyle .site-header-cart .count. ---- */
#masthead .site-header-cart,
ul.site-header-cart.menu {
	position: absolute !important;
	right: max(var(--lc-hd-edge), calc(50% - var(--lc-hd-frame) / 2 + var(--lc-hd-edge))) !important;
	left: auto !important;
	top: var(--lc-so-top);
	transform: translateY(-50%) !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	display: block !important;
	z-index: 50;
}
#masthead .site-header-cart li,
ul.site-header-cart.menu li { list-style: none !important; margin: 0 !important; }
#masthead .site-header-cart a.cart-contents,
ul.site-header-cart.menu a.cart-contents,
#masthead .site-header-cart a.cart-contents:hover,
ul.site-header-cart.menu a.cart-contents:hover,
#masthead .site-header-cart a.cart-contents:focus,
ul.site-header-cart.menu a.cart-contents:focus {
	/* ROOT CAUSE of the off-screen bag: custom/style.css (mobile block)
	   sets `.site-header-cart .cart-contents { position:absolute;
	   top:16px; left:24px }` — the legacy top-left basket. That shoved
	   the anchor 24px past the right edge of our 42px ul. The anchor
	   must flow INSIDE the ul; only the ul is positioned. */
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	float: none !important;
	display: block !important;
	width: 42px !important;
	height: 42px !important;
	padding: 0 !important;
	margin: 0 !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23414b56' stroke-width='1.5'%3E%3Cpath d='M4.4 6.5h11.2l-.8 11.3H5.2z'/%3E%3Cpath d='M6.9 6.3V5.9a3.1 3.1 0 0 1 6.2 0v.4'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 20px 20px !important;
	background-color: transparent !important;
	font-size: 0 !important;
	line-height: 0 !important;
	color: transparent !important;
	text-indent: 0 !important;
}
#masthead .site-header-cart a.cart-contents:hover,
ul.site-header-cart.menu a.cart-contents:hover,
#masthead .site-header-cart a.cart-contents:focus,
ul.site-header-cart.menu a.cart-contents:focus { opacity: .6; }
#masthead .site-header-cart a.cart-contents .amount,
ul.site-header-cart.menu a.cart-contents .amount,
#masthead .site-header-cart a.cart-contents .count,
ul.site-header-cart.menu a.cart-contents .count { display: none !important; }
#masthead .site-header-cart a.cart-contents::before,
ul.site-header-cart.menu a.cart-contents::before,
#masthead .site-header-cart a.cart-contents::after,
ul.site-header-cart.menu a.cart-contents::after { content: none !important; display: none !important; }

/* Desktop mini-cart dropdown: keep it ABSOLUTELY positioned so it never
   inflates the bag's width in the icon cluster (the cart <ul> must stay
   icon-width in flow). Storefront already sets position:absolute; we make
   it explicit + own its width and pin it to the bag's right edge. */
@media (min-width: 768px) {
	#masthead .site-header-cart .widget_shopping_cart {
		position: absolute !important;
		width: 320px !important;
		left: auto !important;
		right: 0 !important;
	}
}

/* Guard against logo/icon collisions on very narrow phones. */
@media (max-width: 420px) {
	#masthead .lc-logo img { max-width: 46vw; height: auto; }
}

/* ---- Animation kill-switch ----
   Global theme rules (transition: all on links/buttons/inputs, etc.)
   can leak into the overlay. Nothing in here animates, ever. */
.lc-so,
.lc-so *,
.lc-so *::before,
.lc-so *::after,
.lc-so-trigger,
.lc-so-trigger *,
.lc-hd-loc,
.lc-hd-loc *,
#masthead .site-header-cart,
#masthead .site-header-cart a.cart-contents {
	transition: none !important;
	animation: none !important;
}

/* ---- Overlay shell: starts BELOW the header (top set by JS) ---- */
.lc-so[hidden] { display: none; }
.lc-so {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;                    /* JS sets inline top = header bottom */
	z-index: 99990;            /* below WP admin bar (99999) */
}
.lc-so__scrim {
	position: absolute;
	inset: 0;
	background: rgba(20, 30, 35, .45);
}

.lc-so__panel {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: #fff;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

/* ---- Sticky input bar: input + close never scroll away ---- */
/* The bar uses the SAME centered 1100px container as the body below,
   so the input's underline aligns exactly with the content columns. */
.lc-so__bar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 1100px;
	width: 100%;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 22px 4vw 0;
	background: #fff;
}
.lc-so__form {
	flex: 1 1 auto !important;
	display: flex !important;
	align-items: center;
	gap: 14px;
	border-bottom: 1px solid #414b56;
	padding-bottom: 10px;
	max-width: none !important;
	width: auto !important;
	margin: 0 !important;
}
.lc-so__glass-btn {
	flex: 0 0 auto;
	background: none;
	border: 0;
	padding: 8px;
	margin: 0 0 0 -8px;
	cursor: pointer;
	color: #414b56;
	line-height: 0;
	display: flex;
	align-items: center;
}
.lc-so__glass-btn:hover,
.lc-so__glass-btn:focus { background: none; color: #12cfca; }
.lc-so__glass { display: block; }
/* ID selector + !important on every box/typography property:
   Storefront styles input[type=search] and its :focus state, which
   outranks a class. Locking both states identically is what stops
   the field from resizing (the "jump") on focus. */
#lc-so-input,
#lc-so-input:focus,
#lc-so-input:hover {
	-webkit-appearance: none !important;
	appearance: none !important;
	border-radius: 0 !important;
	flex: 1 1 auto;
	min-width: 0;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	padding: 4px 0 !important;
	margin: 0 !important;
	font-family: 'Lora', serif !important;
	font-size: clamp(19px, 2.6vw, 26px) !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	letter-spacing: normal !important;
	color: #414b56 !important;
	transition: none !important;
}
#lc-so-input::placeholder { color: #9aa4ad; }
#lc-so-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.lc-so__clear {
	flex: 0 0 auto;
	background: none;
	border: 0;
	padding: 8px;
	cursor: pointer;
	font-family: 'Lato', sans-serif;
	font-size: 13px;
	text-decoration: underline;
	color: #6d6d6d;
}
.lc-so__clear:hover, .lc-so__clear:focus { background: none; color: #414b56; }
.lc-so__close {
	flex: 0 0 auto;
	background: none;
	border: 0;
	padding: 14px;             /* 44px tap target */
	cursor: pointer;
	color: #414b56;
	line-height: 0;
}
.lc-so__close:hover, .lc-so__close:focus { background: none; color: #12cfca; }

/* ---- Scrollable body ---- */
.lc-so__body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 26px 4vw 40px;
	display: block;
	max-width: 1100px;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
}
.lc-so__heading {
	font-family: 'Unna', serif;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #414b56;
	margin: 0 0 16px;
}
/* Popular chips (Tiffany-style pills) */
.lc-so__chips-wrap { margin: 0 0 30px; }
.lc-so.has-term .lc-so__chips-wrap { display: none; }
.lc-so__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.lc-so__chip,
.lc-so__chip:hover,
.lc-so__chip:focus {
	display: inline-block;
	background: #fff !important;
	border: 1px solid #d7dcdf !important;
	border-radius: 0;
	padding: 10px 18px !important;
	margin: 0;
	cursor: pointer;
	font-family: 'Lora', serif !important;
	font-size: 15px !important;
	color: #414b56 !important;
	line-height: 1 !important;
}
.lc-so__chip:hover,
.lc-so__chip:focus { border-color: #12cfca !important; color: #12cfca !important; }

.lc-so__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	min-height: 100px;
}
.lc-so__card { text-decoration: none; display: block; }
.lc-so:not(.has-term) .lc-so__card-text { text-align: center; }
.lc-so__card img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: #f6f6f6;
	display: block;
	margin-bottom: 10px;
}
.lc-so__card-title {
	display: block;
	font-family: 'Lora', serif;
	font-size: 15px;
	line-height: 1.35;
	color: #414b56;
}
.lc-so__card:hover .lc-so__card-title { color: #12cfca; }
.lc-so__card-price {
	display: block;
	font-family: 'Lato', sans-serif;
	font-size: 13px;
	color: #6d6d6d;
	margin-top: 4px;
}
.lc-so__all { margin: 22px 0 0; grid-column: 1 / -1; }
.lc-so__all a {
	font-family: 'Unna', serif;
	font-size: 13px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #12cfca;
	text-decoration: none;
}
.lc-so__all a:hover { text-decoration: underline; }
.lc-so__empty {
	grid-column: 1 / -1;
	font-family: 'Lora', serif;
	color: #6d6d6d;
	align-self: center;
	margin: 0;
}

.lc-so__dym {
	grid-column: 1 / -1;
	margin: 0 0 14px;
	font-family: 'Lora', serif;
	font-size: 15px;
	color: #6d6d6d;
}
.lc-so__dym a { color: #12cfca; text-decoration: underline; cursor: pointer; }

body.lc-so-locked { overflow: hidden; }

/* ---- Tablet ---- */
@media (max-width: 900px) and (min-width: 768px) {
	.lc-so__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- MOBILE: simple search box + suggestion rows only ---- */
@media (max-width: 767px) {
	.lc-so__panel { height: auto; max-height: 100%; }
	.lc-so__bar { padding: 14px 16px 0; }
	.lc-so__form { gap: 10px; }
	.lc-so__glass-btn { padding: 10px 8px; margin-left: -8px; position: relative; top: 1px; }
	.lc-so__glass { width: 18px; height: 18px; }
	#lc-so-input, #lc-so-input:focus, #lc-so-input:hover {
		font-size: 18px !important;
		line-height: 1.3 !important;
	}
	.lc-so__body {
		display: block;
		padding: 18px 16px 24px;
	}
	.lc-so:not(.has-term) .lc-so__results-heading { display: none; }
	.lc-so__chips-wrap { margin-bottom: 6px; }
	.lc-so__chip, .lc-so__chip:hover, .lc-so__chip:focus { padding: 8px 14px !important; font-size: 14px !important; }
	.lc-so:not(.has-term) .lc-so__grid { display: none; } /* hide popular on mobile */

	/* Suggestions become compact rows — capped at 3 on mobile */
	.lc-so.has-term .lc-so__grid {
		display: block;
	}
	.lc-so.has-term .lc-so__card:nth-child(n+4) { display: none; }
	.lc-so.has-term .lc-so__card {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 8px 0;
		border-bottom: 1px solid #eee;
	}
	.lc-so.has-term .lc-so__card img {
		width: 56px;
		height: 56px;
		flex: 0 0 56px;
		margin: 0;
	}
	.lc-so.has-term .lc-so__card-text { min-width: 0; }
	.lc-so.has-term .lc-so__card-title { font-size: 15px; }
}

/* ==== Search results page ==== */
.lc-results-head { margin: 0 0 18px; }
.lc-results-head__count {
	font-family: 'Lora', serif;
	font-size: 16px;
	color: #6d6d6d;
	margin: 0;
}
.lc-results-head__dym,
.lc-zero__dym {
	font-family: 'Lora', serif;
	font-size: 16px;
	color: #414b56;
	margin: 6px 0 0;
}
.lc-results-head__dym a,
.lc-zero__dym a { color: #12cfca; text-decoration: underline; }
.lc-zero { margin: 10px 0 30px; }
.lc-zero__heading {
	font-family: 'Unna', serif;
	font-size: 14px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #414b56;
	margin: 26px 0 14px;
}
.lc-zero__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
@media (max-width: 767px) {
	.lc-zero__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   DESKTOP HEADER (>= 1200px) — row       v4.2.0
   ==========================================================================
   Approach (no PHP / no DOM re-hook — robust against theme internals):
   #masthead becomes a single-cell grid. Its two children — .col-full
   (logo left + icon cluster right) and #lc-mega (the full-width nav) —
   are placed in the SAME cell so they overlap:

       [logo] ................ [7 mega items centered] ........... [icons]
       \____________________ .col-full ____________________/
       \______________________ #lc-mega (transparent, centered) __________/

   Why this is safe:
   - #lc-mega keeps its full width, so its panels still compute
     left:50% / translateX(-50%) about the viewport centre and drop
     full-width exactly as before. The mega module + panels are untouched.
   - #lc-mega is left STATIC, so the panels' offset parent is #masthead:
     top:100% resolves to the true header bottom regardless of how the
     theme distributes header padding.
   - #lc-mega paints above .col-full (later sibling) but is
     pointer-events:none except for the bar + panels, so the logo and the
     icon cluster underneath stay fully clickable.
   The account icon is desktop-only (hidden < 1200, below). */

@media (min-width: 1200px) {

	/* Header = one overlapping row, FULL WIDTH. custom/style.css caps
	   .site-header at max-width:1330px; margin:auto — lift it so the row
	   (and the logo/icons at its edges) stretches edge-to-edge. */
	#masthead {
		display: grid;
		grid-template-columns: 1fr;
		align-items: center;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	#masthead > .col-full,
	#masthead > #lc-mega {
		grid-row: 1;
		grid-column: 1;
	}

	/* .col-full: FULL-WIDTH header — logo hard-left at the viewport edge,
	   icon cluster hard-right at the edge, nav centered between. max-width
	   removed so the row stretches edge-to-edge; padding gives the edge
	   breathing room (client-tuned: 5 top / 14 bottom / 22 sides). */
	#masthead > .col-full {
		box-sizing: border-box !important;
		width: 100%;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		display: flex;
		align-items: center;
		justify-content: space-between;
		column-gap: 24px;
		/* Full-width row, but the logo/icons are brought IN from the edge so
		   they don't feel orphaned in the corners — inset scales with the
		   viewport (small on a laptop so the bar still fits at 1200, well
		   into the middle on a large monitor). Vertical padding tuned for an
		   ~82px header. */
		padding: 9px clamp(26px, calc(14vw - 150px), 160px) 11px !important;
	}
	/* Logo size scales with the viewport: reaches the target 210px by
	   ~1300px (where there's room), eases down to 165px at the 1200 cutoff
	   so the full-label bar still clears. The theme adds padding-top:0.8em +
	   margin-bottom:1.2em to the logo img (~32px of vertical bloat that made
	   the header too tall) — zero it so the header is short + the logo
	   centers cleanly in the row. */
	#masthead .lc-logo img {
		max-width: clamp(165px, calc(40vw - 315px), 195px) !important;
		height: auto !important;
		padding-top: 0 !important;
		margin-bottom: 0 !important;
	}
	/* Storefront's clearfix pseudo-elements on .col-full would otherwise
	   count as flex items and push the logo + cluster toward the centre
	   (space-between then distributes across 4 items, not 2). Remove them. */
	#masthead > .col-full::before,
	#masthead > .col-full::after {
		content: none !important;
		display: none !important;
	}
	/* Logo hard-left. custom/style.css makes .lc-logo a full-width (80em),
	   auto-centered block with the image centered inside (.lc-logo /
	   .site-logo-link / img all width:100% + margin:auto) — as a flex item
	   that fills the row and lands the logo dead-centre over the nav. Shrink
	   the whole lockup to its content and left-align it. */
	#masthead .lc-logo {
		flex: 0 0 auto;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		text-align: left !important;
	}
	#masthead .lc-logo .site-logo-link,
	#masthead .lc-logo .site-logo-anchor {
		display: inline-block !important;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		float: none !important;
	}
	#masthead .lc-logo img { margin: 0 !important; }

	/* Centered nav overlaps the row. Shed the 100vw full-bleed + the
	   full-width row borders; stretch to header height so the bar sits on
	   the logo's centerline; stay STATIC so panels anchor to #masthead. */
	#masthead #lc-mega {
		width: auto !important;
		margin: 0 !important;
		position: static;
		align-self: stretch;
		display: flex;
		align-items: center;
		justify-content: center;
		pointer-events: none;   /* empty sides pass clicks to logo/icons */
	}
	#masthead #lc-mega > .lc-mega__bar,
	#masthead #lc-mega .lc-mega__panel { pointer-events: auto; }
	#masthead #lc-mega .lc-mega__bar {
		border-top: 0;
		border-bottom: 0;
		/* gap scales: tight at 1200 (fit), roomy on wider screens */
		column-gap: clamp(2.4px, calc(1.87vw - 20px), 8px);
	}
	/* Item spacing scales with the viewport (via --lc-navpad, shared with
	   the hover underline inset): tight at the 1200 cutoff so the bar
	   clears, roomy on wider screens. Carets gone, Unna size unchanged. */
	#masthead #lc-mega .lc-mega__top-link {
		--lc-navpad: clamp(5.8px, calc(1.55vw - 12.8px), 11px);
		padding-left: var(--lc-navpad);
		padding-right: var(--lc-navpad);
	}

	/* ---- No dropdown carets on desktop. Hide the arrow glyph and collapse
	   the toggle button to zero width (kept in the DOM + focusable so
	   keyboard users can still open a panel; hover opens it for mouse). ---- */
	#masthead .lc-mega__caret { display: none !important; }
	#masthead .lc-mega__open {
		width: 0 !important;
		min-width: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
		overflow: hidden;
	}

	/* ---- Underline on hover / focus / open: a clean ink underline that
	   spans the label (inset matched to the new link padding). ---- */
	#masthead #lc-mega .lc-mega__top-link::after {
		left: var(--lc-navpad);
		right: var(--lc-navpad);
		bottom: 0.15rem;
		height: 1px;
		background: #12cfca;   /* brand teal, matches the hover text colour */
	}
	#masthead #lc-mega .lc-mega__top-link:hover::after,
	#masthead #lc-mega .lc-mega__top-link:focus-visible::after,
	#masthead #lc-mega .lc-mega__item.is-open > .lc-mega__top > .lc-mega__top-link::after {
		transform: scaleX(1);
	}

	/* Icon cluster: pin · search · account · bag.
	   Tightened (34px, no gap) so the dead-centered bar clears it right
	   down to the 1200 hamburger cutoff. Desktop is mouse-driven, so 34px
	   targets are comfortable; mobile keeps its 44px targets (untouched,
	   below 1200). */
	#masthead .lc-hd-icons {
		display: flex !important;
		align-items: center;
		gap: 0;
		flex: 0 0 auto;
	}
	/* :hover/:focus included so the account icon can't jump to the 11px
	   base padding on hover (the account block below is #masthead-prefixed
	   on :hover and would otherwise tie + win on source order — the pin's
	   base :hover rule isn't ID-prefixed, which is why only account shifted). */
	#masthead .lc-hd-icons .lc-hd-loc,
	#masthead .lc-hd-icons .lc-hd-loc:hover,
	#masthead .lc-hd-icons .lc-hd-loc:focus,
	#masthead .lc-hd-icons .lc-hd-acct,
	#masthead .lc-hd-icons .lc-hd-acct:hover,
	#masthead .lc-hd-icons .lc-hd-acct:focus { padding: 7px !important; }
	#masthead .lc-hd-icons .site-header-cart a.cart-contents,
	#masthead .lc-hd-icons ul.site-header-cart.menu a.cart-contents {
		width: 34px !important;
		height: 34px !important;
	}

	/* "Search" label beside the magnifying glass (desktop only). */
	#masthead .lc-hd-icons .lc-so-trigger {
		gap: 7px;
		padding: 7px 9px !important;
	}
	#masthead .lc-so-trigger__label {
		display: inline-block;
		font-family: 'Unna', Georgia, serif;
		font-size: 15px;
		line-height: 1;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		color: #414b56;
		white-space: nowrap;
	}

	/* Desktop: icons FLOW in the cluster — neutralise the mobile absolute
	   positioning base rules (search/pin/cart) that live earlier in this
	   file. The cart <ul> stays position:relative so its hover mini-cart
	   dropdown still anchors to the bag. */
	#masthead .lc-so-trigger,
	#masthead .lc-hd-loc,
	#masthead .lc-hd-acct {
		position: static !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
		z-index: auto;
	}
	#masthead .site-header-cart,
	ul.site-header-cart.menu {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
		display: flex !important;
		align-items: center;
		z-index: auto;
	}
}

/* Account icon: same treatment as search / pin (header ink, locked on
   hover/focus). Only shown >= 1200 (see below). */
#masthead .lc-hd-acct,
#masthead .lc-hd-acct:hover,
#masthead .lc-hd-acct:focus {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 11px !important;
	margin: 0 !important;
	cursor: pointer;
	color: #414b56 !important;
	line-height: 1 !important;
	text-decoration: none !important;
}
#masthead .lc-hd-acct:hover,
#masthead .lc-hd-acct:focus { opacity: .6; }
#masthead .lc-hd-acct svg {
	display: block !important;
	width: 19px !important;
	height: 19px !important;
}
#masthead .lc-hd-acct { transition: none !important; animation: none !important; }

/* MOBILE / TABLET (<= 1199.98px): account never shows; the icon cluster is
   display:contents so it has no layout box — pin/search/bag are absolute-
   positioned individually by layoutHeader() exactly as in v4.1.8, so the
   shipped mobile header is untouched. */
@media (max-width: 1199.98px) {
	#masthead .lc-hd-acct { display: none !important; }
	#masthead .lc-hd-icons { display: contents; }
}

/* TABLET / HAMBURGER (768–1199.98px): apply the same logo-bloat removal as
   desktop so the header stays ~82px when the layout collapses to the
   hamburger. The theme adds padding-top:0.8em + margin-bottom:1.2em to the
   logo img and a 1em bottom margin on .lc-logo, which ballooned the header
   to ~91px here. Phone (< 768px) keeps the shipped mobile header. */
@media (min-width: 768px) and (max-width: 1199.98px) {
	#masthead .lc-logo { margin-bottom: 0 !important; }
	#masthead .lc-logo img {
		padding-top: 0 !important;
		margin-bottom: 0 !important;
		height: auto !important;
	}
	#masthead > .col-full {
		padding-top: 12px !important;
		padding-bottom: 13px !important;
	}
}