/* Nelle header (normal + sticky), mega menu skin, mobile drawer and footer, from the main page
   mockup approved on 6 Oct 2026. */

/* ---------------------------------------------------------------- TikTok Style Video, in Nelle colours */
/* Read by the plugin wherever it draws: the Home video row, the Video page, the product page's
   video strip and floating box, and the product sheet. Here (loaded on every page) since 1.8.6;
   before that only Home had them. The last three (1.8.6) colour the sheet's price block the same
   as the cart's variation picker: rose price, wine "-54%" badge with white text. */
:root {
	--tsv-accent: var(--nl-rose);
	--tsv-ink: var(--hj-ink);
	--tsv-muted: var(--hj-muted);
	--tsv-soft: var(--nl-blush);
	--tsv-line: var(--hj-line-2);
	--tsv-shadow: 94, 26, 36;
	--tsv-sale: var(--nl-rose);
	--tsv-off-bg: var(--nl-wine);
	--tsv-off-fg: #fff;
}

/* ---------------------------------------------------------------- header */
/* Normal view: search | centred logo | account + bag, with the menu in its own row below. */
.nl-hdr {
	position: relative;
	z-index: 50;
	background: #fff;
	border-bottom: 1px solid var(--hj-line);
}
.nl-top {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	padding: 18px clamp(16px, 5vw, 72px) 8px;
}
.nl-l { display: flex; align-items: center; gap: 6px; }
.nl-r { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
/* Hello Commerce paints every plain <button> as a solid black button; naming the parent here
   outranks that rule, so these stay flat. */
.nl-hdr .nl-search,
.nl-hdr .nl-search:hover,
.nl-hdr .nl-search:focus {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 200px;
	height: 40px;
	padding: 0 4px 0 2px;
	border: 0;
	border-bottom: 1px solid var(--hj-line-2);
	border-radius: 0;
	background: none;
	color: var(--hj-muted);
	font-family: var(--hj-sans);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: left;
	cursor: pointer;
}
.nl-hdr .nl-search:hover { color: var(--nl-rose); border-color: var(--nl-rose); }
.nl-burger, .nl-search-m { display: none !important; }

.hj-logo { display: flex; align-items: center; }
.hj-logo a, .hj-logo .custom-logo-link { display: block; line-height: 0; }
/* WooCommerce sets img{height:auto} on shop pages with the same weight as one class + img, so the
   logo sizes name two classes. */
.hj-logo.nl-logo img, .hj-logo.nl-logo .custom-logo { height: 50px; width: auto; max-width: none; display: block; }
.hj-logo.nl-logo--sm img, .hj-logo.nl-logo--sm .custom-logo { height: 30px; }
.hj-logo-text {
	font-family: var(--hj-sans);
	font-weight: 800;
	font-size: 27px;
	line-height: 1;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--hj-accent);
}

/* the theme styles bare <button> elements; keep header icons flat */
.nl-hdr .hj-ibtn,
.nl-stick .hj-ibtn,
.hj-drawer .hj-ibtn {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0;
	min-height: 0;
	color: var(--hj-ink);
}

.hj-nav { display: flex; justify-content: center; gap: clamp(22px, 3.2vw, 48px); align-items: center; margin: 0; padding: 0; list-style: none; }
.hj-nav > li { position: relative; }
.hj-nav > li > a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 4px;
	height: 50px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hj-ink);
	white-space: nowrap;
	text-decoration: none;
}
.hj-nav > li > a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 11px;
	height: 2px;
	background: var(--hj-accent);
	transform: scaleX(0);
	transition: transform .25s;
}
.hj-nav > li:hover > a::after,
.hj-nav > .current-menu-item > a::after,
.hj-nav > .current-menu-ancestor > a::after { transform: scaleX(1); }
.hj-nav > li:hover > a,
.hj-nav > .current-menu-item > a,
.hj-nav > .current-menu-ancestor > a { color: var(--nl-rose); }
/* A menu item given the CSS class "is-sale" (Appearance > Menus) is always rose and bold. */
.hj-nav > .is-sale > a, .hj-drawer-nav > .is-sale > a { color: var(--nl-rose); font-weight: 700; }

