/* Main page (approved mockup 22 Oct 2026). Sections, top to bottom:
   1. hero + announcement bar = exactly one screen      4. full-width slider
   2. category tiles                                    5. Instagram strip
   3. "New arrivals" scrolling row
   Plus the video look (pause button, white header text over a clip) and the Elementor editor tweaks.
   Phone layout starts at 900px, the same as the rest of the theme.

   Hello Elementor caps main.site-main at 1140px, so the home <main> has no .site-main class and every
   section here runs edge to edge on its own. Sections are scoped under .nl-home, so nothing leaks. */

.nl-home { display: block; width: 100%; max-width: none; margin: 0; padding: 0; overflow-x: clip; }
.nl-home section { position: relative; }
.nl-center { text-align: center; }

/* ---------------------------------------------------------------- picture + optional clip (all sections) */
.nl-m { position: absolute; inset: 0; display: block; overflow: hidden; background: var(--hj-sand); }
.nl-m-pic, .nl-m-pic img { display: block; width: 100%; height: 100%; }
.nl-m-pic img { object-fit: cover; object-position: 50% 14%; }
.nl-m-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; opacity: 0; transition: opacity .5s ease; }
.nl-m-v.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .nl-m-v { display: none; } }

/* Pause / play. The script un-hides it only when a clip really plays. */
.nl-vm-ctl {
	position: absolute; left: 18px; bottom: 18px; z-index: 5; display: inline-grid; place-items: center;
	width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
	background: rgba(17, 17, 17, .55); color: #fff; cursor: pointer; transition: background .2s;
}
.nl-vm-ctl[hidden] { display: none; }
.nl-vm-ctl:hover, .nl-vm-ctl:focus-visible { background: rgba(17, 17, 17, .85); color: #fff; }
.nl-vm-ctl .nl-vm-play { display: none; }
.nl-vm-ctl.is-paused .nl-vm-pause { display: none; }
.nl-vm-ctl.is-paused .nl-vm-play { display: block; }

/* ---------------------------------------------------------------- 1. hero + bar = one screen */
/* The header floats over the photo (chrome.css .nl-hdr--over), so the hero starts at the very top.
   Hero height = screen - announcement bar - (on phones) TSC's 56px bottom navigation + its 1px line.
   The photo's words are part of the picture, so the button sits under them. */
.nl-hero {
	--nl-bn: 0px;
	height: calc(100vh - var(--ann-h));
	height: calc(100svh - var(--ann-h) - var(--nl-bn));
	min-height: 420px;
	overflow: hidden;
	background: var(--hj-sand);
}
.nl-hero--bare { height: 100vh; height: calc(100svh - var(--nl-bn)); }
.nl-hero-a { position: absolute; inset: 0; display: block; text-decoration: none; }
.nl-hero .nl-m-pic img, .nl-hero .nl-m-v { object-position: 12% 12%; }
.nl-hero-cta { position: absolute; left: 5.2%; top: 75%; z-index: 2; }
.nl-hero--video .nl-hero-cta { top: auto; bottom: 11%; }
.nl-hero--video .nl-vm-ctl { left: 5.2%; bottom: 3%; }

/* Header over a playing clip: white text on a dark wash (the clip may be dark anywhere). */
body.nl-clip-on .nl-hdr--over:not(.is-stuck):not(:hover):not(:focus-within)::before {
	background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
}
body.nl-clip-on .nl-hdr--over:not(.is-stuck):not(:hover):not(:focus-within) :is(a, button, .nl-bag-n) { color: #fff; }
body.nl-clip-on .nl-hdr--over:not(.is-stuck):not(:hover):not(:focus-within) .hj-logo img { filter: brightness(0) invert(1); }

/* ---------------------------------------------------------------- 2. category tiles */
/* Four columns, edge to edge, no heading, no gap to the bar above. */
.nl-ct-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; background: #fff; }
.nl-ct { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; color: #fff; text-decoration: none; background: var(--hj-sand); }
.nl-ct .nl-m-pic img { transition: transform .6s ease; }
.nl-ct:hover .nl-m-pic img { transform: scale(1.03); }
.nl-ct-t {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 70px 14px 26px;
	background: linear-gradient(180deg, rgba(17, 17, 17, 0), rgba(17, 17, 17, .55));
	font-size: clamp(15px, 1.5vw, 20px); font-weight: 400; letter-spacing: .16em; text-align: center; text-transform: uppercase;
}

/* ---------------------------------------------------------------- 3. New arrivals row */
/* The home body has no .woocommerce ancestor, so the section carries that class itself: the shop's own
   card styling (shop.css) then applies unchanged. Only the grid becomes one scrolling row. */
.nl-cy { padding: 56px 0 52px; }
.nl-cy-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 clamp(16px, 2.2vw, 32px) 20px; }
.nl-cy-head h2 { margin: 0; font-size: clamp(22px, 2.1vw, 30px); font-weight: 500; letter-spacing: .06em; line-height: 1.15; text-transform: uppercase; }
.nl-cy-arrows { display: flex; gap: 10px; }
.nl-cy-btn {
	display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--hj-line-2);
	border-radius: 50%; background: #fff; color: var(--hj-ink); cursor: pointer; transition: border-color .2s, opacity .2s;
}
.nl-cy-btn:hover, .nl-cy-btn:focus-visible { border-color: var(--hj-ink); background: #fff; color: var(--hj-ink); }
.nl-cy-btn:disabled { opacity: .35; cursor: default; border-color: var(--hj-line-2); }
.nl-cy ul.products.nl-cy-track {
	display: flex; gap: 2px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.nl-cy ul.products.nl-cy-track::-webkit-scrollbar { display: none; }
.nl-cy ul.products.nl-cy-track li.product { flex: 0 0 calc(100% / 4.4) !important; width: calc(100% / 4.4) !important; scroll-snap-align: start; }

/* ---------------------------------------------------------------- 4. slider */
/* A photo or clip with the title and button centred over it; thin bars under it. */
.nl-sld { position: relative; overflow: hidden; }
.nl-sld-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.nl-sld-track::-webkit-scrollbar { display: none; }
.nl-sl { position: relative; flex: 0 0 100%; height: min(56.25vw, 100vh); height: min(56.25vw, 100svh); scroll-snap-align: start; overflow: hidden; background: var(--hj-sand); color: var(--hj-ink); }
.nl-sl .nl-m-pic img, .nl-sl .nl-m-v { object-position: 50% 50%; }
.nl-sl-copy {
	position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); display: grid; justify-items: center;
	gap: 24px; width: max-content; max-width: 90%; text-align: center;
}
.nl-sl-title { margin: 0; font-size: clamp(30px, 4vw, 56px); font-weight: 500; line-height: 1.1; letter-spacing: .01em; color: var(--hj-ink); }
.nl-sl--light .nl-sl-title { color: #fff; }
.nl-sld-bars { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 3; display: flex; justify-content: center; gap: 8px; }
.nl-sld-bar { position: relative; width: 52px; height: 14px; padding: 0; border: 0; background: none; cursor: pointer; }
.nl-sld-bar::after { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 3px; background: rgba(17, 17, 17, .28); transition: background .25s; }
.nl-sld-bar.on::after { background: var(--hj-ink); }
.nl-sld-bar:focus-visible { outline: 2px solid var(--hj-ink); outline-offset: 2px; }
.nl-sld:has(.nl-sl--light) .nl-sld-bar::after { background: rgba(255, 255, 255, .5); }
.nl-sld:has(.nl-sl--light) .nl-sld-bar.on::after { background: #fff; }

/* ---------------------------------------------------------------- 5. Instagram strip */
.nl-igs { max-width: 1320px; margin-inline: auto; padding: 84px clamp(16px, 4vw, 56px) 90px; }
.nl-ig-sub { margin: 8px 0 0; font-size: 14px; letter-spacing: .18em; }
.nl-ig-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 30px; }
.nl-ig { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--hj-sand); }
.nl-ig img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.nl-ig:hover img { transform: scale(1.05); }
.nl-ig-i {
	position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(17, 17, 17, .38);
	opacity: 0; transition: opacity .25s;
}
.nl-ig:hover .nl-ig-i, .nl-ig:focus-visible .nl-ig-i { opacity: 1; }

/* ---------------------------------------------------------------- phones */
@media (max-width: 900px) {
	.nl-hero-cta, .nl-hero--video .nl-hero-cta { left: 50%; top: auto; bottom: 5%; transform: translateX(-50%); white-space: nowrap; }
	.nl-hero .nl-m-pic img, .nl-hero .nl-m-v { object-position: 50% 20%; }
	.nl-hero--video .nl-vm-ctl { left: 14px; bottom: 14px; }

	.nl-ct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nl-ct-t { padding: 50px 10px 18px; font-size: 15px; }

	.nl-cy { padding: 40px 0 36px; }
	.nl-cy-head { padding: 0 16px 14px; }
	.nl-cy-arrows { display: none; }
	.nl-cy ul.products.nl-cy-track li.product { flex-basis: 54% !important; width: 54% !important; }

	.nl-sl { height: auto; aspect-ratio: 2 / 3; }
	.nl-sl-copy { top: auto; bottom: 44px; transform: translateX(-50%); gap: 16px; }
	.nl-sl-title { font-size: 28px; }
	.nl-sld-bars { bottom: 12px; }

	.nl-igs { padding-top: 56px; padding-bottom: 60px; }
	.nl-ig-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
}
@media (max-width: 767px) {
	.nl-hero { --nl-bn: 57px; } /* TikTok Style Checkout's bottom navigation: 56px + 1px border (phones only) */
	/* Room under the last section for TSC's bottom navigation, so the strip is not hidden behind it. */
	.nl-igs { padding-bottom: 60px; }
}

/* ---------------------------------------------------------------- Elementor containers */
/* Elementor lays its containers out as a column flexbox. In that flexbox a grid whose rows get their height
   from aspect-ratio (the tiles, the slider) is measured with zero-width columns, so on a phone the widget
   collapsed to its 2px gap and the sections below slid up over it. A plain block container measures them
   at their real width. */
.e-con:has(> .elementor-widget[class*="elementor-widget-odda-"]) { display: block; }

/* In the editor the sections sit inside Elementor containers; keep them full width with no gutters. */
.nl-el { width: 100%; }
.elementor-editor-active .nl-hero { min-height: 520px; }