/* Nature's Lines — header bar + left nav drawer + language switcher.
   Tokens come from theme.json (settings.custom -> --wp--custom--*), with hex
   fallbacks. Mobile-first; tablet >=600, desktop >=1024. Switcher CSS ported
   here from Customizer Additional CSS (was tied to the old active theme). */

:root {
	--nl-ink:     var(--wp--custom--ink,     #222222);
	--nl-gold:    var(--wp--custom--gold,    #1c1c1c);
	--nl-canvas:  var(--wp--custom--canvas,  #ffffff);
	--nl-surface: var(--wp--custom--surface, #f7f5f1);
	--nl-warm:    var(--wp--custom--warm,    #faf7f2);
	--nl-blush:   var(--wp--custom--blush,   #fbf3f3);
	--nl-sage:    var(--wp--custom--sage,    #abc8bf);
	--nl-mute:    var(--wp--custom--mute,    #6e6e6e);
	--nl-line:    var(--wp--custom--line,    #e6e3dc);


	/* M1: ONE source of truth for the header height, because two things measure it:
	   the sticky mini purchase card and every anchor jump. nl-header.js overwrites it on
	   load and on resize with the CLEARANCE actually owed: the measured header height
	   while the header sticks, or 0 while it does not (see the comment there, today it
	   does not, because the FSE template-part wrapper is exactly as tall as the header).
	   The numbers below are the pre-JS fallback per breakpoint, bar plus delivery strip. */
	--nl-header-h: 0px;   /* L1a: измерено 135 = бар 102 + полоса 33 (было 131 при полосе 29), клиренс 0 пока шапка не липнет */
	--nl-sticky-gap: 24px;   /* комфортный отступ липкого блока от края */
}

/* Etalon 1.7 keeps the token named --nl-gold while its value is the near black accent
   (#1c1c1c). The name stays so the hundreds of existing usages keep working.
   Base link hover per etalon L19 (a:hover -> mute). Low specificity on purpose: the
   component rules below and in the other sheets still win where they set their own. */
a:hover { color: var(--nl-mute); }

.nl-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	clip: rect(0 0 0 0); clip-path: inset(50%);
	overflow: hidden; white-space: nowrap;
}

/* ---------- header shell ---------- */
.nl-header {
	position: sticky;
	top: 0;
	z-index: 30;
	/* M2 (решение 6.3, отменяет эталон в этом месте): шапка БЕЗ заливки, берёт фон
	   страницы. Ни warm, ни canvas. Нижняя линия остаётся, она и отделяет шапку. */
	border-bottom: 1px solid var(--nl-line);
	font-family: var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif);
}

.nl-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 12px;                 /* etalon 2.1 L104 (was 12px 18px) */
}

.nl-header__left { display: flex; align-items: center; gap: 7px; }   /* etalon 2.1 L106 */
.nl-header__right { display: flex; align-items: center; gap: 9px; }  /* etalon 2.1 L114 */

/* brand — etalon 2.1: the lockup is live text (two Montserrat lines, left) plus the
   flower mark (right), gap 2px. Version 2.1 replaces 1.7: the upper line reads
   "flowers and beyond", Manrope is gone, and the mark grows about threefold.
   Values, etalon 2.1: mobile L112 (7.5px/.28em, 10.5px/.22em, line gap 17, mark 85x86),
   tablet L1835 (9/.28em, 13/.22em, 21, 106x107), desktop L1225 (11/.28em, 16/.22em, 26,
   130x131). The footer uses the SAME lockup in 2.1 (etalon L308 mobile, L1225 desktop),
   so footer.css no longer overrides the sizes.
   F6 legacy note kept: max-height + !important + flex:0 0 auto stop plugin sheets from
   blowing the mark up to its natural size. */
.nl-logo { display: inline-flex; align-items: center; gap: 2px; text-decoration: none; color: var(--nl-ink); }
.nl-logo__words { display: flex; flex-direction: column; align-items: flex-start; gap: 17px; }
.nl-logo__studio,
.nl-logo__name {
	font-family: var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif);
	line-height: 1;
	color: var(--nl-ink);
}
.nl-logo__studio { font-weight: 300; font-size: 7.5px; letter-spacing: .28em; }
.nl-logo__name { font-weight: 400; font-size: 10.5px; letter-spacing: .22em; white-space: nowrap; }
.nl-header .nl-logo__mark,
.nl-drawer .nl-logo__mark,
.nl-footer .nl-logo__mark {
	display: block; width: 85px !important; height: 86px !important; max-height: 86px !important;
	max-width: 100%; object-fit: contain; flex: 0 0 auto;
}

/* burger (mobile + tablet only) */
.nl-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	margin: -8px -10px -8px -10px; /* keep 44px tap target, align optical edge */
	padding: 0;
	border: 0; background: none; cursor: pointer;
	color: var(--nl-ink);
}
.nl-burger__box {
	width: 22px; height: 15px;
	display: flex; flex-direction: column; justify-content: space-between;
}
.nl-burger__box span {
	display: block; height: 2px; border-radius:  0; background: currentColor;
}
.nl-burger__box span:last-child { width: 14px; }

/* ---------- M2: sections menu, the header SECOND ROW (etalon 2.1 L1018..1042) ----------
   Rendered from the real WordPress menu (wp_nav_menu, primary, depth 3). Labels, order
   and URLs come from the menu, so an edit in the admin is enough; nothing here knows the
   names of the sections.

   The whole row is hidden below 1024, where the burger drawer serves navigation. */
.nl-header__nav { display: none; }
.nl-nav-inline .nl-menu {
	display: flex; align-items: stretch; justify-content: center;
	flex-wrap: nowrap; gap: 30px;
	margin: 0; padding: 0; list-style: none;
}
.nl-nav-inline .nl-menu > li { position: relative; display: flex; }
.nl-nav-inline .nl-menu > li > a {
	display: flex; align-items: center; gap: 6px;
	padding: 13px 2px 12px;
	font-size: 13px; font-weight: 600; letter-spacing: .02em;
	color: var(--nl-ink); text-decoration: none; white-space: nowrap;
	border-bottom: 2px solid transparent;
	cursor: pointer;
}
.nl-nav-inline .nl-menu > li > a:hover { color: var(--nl-mute); }
.nl-nav-inline .nl-menu > li.current-menu-item > a,
.nl-nav-inline .nl-menu > li.current-menu-parent > a,
.nl-nav-inline .nl-menu > li.current-menu-ancestor > a { border-bottom-color: var(--nl-ink); }
/* chevron is injected by nl-header.js only where the item really has children */
.nl-nav-inline .nl-chev { display: block; flex: 0 0 auto; transition: transform .18s ease; }
.nl-nav-inline .nl-menu > li.is-open > a > .nl-chev { transform: rotate(180deg); }

/* ---- the dropdown panel ---- */
.nl-nav-inline .sub-menu {
	position: absolute; top: 100%; left: 0; z-index: 45;
	margin: 0; padding: 6px; list-style: none;
	min-width: 236px;
	/* opaque on purpose: the header itself has no fill since M2, so a translucent
	   panel would show the page scrolling through it */
	background: #fff;
	border: 1px solid var(--nl-line);
	box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
	display: none;
}
.nl-nav-inline .nl-menu > li.is-open > .sub-menu { display: block; }
/* right-hand items: pin the panel to the item's right edge so it cannot run off screen */
.nl-nav-inline .nl-menu > li.nl-panel--right > .sub-menu { left: auto; right: 0; }
.nl-nav-inline .sub-menu a {
	display: block; padding: 9px 12px;
	font-size: 13px; line-height: 1.25; font-weight: 400;
	color: var(--nl-ink); text-decoration: none; white-space: nowrap;
}
.nl-nav-inline .sub-menu a:hover { background: var(--nl-warm); color: var(--nl-ink); }
.nl-nav-inline .sub-menu a:focus-visible { background: var(--nl-warm); outline: 2px solid var(--nl-sage); outline-offset: -2px; }

/* ---- third level: INSIDE the same panel, indented, no second flyout (etalon L1034) ---- */
.nl-nav-inline .sub-menu .sub-menu {
	position: static; display: block;
	min-width: 0; padding: 0 0 0 14px;
	background: none; border: 0; box-shadow: none;
}
.nl-nav-inline .sub-menu .sub-menu a {
	padding: 7px 12px; font-size: 11.5px; color: var(--nl-mute);
}
.nl-nav-inline .sub-menu .sub-menu a:hover { background: var(--nl-warm); color: var(--nl-ink); }

/* cart — etalon 2.1 L131: inline svg trolley, ink stroke 1.5, round caps. The png
   basket of 1.7 is gone. Badge is a RECTANGLE on the accent, white 700 9px. */
.nl-cart {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; margin: -10px; color: var(--nl-ink);
}
.nl-cart__icon { display: block; width: 24px; height: 24px; }
.nl-cart__count {
	position: absolute; top: 6px; right: 4px;
	min-width: 15px; height: 15px; padding: 0 3px; box-sizing: border-box;
	background: var(--nl-gold); color: #fff; border-radius: 0;
	font: 700 9px/15px var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif);
	text-align: center; font-feature-settings: "tnum";
}

/* F2 #4: tabular figures on every price and total. The cards already set
   font-feature-settings:"tnum", but the audit checks font-variant-numeric (which
   stayed "normal"); this one global rule sets it everywhere prices/sums render. */
.woocommerce-Price-amount, .amount,
.nl-card__price, .nl-price, .nl-price__val, .nl-price__prefix,
.nl-product__price, .nl-product__price .price, .woocommerce-variation-price .price,
.nl-sticky-cart__price, .nl-sticky-cart__price .price,
.nl-cart-item__price, .nl-cart-item__qty,
.nl-cart-row, .nl-cart-totals, .nl-checkout__row, .nl-checkout__total {
	font-variant-numeric: tabular-nums;
}

/* utility strip — etalon 2.1 L140: sage band, WHITE UPPERCASE text, .1em tracking,
   600, 11px mobile / 12px tablet and desktop. The dot of 1.7 is gone (the etalon has no
   round elements at all).

   CONTRAST. See the Russian note inside the rule: the light sage background with white
   text is a deliberate owner decision, not an oversight. */
.nl-header__strip {
	display: flex; align-items: center; justify-content: center; gap: 6px;
	padding: 7px 18px;
	font: 600 16px/1.35 var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif);
	letter-spacing: .1em; text-transform: uppercase;
	/* L1a, п.82, финальные значения (решение владельца Р12, отменяет Р5 в части цвета).
	   Фон возвращается на светлый #ABC8BF, текст остаётся белым, читаемость добирается
	   КЕГЛЕМ: плюс 30 процентов к значениям волны L1, с округлением до целого пикселя.
	     <480    11 -> 14
	     база    12 -> 16
	     >=600   13 -> 17
	   Вертикальные паддинги НЕ трогаем (7px здесь, 9px в медиазапросах): полоса
	   подрастает ровно за счёт строки.

	   КОНТРАСТ, зафиксировано осознанно: белый на #ABC8BF это 1.79:1, AA не проходит.
	   Решение владельца, обсуждению не подлежит. Запасной вариант, если клиент сам
	   скажет что не читается: тот же фон с текстом ink, там контраст проходит.

	   Значение стоит ЛИТЕРАЛОМ и только здесь. Токен --nl-sage НЕ переопределяется:
	   на нём живут разделитель крошек, кольца фокуса и прочие поверхности, и правка
	   токена достала бы до них разом (тот же урок, что с --nl-gold в части 6).
	   Совпадение литерала со значением токена случайно и временно, связывать их
	   переменной нельзя: у полосы своя судьба. */
	color: #fff;
	background: #ABC8BF;
}
/* P1, часть 2: строка полосы стала длиннее (город плюс уезд), и на 360 эстонский
   вариант переставал помещаться в одну линию. Режем разрядку, а не текст, как и
   предписано: на мобильном она с .1em падает до .03em, кегль с 11 до 10. От 480 и выше
   всё остаётся ровно как было. Пустой .nl-header__dot достался от M1: он ничего не
   рисует, но съедал 6px гэпа, поэтому просто выключен.
   Замерено стендом iframe на 360: ET 317px, RU 287px, EN 260px при доступных 324px. */
.nl-header__dot { display: none; }
@media (max-width: 479px) {
	/* L1a: 11 -> 14 (плюс 30 процентов, Р12). Разрядка здесь по-прежнему урезана до
	   .03em наследием P1: на 360 это единственное, что держит строку в одну линию.
	   Замер после правки в отчёте волны. */
	.nl-header__strip { font-size: 14px; letter-spacing: .03em; }
}

/* ---------- language switcher ----------
   2.1 replaces the segmented EE RU EN pill IN THE HEADER with a globe button carrying
   the current language code, plus a panel of full names (etalon L114..131 mobile,
   L993..1010 desktop). The DRAWER keeps the three-pill layout, so .nl-lang-pill below
   is still needed and only serves .nl-switcher--drawer now.

   Ours beyond the etalon: the panel closes on outside click, on Escape and after a
   pick; the links are the real per-page translation URLs; order stays EE RU EN; and the
   button is visible at EVERY width (1.7 hid it below 1024). */
.nl-langsel { position: relative; display: inline-flex; }
.nl-langsel__btn {
	display: flex; align-items: center; gap: 3px;
	border: 0; background: none; padding: 0; cursor: pointer;
	color: var(--nl-ink); line-height: 0;
}
.nl-langsel__globe { display: block; width: 21px; height: 21px; }
.nl-langsel__code {
	font: 600 10px/1 var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif);
	letter-spacing: .04em;
}
.nl-langsel__panel {
	position: absolute; top: calc(100% + 9px); right: 0; z-index: 40;
	background: #fff; border: 1px solid var(--nl-line); border-radius: 0;
	box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
	padding: 5px; min-width: 104px;
	display: flex; flex-direction: column; gap: 2px;
}
.nl-langsel__panel[hidden] { display: none; }
.nl-langsel__item {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	text-align: left; padding: 8px 10px;
	border: 0; background: none; border-radius: 0; cursor: pointer; text-decoration: none;
	font: 600 12px/1 var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif);
	color: var(--nl-ink);
}
.nl-langsel__item:hover { background: var(--nl-surface); color: var(--nl-ink); }
.nl-langsel__tick { font-size: 10px; color: var(--nl-mute); }

