/**
 * Страница «Доставка цветов», макет 2.3, экран Kohaletoimetamine (волна K3).
 *
 * В макете три экземпляра экрана: мобильный, планшетный и десктопный. Здесь они
 * собраны в один набор правил mobile first с двумя контрольными точками, 768 и 1024,
 * теми же, на которых стоит остальная тема.
 *
 * Размеры, отступы и начертания взяты из эталона один в один. Скругления нулевые,
 * как везде после эталона 2.1.
 *
 * Страница НЕ требует ни строчки JS: лента листается родным горизонтальным скроллом,
 * как геро-лента после p44.
 */

/*
 * Поля страницы НЕ заводятся заново. Шаблон страниц уже даёт записи горизонтальные
 * поля переменной --nl-wg (18 / 32 / 40 на тех же контрольных точках), и свадебный
 * лендинг волны W2 считает свои вылеты именно от неё, чтобы полосы во всю ширину
 * совпадали у двух страниц до пикселя. Здесь то же самое.
 *
 * Первая версия K3 завела собственную переменную с теми же числами, и поля сложились
 * с родительскими: текст уезжал на 80px от края вместо 40, а тёплая полоса ленты
 * начиналась не от края экрана, а от границы колонки. Поймано замером в браузере.
 *
 * Блок выходит из полей записи отрицательным полем и раздаёт их сам: тогда полоса
 * ленты идёт от края до края, а текст внутри стоит там же, где стоял.
 */
.nl-deliv { margin-left: calc(var(--nl-wg) * -1); margin-right: calc(var(--nl-wg) * -1); }

.nl-dsec__inner { max-width: 1300px; margin: 0 auto; padding-left: var(--nl-wg); padding-right: var(--nl-wg); }

