/* Nature's Lines — Avaleht. Cards + .nl-grid come from catalog.css (also enqueued). */

.nl-front { --nl-gutter: clamp(18px, 4vw, 40px); }
.nl-home { color: var(--nl-ink, #222222); font-family: var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif); }

.nl-section { max-width: 1200px; margin: 0 auto; padding: clamp(26px, 5vw, 48px) var(--nl-gutter); }
.nl-section__title { font-family: var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif); font-weight: 300; font-size: clamp(19px, 2.4vw, 24px); margin: 0 0 16px; }
.nl-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.nl-section__head .nl-section__title { margin: 0; }
.nl-section__all { color: var(--nl-gold, #1c1c1c); text-decoration: none; font-size: 13px; font-weight: 600; white-space: nowrap; }

.nl-btn { display: inline-block; padding: 13px 26px; border-radius:  0; text-decoration: none; font-size: 14px; font-weight: 700; } /* P11 micro: 12 -> 13 (Poodi) */
.nl-btn--gold { background: var(--nl-gold, #1c1c1c); color: #fff; }

/* ---- hero (landing wave 1, reworked by p44): warm band with the head block (eyebrow,
   h1, sub) and a freely scrolled slide lane under it. Per Natureslines.dc.html
   L120-137 (mobile) / L1536-1555 (tablet) / L864-882 (desktop), minus the carousel
   controls the client asked to drop. The F3 ribbon and the gold Poodi button are gone;
   the ribbon CSS is kept further down for the retired nl_hero_strip(). ---- */
.nl-hero {
	/* L1b, п.82 (решение владельца Р13): заливка снята, секция становится белой и
	   берёт фон страницы. Было: background: var(--nl-warm, #faf7f2).

	   Токен --nl-warm НЕ трогаем: после L1 на нём сидит подсветка выбранной плитки
	   размера и чипа гаммы на карточке товара, и он же красит другие поверхности.
	   Правка тут и только тут, одним правилом.

	   Нижняя линия ОСТАВЛЕНА намеренно и теперь работает одна: пока секция была
	   заливкой, шов с соседней держали два признака, цвет и линия, а теперь только
	   линия. Паддинги не тронуты: 22 0 26 на мобильном, 36 0 30 от 768, 44 0 34 от
	   1024. */
	border-bottom: 1px solid var(--nl-line, #e6e3dc);
	padding: 22px 0 26px;
	overflow: hidden;
}
.nl-hero__head { max-width: 1200px; margin: 0 auto 18px; padding: 0 var(--nl-gutter); }
.nl-hero__eyebrow {
	margin: 0 0 10px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--nl-mute, #6e6e6e);
}
.nl-hero__title {
	font-family: var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif);
	font-weight: 300; font-size: 27px; line-height: 1.16; margin: 0 0 8px;
}
/* P1: под H1 встал настоящий заголовок второго уровня с поисковой строкой, а место
   бывшего подзаголовка занял лид абзацем. H2 обязан читаться подзаголовком и не спорить
   с H1: кегль втрое меньше заголовка, начертание плотное, цвет ink. Лид унаследовал
   оформление прежнего .nl-hero__sub один в один. */
.nl-hero__h2 {
	font-family: var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif);
	font-weight: 600; font-size: 15px; line-height: 1.35; letter-spacing: 0;
	color: var(--nl-ink, #222222); margin: 0 0 10px;
}
.nl-hero__lead { color: var(--nl-mute, #6e6e6e); font-size: 13.5px; line-height: 1.5; margin: 0 0 16px; }
.nl-hero__sub { color: var(--nl-mute, #6e6e6e); font-size: 13.5px; line-height: 1.5; margin: 0 0 16px; }
/* L1, п.86: абзац про фото перед отправкой. Оформление лида один в один, кегль на
   полступени тише: абзац длиннее лида и не должен спорить с ним за первый взгляд.
   Ширину колонки не задаёт своим правилом, её даёт .nl-hero__head, поэтому строка
   встаёт ровно по лиду на всех трёх ширинах (у лида есть свой max-width в
   медиазапросах, он повторён ниже теми же числами). */
.nl-hero__note { color: var(--nl-mute, #6e6e6e); font-size: 13px; line-height: 1.55; margin: 0 0 16px; }

/* ---- hero lane (p44): a row of 3:4 slides on NATIVE horizontal scroll, mechanics
   copied from the gift lane and .nl-occasions__track. No JS, no autoplay, no arrows
   and no dots: the row is driven by the user (wheel, trackpad, touch, keyboard) and
   every slide stays a plain link to its product, with or without JS.

   Peek comes out of the fixed slide widths against the gutter-padded scrollport, so
   the next slide is always cut by the right edge and the row reads as scrollable
   without a control. Snap is PROXIMITY, not mandatory: the scroll has to stay free,
   the snap only tidies up an almost-aligned stop. scroll-padding-left repeats the
   gutter, otherwise a snap would pull the first slide under the left inset. ---- */
.nl-hero__carousel { max-width: 1200px; margin: 0 auto; }
.nl-hero__viewport {
	overflow-x: auto; overflow-y: hidden;
	padding: 2px var(--nl-gutter) 14px;
	scroll-snap-type: x proximity; scroll-padding-left: var(--nl-gutter);
	overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.nl-hero__viewport::-webkit-scrollbar { height: 6px; }
.nl-hero__viewport::-webkit-scrollbar-thumb { background: var(--nl-line, #e6e3dc); border-radius:  0; }
.nl-hero__track { display: flex; gap: 14px; }

/* position:relative here is LOAD-BEARING, not cosmetic. Each slide ends with a
   .nl-visually-hidden CTA span, and that span is position:absolute. An absolutely
   positioned box is only clipped by an overflow ancestor that is also its containing
   block, and both .nl-hero and the scrollport are position:static — so the spans of the
   off-screen slides landed ~940px out and stretched the whole PAGE sideways. The old
   carousel hid this by accident: its track carried a transform, which made the track
   their containing block. With the transform gone, the slide has to be it. */
.nl-hero-slide { position: relative; flex: 0 0 216px; scroll-snap-align: start; text-decoration: none; color: inherit; }
/* the arrows and dots carried the only focus ring in the hero; the slides inherit it */
.nl-hero-slide:focus-visible { outline: 2px solid var(--nl-gold, #1c1c1c); outline-offset: 3px; border-radius:  0; }
.nl-hero-slide__media {
	display: block; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; border-radius:  0;
	background: var(--nl-surface, #f7f5f1);
}
.nl-hero-slide__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nl-hero-slide__name {
	display: block; margin-top: 11px;
	font-family: var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif);
	font-size: 17px; line-height: 1.25; color: var(--nl-ink, #222222);
}
.nl-hero-slide__price { display: block; margin-top: 3px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nl-hero-slide__desc {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	margin-top: 7px; font-size: 12px; line-height: 1.5; color: var(--nl-mute, #6e6e6e);
}

/* p44: .nl-hero__nav / __arrow / __dots / __dot removed together with the carousel. */

/* ---- LEGACY (retired with landing wave 1): the F3 ribbon markup of nl_hero_strip().
   The function is kept in inc/home.php as a rollback path, so its CSS stays too. ---- */
/* full-bleed ribbon (negative gutter margin), horizontal scroll + snap */
.nl-hero__strip {
	display: flex; gap: 12px; overflow-x: auto;
	margin: 0 calc(-1 * var(--nl-gutter)); padding: 2px var(--nl-gutter) 14px;
	scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.nl-hero__strip::-webkit-scrollbar { height: 6px; }
.nl-hero__strip::-webkit-scrollbar-thumb { background: var(--nl-line, #e6e3dc); border-radius:  0; }
.nl-hero-card { flex: 0 0 auto; width: 150px; scroll-snap-align: start; text-decoration: none; color: inherit; }
.nl-hero-card__media {
	display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius:  0;
	background: var(--nl-surface, #f7f5f1); border: 1px solid var(--nl-line, #e6e3dc);
}
.nl-hero-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nl-hero-card__title {
	display: block; margin-top: 9px;
	font-family: var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif);
	font-size: 14px; line-height: 1.3; color: var(--nl-ink, #222222);
}
/* hero price is MUTE (not gold) — override the catalog gold value colour in this scope */
.nl-hero-card__price { display: block; margin-top: 2px; font-size: 12px; color: var(--nl-mute, #6e6e6e); }
.nl-hero-card__price .nl-price__val { color: var(--nl-mute, #6e6e6e); font-weight: 400; }

/* the head owns the gap to the carousel, so the sub's own bottom margin is dropped */
.nl-hero__head > :last-child { margin-bottom: 0; }

/* ---------- M2: showcase kicker + CTA around the hero lane (etalon 2.1) ----------
   The lane already IS the five signature bouquets, so 2.1 only asks for a section label
   above it and one button below, not a second grid of the same products. */
.nl-hero__kicker {
	max-width: 1200px; margin: 0 auto 12px; padding: 0 var(--nl-gutter);
	font-weight: 700; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--nl-mute, #6e6e6e);
}
.nl-hero__cta {
	max-width: 1200px; margin: 20px auto 0; padding: 0 var(--nl-gutter);
	display: flex;
}
.nl-btn--outline {
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--nl-ink, #222222); background: none; border-radius: 0;
	font-family: var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif);
	font-weight: 700; font-size: 13px; color: var(--nl-ink, #222222); text-decoration: none;
	padding: 14px 30px;
	/* mobile: full width, but the lane must stay on the first screen, so the button keeps
	   its own margin small and never grows taller than one line */
	width: 100%;
}
.nl-btn--outline:hover { background: var(--nl-ink, #222222); color: #fff; }
@media (min-width: 768px) {
	.nl-hero__kicker { font-size: 11.5px; margin-bottom: 14px; }
	.nl-btn--outline { width: auto; }
}

@media (min-width: 768px) {
	.nl-hero { padding: 36px 0 30px; }
	.nl-hero__head { margin-bottom: 24px; }
	.nl-hero__eyebrow { margin-bottom: 12px; font-size: 11px; letter-spacing: .16em; }
	.nl-hero__title { font-size: 34px; line-height: 1.12; margin-bottom: 12px; max-width: 620px; }
	.nl-hero__h2 { font-size: 17px; margin-bottom: 12px; max-width: 620px; }
	.nl-hero__lead { font-size: 14px; line-height: 1.6; margin-bottom: 24px; max-width: 560px; }
	.nl-hero__sub { font-size: 14px; line-height: 1.6; margin-bottom: 24px; max-width: 560px; }
	.nl-hero__note { font-size: 13.5px; line-height: 1.6; margin-bottom: 24px; max-width: 560px; } /* L1 */

	.nl-hero__track { gap: 20px; }
	.nl-hero-slide { flex-basis: 248px; }
	.nl-hero-slide__media { border-radius:  0; }
	.nl-hero-slide__name { font-size: 19px; margin-top: 13px; }
	.nl-hero-slide__price { font-size: 15px; margin-top: 4px; }
	.nl-hero-slide__desc { font-size: 12.5px; line-height: 1.55; margin-top: 8px; }
	/* p44: the .55 dimming of the non-active slides is gone — on a free scroll lane
	   there is no active slide, every card reads at full strength. */

	/* legacy ribbon */
	.nl-hero__strip { gap: 16px; }
	.nl-hero-card { width: 210px; }
	.nl-hero-card__media { border-radius:  0; }
	.nl-hero-card__title { font-size: 16px; margin-top: 12px; }
	.nl-hero-card__price { font-size: 13px; margin-top: 3px; }
}
@media (min-width: 1024px) {
	.nl-hero { padding: 44px 0 34px; }
	.nl-hero__head { margin-bottom: 28px; }
	.nl-hero__eyebrow { margin-bottom: 14px; }
	.nl-hero__title { font-size: 44px; line-height: 1.1; margin-bottom: 16px; max-width: 760px; }
	.nl-hero__h2 { font-size: 19px; margin-bottom: 14px; max-width: 700px; }
	.nl-hero__lead { font-size: 15px; margin-bottom: 28px; max-width: 620px; }
	.nl-hero__sub { font-size: 15px; margin-bottom: 28px; max-width: 620px; }
	.nl-hero__note { font-size: 14px; margin-bottom: 28px; max-width: 620px; } /* L1 */

	.nl-hero__track { gap: 24px; }
	.nl-hero-slide { flex-basis: 320px; }
	.nl-hero-slide__media { border-radius:  0; }
	.nl-hero-slide__name { font-size: 22px; margin-top: 16px; }
	.nl-hero-slide__price { font-size: 16px; margin-top: 5px; }
	.nl-hero-slide__desc { font-size: 13.5px; line-height: 1.55; margin-top: 9px; }

	/* legacy ribbon */
	.nl-hero__strip { gap: 20px; }
	.nl-hero-card { width: 240px; }
	.nl-hero-card__media { border-radius:  0; }
	.nl-hero-card__title { font-size: 18px; margin-top: 14px; }
	.nl-hero-card__price { font-size: 14px; margin-top: 4px; }
}

/* F1: legacy .nl-pills rules removed — the live occasions carousel uses the
   .nl-occasions-* classes (inc/occasions.php), styled in assets/css/nl-occasions.css. */

/* ---- home product strips reuse .nl-grid from catalog.css (2/3/3) ---- */
.nl-home-grid { margin-top: 4px; }

/* ---- landing wave 3: SEASON band. Blush surface with a hairline above and below, a
   accent pill badge, light title, the "all of the season" link on the right and four
   cards. Per Natureslines.dc.html L211..229 (mobile) / L1634..1654 (tablet) /
   L962..982 (desktop). The section only exists when the calendar season has stock, so
   there is no empty state to style. ---- */
.nl-season {
	/* rebrand 1.7: the season band moved from warm to the new blush token, hairlines
	   unchanged. Etalon L211 (mobile) / L1639 (tablet) / L968 (desktop). */
	background: var(--nl-blush, #fbf3f3);
	border-top: 1px solid var(--nl-line, #e6e3dc);
	border-bottom: 1px solid var(--nl-line, #e6e3dc);
	margin-top: 26px;
}
.nl-season__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.nl-season__badge {
	display: inline-block; border: 1.4px solid var(--nl-gold, #1c1c1c); color: var(--nl-gold, #1c1c1c);
	border-radius:  0; padding: 6px 12px;
	font: 700 10px/1 var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif);
	letter-spacing: .08em; text-transform: uppercase;
}
.nl-season__title {
	font-family: var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif);
	font-weight: 300; font-size: 20px; line-height: 1.15; margin: 13px 0 0;
}
.nl-season__all { font-size: 12px; font-weight: 600; color: var(--nl-gold, #1c1c1c); text-decoration: none; white-space: nowrap; }
.nl-season__all:hover { text-decoration: underline; text-underline-offset: 3px; }
/* the season row is 4-up from tablet, unlike the shared 2/3 grid of catalog.css */
@media (min-width: 768px) {
	.nl-season { margin-top: 44px; }
	.nl-season__badge { padding: 6px 13px; font-size: 10.5px; }
	.nl-season__title { font-size: 24px; }
	.nl-season__all { font-size: 13px; }
	.nl-season__head { margin-bottom: 18px; gap: 16px; }
	.nl-season__grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}
@media (min-width: 1024px) {
	.nl-season { margin-top: 56px; }
	.nl-season__badge { padding: 6px 14px; font-size: 11px; }
	.nl-season__title { font-size: 26px; margin-top: 14px; }
	.nl-season__head { margin-bottom: 20px; gap: 20px; }
	.nl-season__grid { gap: 20px; }
}

/* ---- landing wave 3: osakonnad (departments) become photo tiles. Photo fills the
   whole 3:4 tile, name and product count sit on a bottom gradient. Mobile is a
   horizontal lane of 168px tiles, tablet and desktop a 3-column grid. Per
   Natureslines.dc.html L230..246 / L1655..1671 / L983..999. ---- */
.nl-depts {
	list-style: none; margin: 0; padding: 2px var(--nl-gutter) 8px;
	display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none;
	margin-left: calc(-1 * var(--nl-gutter)); margin-right: calc(-1 * var(--nl-gutter));
	scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.nl-depts::-webkit-scrollbar { display: none; }
.nl-depts > li { flex: 0 0 168px; scroll-snap-align: start; }

.nl-dept {
	position: relative; display: block; text-decoration: none; overflow: hidden;
	aspect-ratio: 3 / 4; border-radius:  0;
	background: var(--nl-surface, #f7f5f1);
}
.nl-dept__media { position: absolute; inset: 0; display: block; overflow: hidden; }
.nl-dept__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.nl-dept__body {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 13px 14px; text-align: left;
	background: linear-gradient(180deg, rgba(34, 34, 34, 0) 0%, rgba(34, 34, 34, .74) 100%);
}
.nl-dept__label {
	display: block;
	font-family: var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif);
	font-size: 15px; line-height: 1.2; color: #fff;
}
.nl-dept__count {
	display: block; margin-top: 2px;
	font-family: var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif);
	font-size: 11px; color: rgba(255, 255, 255, .82); font-variant-numeric: tabular-nums;
}
/* funeral tile stays quieter: the photo steps back, the caption is not shouted */
.nl-dept.nl-lein-muted .nl-dept__media img { opacity: .82; }
.nl-dept.nl-lein-muted .nl-dept__body { background: linear-gradient(180deg, rgba(47, 61, 56, 0) 0%, rgba(47, 61, 56, .72) 100%); }

@media (min-width: 768px) {
	.nl-depts {
		display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
		overflow: visible; margin-left: 0; margin-right: 0; padding: 0;
	}
	.nl-depts > li { flex: none; }
	.nl-dept { border-radius:  0; }
	.nl-dept__body { padding: 15px 17px; }
	.nl-dept__label { font-size: 16px; }
	.nl-dept__count { font-size: 11.5px; margin-top: 3px; }
}
@media (min-width: 1024px) {
	.nl-depts { gap: 18px; }
	.nl-dept__body { padding: 16px 18px; }
	.nl-dept__label { font-size: 17px; }
}

/* ---- landing wave 4 fix: the [hidden] attribute must actually hide.
   Elements below carry an explicit display (block / grid), which outranks the
   browser default [hidden] { display: none }, so a hidden element stayed visible.
   That is how "Näita veel (0)" kept hanging under a fully shown result set. ---- */
.nl-home [hidden] { display: none !important; }

.nl-home a:focus-visible { outline: 2px solid var(--nl-gold, #1c1c1c); outline-offset: 2px; border-radius:  0; }


/* ---- landing wave 2: "Leia sobiv kimp" is now a filter WITH results on the page.
   Per Natureslines.dc.html FILTER: mobile L138..194, tablet L1556..1617, desktop
   L884..945. The surface panel of wave 3 is gone: the prototype puts the axis rows
   straight on the page, separated by hairlines. Cards and the grid come from
   catalog.css (.nl-grid is already 2 columns on mobile and 3 from 768, with the
   13..20 gap of the prototype). ---- */
.nl-pick__head { margin-bottom: 16px; }
.nl-pick__title {
	font-family: var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif);
	font-weight: 300; font-size: 20px; line-height: 1.15; margin: 0 0 7px;
}
.nl-pick__sub { color: var(--nl-mute, #6e6e6e); font-size: 12.5px; line-height: 1.55; margin: 0; }

/* axis rows: hairline above each row, one closing hairline under the block */
.nl-pick__axes { border-bottom: 1px solid var(--nl-line, #e6e3dc); }
.nl-pick__group { padding: 8px 0; border-top: 1px solid var(--nl-line, #e6e3dc); }
.nl-pick__eyebrow { display: none; } /* mobile has no label column (prototype L146) */
.nl-pick__chips {
	display: flex; gap: 8px;
	flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
	margin: 0 calc(-1 * var(--nl-gutter)); padding: 1px var(--nl-gutter);
	scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.nl-pick__chips::-webkit-scrollbar { display: none; }
.nl-pick__chips > .nl-pick__chip { flex: 0 0 auto; scroll-snap-align: start; }

/* result bar: count + reset on the left, "Kõik tulemused" on the right */
.nl-pick__bar { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 18px 0 12px; }
.nl-pick__bar-left { display: flex; align-items: baseline; gap: 12px; }
.nl-pick__count { font-size: 12.5px; font-weight: 700; color: var(--nl-ink, #222222); font-variant-numeric: tabular-nums; }
.nl-pick__clear {
	border: 0; background: none; padding: 0; cursor: pointer;
	font: 600 11.5px/1 var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif);
	color: var(--nl-mute, #6e6e6e); text-decoration: underline; text-underline-offset: 3px;
}
.nl-pick__clear:hover { color: var(--nl-ink, #222222); }
.nl-pick__all { font-size: 12.5px; font-weight: 600; color: var(--nl-gold, #1c1c1c); text-decoration: none; white-space: nowrap; }
.nl-pick__all:hover { text-decoration: underline; text-underline-offset: 3px; }

/* results: the grid fades while a new page is on the way, height is held by JS */
.nl-pick__results { position: relative; transition: opacity .18s ease; }
.nl-pick__results.is-loading { opacity: .5; }
.nl-pick__empty {
	margin: 0; padding: 32px 20px; text-align: center;
	font-size: 13px; line-height: 1.55; color: var(--nl-mute, #6e6e6e);
	background: var(--nl-surface, #f7f5f1); border-radius:  0;
}

.nl-pick__foot { margin-top: 16px; }
.nl-pick__more {
	display: block; width: 100%; box-sizing: border-box; padding: 14px;
	border: 1.4px solid var(--nl-line, #e6e3dc); border-radius:  0;
	background: var(--nl-canvas, #fff); color: var(--nl-ink, #222222);
	font: 700 13px/1 var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif);
	cursor: pointer;
}
.nl-pick__more:hover { border-color: var(--nl-sage, #abc8bf); }
.nl-pick__more.is-loading { opacity: .6; }
.nl-pick__clear:focus-visible, .nl-pick__more:focus-visible { outline: 2px solid var(--nl-gold, #1c1c1c); outline-offset: 2px; }

/* JS-only controls: hidden until nl-pick.js marks the section ready, so a no-JS
   client never sees a reset or a load-more button that cannot work */
.nl-pick:not(.is-ready) .nl-pick__clear,
.nl-pick:not(.is-ready) .nl-pick__more { display: none; }

@media (min-width: 768px) {
	.nl-pick__head { margin-bottom: 24px; max-width: 560px; }
	.nl-pick__title { font-size: 24px; }
	.nl-pick__sub { font-size: 13px; line-height: 1.6; }

	/* from tablet the axis label returns as a left column (prototype L1562, L891) */
	.nl-pick__group { display: grid; grid-template-columns: 92px 1fr; gap: 16px; align-items: center; padding: 14px 0; }
	.nl-pick__eyebrow {
		display: block; margin: 0;
		font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
		color: var(--nl-mute, #6e6e6e);
	}
	.nl-pick__chips {
		flex-wrap: wrap; justify-content: center; overflow: visible;
		margin: 0; padding: 0; gap: 9px;
	}

	.nl-pick__bar { margin: 22px 0 16px; gap: 16px; }
	.nl-pick__bar-left { gap: 16px; }
	.nl-pick__count { font-size: 13px; }
	.nl-pick__clear { font-size: 12px; }
	.nl-pick__all { font-size: 13px; }

	.nl-pick__empty { padding: 38px; font-size: 13.5px; border-radius:  0; }
	.nl-pick__foot { display: flex; justify-content: center; margin-top: 22px; }
	.nl-pick__more { display: inline-block; width: auto; padding: 13px 26px; }
}

@media (min-width: 1024px) {
	.nl-pick__head { margin-bottom: 28px; }
	.nl-pick__title { font-size: 26px; }
	.nl-pick__sub { font-size: 13.5px; }

	.nl-pick__group { grid-template-columns: 104px 1fr; gap: 20px; padding: 16px 0; }
	.nl-pick__eyebrow { font-size: 11px; }

	.nl-pick__bar { margin: 24px 0 18px; }
	.nl-pick__empty { padding: 44px; font-size: 14px; }
	.nl-pick__foot { margin-top: 26px; }
	.nl-pick__more { padding: 14px 30px; }
}

/* ---- landing wave 4: CONTACT section. Surface band with a hairline on top, a CSS map
   impression (hairline grid plus two tilted streets, nothing loaded from outside), a
   card that overlaps the bottom edge of the map, and a four-statement trust row.
   Per Natureslines.dc.html L247..287 (mobile) / L1672..1713 (tablet) /
   L1000..1041 (desktop). ---- */
.nl-contact {
	background: var(--nl-surface, #f7f5f1);
	border-top: 1px solid var(--nl-line, #e6e3dc);
	margin-top: 30px;
	padding: 26px 0 28px;
}
.nl-contact__head { max-width: 1200px; margin: 0 auto 18px; padding: 0 var(--nl-gutter); }
.nl-contact__eyebrow {
	margin: 0 0 8px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
	color: var(--nl-gold, #1c1c1c); font-weight: 700;
}
.nl-contact__title {
	font-family: var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif);
	font-weight: 300; font-size: 20px; line-height: 1.15; margin: 0;
}

/* map impression */
.nl-contact__map {
	position: relative; z-index: 0; width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
	border-top: 1px solid var(--nl-line, #e6e3dc); border-bottom: 1px solid var(--nl-line, #e6e3dc);
	background: linear-gradient(160deg, #eef0e9 0%, #e4e7dd 100%);
}
/* the live frame fills the whole strip; the map keeps its own stacking level so the
   contact card that overlaps its bottom edge stays above and stays clickable */
.nl-contact__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* card overlapping the map */
.nl-contact__card {
	position: relative; z-index: 1; margin: -38px var(--nl-gutter) 0;
	background: var(--nl-canvas, #fff); border: 1px solid var(--nl-line, #e6e3dc);
	border-radius:  0; padding: 18px; box-shadow: 0 14px 30px rgba(34, 34, 34, .10);
}
.nl-contact__items { display: flex; flex-direction: column; gap: 14px; }
.nl-contact__item { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: inherit; }
.nl-contact__mark { color: var(--nl-gold, #1c1c1c); flex: 0 0 auto; display: flex; }
.nl-contact__value { display: block; font-size: 13px; font-weight: 700; color: var(--nl-ink, #222222); font-variant-numeric: tabular-nums; }
.nl-contact__note { display: block; margin-top: 2px; font-size: 11.5px; color: var(--nl-mute, #6e6e6e); }
.nl-contact__note:empty { display: none; }
a.nl-contact__item:hover .nl-contact__value { color: var(--nl-gold, #1c1c1c); }

.nl-contact__socials { display: flex; gap: 9px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--nl-line, #e6e3dc); }
.nl-contact__social {
	width: 42px; height: 42px; border-radius:  0; text-decoration: none;
	border: 1.4px solid var(--nl-line, #e6e3dc); background: var(--nl-canvas, #fff);
	display: flex; align-items: center; justify-content: center;
	font: 700 11px/1 var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif);
	color: var(--nl-mute, #6e6e6e);
}
.nl-contact__social:hover { border-color: var(--nl-sage, #abc8bf); color: var(--nl-ink, #222222); }

/* trust row, four statements */
.nl-contact__trust {
	list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
	max-width: 1200px; margin: 24px auto 0; padding: 20px var(--nl-gutter) 0;
	border-top: 1px solid var(--nl-line, #e6e3dc);
}
.nl-contact__trust-item { font-size: 11.5px; line-height: 1.55; color: var(--nl-mute, #6e6e6e); }

.nl-contact a:focus-visible { outline: 2px solid var(--nl-gold, #1c1c1c); outline-offset: 2px; border-radius:  0; }

@media (min-width: 768px) {
	.nl-contact { margin-top: 44px; padding: 40px 0 36px; }
	.nl-contact__head { margin-bottom: 22px; }
	.nl-contact__eyebrow { font-size: 10.5px; }
	.nl-contact__title { font-size: 24px; }
	.nl-contact__map { aspect-ratio: 21 / 9; }
	.nl-contact__card { max-width: 1200px; margin: -46px auto 0; border-radius:  0; padding: 24px; box-shadow: 0 16px 36px rgba(34, 34, 34, .10); }
	.nl-contact__items { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
	.nl-contact__value { font-size: 13.5px; }
	.nl-contact__note { font-size: 12px; }
	.nl-contact__socials { margin-top: 18px; padding-top: 18px; }
	.nl-contact__social { width: 40px; height: 40px; }
	.nl-contact__trust { margin-top: 30px; padding-top: 22px; gap: 16px; }
	.nl-contact__trust-item { font-size: 12px; }
}
@media (min-width: 1024px) {
	.nl-contact { margin-top: 56px; padding: 48px 0 44px; }
	.nl-contact__head { margin-bottom: 26px; }
	.nl-contact__eyebrow { font-size: 11px; margin-bottom: 9px; }
	.nl-contact__title { font-size: 26px; }
	.nl-contact__map { aspect-ratio: 24 / 9; }
	.nl-contact__card { margin-top: -64px; }
	.nl-contact__trust { grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 36px; }
	.nl-contact__trust-item { font-size: 12.5px; }
}