/* drawer switcher = 3 equal bordered pills (P13), unchanged by 2.1 apart from radius */
.nl-switcher--drawer .nl-lang-pill { background: none; border: 0; padding: 0; display: block; width: 100%; }
.nl-switcher--drawer .nl-pll-switcher { display: flex; gap: 6px; width: 100%; margin: 0; padding: 0; list-style: none; }
.nl-switcher--drawer .nl-sep { display: none; }
.nl-switcher--drawer .nl-lang {
	flex: 1; min-width: 0; min-height: 38px; padding: 0 8px; box-sizing: border-box;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--nl-line); border-radius: 0;
	font: 700 11px/1 var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif);
	color: var(--nl-mute); background: var(--nl-canvas); text-decoration: none;
}
.nl-switcher--drawer .nl-lang--active { background: var(--nl-ink); color: #fff; border-color: var(--nl-ink); }

/* drawer Ostukorv shares the same basket icon as the header cart */
.nl-group__cart { gap: 8px; }
.nl-group__cart .nl-cart__icon { display: block; }
.nl-group__cart-label { margin-right: auto; }

/* ---------- left nav drawer (mobile + tablet) ---------- */
.nl-drawer-overlay {
	position: fixed; inset: 0; z-index: 40;
	background: rgba(0, 0, 0, .42);
	opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.nl-drawer {
	position: fixed; top: 0; left: 0; bottom: 0; z-index: 41;
	width: 290px; max-width: 88vw;
	background: #fbfaf6; /* P13: warm drawer bg per maket */
	box-shadow: 16px 0 46px rgba(0, 0, 0, .18);
	transform: translateX(-100%);
	transition: transform .34s cubic-bezier(.4, 0, .2, 1);
	display: flex; flex-direction: column;
	overflow-y: auto; overscroll-behavior: contain;
}
.nl-drawer[hidden] { display: none; }

html.nl-drawer-open { overflow: hidden; }
html.nl-drawer-open .nl-drawer-overlay { opacity: 1; pointer-events: auto; }
html.nl-drawer-open .nl-drawer { transform: translateX(0); }

.nl-drawer__head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--nl-line);
	background: var(--nl-warm);
}
/* the drawer head is only 290..320px wide, so it keeps the mobile lockup size */
.nl-drawer__close {
	width: 44px; height: 44px; margin: -8px -10px;
	border: 0; background: none; cursor: pointer;
	font-size: 24px; line-height: 1; color: var(--nl-ink);
}

