/* Nature's Lines — single product. Tokens (--nl-*) from header.css :root.
   Lein register = same layout, tokens swapped via the .is-lein wrapper. */

.nl-single { --nl-gutter: clamp(18px, 4vw, 40px); }
.nl-product {
	max-width: 1200px; margin: 0 auto; padding: clamp(16px, 3vw, 32px) var(--nl-gutter) clamp(40px, 6vw, 72px);
	font-family: var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif); color: var(--nl-ink, #222222);
}

/* lein register: cold, quiet, no gold — reassign the tokens in scope */
.nl-product.is-lein, .nl-sticky-cart.is-lein {
	--nl-gold:    var(--wp--custom--lein--gold, #7e8f85);
	--nl-ink:     var(--wp--custom--lein--ink, #2f3d38);
	--nl-canvas:  var(--wp--custom--lein--canvas, #f0f1ee);
	--nl-surface: var(--wp--custom--lein--surface, #e7e9e4);
	--nl-line:    var(--wp--custom--lein--line, #dadcd4);
}
.nl-product.is-lein { background: var(--nl-canvas); }

/* breadcrumb */
/* nav wave 4: unified breadcrumbs (shared spec with catalog.css .nl-crumbs) */
.nl-crumbs { display: flex; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--nl-mute, #6e6e6e); margin-bottom: 18px; }
.nl-crumbs__sep { margin: 0 6px; color: var(--nl-sage, #abc8bf); }
.nl-crumbs__link { color: var(--nl-mute, #6e6e6e); text-decoration: none; }
.nl-crumbs__link:hover { color: var(--nl-gold, #1c1c1c); }
.nl-crumbs__cur { color: var(--nl-ink, #222222); font-weight: 600; }

/* ---- layout: stack < 768, two columns from 768 ---- */
.nl-product__grid { display: block; }
@media (min-width: 768px) {
	.nl-product__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
	.nl-product__gallery { position: sticky; top: calc(var(--nl-header-h) + var(--nl-sticky-gap)); }
}
@media (min-width: 1024px) {
	.nl-product__grid { grid-template-columns: 1.05fr 1fr; gap: 44px; }
}

/* ---- gallery ---- */
.nl-gallery__main {
	aspect-ratio: 4 / 5; overflow: hidden; border-radius:  0; /* P11 micro: 14 -> 18 */
	background: var(--nl-surface, #f7f5f1); border: 1px solid var(--nl-line, #e6e3dc);
}
.nl-gallery__main img, .nl-gallery__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nl-gallery__ph { display: block; width: 100%; height: 100%; }
.nl-gallery__thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.nl-gallery__thumb {
	width: 56px; height: 56px; padding: 0; border: 1px solid var(--nl-line, #e6e3dc); border-radius:  0; /* P11 micro: 8 -> 12 */
	overflow: hidden; background: var(--nl-surface, #f7f5f1); cursor: pointer;
}
.nl-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nl-gallery__thumb.is-active { border-color: var(--nl-gold, #1c1c1c); }
@media (min-width: 768px) { .nl-gallery__thumb { width: 64px; height: 64px; } }
@media (min-width: 1024px) { .nl-gallery__thumb { width: 74px; height: 74px; } }

/* ---- summary ---- */
.nl-product__title {
	font-family: var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif); font-weight: 300;
	font-size: clamp(25px, 4vw, 34px); line-height: 1.15; margin: 0 0 10px;
}
/* P4: gold main price (--gold), weight 700, 24 mobile / 26 tablet / 28 desktop, tnum.
   Lein register keeps its muted --gold reassignment, so no bright gold there.

   L1, п.87.1: вес снят с 700 до 400 по требованию клиента («убрать всё жирное»).
   Кегль НЕ уменьшен (24/26/28 как были), tnum на месте, цвет не тронут: цена остаётся
   на токене акцента, потому что часть 6.4 прямо запрещает его трогать, а требование
   клиента было про начертание. */
.nl-product__price, .nl-product__price .price, .woocommerce-variation-price .price {
	font-size: 24px; font-weight: 400; font-feature-settings: "tnum"; color: var(--nl-gold, #1c1c1c);
}
@media (min-width: 768px)  { .nl-product__price, .nl-product__price .price, .woocommerce-variation-price .price { font-size: 26px; } }
@media (min-width: 1024px) { .nl-product__price, .nl-product__price .price, .woocommerce-variation-price .price { font-size: 28px; } }
.nl-product__price .price del { color: var(--nl-mute, #6e6e6e); font-weight: 400; margin-right: 8px; }
.nl-product__excerpt { margin: 14px 0 0; color: var(--nl-ink, #222222); font-size: 14.5px; line-height: 1.6; }
.nl-product__excerpt p { margin: 0 0 8px; }

/* ---- variations form ---- */
.nl-product__form { margin-top: 20px; }
.nl-product__form .variations { width: 100%; border-collapse: collapse; }
.nl-product__form .variations tr { display: block; margin-bottom: 14px; }
.nl-product__form .variations td, .nl-product__form .variations th { display: block; text-align: left; padding: 0; }
.nl-product__form .variations .label label {
	font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--nl-mute, #6e6e6e); margin-bottom: 10px; display: block;
}
.nl-product__form .reset_variations { font-size: 12px; color: var(--nl-mute, #6e6e6e); margin-left: 6px; }

/* size dropdown -> pills (JS on) ; select stays for no-JS */
.nl-swatches { display: none; flex-wrap: wrap; gap: 8px; }
.js .nl-swatches { display: flex; }
.js .nl-product__form .variations td.value select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nl-swatch {
	min-height: 44px; padding: 8px 16px; border: 1px solid var(--nl-line, #e6e3dc); border-radius:  0;
	background: var(--nl-canvas, #fff); color: var(--nl-ink, #222222); font-size: 14px; font-weight: 600; cursor: pointer;
}
/* L1, п.87.2 (решение владельца Р6): выбранный чип больше НЕ заливается чернилами.
   Лёгкая подсветка вместо заливки: тёплый фон плюс рамка ink, текст ink.

   Правило БАЗОВОЕ, то есть накрывает и чипы гаммы, и плитки размера. Команда описывала
   три элемента, но гамма и размер стоят в одной колонке друг под другом, и оставить
   гамму чернильной значило бы держать на одной карточке два разных языка выделения.
   Владелец это подтвердил (Р6).

   ЗАМЕР, из-за которого здесь есть тень. Тёплый фон против фона покоя это 1.07:1 у
   гаммы и 1.02:1 у размера, то есть глазом неразличимо: warm #faf7f2 и surface #f7f5f1
   почти одна краска. Весь сигнал выбора несёт РАМКА, ink против line это 12.41:1.
   Одной волосяной линии для этого мало, поэтому она удвоена внутренней тенью: рамка
   читается как двухпиксельная, а раскладка не едет ни на пиксель (тень не занимает
   места, в отличие от border-width: 2px). Тёплый фон оставлен, он из требования Р6. */
.nl-swatch.is-active {
	background: var(--nl-warm, #faf7f2); color: var(--nl-ink, #222222);
	border-color: var(--nl-ink, #222222);
	box-shadow: inset 0 0 0 1px var(--nl-ink, #222222);
}
.nl-swatch[disabled] { opacity: .35; cursor: not-allowed; }

/* P9: size (pa_suurus) swatches = rounded rectangle on surface (not the round pill).
   Scoped to the size axis via .nl-swatches--size — colour/gamma keep the base pill.
   radius 12, min-width 82 tablet / 88 desktop, padding 11/15 -> 11/16 desktop, 600/13. */
.nl-swatches--size .nl-swatch {
	min-height: 0; border-radius:  0; background: var(--nl-surface, #f7f5f1);
	border: 1px solid var(--nl-line, #e6e3dc); min-width: 82px; padding: 11px 15px; font-size: 13px; font-weight: 600;
}
@media (min-width: 1024px) { .nl-swatches--size .nl-swatch { min-width: 88px; padding: 11px 16px; } }
/* L1, п.87.2: тот же лёгкий вид, что и у базового чипа. Правило оставлено отдельным,
   потому что у размерной плитки другой фон покоя (surface против canvas у гаммы), и
   без него подсветка выбранного была бы неотличима от невыбранного. */
.nl-swatches--size .nl-swatch.is-active {
	background: var(--nl-warm, #faf7f2); color: var(--nl-ink, #222222);
	border-color: var(--nl-ink, #222222);
	box-shadow: inset 0 0 0 1px var(--nl-ink, #222222);
}

.nl-product__form .quantity { display: inline-flex; margin-right: 10px; }
.nl-product__form .quantity input {
	width: 64px; height: 52px; text-align: center; border: 1px solid var(--nl-line, #e6e3dc); border-radius:  0;
	background: var(--nl-canvas, #fff); font-size: 15px; font-feature-settings: "tnum";
}
/* L1, п.87.3: кнопка покупки вернулась к виду старого сайта. Была чёрная плашка во всю
   ширину (фон --nl-gold, белый текст), стала контурной: без заливки, рамка и текст ink,
   при наведении серая заливка.

   Значение токена --nl-gold НЕ ТРОГАЕТСЯ (запрет части 6.4): правка сделана здесь,
   отдельным селектором, поэтому кнопки корзины и чекаута, шторка фильтров, карусель
   подарков, бейдж корзины, календарь доставки и точка активного фасета остались
   чёрными. Полный список того, что осознанно оставлено, в отчёте волны.

   Тап-таргет не изменился: min-height 52px, паддинги те же. Вес 700 оставлен: часть 6.3
   про заливку, про начертание кнопки клиент не писал (в отличие от цены, п.87.1). */
.nl-product__form .single_add_to_cart_button, .nl-btn--cart {
	min-height: 52px; padding: 14px 28px; border-radius:  0; cursor: pointer; /* P11 micro: 14 -> 13 */
	border: 1px solid var(--nl-ink, #222222);
	background: transparent; color: var(--nl-ink, #222222);
	font: 700 15px/1 var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif);
	transition: background-color .15s ease;
}
.nl-product__form .single_add_to_cart_button:hover, .nl-btn--cart:hover {
	background: var(--nl-line, #e6e3dc);
}
/* Состояние «сначала выберите вариант». WooCommerce вешает класс disabled и атрибут,
   а без заливки оно перестало читаться, поэтому объявлено явно: гасим до приглушённого
   и снимаем курсор. Раньше эту работу делал контраст белого текста на чёрном. */
.nl-product__form .single_add_to_cart_button:disabled,
.nl-product__form .single_add_to_cart_button.disabled {
	border-color: var(--nl-line, #e6e3dc); color: var(--nl-mute, #6e6e6e);
	background: transparent; cursor: not-allowed;
}
.nl-product__form .single_add_to_cart_button:disabled:hover,
.nl-product__form .single_add_to_cart_button.disabled:hover { background: transparent; }
/* Траурный регистр: заливки больше нет ни у кого, поэтому переопределять фон нечем.
   Внутри .is-lein токен --nl-ink переназначен на #2f3d38, значит рамка и текст кнопки
   там сами становятся холодными, как и задумано регистром. Было:
     .nl-product.is-lein .single_add_to_cart_button { background: var(--nl-ink, #2f3d38); } */
.woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.woocommerce-variation-price { margin-bottom: 8px; }

/* WAPF slot renders here (woocommerce_before_add_to_cart_button); absent cleanly when empty */
.wapf-field-container { margin: 12px 0; }

/* ---- P11: static purchase stubs (add-on box + delivery-date box). Visual only. ---- */
.nl-pdp-stubs { margin-top: 20px; display: flex; flex-direction: column; gap: 16px; }
.nl-addon { border: 1px solid var(--nl-line, #e6e3dc); border-radius:  0; overflow: hidden; }
.nl-addon__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; }
.nl-addon__row + .nl-addon__row { border-top: 1px solid var(--nl-line, #e6e3dc); }
.nl-addon__label { font-size: 12.5px; font-weight: 600; color: var(--nl-ink, #222222); }
.nl-addon__price { font-size: 12.5px; font-weight: 700; color: var(--nl-gold, #1c1c1c); font-feature-settings: "tnum"; }
.nl-addon__arrow { font-size: 12px; font-weight: 700; color: var(--nl-ink, #222222); }
.nl-delivery { padding: 14px; border: 1px dashed var(--nl-sage, #abc8bf); border-radius:  0; background: var(--nl-surface, #f7f5f1); }
.nl-delivery__label { display: block; font-size: 11px; color: var(--nl-mute, #6e6e6e); text-transform: uppercase; letter-spacing: .1em; }
.nl-delivery__value { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; font-size: 13px; font-weight: 600; color: var(--nl-ink, #222222); }
.nl-delivery__icon { font-size: 16px; color: var(--nl-mute, #6e6e6e); flex: 0 0 auto; }
.nl-delivery__hint { display: block; font-size: 10.5px; color: var(--nl-mute, #6e6e6e); margin-top: 6px; }
@media (min-width: 1024px) {
	.nl-addon__row { padding: 14px 16px; }
	.nl-addon__label, .nl-addon__price, .nl-addon__arrow { font-size: 13px; }
	.nl-delivery { padding: 16px; }
	.nl-delivery__value { font-size: 14px; }
	.nl-delivery__icon { font-size: 18px; }
}

/* ---- C6 feature-2: live greeting-card add-on (checkbox + message), reuses .nl-addon* ---- */
.nl-addon--live { margin-top: 16px; }
.nl-postcard { cursor: pointer; }
.nl-postcard__toggle { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; accent-color: var(--nl-gold, #1c1c1c); cursor: pointer; }
.nl-postcard .nl-addon__label { flex: 1 1 auto; }
.nl-postcard__text { padding: 0 14px 13px; }
.nl-postcard__text[hidden] { display: none; }
.nl-postcard__textarea {
	width: 100%; box-sizing: border-box; resize: vertical; min-height: 68px;
	padding: 9px 11px; border: 1px solid var(--nl-line, #e6e3dc); border-radius:  0;
	background: #fff; color: var(--nl-ink, #222222); font: inherit; font-size: 13px; line-height: 1.4;
}
.nl-postcard__textarea:focus { outline: none; border-color: var(--nl-sage, #abc8bf); }
@media (min-width: 1024px) {
	.nl-postcard__text { padding: 0 16px 14px; }
}

/* ---- T2: общие правила платных допов. Именные правила открытки выше остаются,
        эти обслуживают ленту, открытку соболезнования и всё, что появится дальше. ---- */
.nl-addon__toggle { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; accent-color: var(--nl-gold, #1c1c1c); cursor: pointer; }
.nl-addon__row { cursor: pointer; }
.nl-addon__row .nl-addon__label { flex: 1 1 auto; }
.nl-addon__text { padding: 0 14px 13px; }
.nl-addon__text[hidden] { display: none; }
.nl-addon__fieldlabel {
	display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: var(--nl-mute, #6e6e6e); margin: 0 0 6px;
}
.nl-addon__textarea,
.nl-addon__input {
	width: 100%; box-sizing: border-box; border: 1px solid var(--nl-line, #e6e3dc);
	border-radius: 0; padding: 9px 10px; font: 500 13px/1.5 inherit;
	background: var(--nl-canvas, #ffffff); color: var(--nl-ink, #222222); resize: vertical;
}
.nl-addon__input { resize: none; }
.nl-addon__textarea:focus,
.nl-addon__input:focus { outline: none; border-color: var(--nl-sage, #abc8bf); }
.nl-addon__hint { display: block; font-size: 11.5px; line-height: 1.5; color: var(--nl-mute, #6e6e6e); margin-top: 6px; }
.nl-addon__err { display: block; font-size: 11.5px; font-weight: 700; color: var(--nl-ink, #222222); margin-top: 6px; }
.nl-addon__err[hidden] { display: none; }
.nl-addon.is-bad { border-color: var(--nl-ink, #222222); }
.nl-addon.is-bad .nl-addon__textarea,
.nl-addon.is-bad .nl-addon__input { border-color: var(--nl-ink, #222222); background: var(--nl-blush, #fbf3f3); }

@media (min-width: 768px) {
	.nl-addon__text { padding: 0 16px 14px; }
}

/* ---- C6 feature-3: live gift <select> (reuses .nl-addon frame) ---- */
.nl-gift-field { padding: 13px 14px; }
.nl-gift { display: flex; flex-direction: column; gap: 8px; cursor: pointer; }
.nl-gift .nl-addon__label { flex: none; }
.nl-gift__select {
	width: 100%; box-sizing: border-box; padding: 9px 30px 9px 11px;
	border: 1px solid var(--nl-line, #e6e3dc); border-radius:  0;
	background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%235f6b62' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 11px center;
	color: var(--nl-ink, #222222); font: inherit; font-size: 13px; line-height: 1.4;
	appearance: none; -webkit-appearance: none; cursor: pointer;
}
.nl-gift__select:focus { outline: none; border-color: var(--nl-sage, #abc8bf); }
@media (min-width: 1024px) {
	.nl-gift-field { padding: 14px 16px; }
}

/* ---- C6 feature-1: live delivery date/time picker (reuses .nl-delivery sage frame) ---- */
.nl-delivery--live { margin-top: 16px; }
.nl-delivery__controls { display: flex; flex-direction: column; gap: 10px; margin-top: 9px; }
.nl-delivery__date, .nl-delivery__slot {
	width: 100%; box-sizing: border-box; padding: 9px 11px;
	border: 1px solid var(--nl-line, #e6e3dc); border-radius:  0;
	background: #fff; color: var(--nl-ink, #222222); font: inherit; font-size: 13px; line-height: 1.4;
	appearance: none; -webkit-appearance: none; cursor: pointer;
}
.nl-delivery__date { background-image: none; }
.nl-delivery__date::placeholder { color: var(--nl-mute, #6e6e6e); }
.nl-delivery__slot { background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%235f6b62' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 11px center; padding-right: 30px; }
.nl-delivery__date:focus, .nl-delivery__slot:focus { outline: none; border-color: var(--nl-sage, #abc8bf); }
.nl-delivery__slot:disabled { opacity: .6; cursor: default; }
.nl-delivery__slot option:disabled { color: var(--nl-mute, #9aa39c); }
@media (min-width: 768px) {
	.nl-delivery__controls { flex-direction: row; }
	.nl-delivery__date, .nl-delivery__slot { flex: 1 1 0; }
}

/* ---- degraded (unavailable) ---- */
.nl-unavailable { margin-top: 20px; padding: 18px; border: 1px solid var(--nl-line, #e6e3dc); border-radius:  0; background: var(--nl-surface, #f7f5f1); }
.nl-unavailable__text { margin: 0 0 12px; color: var(--nl-ink, #222222); font-size: 14.5px; }
.nl-btn { display: inline-block; padding: 12px 24px; border-radius:  0; background: var(--nl-ink, #222222); color: #fff; text-decoration: none; font-size: 13px; font-weight: 600; }

/* ---- details: Koostis + cross-sell ---- */
.nl-product__details { margin-top: clamp(28px, 5vw, 48px); display: block; }
@media (min-width: 768px) {
	.nl-product__details { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
}
.nl-product__h2 { font-family: var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif); font-weight: 300; font-size: 20px; margin: 0 0 12px; }
.nl-product__desc { font-size: 14.5px; line-height: 1.7; color: var(--nl-ink, #222222); }
.nl-product__desc p { margin: 0 0 10px; }
/* P16: cross-sell = full-width horizontal scroll row (spans the details grid, below
   Koostis). Row at every breakpoint (not a 2-col grid), fixed-width snapping cards. */
.nl-product__cross { grid-column: 1 / -1; margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--nl-line, #e6e3dc); }
.nl-product__cross .nl-product__h2 { font-family: var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif); font-weight: 700; font-size: 14px; margin: 0 0 14px; }
.nl-cross-grid {
	display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
	padding-bottom: 10px; -webkit-overflow-scrolling: touch;
}

/* reuse archive card look. catalog.css is NOT enqueued on single, so the P1 cream
   frame (.nl-card) is re-declared here for cross-sell cards. */
.nl-cross-grid .nl-card {
	flex: 0 0 auto; width: 210px; box-sizing: border-box; scroll-snap-align: start;
	background: var(--nl-surface, #f7f5f1); border: 1px solid var(--nl-line, #e6e3dc);
	border-radius:  0; padding: 12px;
}
@media (max-width: 1023px) { .nl-cross-grid .nl-card { width: 180px; } }
@media (max-width: 600px)  { .nl-cross-grid .nl-card { width: 156px; border-radius:  0; padding: 9px; } }
.nl-cross-grid .nl-card__media { aspect-ratio: 4 / 5; overflow: hidden; border-radius:  0; background: var(--nl-surface, #f7f5f1); }
.nl-cross-grid .nl-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nl-cross-grid .nl-card__title { font-family: var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif); font-weight: 300; font-size: 14px; margin: 8px 0 3px; }
.nl-cross-grid .nl-card__price { font-size: 13px; font-feature-settings: "tnum"; }
/* P4: cross-sell cards reuse nl-price markup but catalog.css is not enqueued on single,
   so the gold sum + mute prefix are re-declared here. */
.nl-cross-grid .nl-price__val { color: var(--nl-gold, #1c1c1c); font-weight: 600; }
.nl-cross-grid .nl-price__prefix { color: var(--nl-mute, #6e6e6e); font-weight: 400; }
.nl-cross-grid .nl-price--na { color: var(--nl-mute, #6e6e6e); }
.nl-cross-grid .nl-card__link { text-decoration: none; color: inherit; }

/* M1: anchor jumps must clear the sticky header, which grew a lot in 2.1. One rule for
   every in-page target instead of per-anchor offsets; #nl-giftrail is the live one. */
[id] { scroll-margin-top: calc(var(--nl-header-h) + var(--nl-sticky-gap)); }

/* ---- P14: sticky mobile add-to-cart (< 768) — full maket variant ----
   surface band, border-top; variable products get a size-chip row above the total row. */
.nl-sticky-cart {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
	display: block; padding: 0 0 env(safe-area-inset-bottom);
	background: var(--nl-surface, #f7f5f1); border-top: 1px solid var(--nl-line, #e6e3dc);
	/* P15: the bar sits in MAIN (outside the wrapper that sets the family), so
	   set the sans stack here so Kokku + price + Woo amount don't fall back to serif. */
	font-family: var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif);
}
/* size-chip row (variable only) */
.nl-sticky-cart__sizes { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 0; }
.nl-sticky-size {
	flex: 1; min-width: 60px; padding: 6px 8px; border-radius:  0;
	border: 1px solid var(--nl-line, #e6e3dc); background: var(--nl-canvas, #fff); color: var(--nl-ink, #222222);
	font-size: 11.5px; font-weight: 600; cursor: pointer; font-feature-settings: "tnum";
}
.nl-sticky-size.is-active { background: var(--nl-ink, #222222); color: #fff; border-color: var(--nl-ink, #222222); }
.nl-sticky-size[disabled] { opacity: .4; cursor: not-allowed; }
/* total row */
.nl-sticky-cart__row { display: flex; align-items: center; gap: 11px; padding: 10px 12px; }
.nl-sticky-cart__total { flex: 0 0 auto; display: flex; flex-direction: column; }
.nl-sticky-cart__label { font-size: 10px; color: var(--nl-mute, #6e6e6e); }
.nl-sticky-cart__price { font-size: 18px; font-weight: 700; color: var(--nl-ink, #222222); font-feature-settings: "tnum"; }
.nl-sticky-cart__price .price, .nl-sticky-cart__price .amount { font-size: 18px; color: var(--nl-ink, #222222); }
.nl-sticky-cart__prefix { font-size: 11px; font-weight: 400; color: var(--nl-mute, #6e6e6e); }
/* L1, п.87.3: липкая кнопка покупки идёт тем же контурным видом, что и основная.
   Полоса стоит на surface #f7f5f1, поэтому фон покоя взят canvas (белый): прозрачный
   на сером выглядел бы не кнопкой, а надписью. Наведение той же серой заливкой, что и
   у основной кнопки. Тап-таргет прежний: padding 15px при кегле 14 это те же 44+ px. */
.nl-sticky-cart__btn {
	flex: 1; min-height: 44px; padding: 15px; border-radius:  0; cursor: pointer;
	border: 1px solid var(--nl-ink, #222222);
	background: var(--nl-canvas, #fff); color: var(--nl-ink, #222222);
	font: 700 14px/1 var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif);
	transition: background-color .15s ease;
}
.nl-sticky-cart__btn:hover { background: var(--nl-line, #e6e3dc); }
.nl-sticky-cart__btn:disabled, .nl-sticky-cart__btn.disabled {
	border-color: var(--nl-line, #e6e3dc); color: var(--nl-mute, #6e6e6e);
	background: var(--nl-canvas, #fff); cursor: not-allowed;
}
/* Траурный регистр: заливки нет, --nl-ink внутри .is-lein уже холодный, переопределять
   нечего. Было: .nl-sticky-cart.is-lein .nl-sticky-cart__btn { background: var(--nl-ink, #2f3d38); } */
@media (min-width: 768px) { .nl-sticky-cart { display: none !important; } }

/* focus */
.nl-product a:focus-visible, .nl-product button:focus-visible, .nl-product select:focus-visible,
.nl-sticky-cart button:focus-visible { outline: 2px solid var(--nl-gold, #1c1c1c); outline-offset: 2px; border-radius:  0; }

/* ============================================================================
   Зона покупки: компоновка под макет 1.4 (правки 2/3 + целевой порядок).
   Целевой порядок: гамма -> Открытка -> дата -> ссылка подарка -> размер -> В корзину.
   Гамма и размер это две строки нативной table.variations; порядок задаём флексом
   и order (DOM/механику формы не трогаем, только визуальный порядок).
   ==========================================================================*/

/* правка 2: ссылка "Добавить подарок" */
.nl-product__giftlink{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:13px;font-weight:700;color:var(--nl-gold,#1c1c1c);text-decoration:none}
.nl-product__giftlink svg{flex:0 0 auto}

/* правка 3: описания размеров второй строкой на кнопке */
.nl-swatches--size .nl-swatch{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
/* L1, п.87.2: 700 -> 600, «убрать всё жирное». Вес совпал с базовым чипом, поэтому
   размер и гамма теперь набраны одинаково. Различает состояния фон и рамка, а не вес. */
.nl-size__label{font:600 13px/1.1 'Open Sans',sans-serif;font-feature-settings:'tnum'}
.nl-size__sub{display:block;font:600 11px/1.2 'Open Sans',sans-serif;font-feature-settings:'tnum';color:var(--nl-ink,#1d1d1b);margin-top:3px;white-space:nowrap}
/* K1: вторая строка кнопки размера это цена, а не габарит. wc_price приносит свою
   обёртку .woocommerce-Price-amount с собственным размером шрифта, поэтому её
   гасим до размера строки, иначе цена вылезает из кнопки. Приставка «от» тише цены. */
.nl-size__sub .woocommerce-Price-amount{font:inherit;color:inherit}
.nl-size__prefix{font-weight:500;color:var(--nl-mute,#6e6e6e)}
/* K1 чинил здесь невидимую цену: выбранная кнопка была залита чернилами, а цена на ней
   объявлена чернилами же, и Сергей поймал это скриншотом, а не грепом.

   L1, п.87.2: заливки больше нет, фон выбранной плитки тёплый, поэтому БЕЛАЯ цена на
   ней пропала бы ровно тем же способом, только наоборот. Правило снято целиком, цена и
   приставка возвращаются к своим обычным цветам (ink и mute), читаемым на обоих фонах.
   Было:
     .nl-swatches--size .nl-swatch.is-active .nl-size__sub,
     .nl-swatches--size .nl-swatch.is-active .nl-size__prefix{color:#fff} */

/* ---- K2: таблица размеров под кнопками, макет 2.5, блок sizeGuide ----
   Размеры и отступы взяты из эталона один в один: верхняя линия у контейнера,
   заголовок мелким капсом с трекингом .09em приглушённым цветом, строки по 8px
   сверху и снизу с линией сверху у каждой, цифры табличным начертанием.
   Скругления нулевые, как везде в теме после эталона 2.1. */
.nl-sizeguide{margin-top:14px;border-top:1px solid var(--nl-line,#e6e3dc)}
.nl-sizeguide__title{font:700 10.5px/1.2 'Open Sans',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--nl-mute,#6e6e6e);padding:10px 0 6px}
.nl-sizeguide__row{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-top:1px solid var(--nl-line,#e6e3dc);font-size:12.5px;line-height:1.4}
.nl-sizeguide__dim{color:var(--nl-mute,#6e6e6e);white-space:nowrap;font-feature-settings:'tnum'}
/* Подсветка выбранного размера. Фон тёплый, а не чернильный: строка таблицы это
   справка, а не второй орган управления, и спорить контрастом с выбранной кнопкой
   ей незачем. Отрицательные поля с равной компенсацией паддингом дают заливке уйти
   под края колонки, не сдвигая текст ни на пиксель. */
.nl-sizeguide__row.is-active{background:var(--nl-warm,#faf7f2);font-weight:700;margin:0 -10px;padding-left:10px;padding-right:10px}
.nl-sizeguide__row.is-active .nl-sizeguide__dim{color:var(--nl-ink,#222222)}
/* Мобильная ширина: длинное «XL (Extra Large)» рядом с «alates 60 cm» упирается в
   колонку около 300px. Габарит держит nowrap и не рвётся, а название разрешено
   переносить, поэтому строка растёт вниз аккуратно вместо горизонтального выпирания. */
@media (max-width:420px){
	.nl-sizeguide__row{gap:10px;font-size:12px}
	.nl-sizeguide__name{min-width:0}
}

/* целевой порядок зоны покупки через flex order (WAPF-полей в зоне нет — безопасно) */
.nl-product__form .variations_form{display:flex;flex-direction:column}
.nl-product__form .variations_form > *{order:6}
.nl-product__form .variations_form table.variations,
.nl-product__form .variations_form table.variations tbody{display:contents}
.nl-product__form .variations tr{order:6}
.nl-product__form .variations tr:has(.nl-swatches--gamma){order:1}
.nl-product__form .nl-postcard-field{order:2}
.nl-product__form .nl-delivery{order:3}
.nl-product__form .nl-product__giftlink{order:4}
.nl-product__form .variations tr:has(.nl-swatches--size){order:5}
.nl-product__form .single_variation_wrap{order:7}

/* плавный скролл к карусели по якорю #nl-giftrail (single.css грузится только на карточке) */
html{scroll-behavior:smooth}

/* Баг A: единый вертикальный ритм зоны покупки через row-gap; обнуляем ad-hoc вертикальные
   margin у флекс-детей — прямых (Открытка/дата/ссылка/single_variation_wrap) и промоутнутых
   через display:contents строк tr (гамма/размер). Внутренние отступы блоков НЕ трогаем
   (label->pills 8px, цена/кнопка внутри single_variation_wrap). */
.nl-product__form .variations_form{row-gap:16px}
.nl-product__form .variations_form > *{margin-top:0;margin-bottom:0}
.nl-product__form .variations_form tr{margin-top:0;margin-bottom:0}

/* ============================================================================
   Сверка с макетом 1.4 (dc D-TOODE): пункты 2,5,6,7,8. Значения 1:1 из эталона.
   Механику формы/пикера/карусели/открытки не трогаем — только разметка и стили.
   ==========================================================================*/

/* п.2 Открытка: лейбл 13/600, цена 13/700 gold, ряд по центру, padding 14x16 (dc:948-955) */
.nl-postcard.nl-addon__row{align-items:center;padding:14px 16px}
.nl-postcard .nl-addon__label{font-size:13px;font-weight:600}
.nl-postcard .nl-addon__price{font-size:13px;font-weight:700;color:var(--nl-gold,#1c1c1c)}

/* п.5 Кнопки размера на всю ширину секции: контейнер gap 9px, кнопка flex:1 min-width:0 (dc:1003-1005) */
.nl-swatches--size{gap:9px}
.nl-swatches--size .nl-swatch{flex:1;min-width:0;padding:10px 10px}

/* п.6-7-8 Нижний ряд: [Итого + чёрная цена 22/700] | [В корзину flex:1], без qty (dc:1011-1014) */
.nl-product__form .single_variation_wrap{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;margin-top:22px}
.nl-product__form .single_variation_wrap .nl-total__label{grid-column:1;grid-row:1;font-size:11px;line-height:1.2;color:var(--nl-mute,#6e6e6e)}
.nl-product__form .single_variation_wrap .woocommerce-variation.single_variation{grid-column:1;grid-row:2;margin:0}
.nl-product__form .single_variation_wrap .woocommerce-variation-price{margin:0}
/* L1a, п.87.1: вес 700 -> 400. Это цена ряда «Итого», правило волны P2, и оно
   специфичнее общего правила цены (0,4,1 против 0,3,0), поэтому облегчение верхней
   цены в L1 сюда не доставало. На вариативном товаре, то есть на всех букетах,
   покупатель смотрит именно на это число. Кегль 22px, цвет ink и tnum НЕ тронуты. */
.nl-product__form .single_variation_wrap .woocommerce-variation-price .price{font-size:22px;font-weight:400;color:var(--nl-ink,#222222);font-feature-settings:'tnum'}
.nl-product__form .single_variation_wrap .woocommerce-variation-add-to-cart{grid-column:2;grid-row:1 / span 2;margin:0;flex-wrap:nowrap}
.nl-product__form .single_variation_wrap .woocommerce-variation-add-to-cart .quantity{display:none!important}
.nl-product__form .single_variation_wrap .single_add_to_cart_button{flex:1;width:100%;min-height:0;padding:16px;border-radius: 0;font:700 15px/1 var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif)}

/* ============================================================================
   Hero per-gap вертикальный ритм по макету 1.4 (dc D-TOODE 933-1014). Заменяет
   единый row-gap:16px явными интервалами дизайнера. Каждому элементу свой
   margin-top, margin-bottom:0 (во флексе margin не суммируются). Внутренние 10px
   лейбл->контролы (.variations .label label) не трогаем.
   ==========================================================================*/

/* убираем единый row-gap — теперь интервалы разные */
.nl-product__form .variations_form{row-gap:0}

/* верхний текстовый блок: цена 10, краткое описание 14 (WC <p class=price> обнуляем,
   иначе его дефолтные margin протекают и дают лишние ~14px) */
.nl-product__title{margin-bottom:0}
.nl-product__price{margin-top:10px;margin-bottom:0}
.nl-product__price .price{margin-top:0;margin-bottom:0}
.nl-product__excerpt{margin-top:14px;margin-bottom:0}
.nl-product__excerpt p:last-child{margin-bottom:0} /* убрать протечку 8px ниже блока -> excerpt->гамма ровно 24 */

/* краткое описание -> гамма ровно 24: обнуляем фантомный stubs и margin формы,
   24 задаёт margin-top самой гаммы (первого флекс-ребёнка) */
.nl-pdp-stubs{margin-top:0}
.nl-product__form{margin-top:0}

/* per-gap margin-top у флекс-детей правой колонки (порядок уже верный) */
.nl-product__form .variations_form tr:has(.nl-swatches--gamma){margin-top:24px;margin-bottom:0}
.nl-product__form .nl-postcard-field{margin-top:22px;margin-bottom:0}
.nl-product__form .nl-delivery--live{margin-top:18px;margin-bottom:0}
.nl-product__form .nl-product__giftlink{margin-top:16px;margin-bottom:0}
.nl-product__form .variations_form tr:has(.nl-swatches--size){margin-top:22px;margin-bottom:0}

/* Размерная строка: WC-blocktheme даёт th.label padding-bottom: var(--wp--style--block-gap)=19.2px
   сверх наших 10px margin. Обнуляем ТОЛЬКО нижний padding ТОЛЬКО у размерной строки
   (гамму не трогаем; padding-right:22px сохраняем) -> зазор лейбл->кнопки ровно 10px. */
.nl-product__form .variations tr:has(.nl-swatches--size) th.label{padding-bottom:0}

/* Открытка: WC-blocktheme .woocommerce-page label{margin-bottom:0.7em}=15.4px залипает внутри
   коробки (.nl-postcard-field overflow:hidden -> BFC, наружу не выходит), делая её нижне-тяжёлой.
   Обнуляем нижний margin ТОЛЬКО у строки открытки. Padding 14 16 и прочее не трогаем. */
.nl-product__form .nl-postcard-field .nl-postcard.nl-addon__row{margin-bottom:0}

/* Строка гаммы: тот же дефолт WC-blocktheme (th padding-bottom: var(--wp--style--block-gap)=19.2px)
   сверх 10px margin лейбла. Обнуляем ТОЛЬКО нижний padding ТОЛЬКО у строки гаммы
   (padding-right:22px сохраняем) -> зазор лейбл->чипы ровно 10px. */
.nl-product__form .variations tr:has(.nl-swatches--gamma) th.label{padding-bottom:0}

/* Строка гаммы td.value: тот же дефолт WC-blocktheme (td padding-bottom=19.2px) добавляет
   мёртвое место под чипами/Очистить и раздувает зазор до Открытки. Обнуляем нижний padding
   ТОЛЬКО у td.value строки гаммы -> внешний зазор гамма->Открытка ровно 22px (margin-top Открытки).
   Чипы, Очистить, механику не трогаем. */
.nl-product__form .variations tr:has(.nl-swatches--gamma) td.value{padding-bottom:0}

/* Строка размера td.value: тот же дефолт WC-blocktheme (td padding-bottom=19.2px) добавляет
   мёртвое место под кнопками размера перед рядом Итого. Обнуляем нижний padding ТОЛЬКО у
   td.value строки размера -> внешний зазор размер->Итого ровно 22px (margin-top ряда Итого). */
.nl-product__form .variations tr:has(.nl-swatches--size) td.value{padding-bottom:0}

/* ============================================================================
   P2a, часть 2: ось размера с единственным значением.

   Строку выбора прячем целиком, вместе с подписью «SUURUS»: выбирать не из чего.
   Нативный select остаётся в разметке внутри скрытой строки и продолжает отдавать
   значение форме (скрытые поля отправляются), поэтому размер доезжает до корзины,
   заказа и письма ровно как раньше. Метку ставит PHP, по числу значений оси, и
   только оси размера (см. inc/single.php).

   Полезная часть кнопки, габарит, переезжает строкой к цене: третья строка левой
   колонки ряда, кнопка при этом растягивается на все три.
   ==========================================================================*/
.nl-product__form .variations tr:has(.nl-swatches--only){display:none}

.nl-product__form .single_variation_wrap .nl-size-line{grid-column:1;grid-row:3;margin-top:4px;font:400 11px/1.2 var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif);color:var(--nl-mute,#6e6e6e);white-space:nowrap}
.nl-product__form .single_variation_wrap:has(.nl-size-line) .woocommerce-variation-add-to-cart{grid-row:1 / span 3}

/* Липкая панель: тот же габарит третьей строкой под ценой, кегль как у подписи «Итого». */
.nl-sticky-cart__size{font-size:10px;line-height:1.2;color:var(--nl-mute,#6e6e6e);white-space:nowrap}