/* Sticky view: one slim fixed row, the menu split around the small centred logo. */
.nl-stick {
	position: fixed;
	left: 0; right: 0; top: 0;
	z-index: 55;
	background: rgba(255, 255, 255, .97);
	backdrop-filter: saturate(1.2) blur(8px);
	border-bottom: 1px solid var(--hj-line);
	box-shadow: 0 6px 18px rgba(94, 26, 36, .07);
	transform: translateY(-102%);
	transition: transform .28s ease;
	visibility: hidden;
}
.nl-stick.is-on { transform: none; visibility: visible; }
.admin-bar .nl-stick { top: 32px; }
.nl-stick-in {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 28px;
	height: 58px;
	padding-inline: clamp(16px, 5vw, 72px);
}
.nl-st-l, .nl-st-r { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.nl-st-l .hj-nav, .nl-st-r .hj-nav { flex: 1; gap: clamp(16px, 2.4vw, 34px); }
.nl-stick .hj-nav > li > a { height: 58px; font-size: 12.5px; }
.nl-stick .hj-nav > li > a::after { bottom: 15px; }
@media (prefers-reduced-motion: reduce) { .nl-stick { transition: none; } }

/* Mega panels come from IGSHOP Shop Kit; these rules only give them the Nelle look. */
.hj-nav,
.hj-drawer-nav { --qav-mm-line: var(--hj-line); --qav-mm-gutter: var(--hj-gut); --qav-mm-max: var(--hj-wrap); }
.hj-nav .qav-mm > .sub-menu {
	padding-top: 30px;
	padding-bottom: 34px;
	border-bottom: 1px solid var(--hj-line);
	box-shadow: 0 18px 40px rgba(30, 26, 21, .08);
}
.hj-nav .qav-mm-heading > a,
.hj-nav .qav-mm-nolink {
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--nl-rose);
	font-weight: 700;
	text-decoration: none;
}
.hj-nav .qav-mm .sub-menu .sub-menu a {
	font-size: 15px;
	color: var(--hj-ink-2);
	padding: 4px 0;
	text-decoration: none;
}
.hj-nav .qav-mm .sub-menu .sub-menu a:hover { color: var(--hj-accent-deep); }

/* A submenu that isn't a mega panel: a plain dropdown under its item. */
.hj-nav > li:not(.qav-mm) > .sub-menu {
	position: absolute;
	top: 100%;
	left: -18px;
	z-index: 60;
	display: none;
	min-width: 210px;
	margin: 0;
	padding: 10px 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--hj-line);
	box-shadow: 0 18px 40px rgba(30, 26, 21, .08);
}
.hj-nav > li:not(.qav-mm):hover > .sub-menu,
.hj-nav > li:not(.qav-mm):focus-within > .sub-menu { display: block; }
.hj-nav > li:not(.qav-mm) .sub-menu .sub-menu { list-style: none; margin: 0; padding: 0 0 0 12px; }
.hj-nav > li:not(.qav-mm) .sub-menu a {
	display: block;
	padding: 7px 18px;
	font-size: 14px;
	color: var(--hj-ink-2);
	white-space: nowrap;
	text-decoration: none;
}
.hj-nav > li:not(.qav-mm) .sub-menu a:hover { color: var(--hj-accent-deep); }

/* icons */
.hj-ibtn {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 0;
	background: none;
	color: var(--hj-ink);
	border-radius: 50%;
	cursor: pointer;
	text-decoration: none;
}
.hj-ibtn:hover { color: var(--nl-rose); }
.hj-count[hidden] { display: none; }
.hj-count {
	position: absolute;
	top: 3px; right: 1px;
	min-width: 17px; height: 17px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--hj-accent-deep);
	color: #fff;
	font-size: 10px;
	line-height: 17px;
	text-align: center;
	font-weight: 600;
}