/* ---- заголовок и подводка ---- */
.nl-deliv__head { padding-top: 4px; }
.nl-deliv__title {
	font-family: var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif);
	font-weight: 300; font-size: 30px; line-height: 1.1; letter-spacing: -.01em; margin: 0;
	color: var(--nl-ink, #222222);
}
.nl-deliv__lead {
	font-size: 15px; line-height: 1.7; color: var(--nl-mute, #6e6e6e);
	margin: 14px 0 0; max-width: 660px; text-wrap: pretty;
}
@media (min-width: 768px)  { .nl-deliv__title { font-size: 38px; line-height: 1.08; } .nl-deliv__lead { font-size: 16.5px; margin-top: 16px; max-width: 580px; } }
@media (min-width: 1024px) { .nl-deliv__title { font-size: 46px; } .nl-deliv__lead { font-size: 18px; margin-top: 20px; max-width: 660px; } }

/* ---- общая мелкая подпись капсом ---- */
.nl-dsec__label {
	font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
	color: var(--nl-mute, #6e6e6e); line-height: 1.6;
}
@media (min-width: 768px) { .nl-dsec__label { font-size: 11px; } }

/* ---- строка «подпись слева, содержимое справа» ---- */
.nl-drow { margin-top: 36px; border-top: 1px solid var(--nl-ink, #222222); padding-top: 14px; }
.nl-drow__label { margin-bottom: 14px; }
@media (min-width: 768px)  { .nl-drow { margin-top: 52px; padding-top: 16px; } .nl-drow__label { margin-bottom: 18px; } }
@media (min-width: 1024px) {
	/* Десктоп: подпись уходит в свою колонку 190px и встаёт вровень с содержимым. */
	.nl-drow { margin-top: 64px; padding-top: 18px; display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 48px; align-items: start; }
	.nl-drow__label { margin-bottom: 0; }
	.nl-deliv .nl-dsec + .nl-dsec .nl-drow { margin-top: 80px; }
}

/* ---- Когда привезём и Сколько стоит ---- */
.nl-dwhen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
@media (min-width: 768px)  { .nl-dwhen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; } }
@media (min-width: 1024px) { .nl-dwhen { gap: 64px; } }
.nl-dwhen__sublabel { margin-bottom: 14px; }
@media (min-width: 768px) { .nl-dwhen__sublabel { margin-bottom: 16px; } }

.nl-dnote { font-size: 13.5px; line-height: 1.7; color: var(--nl-mute, #6e6e6e); margin: 13px 0 0; text-wrap: pretty; }
.nl-dnote:first-child { margin-top: 0; font-size: 14px; }
.nl-dnote--tight { margin-top: 10px; }
@media (min-width: 768px)  { .nl-dnote { font-size: 14px; margin-top: 16px; } .nl-dnote:first-child { font-size: 14.5px; } }
@media (min-width: 1024px) { .nl-dnote { font-size: 14.5px; } .nl-dnote:first-child { font-size: 15px; } .nl-dnote--tight { margin-top: 12px; } }

/* Правило 15:30. Крупная лёгкая типографика, оно читается первым в колонке. */
.nl-drule {
	font-size: 21px; font-weight: 300; line-height: 1.35; color: var(--nl-ink, #222222);
	margin: 26px 0 0; text-wrap: pretty; font-variant-numeric: tabular-nums;
}
@media (min-width: 768px)  { .nl-drule { font-size: 23px; margin-top: 30px; } }
@media (min-width: 1024px) { .nl-drule { font-size: 26px; margin-top: 34px; } }

/* ---- строки «ключ слева, число справа» ---- */
.nl-dlist { margin-top: 12px; border-top: 1px solid var(--nl-line, #e6e3dc); }
.nl-dlist--price { margin-top: 0; border-top: 1px solid var(--nl-ink, #222222); }
.nl-dlist__row {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px;
	align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--nl-line, #e6e3dc);
}
.nl-dlist__key { font-size: 14px; line-height: 1.45; color: var(--nl-ink, #222222); }
.nl-dlist__val { font-size: 15px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nl-dlist--price .nl-dlist__row { padding: 15px 0; }
.nl-dlist__val--price { font-size: 23px; letter-spacing: -.01em; }
@media (min-width: 768px) {
	.nl-dlist { margin-top: 14px; }
	.nl-dlist__row { gap: 16px; padding: 12px 0; }
	.nl-dlist__key { font-size: 14.5px; }
	.nl-dlist__val { font-size: 16px; }
	.nl-dlist--price .nl-dlist__row { padding: 17px 0; }
	.nl-dlist__val--price { font-size: 25px; }
}
@media (min-width: 1024px) {
	.nl-dlist { margin-top: 16px; }
	.nl-dlist__row { gap: 20px; padding: 13px 0; }
	.nl-dlist__key { font-size: 15px; line-height: 1.5; }
	.nl-dlist__val { font-size: 17px; }
	.nl-dlist--price .nl-dlist__row { padding: 20px 0; }
	.nl-dlist--price .nl-dlist__key { font-size: 17px; line-height: 1.4; }
	.nl-dlist__val--price { font-size: 28px; }
}

/* ---- тихая строка ---- */
.nl-dquiet { font-size: 12px; line-height: 1.6; color: var(--nl-mute, #6e6e6e); margin: 12px 0 0; }
.nl-dquiet--pickup { margin-top: 24px; }
@media (min-width: 768px)  { .nl-dquiet { font-size: 12.5px; margin-top: 14px; } .nl-dquiet--pickup { margin-top: 28px; } }
@media (min-width: 1024px) { .nl-dquiet--pickup { margin-top: 34px; max-width: 620px; } }

/* ---- Как это устроено: три шага ---- */
.nl-dsteps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
@media (min-width: 768px)  { .nl-dsteps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
@media (min-width: 1024px) { .nl-dsteps { gap: 44px; } }
.nl-dstep__num { font-size: 12px; font-weight: 700; color: var(--nl-mute, #6e6e6e); font-variant-numeric: tabular-nums; }
.nl-dstep__text { font-size: 15px; line-height: 1.65; margin: 7px 0 0; text-wrap: pretty; color: var(--nl-ink, #222222); }
@media (min-width: 1024px) { .nl-dstep__num { font-size: 13px; } .nl-dstep__text { font-size: 16px; margin-top: 12px; } }

/* ---- лента букетов ---- */
.nl-dsec--rail {
	margin-top: 44px; padding: 26px 0 30px;
	background: var(--nl-warm, #faf7f2);
	border-top: 1px solid var(--nl-line, #e6e3dc);
	border-bottom: 1px solid var(--nl-line, #e6e3dc);
}
@media (min-width: 768px)  { .nl-dsec--rail { margin-top: 64px; padding: 36px 0 40px; } }
@media (min-width: 1024px) { .nl-dsec--rail { margin-top: 88px; padding: 44px 0 48px; } }

.nl-drail__head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
@media (min-width: 768px) { .nl-drail__head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; } }
.nl-drail__title {
	font-family: var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif);
	font-weight: 300; font-size: 24px; line-height: 1.14; margin: 0; color: var(--nl-ink, #222222);
}
@media (min-width: 768px)  { .nl-drail__title { font-size: 28px; line-height: 1.12; } }
@media (min-width: 1024px) { .nl-drail__title { font-size: 34px; } }
.nl-drail__sub { font-size: 13.5px; line-height: 1.65; color: var(--nl-mute, #6e6e6e); margin: 8px 0 0; }
@media (min-width: 1024px) { .nl-drail__sub { font-size: 15px; line-height: 1.7; margin-top: 10px; } }

.nl-drail__cta {
	display: inline-block; padding: 14px 22px; border: 1px solid var(--nl-ink, #222222); border-radius: 0;
	color: var(--nl-ink, #222222); text-decoration: none;
	font: 700 12.5px/1 var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif);
	flex: 0 0 auto; align-self: stretch; text-align: center;
}
@media (min-width: 768px)  { .nl-drail__cta { align-self: auto; padding: 15px 28px; font-size: 13px; } }
.nl-drail__cta:hover, .nl-drail__cta:focus-visible { background: var(--nl-ink, #222222); color: #fff; }

/*
 * Дорожка. Свободный горизонтальный скролл без единой строчки JS, ровно как
 * геро-лента главной после p44: ни стрелок, ни точек, ни таймера. Полоса прокрутки
 * спрятана, потому что край карточки сам подсказывает, что лента продолжается.
 */
.nl-drail__track {
	display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
	margin-top: 18px; padding: 2px var(--nl-wg) 4px;
	max-width: 1300px; margin-left: auto; margin-right: auto;
	scrollbar-width: none; -ms-overflow-style: none;
	overscroll-behavior-x: contain;
	/*
	 * Без scroll-padding привязка съедает левое поле дорожки: snap выравнивает первую
	 * карточку по краю СКРОЛЛПОРТА, а не по краю содержимого, браузер сам прокручивает
	 * ленту на величину padding, и карточка встаёт вплотную к краю экрана, разъезжаясь
	 * с заголовком страницы. Измерено в браузере: scrollLeft уезжал в 40.
	 */
	scroll-padding-left: var(--nl-wg); scroll-padding-right: var(--nl-wg);
}
.nl-drail__track::-webkit-scrollbar { display: none; }
@media (min-width: 768px)  { .nl-drail__track { gap: 18px; margin-top: 24px; } }
@media (min-width: 1024px) { .nl-drail__track { gap: 20px; margin-top: 28px; padding-bottom: 6px; } }

.nl-drail__item {
	flex: 0 0 168px; scroll-snap-align: start; text-decoration: none; color: inherit;
	display: block; min-width: 0;
}
@media (min-width: 768px)  { .nl-drail__item { flex-basis: 200px; } }
@media (min-width: 1024px) { .nl-drail__item { flex-basis: 232px; } }

.nl-drail__media { display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--nl-surface, #f7f5f1); }
/*
 * K3a. Селектор ДВУХКЛАССОВЫЙ намеренно, и это не украшательство.
 *
 * Шаблон страниц объявляет `.nl-page__content img { height: auto }`, а это два
 * простых селектора против одного у `.nl-drail__img`. Колонка выигрывала, картинка
 * получала высоту по своим пропорциям и стояла в коробке 4:5 как придётся: у одних
 * букетов снизу оставалась полоса подложки, у других кадр обрезался. Подписи при
 * этом были ровные (высоту держит сама коробка), поэтому дефект и не бросался в
 * глаза при беглом взгляде на разметку. Замерено: у пяти карточек высота img вышла
 * 232, 256, 336, 277 и 250 при коробке 290.
 *
 * Форма записи повторяет карточку каталога (`.nl-card__media .nl-card__img,
 * .nl-card__media img` в catalog.css): там та же задача решена так же, и держать
 * два разных приёма для одного и того же было бы хуже. Второй селектор в списке
 * страхует случай, когда WordPress отдаст картинку без нашего класса.
 *
 * Аспект 4:5 совпадает с карточкой каталога, это осознанно: лента доставки это
 * маленькая витрина товаров, и ритм у неё должен быть каталожный. У геро-ленты
 * главной свой аспект 3:4, она крупнее и живёт на первом экране.
 */
.nl-drail__media .nl-drail__img,
.nl-drail__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nl-drail__ph { display: block; width: 100%; height: 100%; }
.nl-drail__name {
	display: block; margin-top: 9px; font-size: 14.5px; line-height: 1.35; color: var(--nl-ink, #222222);
	font-family: var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif);
}
.nl-drail__price { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 700; color: var(--nl-gold, #1c1c1c); font-variant-numeric: tabular-nums; }
.nl-drail__item:hover .nl-drail__name { text-decoration: underline; }
@media (min-width: 1024px) { .nl-drail__name { font-size: 16px; margin-top: 11px; } .nl-drail__price { font-size: 13px; margin-top: 3px; } }

/* Цена внутри ленты приходит из nl_price со своей обёрткой, гасим её до строки. */
.nl-drail__price .nl-price, .nl-drail__price .woocommerce-Price-amount { font: inherit; color: inherit; }

/* ---- контакты ---- */
.nl-dsec--contact { padding: 28px 0 40px; }
@media (min-width: 768px)  { .nl-dsec--contact { padding: 40px 0 60px; } }
@media (min-width: 1024px) { .nl-dsec--contact { padding: 48px 0 76px; } }
.nl-dcontact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; font-size: 14px; }
.nl-dcontact > .nl-dsec__label { margin-bottom: 0; }
@media (min-width: 768px)  { .nl-dcontact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } .nl-dcontact > .nl-dsec__label { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .nl-dcontact { grid-template-columns: 190px repeat(3, minmax(0, 1fr)); gap: 48px; font-size: 15px; } .nl-dcontact > .nl-dsec__label { grid-column: auto; } }
.nl-dcontact__item .nl-dsec__label { margin-bottom: 5px; }
@media (min-width: 768px) { .nl-dcontact__item .nl-dsec__label { margin-bottom: 8px; } }
.nl-dcontact__value a { color: var(--nl-ink, #222222); text-decoration: none; }
.nl-dcontact__value a:hover { text-decoration: underline; }
.nl-dcontact__value--num { font-variant-numeric: tabular-nums; }

/*
 * Гасить типографику колонки .nl-page__content здесь НЕ надо, и это проверено, а не
 * предположено. Волна W2 уже наступила на эти грабли и вынесла прозу под класс
 * .nl-page__body--narrow (см. комментарий в nl-page.css). Широкая запись, а страница
 * доставки именно такая, никакой чужой типографики не получает.
 *
 * Первая версия K3 всё же поставила тут обнуляющее правило «на всякий случай», и оно
 * своей специфичностью убило ВЕРТИКАЛЬНЫЙ РИТМ самого блока: лид, правило 15:30 и все
 * тихие строки потеряли свои отступы и слиплись. Поймано скриншотом, не рассуждением.
 * Мораль на будущее: защитное правило от чужих стилей бьёт по своим ровно так же.
 */