/* ============ luma.brnd — финальный слой дизайн-кода ============
 * Грузится ПОСЛЕДНИМ. В editorial.css Codex оставил промежуточный «тёплый
 * коричневый» слой, и часть его цветов (выбранный город, ПВЗ, сертификат,
 * фокус полей, шапка карты СДЭК) не перебита итоговой розовой палитрой.
 * Здесь всё, что рисует магазин вне каталога, приведено к одним токенам:
 *   фон #fff1ef · чернила #30252a · акцент #bd2856 · розовый #fe517f
 *   жёлтый #fcebb0 · линии #dfbbc3 · мягкий розовый #f9dce3
 *   заголовки LumaJost, текст Arial, акцентный курсив Georgia
 *   поля и плитки — радиус 3px, кнопки — «пилюли»
 */
:root {
  --b-paper: #fff1ef; --b-ink: #30252a; --b-accent: #bd2856; --b-accent-dark: #972044;
  --b-pink: #fe517f; --b-yellow: #fcebb0; --b-line: #dfbbc3; --b-soft: #f9dce3;
  --b-muted: #78636a; --b-white: #fffaf9;
}

/* ---------- корзина: поля ---------- */
.lm-drawer .lm-field input, .lm-drawer .lm-field textarea,
.lm-drawer .lm-city__inp, .lm-drawer .lm-promo__inp, .lm-drawer .lm-ozon input {
  border: 1px solid var(--b-line); border-radius: 3px; background: var(--b-white);
  color: var(--b-ink); font: 400 16px/1.4 Arial, sans-serif; padding: 12px 14px;
}
.lm-drawer .lm-field input::placeholder, .lm-drawer .lm-field textarea::placeholder,
.lm-drawer .lm-city__inp::placeholder, .lm-drawer .lm-promo__inp::placeholder,
.lm-drawer .lm-ozon input::placeholder { color: #a08a91; }
.lm-drawer input:focus, .lm-drawer textarea:focus {
  border-color: var(--b-accent); outline: 2px solid rgba(189, 40, 86, .18); outline-offset: 0;
}
.lm-drawer .lm-field input.lm-invalid, .lm-drawer .lm-promo__inp.lm-invalid {
  border-color: var(--b-accent); background: #fff; outline: 2px solid rgba(189, 40, 86, .22); outline-offset: 0;
}
.lm-drawer .lm-field__hint, .lm-drawer .lm-city__hint, .lm-drawer .lm-promo__hint { color: var(--b-muted); font-size: 12px; line-height: 1.5; }
.lm-drawer .lm-promo__hint--err { color: var(--b-accent); }
.lm-drawer .lm-city__lbl, .lm-drawer .lm-ozon label, .lm-drawer .lm-ozon__lbl { color: var(--b-muted); font-size: 13px; }

/* ---------- корзина: способ доставки и город ---------- */
.lm-drawer .lm-delmethod { border: 1px solid var(--b-line); border-radius: 3px; background: transparent; }
.lm-drawer .lm-delmethod b { font: 400 16px LumaJost, Arial, sans-serif; color: var(--b-ink); }
.lm-drawer .lm-delmethod i { color: var(--b-muted); }
.lm-drawer .lm-delmethod:hover { border-color: var(--b-accent); }
.lm-drawer .lm-delmethod.lm-active { border-color: var(--b-accent); background: var(--b-soft); box-shadow: inset 0 0 0 1px var(--b-accent); }

.lm-drawer .lm-city__opt { background: transparent; border: 0; border-bottom: 1px solid var(--b-line); border-radius: 0; margin: 0; padding: 11px 2px; }
.lm-drawer .lm-city__opt:hover { background: var(--b-soft); }
.lm-drawer .lm-city__opt b { font-weight: 400; color: var(--b-ink); }
.lm-drawer .lm-city__opt span, .lm-drawer .lm-city__opt i { color: var(--b-muted); }

.lm-drawer .lm-city__chosen, .lm-drawer .lm-del__chosen {
  background: var(--b-white); border: 1px solid var(--b-line); border-radius: 3px; padding: 12px 14px;
}
/* эмодзи-пин заменён точкой в цвет акцента */
.lm-drawer .lm-city__ico { font-size: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--b-accent); flex: none; align-self: center; }
.lm-drawer .lm-city__chosen b { font-weight: 400; font-size: 15px; color: var(--b-ink); }
.lm-drawer .lm-del__pvz { font: 400 12px Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--b-muted); }
.lm-drawer .lm-del__pvz b { font-weight: 400; }
.lm-drawer .lm-del__addr { font-size: 14px; color: var(--b-ink); margin: 6px 0 4px; }
.lm-drawer .lm-del__sum { font-size: 14px; color: var(--b-muted); }
.lm-drawer .lm-del__sum b { color: var(--b-ink); font-weight: 400; }
.lm-drawer .lm-city__change, .lm-drawer .lm-del__change {
  color: var(--b-accent); font-size: 13px; text-decoration: underline; text-underline-offset: 3px;
}
.lm-drawer .lm-del__pick {
  border: 1px solid var(--b-ink); border-radius: 40px; background: transparent; color: var(--b-ink);
  min-height: 46px; margin-top: 10px; font: 400 14px Arial, sans-serif;
}
.lm-drawer .lm-del__pick:hover { background: var(--b-ink); color: #fff; }

/* ---------- предупреждение «вскрывайте посылку» ----------
   Было: палка слева, эмодзи ⚠️ и серый текст впритык. Стало — жёлтая
   карточка фирменного цвета (как блок вопросов) с круглым «!». */
.lm-del__warn, .lm-drawer .lm-del__warn {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start;
  margin: 14px 0; padding: 12px 14px;
  background: var(--b-yellow); border: 0; border-radius: 3px;
  color: #4b3a31; font: 400 13px/1.5 Arial, sans-serif;
}
.lm-del__warn-ico {
  /* Знак рисуется SVG, а не символом «!» шрифта: у символа своя базовая
     линия и боковые отступы, и в кружке он стоял со сдвигом. */
  display: block; width: 22px; height: 22px; font-size: 0; line-height: 0; color: transparent;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10.25' fill='none' stroke='%23bd2856' stroke-width='1.5'/%3E%3Crect x='10' y='5.5' width='2' height='7.5' rx='1' fill='%23bd2856'/%3E%3Ccircle cx='11' cy='16' r='1.2' fill='%23bd2856'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
}

/* ---------- корзина: промокод и сертификат ---------- */
.lm-drawer .lm-promo__btn {
  border: 1px solid var(--b-ink); border-radius: 40px; background: transparent; color: var(--b-ink);
  font: 400 14px Arial, sans-serif; padding: 0 18px; min-height: 46px;
}
.lm-drawer .lm-promo__btn:hover { background: var(--b-ink); color: #fff; }
.lm-drawer .lm-promo__on { border-radius: 3px; background: var(--b-white); border: 1px solid var(--b-line); }
.lm-drawer .lm-cert__on { background: var(--b-soft); border-color: var(--b-accent); }
.lm-drawer .lm-promo__ok { background: var(--b-accent); }
.lm-drawer .lm-promo__code { font-weight: 400; letter-spacing: .06em; color: var(--b-ink); }
.lm-drawer .lm-cert__on .lm-promo__val { color: var(--b-accent); font-weight: 400; }
.lm-drawer .lm-promo__off { color: var(--b-muted); }

/* ---------- корзина: итоги, согласие, кнопка ---------- */
.lm-drawer .lm-total__row { color: var(--b-ink); }
.lm-drawer .lm-total__row.lm-muted span { color: var(--b-muted); }
.lm-drawer .lm-total__row--cert span { color: var(--b-accent); font-weight: 400; }
.lm-drawer .lm-total__grand { border-color: var(--b-line); }
.lm-drawer__head, .lm-drawer .lm-citem, .lm-drawer .lm-delivery, .lm-drawer .lm-promo { border-color: var(--b-line); }
.lm-drawer__action { background: var(--b-soft); border-top: 1px solid var(--b-line); }
.lm-drawer .lm-agree__box { border: 1px solid var(--b-ink); border-radius: 3px; background: var(--b-white); }
.lm-drawer .lm-agree input:checked + .lm-agree__box { background: var(--b-accent); border-color: var(--b-accent); }
.lm-drawer .lm-agree.lm-invalid .lm-agree__box { border-color: var(--b-accent); box-shadow: 0 0 0 3px rgba(189, 40, 86, .2); }
.lm-drawer .lm-agree__txt a { color: var(--b-ink); border-color: var(--b-line); }
.lm-drawer .lm-agree__txt a:hover { color: var(--b-accent); border-color: var(--b-accent); }
/* Строка про политику: не галочка, а пояснение — поэтому мельче и без рамки,
   чтобы её не приняли за второе обязательное действие. */
.lm-drawer .lm-agree__note { margin: 8px 2px 0; font-size: 12px; line-height: 1.45; color: var(--b-muted); }
.lm-drawer .lm-agree__note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.lm-drawer .lm-agree__note a:hover { color: var(--b-accent); }
.lm-drawer .lm-checkout-btn { background: var(--b-ink); border-color: var(--b-ink); border-radius: 40px; font: 400 15px Arial, sans-serif; }
.lm-drawer .lm-checkout-btn:hover { background: var(--b-accent); border-color: var(--b-accent); }
.lm-drawer .lm-citem .lm-qty { border-color: var(--b-line); }
.lm-drawer__close { color: var(--b-ink); }

/* пустая корзина: вместо эмодзи-пакета — фирменная звёздочка */
.lm-drawer__empty { color: var(--b-muted); font: 400 16px/1.6 Arial, sans-serif; }
.lm-drawer__empty .lm-emoji { font-size: 0; line-height: 0; margin: 0 0 18px; }
.lm-drawer__empty .lm-emoji::before { content: ''; display: block; width: 52px; height: 52px; margin: 0 auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5v21M1.5 12h21M4.6 4.6l14.8 14.8M19.4 4.6L4.6 19.4' fill='none' stroke='%23fe517f' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- карта СДЭК ---------- */
.lm-cdek-modal { background: var(--b-paper); border-radius: 3px; }
.lm-cdek-head { background: var(--b-paper); border-bottom: 1px solid var(--b-line); padding: 12px 12px 12px 20px; }
.lm-cdek-title { font: 400 20px LumaJost, Arial, sans-serif; letter-spacing: .01em; color: var(--b-ink); }
.lm-cdek-close { background: transparent; color: var(--b-ink); border-radius: 50%; font-size: 18px; }
.lm-cdek-close:hover { background: var(--b-soft); }
.lm-cdek-spin { border-color: var(--b-soft); border-top-color: var(--b-accent); }

/* ---------- «Спасибо за заказ» ---------- */
.lm-thanks { background: var(--b-paper); font-family: Arial, sans-serif; color: var(--b-ink); }
.lm-thanks__card { background: transparent; box-shadow: none; border-radius: 0; max-width: 560px; padding: 56px 24px 32px; }
.lm-thanks__close { background: transparent; color: var(--b-ink); font-size: 18px; }
.lm-thanks__close:hover { background: var(--b-soft); color: var(--b-ink); }
.lm-thanks__mark {
  width: auto; height: auto; background: none; box-shadow: none; border-radius: 0;
  color: var(--b-pink); font: 400 0/1 Georgia, serif; margin: 0 auto 18px;
}
.lm-thanks__mark::before { content: ''; display: block; width: 60px; height: 60px; margin: 0 auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5v21M1.5 12h21M4.6 4.6l14.8 14.8M19.4 4.6L4.6 19.4' fill='none' stroke='%23fe517f' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Ожидание оплаты: вместо звёздочки — крутилка. Звёздочку гасим совсем,
   иначе она осталась бы фоном под кольцом. */
.lm-thanks__mark--wait::before { display: none; }
.lm-spin {
  display: block; width: 46px; height: 46px; margin: 7px auto; border-radius: 50%;
  border: 2px solid var(--b-line); border-top-color: var(--b-pink);
  animation: lm-spin 0.9s linear infinite;
}
@keyframes lm-spin { to { transform: rotate(360deg); } }
/* Человеку, у которого оплата не прошла, галочку показывать нельзя — тот же
   знак, что и в предупреждении корзины. */
.lm-thanks__mark--warn::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10.25' fill='none' stroke='%23bd2856' stroke-width='1.2'/%3E%3Crect x='10' y='5.5' width='2' height='7.5' rx='1' fill='%23bd2856'/%3E%3Ccircle cx='11' cy='16' r='1.2' fill='%23bd2856'/%3E%3C/svg%3E");
}
/* На «переходим к оплате» заголовок длиннее «Спасибо за заказ!» — на узком
   экране он иначе распирает карточку. */
.lm-thanks__title { font: 400 clamp(40px, 6vw, 56px)/1.05 LumaJost, Arial, sans-serif; letter-spacing: -.035em; color: var(--b-accent); }
@media (max-width: 420px) { .lm-thanks__title { font-size: 34px; } }
/* Ссылка «Перейти к оплате» — кнопка, а не текст: у <a> нет кнопочных отступов. */
.lm-thanks__btns a.lm-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.lm-thanks__lead { color: var(--b-muted); font-size: 16px; line-height: 1.6; }
.lm-thanks__lead b { color: var(--b-ink); font-weight: 400; }
.lm-thanks__order { background: transparent; border-radius: 0; border-top: 1px solid var(--b-line); border-bottom: 1px solid var(--b-line); padding: 14px 0; }
.lm-thanks__row { font-size: 15px; }
.lm-thanks__val { font-weight: 400; }
.lm-thanks__row--disc, .lm-thanks__row--disc .lm-thanks__val { color: var(--b-accent); }
.lm-thanks__grand { border-color: var(--b-line); font-size: 16px; }
.lm-thanks__grand b { font: 400 26px LumaJost, Arial, sans-serif; color: var(--b-ink); }
.lm-thanks__note { color: var(--b-muted); font-size: 13px; }
.lm-thanks__btns .lm-btn { border-radius: 40px; font: 400 15px Arial, sans-serif; background: var(--b-ink); border-color: var(--b-ink); color: #fff; }
.lm-thanks__btns .lm-btn:hover { background: var(--b-accent); border-color: var(--b-accent); }
.lm-thanks__sign { color: var(--b-muted); font: 400 18px Georgia, serif; font-style: italic; }
@media (max-width: 640px) {
  .lm-thanks__card { padding: 48px 20px calc(24px + env(safe-area-inset-bottom)); }
  .lm-thanks__mark::before { width: 48px; height: 48px; }
}

/* ---------- тост и кнопка корзины ---------- */
.lm-toast { background: var(--b-ink); font: 400 14px/1.4 Arial, sans-serif; border-radius: 40px; padding: 13px 22px; max-width: calc(100vw - 32px); text-align: center; }
.lm-fab { background: var(--b-ink); }
.lm-fab:hover { background: var(--b-accent); }
.lm-fab__badge { background: var(--b-pink); color: var(--b-ink); }
@media (max-width: 640px) { .lm-thanks__sign { font-size: 15px; } }

/* обложка главной — FLOWER на оранжевой тележке: лампа в верхней правой
   трети кадра, поэтому кадрируем выше центра и чуть правее */
.campaign:not(.campaign--beze) .campaign-art img { object-position: 60% 38%; }
@media (max-width: 650px) { .campaign:not(.campaign--beze) .campaign-art img { object-position: 60% 36%; } }

/* ---------- отзывы (возвращены со старого сайта, с фото покупателей) ---------- */
.reviews { background: var(--b-soft); }
.reviews .section-top { max-width: 760px; margin-bottom: 40px; }
.reviews h2 em { color: var(--b-accent); }
.reviews-lead { font-size: 17px; line-height: 1.65; color: var(--b-muted); max-width: 560px; margin: 18px 0 0; }
.review-list { columns: 3 300px; column-gap: 28px; }
.review { break-inside: avoid; margin: 0 0 28px; background: var(--b-paper); border-radius: 3px; overflow: hidden; }
.review picture, .review img { display: block; width: 100%; }
.review img { aspect-ratio: 4 / 3; object-fit: cover; }
.review blockquote { margin: 0; padding: 20px 22px 24px; font: italic 400 18px/1.55 Georgia, serif; color: var(--b-ink); }
.faq-list details ul { margin: 0 0 14px; padding-left: 20px; color: var(--b-muted); }
.faq-list details li { margin-bottom: 6px; line-height: 1.6; }
.faq-list details p + p { margin-top: 0; }
@media (max-width: 650px) {
  .reviews .section-top { margin-bottom: 28px; }
  .review-list { columns: 1; }
  .review blockquote { font-size: 17px; padding: 16px 18px 20px; }
}
.faq-list li a { text-decoration: underline; }

/* полоса под обложкой: на планшетах последняя фраза упиралась в край и обрезалась */
@media (max-width: 1100px) and (min-width: 651px) {
  .brand-strip { gap: 16px; font-size: 15px; }
  .brand-strip > span:nth-child(n+4) { display: none; }
}


/* ---------- значки вместо символов ✳ и ↗ ----------
   На iPhone в шрифтах сайта этих знаков нет, и Safari подставлял цветные
   эмодзи (зелёный квадрат со звёздочкой, синюю кнопку со стрелкой). Теперь
   это SVG: одинаково на всех устройствах, цвет берётся из текста. */
.i-arrow { display: inline-block; width: .72em; height: .72em; vertical-align: -.02em; flex: none; }
.i-star { display: block; width: 1em; height: 1em; }
.primary .i-arrow { width: 15px; height: 15px; vertical-align: middle; }
.primary span[aria-hidden] { display: inline-flex; align-items: center; }
.brand-strip > span:nth-child(even) { display: inline-flex; align-items: center; }
.brand-strip .i-star { width: 26px; height: 26px; }
.brand-flower { line-height: 0; }
.brand-flower .i-star { width: 330px; height: 330px; }
/* звёздочка у обложки — фон вместо символа */
.campaign-art:after { content: ''; width: .72em; height: .72em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5v21M1.5 12h21M4.6 4.6l14.8 14.8M19.4 4.6L4.6 19.4' fill='none' stroke='%23fcebb0' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 650px) {
  .brand-strip .i-star { width: 22px; height: 22px; }
  .brand-flower .i-star { width: 280px; height: 280px; }
}
/* большая звёздочка в «О нас»: символ рисовался выше своей коробки, SVG — нет;
   поднимаем, чтобы звезда была видна как раньше, а не одной верхушкой */
.brand-flower .i-star { margin-bottom: 140px; }
@media (max-width: 650px) { .brand-flower .i-star { margin-bottom: 105px; } }

/* ---------- логотип ----------
   Зазор между буквами был задан пикселями (−5px) и не менялся вместе с
   размером: на мобильной шапке (43px) это −11,6% против −10% на десктопе,
   и на iPhone, где шрифт у́же, буквы слипались. Теперь зазор в долях кегля
   и чуть свободнее — начертание то же, но буквы не склеиваются. */
.wordmark { letter-spacing: -.045em; }
.header .wordmark { letter-spacing: -.045em; }
.footer-top .wordmark { letter-spacing: -.055em; }
@media (max-width: 360px) { .header .wordmark { letter-spacing: -.04em; } }

/* ---------- номер заказа на «Спасибо» ---------- */
.lm-thanks__code { margin: 22px 0 6px; padding: 18px 20px; background: var(--b-soft); border-radius: 3px; }
.lm-thanks__code-l { font: 400 12px/1 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--b-muted); }
.lm-thanks__code-v { font: 400 30px/1.2 LumaJost, Arial, sans-serif; letter-spacing: .06em; color: var(--b-ink); margin: 8px 0 10px; user-select: all; }
.lm-thanks__code-link { font-size: 14px; color: var(--b-accent); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .lm-thanks__code-v { font-size: 26px; } }