/* search drop-down */
.hj-search { border-top: 1px solid var(--hj-line); background: #fff; padding: 16px var(--hj-gut); }
.hj-search form { max-width: 560px; margin-inline: auto; display: flex; gap: 8px; }
.hj-search input[type="search"] { flex: 1; height: 46px; border: 1px solid var(--hj-line-2); padding: 0 14px; font-size: 15px; }
.hj-search button { background: var(--hj-accent-deep); color: #fff; border: 0; padding: 0 22px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }

/* ---------------------------------------------------------------- drawer (phones) */
.hj-drawer { position: fixed; inset: 0; z-index: 80; display: none; }
.hj-drawer.is-open { display: block; }
.hj-drawer-scrim { position: absolute; inset: 0; background: rgba(30, 26, 21, .45); }
.hj-drawer-panel {
	position: absolute;
	top: 0; bottom: 0; left: 0;
	width: min(86%, 340px);
	background: #fff;
	overflow: auto;
	padding: 18px 20px 40px;
}
.hj-drawer-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.hj-drawer-top .hj-logo-text { font-size: 21px; }
.hj-drawer-nav, .hj-drawer-nav ul { list-style: none; margin: 0; padding: 0; }
.hj-drawer-nav > li > a,
.hj-drawer-link {
	display: block;
	padding: 14px 0;
	font-size: 13px;
	letter-spacing: .16em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--hj-line);
	text-decoration: none;
}
/* the divider belongs to the whole row, so a row with Shop Kit's arrow button stays one line */
.hj-drawer-nav > li { border-bottom: 1px solid var(--hj-line); }
.hj-drawer-nav > li > a { border-bottom: 0; }
.hj-drawer-nav .qav-mm-heading > a,
.hj-drawer-nav .qav-mm-nolink {
	display: block;
	padding: 12px 0;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--hj-accent-deep);
}
.hj-drawer-nav .qav-mm > .sub-menu { padding: 0 0 8px 10px; }
.hj-drawer-nav .qav-mm-heading > .sub-menu { padding: 0 0 8px 12px; }
.hj-drawer-nav ul { padding: 0 0 10px 10px; }
.hj-drawer-nav ul a { display: block; padding: 6px 0; font-size: 14px; color: var(--hj-ink-2); text-transform: none; letter-spacing: 0; border: 0; text-decoration: none; }

/* ---------------------------------------------------------------- footer */
/* Rose panel (logo, tagline, link columns, social) beside a blush panel (the shop address),
   then a white strip with the copyright line and the payment logos. */