.nl-drawer__search { padding: 12px 16px; }
.nl-drawer__search input[type="search"] {
	width: 100%; height: 44px; box-sizing: border-box;
	padding: 0 14px; border: 1px solid var(--nl-line); border-radius:  0;
	background: var(--nl-surface); color: var(--nl-ink); font-size: 14px;
}

/* P13: catalog nav items = bordered boxes in a flex column (not flat rows). */
.nl-nav-drawer .nl-menu { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.nl-nav-drawer .nl-menu a {
	display: flex; align-items: center; min-height: 40px; box-sizing: border-box;
	padding: 9px 11px; color: var(--nl-ink); text-decoration: none;
	font-size: 12px; font-weight: 600;
	border: 1px solid var(--nl-line); border-radius:  0; background: #fbfaf6;
}
.nl-nav-drawer .nl-menu a:hover { background: var(--nl-surface); }
.nl-nav-drawer .current-menu-item > a,
.nl-nav-drawer .current-menu-parent > a { background: var(--nl-ink); color: #fff; border-color: var(--nl-ink); }

/* P13: switcher sits right under the search (moved in markup). */
.nl-drawer__switcher { padding: 4px 16px 10px; }
.nl-drawer__nav { padding: 0 16px 12px; border-top: 1px solid var(--nl-line); }

/* ---- catalog nav: Kingitused accordion + 2-col children ---- */
.nl-nav-drawer .menu-item-has-children { position: relative; }
.nl-nav-drawer .menu-item-has-children > a { padding-right: 38px; } /* room for chevron */
.nl-nav-drawer .nl-acc-toggle {
	position: absolute; top: 0; right: 0;
	width: 40px; height: 40px; /* P13: match the box height */
	display: flex; align-items: center; justify-content: center;
	border: 0; background: none; cursor: pointer; color: var(--nl-ink);
}
.nl-nav-drawer .current-menu-item > a + .nl-acc-toggle,
.nl-nav-drawer .current-menu-parent > a + .nl-acc-toggle { color: #fff; }
.nl-nav-drawer .nl-acc-toggle::before {
	content: ""; width: 9px; height: 9px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); margin-top: -3px; transition: transform .2s ease;
}
.nl-nav-drawer .menu-item-has-children.is-open > .nl-acc-toggle::before {
	transform: rotate(225deg); margin-top: 3px;
}
.nl-nav-drawer .sub-menu {
	margin: 0; padding: 0; list-style: none; display: none;
}
.nl-nav-drawer .menu-item-has-children.is-open > .sub-menu {
	display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px;
}
.nl-nav-drawer .sub-menu a {
	min-height: 36px; padding: 8px 10px; font-size: 11.5px; font-weight: 600;
	border: 1px solid var(--nl-line); border-radius:  0; background: #fbfaf6;
}

/* ---- S1: THIRD level (Kimbud > Hooajalised kimbud > 1. september) ----
   The second level is a 2-column grid of bordered chips. A second-level item that
   itself has children spans BOTH columns, otherwise its open child list would stretch
   one grid cell and break the rhythm of the row next to it. The third level is a plain
   indented column with a hairline rule, not chips, so the depth reads at a glance.
   The accordion JS already binds to .menu-item-has-children at ANY depth, so this is
   CSS only. Desktop dropdowns are deliberately untouched here, see header.css:109. */
.nl-nav-drawer .sub-menu .menu-item-has-children { grid-column: 1 / -1; }
.nl-nav-drawer .sub-menu .menu-item-has-children > a { padding-right: 34px; }
.nl-nav-drawer .sub-menu .nl-acc-toggle { width: 34px; height: 36px; }
.nl-nav-drawer .sub-menu .nl-acc-toggle::before { width: 7px; height: 7px; }
.nl-nav-drawer .sub-menu .menu-item-has-children.is-open > .sub-menu {
	display: block; margin: 6px 0 2px 10px;
	padding-left: 10px; border-left: 1px solid var(--nl-line);
}
.nl-nav-drawer .sub-menu .sub-menu a {
	display: flex; align-items: center;
	min-height: 34px; padding: 6px 10px; font-size: 11px;
	border: 0; border-radius:  0; background: none;
}
.nl-nav-drawer .sub-menu .sub-menu a:hover { background: var(--nl-surface); }
.nl-nav-drawer .sub-menu .sub-menu .current-menu-item > a { background: var(--nl-ink); color: #fff; }

/* lein (funeral) muted in nav — no gold */
.nl-nav-drawer .nl-lein-muted > a { color: var(--nl-mute); }
.nl-nav-drawer .nl-lein-muted > a:hover { color: var(--nl-ink); background: var(--nl-surface); }

/* ---- secondary (Studio) + account groups (rows of columns) ---- */
.nl-drawer__secondary,
.nl-drawer__account { padding: 0 16px 12px; border-top: 1px solid var(--nl-line); }
/* P13: section labels — 10px uppercase, wide tracking, mute (per maket). */
.nl-group__label {
	display: block; margin: 16px 0 7px;
	font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--nl-mute);
}
.nl-group { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.nl-group--3 { grid-template-columns: repeat(3, 1fr); }
.nl-group--2 { grid-template-columns: repeat(2, 1fr); }
/* P13: STUUDIO / KONTO items = bordered pill boxes (like the catalog items). */
.nl-group a {
	display: flex; align-items: center; gap: 6px; min-height: 40px; box-sizing: border-box;
	padding: 9px 11px; border: 1px solid var(--nl-line); border-radius:  0; background: #fbfaf6;
	color: var(--nl-ink); text-decoration: none; font-size: 12px; font-weight: 600;
}
.nl-group a:hover { color: var(--nl-gold); }
.nl-group__count {
	min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--nl-gold); color: #fff; border-radius:  0;
	font-size: 10px; font-weight: 700; font-feature-settings: "tnum";
}

/* ---- contact block ---- */
.nl-drawer__contact {
	padding: 14px 16px 22px; border-top: 1px solid var(--nl-line);
	display: flex; flex-direction: column; gap: 4px;
	font-size: 12.5px; color: var(--nl-mute); line-height: 1.5;
}
.nl-drawer__phone { color: var(--nl-ink); font-weight: 600; font-feature-settings: "tnum"; text-decoration: none; }
.nl-drawer__phone:hover { text-decoration: underline; }

/* ---------- a11y focus ---------- */
.nl-header a:focus-visible,
.nl-header button:focus-visible,
.nl-drawer a:focus-visible,
.nl-drawer button:focus-visible,
.nl-drawer input:focus-visible {
	outline: 2px solid var(--nl-gold);
	outline-offset: 2px;
	border-radius:  0;
}

/* ============ tablet (>=600) ============ */
@media (min-width: 600px) {
	.nl-header__bar { padding: 8px 24px; }
	.nl-header__strip { padding: 9px 24px; font-size: 17px; } /* L1a: 13 -> 17, паддинг прежний */
	.nl-drawer { width: 320px; }
}
@media (min-width: 768px) {
	/* планшет: L1a измерено 166 = бар 125 + полоса 41 (было 160 при полосе 34) */
	.nl-header__bar { padding: 9px 32px; }
	.nl-header__strip { padding: 9px 32px; }
	/* tablet lockup, etalon 2.1 L1835 */
	.nl-header .nl-logo__words,
	.nl-footer .nl-logo__words { gap: 21px; }
	.nl-header .nl-logo__studio,
	.nl-footer .nl-logo__studio { font-size: 9px; }
	.nl-header .nl-logo__name,
	.nl-footer .nl-logo__name { font-size: 13px; }
	.nl-header .nl-logo__mark,
	.nl-drawer .nl-logo__mark,
	.nl-footer .nl-logo__mark { width: 106px !important; height: 107px !important; max-height: 107px !important; }
	/* globe, etalon 2.1 tablet */
	.nl-langsel__globe { width: 22px; height: 22px; }
	.nl-langsel__code { font-size: 11px; }
}

/* ============ desktop (>=1024): inline header, no drawer ============ */
@media (min-width: 1024px) {
	.nl-burger { display: none; }
	/* M2: sections menu becomes the second header row from 1024 up (etalon 2.1 L1019:
	   centred, gap 30, padding 0 40, line underneath). */
	.nl-header__nav {
		display: block;
		padding: 0 40px;
		border-bottom: 1px solid var(--nl-line);
	}
	/* L1a, п.89: пункт «Kontakt» стал шестым, и на САМОЙ УЗКОЙ ширине, где этот ряд
	   вообще показывается, русский вариант подошёл к переносу вплотную (замер после
	   L1: 917px при доступных 944, запас 27px). Названия не сокращаем и кегль не
	   трогаем, ужимаем ЗАЗОР и только в полосе 1024..1279: от 1280 места хватает с
	   избытком и ряд остаётся с эталонными 30px. Замеры после правки в отчёте. */
	.nl-nav-inline .nl-menu { gap: 22px; }
	/* десктоп: L1a измерено 238 = бар 151 + ряд разделов 45 + полоса 41 (было 186 при полосе 35) */

	.nl-header__bar { gap: 20px; padding: 10px 28px; }   /* etalon 2.1 L985 */
	.nl-header__right { gap: 16px; }                      /* etalon 2.1 L993 */
	/* desktop lockup, etalon 2.1 L1225 */
	.nl-header .nl-logo__words,
	.nl-footer .nl-logo__words { gap: 26px; }
	.nl-header .nl-logo__studio,
	.nl-footer .nl-logo__studio { font-size: 11px; }
	.nl-header .nl-logo__name,
	.nl-footer .nl-logo__name { font-size: 16px; }
	.nl-header .nl-logo__mark,
	.nl-footer .nl-logo__mark { width: 130px !important; height: 131px !important; max-height: 131px !important; }
	/* globe, etalon 2.1 desktop L995..1000 */
	.nl-langsel__globe { width: 23px; height: 23px; }
	.nl-langsel__code { font-size: 11.5px; }
	.nl-langsel__btn { gap: 4px; }
	.nl-langsel__panel { top: calc(100% + 10px); min-width: 118px; }
	.nl-langsel__item { padding: 9px 11px; font-size: 12.5px; }
	.nl-cart__icon { width: 26px; height: 26px; }

	.nl-header__strip {
		justify-content: center; padding: 9px 32px;
		border-top: 1px solid var(--nl-line); font-size: 17px; /* L1a: 13 -> 17, паддинг прежний */
	}

	/* drawer + its trigger are inert on desktop */
	.nl-drawer, .nl-drawer-overlay { display: none; }
	html.nl-drawer-open { overflow: visible; }
}

/* ============ wide desktop (>=1280) ============
   L1a, п.89: от 1280 ряд разделов возвращается к эталонному зазору 30px. Ужатые 22px
   нужны только в полосе 1024..1279, где шестой пункт «Kontakt» подводил русский
   вариант к переносу. Один селектор, одно свойство. */
@media (min-width: 1280px) {
	.nl-nav-inline .nl-menu { gap: 30px; }
}