.nl-ftr { position: relative; color: #fff; }
.nl-ftr-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.nl-ftr-main { background: var(--nl-rose); padding: 54px clamp(20px, 6.6vw, 96px) 34px; }
.nl-ftr .nl-ftr-logo { display: block; height: 52px; width: auto; margin-bottom: 10px; }
.nl-ftr-tag { margin: 0 0 32px; font-size: 13px; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; color: #fff; }
.nl-ftr-cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	padding-bottom: 36px;
	border-bottom: 1px solid rgba(255, 255, 255, .55);
}
.nl-fcol summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	list-style: none;
	margin-bottom: 18px;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	pointer-events: none; /* desktop: always open, not a button */
}
.nl-fcol summary::-webkit-details-marker { display: none; }
.nl-fcol summary svg { display: none; }
.nl-fcol ul { list-style: none; margin: 0; padding: 0; }
.nl-fcol li { margin-bottom: 9px; }
.nl-fcol li a { font-size: 17px; font-weight: 300; color: #fff; text-decoration: none; }
.nl-fcol li a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.nl-ftr-social { display: flex; align-items: center; gap: 26px; padding-top: 26px; }
.nl-ftr-social span { font-size: 14px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.nl-ftr-social div { display: flex; gap: 26px; }
.nl-ftr-social a { display: block; line-height: 0; color: #fff; }
.nl-ftr-social a:hover { color: var(--nl-blush); }

/* Right panel: the shop address, centred in a blush panel that is as tall as the rose panel beside it. */
.nl-ftr-side {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 54px clamp(20px, 6.6vw, 96px);
	background: var(--nl-blush);
	color: var(--nl-mulberry);
}
/* Map above the address: Google's embed fills a 16:10 box with softly rounded corners. */
.nl-ftr-map { aspect-ratio: 16 / 10; margin-bottom: 26px; border-radius: 9px; overflow: hidden; background: #fff; }
.nl-ftr-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.nl-ftr-side h3 { margin: 0 0 10px; font-weight: 700; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.2; color: var(--nl-mulberry); }
.nl-ftr-address { font-style: normal; font-size: 17px; font-weight: 300; line-height: 1.6; color: var(--hj-ink-2); }

.nl-ftr-base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px 20px;
	padding: 16px clamp(20px, 5.2vw, 76px);
	background: #fff;
	color: var(--hj-ink-2);
	font-size: 12.5px;
}
.nl-ftr-base p { margin: 0; }
.nl-ftr-base a { color: var(--nl-rose); font-weight: 700; text-decoration: none; }
/* The floating WhatsApp button (brand.css) hovers over the bottom-right corner, so the last footer row keeps out of its way
   sideways (no extra height, so no white gap under the footer): desktop, the payment logos stop left of the 144px pill
   (144 + 20px edge + 16px air); phones, the copyright line gets equal room on both sides so it stays centred
   (48px circle + 14px edge + 4px air). */
@media (min-width: 901px) { body.has-nl-wa .nl-ftr-base { padding-right: 180px; } }
@media (max-width: 900px) { body.has-nl-wa .nl-ftr-base { padding-left: 66px; padding-right: 66px; } }
/* Payment logos in their own colours: no box, border or background. */
.nl-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.nl-ftr .nl-pay img { display: block; height: 22px; width: auto; }

/* ---------------------------------------------------------------- narrower desktops */
@media (max-width: 1080px) {
	.nl-hdr .nl-search, .nl-hdr .nl-search:hover, .nl-hdr .nl-search:focus { min-width: 0; border-bottom: 0; }
	.nl-search span { display: none; }
	.nl-st-l .hj-nav, .nl-st-r .hj-nav { gap: 14px; }
	.nl-stick .hj-nav > li > a { font-size: 11.5px; letter-spacing: .1em; }
}

/* ---------------------------------------------------------------- phones */
@media (max-width: 900px) {
	/* one row that sticks: menu button, centred logo, search */
	.nl-hdr { position: sticky; top: 0; }
	.nl-hdr.is-stuck { box-shadow: 0 6px 16px rgba(94, 26, 36, .09); }
	/* Product page (20 Oct 2026, Ain): the header keeps its height but pulls the page up under itself, so the
	   first photo starts right under the announcement bar. A soft white fade keeps the logo and icons readable
	   on any photo; chrome.js adds .nl-hdr--solid once the photo has scrolled past or the search box opens. */
	.nl-hdr--over {
		--nl-hdr-h: 53px;
		margin-bottom: calc(-1 * var(--nl-hdr-h));
		background: transparent;
		border-bottom-color: transparent;
		transition: background-color .25s, border-color .25s, box-shadow .25s;
	}
	.nl-hdr--over.is-stuck { box-shadow: none; }
	.nl-hdr--over::before {
		content: '';
		position: absolute;
		left: 0; right: 0; top: 0;
		height: 110px;
		background: linear-gradient(rgba(255, 255, 255, .92), rgba(255, 255, 255, .6) 48%, rgba(255, 255, 255, 0));
		pointer-events: none;
		z-index: -1;
		transition: opacity .25s;
	}
	.nl-hdr--over.nl-hdr--solid { background: #fff; border-bottom-color: var(--hj-line); }
	.nl-hdr--over.nl-hdr--solid::before { opacity: 0; }
	.nl-hdr--over.nl-hdr--solid.is-stuck { box-shadow: 0 6px 16px rgba(94, 26, 36, .09); }
	.nl-top { grid-template-columns: 44px 1fr 44px; gap: 4px; padding: 6px; }
	.nl-burger, .nl-search-m { display: inline-grid !important; }
	.nl-hdr .nl-search, .nl-acct, .nl-bag { display: none !important; }
	.nl-top .nl-logo { justify-self: center; }
	.hj-logo.nl-logo img, .hj-logo.nl-logo .custom-logo { height: 34px; }
	.hj-logo-text { font-size: 21px; }
	.nl-nav, .nl-stick { display: none; }

	.nl-ftr-grid { grid-template-columns: minmax(0, 1fr); }
	.nl-ftr-side { padding: 32px 20px 36px; }
	.nl-ftr-main { padding: 34px 20px 26px; }
	.nl-ftr .nl-ftr-logo { height: 44px; margin: 0 auto 8px; }
	.nl-ftr-tag { margin-bottom: 20px; font-size: 12px; text-align: center; }
	.nl-ftr-cols { grid-template-columns: minmax(0, 1fr); gap: 0; padding-bottom: 0; border-bottom: 0; }
	.nl-fcol { border-bottom: 1px solid rgba(255, 255, 255, .55); }
	.nl-fcol summary { pointer-events: auto; cursor: pointer; margin: 0; padding: 15px 0; }
	.nl-fcol summary svg { display: block; transition: transform .2s; }
	.nl-fcol[open] summary svg { transform: rotate(45deg); }
	.nl-fcol ul { padding-bottom: 12px; }
	.nl-ftr-social { justify-content: space-between; padding-top: 20px; }
	.nl-ftr-base { flex-direction: column; justify-content: center; text-align: center; gap: 12px; padding: 16px 16px 18px; }
	.nl-ftr-base .nl-pay { order: -1; gap: 10px 11px; justify-content: center; flex-wrap: nowrap; }
	.nl-ftr .nl-pay img { height: 17px; }
}

/* ---------------------------------------------------------------- phone bottom bars (includes/mobile-bars.php)
   Most pages: Home · Video · Cart · Orders · Profile. Product pages: Home · quantity · Add to cart.
   Shop, category and tag pages with something in the cart: cart icon · total · Checkout (.nl-cbar). */
.nl-bnav,
.nl-pbar,
.nl-cbar { display: none; }

@media (max-width: 900px) {
	body.has-nl-bnav,
	body.has-nl-pbar { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }

	/* TikTok Style Video's Video page (/video/): the viewer is full screen and sits ON TOP of this bar
	   (Ain, 20 Oct 2026), so --tsv-bottom is left unset. Its X button leads back out of the page. */

	.nl-bnav,
	.nl-pbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 70; /* under the menu drawer (80) */
		display: flex;
		align-items: center;
		background: #fff;
		border-top: 1px solid var(--hj-line);
		box-shadow: 0 -4px 16px rgba(43, 23, 25, .05);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.nl-bnav-i {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		height: 58px;
		color: var(--hj-ink);
		text-decoration: none;
	}
	.nl-bnav-i:hover,
	.nl-bnav-i:focus-visible { color: var(--nl-rose); }
	.nl-bnav-i.is-active { color: var(--nl-rose); }
	.nl-bnav-i.is-off { cursor: default; }
	.nl-bnav-ic { position: relative; display: block; line-height: 0; }
	.nl-bnav-t { font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: .02em; }
	.nl-bnav-i.is-active .nl-bnav-t { font-weight: 600; }
	.nl-bnav .hj-count, .nl-pbar .hj-count {
		position: absolute;
		top: -4px;
		right: -9px;
		min-width: 17px;
		height: 17px;
		padding: 0 4px;
		border-radius: 9px;
		background: var(--nl-rose);
		color: #fff;
		font-size: 10.5px;
		font-weight: 600;
		line-height: 17px;
		text-align: center;
	}

	/* product page bar */
	.nl-pbar { gap: 10px; height: auto; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
	.nl-pbar-home, .nl-pbar-cart {
		flex: none;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2px;
		width: 44px;
		color: var(--hj-ink);
		font-size: 10.5px;
		font-weight: 500;
		line-height: 1;
		text-decoration: none;
	}
	.nl-pbar-qty {
		flex: none;
		display: flex;
		align-items: center;
		height: 44px;
		border: 1px solid var(--hj-line-2);
		border-radius: var(--nl-btn-radius);
	}
	.nl-pbar-qty button {
		display: grid;
		place-items: center;
		width: 34px;
		height: 100%;
		padding: 0;
		border: 0;
		background: none;
		color: var(--hj-ink);
		cursor: pointer;
	}
	.nl-pbar-qty button:disabled { color: var(--hj-line-2); cursor: default; }
	.nl-pbar-qty input {
		width: 36px;
		height: 100%;
		padding: 0;
		border: 0;
		background: none;
		font-size: 16px; /* under 16px makes iPhone Safari zoom in */
		text-align: center;
		color: var(--hj-ink);
		-moz-appearance: textfield;
		appearance: textfield;
	}
	.nl-pbar-qty input::-webkit-inner-spin-button,
	.nl-pbar-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
	.nl-pbar-buy {
		flex: 1;
		min-width: 0;
		min-height: 44px;
		padding: 0 12px;
		border: 0;
		border-radius: var(--nl-btn-radius);
		background: var(--nl-btn-bg);
		color: var(--nl-btn-text);
		font-family: var(--hj-sans);
		font-size: 13px;
		font-weight: var(--nl-btn-weight);
		letter-spacing: .08em;
		text-transform: uppercase;
		cursor: pointer;
	}
	.nl-pbar-buy:hover { background: var(--nl-btn-bg-hover); }
	.nl-pbar-buy:disabled { background: var(--hj-line-2); color: var(--hj-muted); cursor: default; }

	/* the bar does the buying on phones: hide the form's own quantity and button */
	body.has-nl-pbar .hj-pdp-cart form.cart .quantity,
	body.has-nl-pbar .hj-pdp-cart form.cart .single_add_to_cart_button { display: none !important; }
	body.has-nl-pbar .hj-pdp-cart form.cart .variations_button,
	body.has-nl-pbar .hj-pdp-cart form.cart:not(.variations_form) { margin-bottom: 0; }
	.hj-pdp-cart .variations.nl-ask, .nl-pick.nl-ask { animation: nl-nudge .4s ease; }

	/* category page cart bar: the cart page's own bar (TikTok Style Checkout) with the cart icon in
	   front. TSC's cart.css only loads on the cart page, so the strip is styled again here, reading
	   the same --tsc-freeship-* colours its Settings → Icons → Free shipping bar prints on every page. */
	body:has(.nl-cbar) { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
	body:has(.nl-cbar .tsc-cart__freeship) { padding-bottom: calc(122px + env(safe-area-inset-bottom)); }
	.nl-cbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 70;
		display: flex;
		flex-direction: column;
		background: #fff;
		border-top: 1px solid var(--hj-line);
		box-shadow: 0 -4px 16px rgba(43, 23, 25, .05);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.nl-cbar-row { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 16px 0 10px; }
	.nl-cbar-cart {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		color: var(--hj-ink);
		text-decoration: none;
	}
	.nl-cbar-cart:hover,
	.nl-cbar-cart:focus-visible { color: var(--nl-rose); }
	.nl-cbar-cart .nl-bnav-ic { width: 26px; height: 26px; }
	.nl-cbar-cart svg { display: block; width: 26px; height: 26px; }
	.nl-cbar .hj-count {
		position: absolute;
		top: -8px;
		right: -12px; /* the top-right corner, clear of the bag's handle */
		box-sizing: border-box;
		min-width: 18px;
		height: 18px;
		padding: 0 4px;
		border: 1.5px solid #fff;
		border-radius: 9px;
		background: var(--nl-rose);
		color: #fff;
		font-size: 10px;
		font-weight: 600;
		line-height: 15px;
		text-align: center;
	}
	.nl-cbar-total { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
	.nl-cbar-amount { color: var(--hj-ink); font-size: 20px; font-weight: 700; line-height: 1.15; }
	.nl-cbar-saving { color: #dc2626; font-size: 14px; line-height: 1.25; }
	.nl-cbar-amount .woocommerce-Price-amount,
	.nl-cbar-saving .woocommerce-Price-amount { color: inherit; font-size: inherit; font-weight: inherit; }
	.nl-cbar .nl-cbar-checkout { flex: 0 0 auto; padding: 0 24px; }

	.nl-cbar .tsc-cart__freeship {
		padding: 9px 16px 10px;
		border-bottom: 1px solid var(--hj-line);
		background: var(--tsc-freeship-bg, #f4f4f5);
		color: var(--tsc-freeship-fg, #3f3f46);
	}
	.nl-cbar .tsc-cart__freeship-text {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 7px;
		color: inherit;
		font-size: 14px;
		font-weight: 500;
		line-height: 1.3;
	}
	.nl-cbar .tsc-cart__freeship-icon { flex: 0 0 auto; }
	.nl-cbar .tsc-cart__freeship-text .woocommerce-Price-amount { color: inherit; font-weight: 600; }
	.nl-cbar .tsc-cart__freeship-bar {
		height: 4px;
		overflow: hidden;
		border-radius: 999px;
		background: var(--tsc-freeship-track, #dedee2);
	}
	.nl-cbar .tsc-cart__freeship-fill {
		display: block;
		height: 100%;
		border-radius: 999px;
		background: var(--tsc-freeship-fg, #3f3f46);
	}
	.nl-cbar .tsc-cart__freeship.is-qualified .tsc-cart__freeship-fill { width: 100% !important; }
}

/* "Added to cart · View cart" after adding from a product page (includes/mobile-bars.php) */
.nl-toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	z-index: 75;
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 11px 16px;
	border-radius: var(--nl-btn-radius);
	background: var(--hj-ink);
	color: #fff;
	font-size: 14px;
	white-space: nowrap;
	box-shadow: 0 8px 24px rgba(43, 23, 25, .2);
	transform: translateX(-50%);
	animation: nl-toast 4.5s ease forwards;
	pointer-events: none;
}
.nl-toast a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; pointer-events: auto; }
@keyframes nl-toast {
	0% { opacity: 0; transform: translate(-50%, 10px); }
	6%, 85% { opacity: 1; transform: translate(-50%, 0); }
	100% { opacity: 0; transform: translate(-50%, 0); visibility: hidden; }
}
@media (max-width: 900px) {
	body.has-nl-pbar .nl-toast { bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* IGSHOP Shop Kit "recently bought" bubble (Store notifications): lift it 12px above whichever phone
   bar is showing. The sizes are the same as the body padding set for each bar further up. */
@media (max-width: 900px) {
	body.has-nl-bnav,
	body.has-nl-pbar { --qav-notif-bottom: 72px; }
	body:has(.nl-cbar) { --qav-notif-bottom: 76px; }
	body:has(.nl-cbar .tsc-cart__freeship) { --qav-notif-bottom: 134px; }

	/* The floating WhatsApp button (brand.css, 78px up) clears the plain cart bar, but the same bar with the
	   free-shipping strip is taller and would hide it: lift the button to the same 134px as the bubble above. */
	body:has(.nl-cbar .tsc-cart__freeship) .hj-wa { bottom: 134px; }
}
@media (max-width: 480px) {
	/* Shop Kit stretches the bubble across the whole phone; stop it short of the WhatsApp button (48px wide, 14px from the edge). */
	body.has-nl-wa .qav-notif { right: calc(76px + env(safe-area-inset-right, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
	.nl-toast { animation-name: nl-toast-fade; }
	@keyframes nl-toast-fade { 0%, 85% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
}