/* Шрифт Onest — бесплатный, близкий по характеру к фирменному Involve с сайта
     (Involve и Lena — платные тильдовские, их лицензия на нас не распространяется). */
  @font-face {
    font-family: 'Onest'; font-style: normal; font-weight: 400 800; font-display: swap;
    src: url('шрифты/onest-кириллица.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  @font-face {
    font-family: 'Onest'; font-style: normal; font-weight: 400 800; font-display: swap;
    src: url('шрифты/onest-латиница.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
      U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
  }

  :root {
    --акцент: #b8c655;          /* олива с сайта */
    --акцент-глубокий: #64731a;
    --крем: #feffeb;            /* кремовый с сайта */
    --голубой: #b4d3e9;         /* голубой героя с сайта */
    --голубой-светлый: #eaf3fa;
    --пудра: #f3d6d3;
    --пудра-светлая: #fbe9e7;
    --чернила: #2b2e26;
    --чернила-мягкая: #3a3e33;
    --фон: #fdfdf2;
    --плитка: #ffffff;
    --плитка-край: #e8e8dc;
    --текст: #34362e;
    --текст-тихий: #8d9085;
    --белый-на-чернилах: #f4f4ec;
  }
  html.тёмная {
    --крем: #1d2015;
    --фон: #16180f;
    --плитка: #21231a;
    --плитка-край: #2f3226;
    --текст: #eceade;
    --текст-тихий: #8f9285;
    --чернила: #21231a;
    --чернила-мягкая: #2f3226;
    --акцент-глубокий: #c9d76a;
    --голубой: #2a3b4a;
    --голубой-светлый: #1d242b;
    --пудра-светлая: #2b211f;
  }

  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    font-family: 'Onest', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--фон);
    color: var(--текст);
    -webkit-font-smoothing: antialiased;
  }
  button { font-family: inherit; }

  .лист { display: none; padding-bottom: 110px; }   /* запас под нижнюю кнопку */
  /* На компьютере в карточке букета кнопка стоит в потоке, а не плавает, и запас
     снизу превращался в пустую полосу перед подвалом (Илья, 21.09.2026). */
  @media (min-width: 900px) {
    .лист[data-лист="товар"] { padding-bottom: 24px; }
  }
  .лист.виден { display: block; }
  /* Ничто не должно вылезать за край экрана: телефон не резиновый, а любая
     широкая картинка или таблица тянет вбок всю страницу (Илья, 20.08.2026). */
  /* clip, а не hidden: hidden делает страницу прокручиваемым блоком и ломает
     закреплённую шапку (position: sticky) */
  html, body { max-width: 100%; overflow-x: clip; }
  img, video { max-width: 100%; }

  .узкий { max-width: 620px; margin: 0 auto; }
  .широкий { max-width: 1120px; margin: 0 auto; padding: 0 14px; }

  a { color: var(--акцент-глубокий); }

  /* ---------- шапка сайта ---------- */
  .шапка-сайта {
    position: sticky; top: 0; z-index: 30;
    background: var(--крем);
    border-bottom: 1px solid var(--плитка-край);
  }
  /* Один ряд: логотип · генератор и меню · телефон, кабинет, корзина.
     Два ряда Илье не нравились (29.09.2026). На узких экранах меню уезжает
     во вторую строку и прокручивается вбок, как раньше. */
  .шапка-сайта .ряд {
    max-width: 1220px; margin: 0 auto; padding: 10px 14px;
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  }
  .шапка-право { margin-left: auto; display: flex; align-items: center; gap: 10px; }
  .шапка-черта { width: 1px; height: 26px; background: var(--плитка-край); flex: none; }
  .лого { display: flex; align-items: center; flex: none; }
  .лого img { height: 44px; width: auto; display: block; }
  html.тёмная .лого img { filter: brightness(1.08); }
  .шапка-телефон {
    text-decoration: none; color: var(--текст);
    font-size: 14.5px; font-weight: 700; white-space: nowrap; line-height: 1.25;
  }
  .шапка-телефон span { display: block; font-size: 10.5px; font-weight: 500; color: var(--текст-тихий); }
  /* Кабинет и корзина — круглые значки без подписей: в одном ряду с меню
     подписи съедали место, а иконки и так понятны. */
  .шапка-кнопка {
    position: relative; flex: none; cursor: pointer;
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--плитка-край); background: var(--плитка); color: var(--текст);
    display: flex; align-items: center; justify-content: center; font-size: 16px;
    transition: transform .1s, border-color .15s;
  }
  .шапка-кнопка:active { transform: scale(.95); }
  .шапка-кнопка:hover { border-color: var(--акцент); }
  .шапка-кнопка .число-в-шапке {
    position: absolute; top: -4px; right: -4px;
    background: var(--акцент); color: #22260c; border-radius: 12px;
    font-size: 11px; font-weight: 700; padding: 1px 6px;
  }
  .шапка-кнопка .число-в-шапке[hidden] { display: none; }

  /* меню стоит в том же ряду, что логотип */
  .меню-строка {
    display: flex; align-items: center; gap: 4px 20px;
    overflow-x: auto; scrollbar-width: none; min-width: 0;
  }
  .меню-строка::-webkit-scrollbar { height: 0; }
  .меню-строка a {
    flex: none; text-decoration: none; color: var(--текст);
    font-size: 15.5px; font-weight: 600; padding: 4px 2px; cursor: pointer;
  }
  .меню-строка a:hover { color: var(--акцент-глубокий); }
  /* «Придумать букет» — главная кнопка магазина, поэтому в меню она не просто
     цветное слово, а плашка (Илья, 09.09.2026: «выдели чуть больше эту кнопку»). */
  .меню-строка a.акцентный {
    color: var(--акцент-глубокий); font-weight: 700;
    background: transparent; border: 1.5px solid var(--акцент);
    border-radius: 999px; padding: 8px 15px; margin-right: 2px;
  }
  .меню-строка a.акцентный:hover { background: var(--акцент); color: #22260c; }
  /* Узкие экраны: в один ряд всё не влезает — меню уходит на свою строку
     и прокручивается вбок, как было раньше. */
  @media (max-width: 1100px) {
    .меню-строка { order: 3; width: 100%; padding-top: 4px; }
    .шапка-сайта .ряд { padding-bottom: 8px; row-gap: 2px; }
  }
  @media (max-width: 640px) {
    .меню-строка a { font-size: 14.5px; }
    .меню-строка a.акцентный { padding: 6px 12px; }
    .шапка-телефон span { display: none; }
    .шапка-телефон { font-size: 13px; }
    .лого img { height: 34px; }
    .шапка-кнопка { width: 36px; height: 36px; font-size: 15px; }
    .шапка-черта { display: none; }
  }

  /* строка «назад» на внутренних экранах */
  .назад-строка {
    max-width: 1120px; margin: 0 auto; padding: 12px 14px 0;
    display: flex; align-items: center; gap: 12px;
  }
  .назад-строка[hidden] { display: none; }
  .назад-строка button {
    border: 1px solid var(--плитка-край); background: var(--плитка); color: var(--текст);
    border-radius: 22px; padding: 8px 15px; font-size: 13.5px; font-weight: 600; cursor: pointer;
  }
  .назад-строка span { font-size: 15px; font-weight: 700; letter-spacing: -.3px; }

  /* ---------- бегущая строка акции: тонкая и спокойная ---------- */
  .акции-строка { background: var(--чернила); overflow: hidden; }
  .бегущая {
    display: flex; width: max-content; padding: 7px 0;
    animation: бег 26s linear infinite;
  }
  .бегущая span {
    flex: none; padding: 0 36px; color: var(--акцент);
    font-size: 11.5px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase;
    white-space: nowrap;
  }
  @keyframes бег { to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .бегущая { animation: none; } }

  /* ---------- герой, как на сайте: голубой фон и фото ---------- */
  .герой { background: var(--голубой); position: relative; overflow: hidden; }
  /* мягкие кремовые круги, чтобы голубое поле не выглядело пустым на широком экране */
  .герой::before {
    content: ""; position: absolute; left: -140px; bottom: -220px;
    width: 460px; height: 460px; border-radius: 50%;
    background: rgba(254,255,235,.3);
  }
  .герой::after {
    content: ""; position: absolute; right: 16%; top: -180px;
    width: 380px; height: 380px; border-radius: 50%;
    background: rgba(255,255,255,.22);
  }
  .герой .внутри {
    max-width: 1120px; margin: 0 auto; padding: 46px 14px;
    display: flex; gap: 48px; align-items: center;
    position: relative; z-index: 1;
  }
  .герой-текст { flex: 1; min-width: 0; color: #2b2e26; }
  html.тёмная .герой-текст { color: var(--текст); }
  .герой h1, .герой .заголовок-героя {
    margin: 0 0 14px; font-size: clamp(27px, 3.6vw, 46px); font-weight: 800;
    letter-spacing: -1.2px; line-height: 1.08; max-width: 620px;
  }
  .герой-доводы { margin: 0 0 26px; font-size: 15.5px; font-weight: 600; line-height: 1.6; opacity: .85; }
  .герой-кнопки { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
  .кнопка-героя {
    padding: 16px 30px; border: none; border-radius: 40px; cursor: pointer;
    background: var(--чернила); color: var(--белый-на-чернилах);
    font-size: 16px; font-weight: 700; transition: transform .12s;
  }
  .кнопка-героя:hover { transform: translateY(-2px); }
  .кнопка-героя.втор { background: var(--крем); color: #2b2e26; }
  html.тёмная .кнопка-героя.втор { background: var(--акцент); color: #22260c; }
  .герой-фото {
    flex: 0 0 auto; width: min(380px, 34vw); border-radius: 24px; display: block;
    aspect-ratio: 3/4; max-height: 500px; object-fit: cover;
    box-shadow: 0 18px 48px rgba(30,50,70,.28);
  }
  @media (max-width: 840px) {
    .герой .внутри { flex-direction: column; align-items: stretch; padding: 26px 14px 30px; gap: 22px; }
    .герой h1, .герой .заголовок-героя { font-size: 27px; }
    .герой-фото { width: 100%; max-width: none; max-height: none; flex: none; aspect-ratio: 4/3; }
  }

  .доверие { display: flex; gap: 8px; max-width: 640px; }
  .доверие button {
    flex: 1; background: var(--крем); border: 1px solid rgba(43,46,38,.15);
    border-radius: 12px; padding: 9px 6px; text-align: center; cursor: pointer;
    font-size: 11px; line-height: 1.35; color: var(--текст-тихий);
    transition: transform .1s, border-color .15s;
  }
  .доверие button:active { transform: scale(.96); }
  .доверие button:hover { border-color: var(--акцент-глубокий); }
  .доверие b { display: block; font-size: 13.5px; color: var(--текст); margin-bottom: 1px; }
  html.тёмная .доверие button { background: var(--плитка); border-color: var(--плитка-край); }
  @media (min-width: 841px) {
    .доверие button { padding: 13px 8px; font-size: 12.5px; }
    .доверие b { font-size: 15.5px; margin-bottom: 3px; }
  }

  /* ---------- разделы стартовой ---------- */
  .раздел { max-width: 1120px; margin: 0 auto; padding: 40px 14px 0; scroll-margin-top: 104px; }
  .раздел-шапка { margin-bottom: 18px; }
  .раздел-шапка .надзаголовок {
    font-size: 12px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase;
    color: var(--акцент-глубокий); margin-bottom: 6px;
  }
  .раздел-шапка h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.6px; line-height: 1.15; }
  @media (min-width: 700px) { .раздел-шапка h2 { font-size: 30px; } }

  /* о нас */
  .о-нас { display: flex; gap: 26px; align-items: center; }
  .о-нас .текст { flex: 1; min-width: 0; }
  .о-нас h2 span { color: var(--акцент-глубокий); }
  .о-нас p { margin: 14px 0 0; font-size: 15px; line-height: 1.7; color: var(--текст-тихий); max-width: 560px; }
  .о-нас img {
    flex: 0 0 34%; width: 34%; max-width: 380px; border-radius: 20px;
    aspect-ratio: 1/1; object-fit: cover; display: block;
  }
  .видео-коробка {
    flex: 0 0 34%; width: 34%; max-width: 340px; border-radius: 20px;
    aspect-ratio: 9/16; object-fit: cover; display: block; background: var(--плитка);
  }
  /* что кладём в каждый заказ — блок «в коробке» */
  .в-коробке { margin-top: 18px; }
  .строка-коробки {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
    padding: 9px 0; border-bottom: 1px solid var(--плитка-край);
  }
  .строка-коробки b { font-size: 14.5px; font-weight: 700; color: var(--текст); }
  .строка-коробки span { font-size: 13.5px; color: var(--текст-тихий); }
  .в-коробке .бесплатно {
    margin: 12px 0 0 !important; font-size: 14.5px !important; font-weight: 700;
    color: var(--акцент-глубокий) !important;
  }
  @media (max-width: 760px) {
    .о-нас { flex-direction: column; align-items: stretch; }
    .о-нас img { width: 100%; max-width: none; flex: none; }
    .видео-коробка { width: 100%; max-width: none; flex: none; aspect-ratio: 3/4; }
  }

  /* хиты и переход в каталог */
  .в-каталог {
    display: block; margin: 22px auto 0; padding: 14px 34px; border: none; border-radius: 40px;
    background: var(--чернила); color: var(--белый-на-чернилах);
    font-size: 15px; font-weight: 700; cursor: pointer; transition: transform .12s;
  }
  .в-каталог:hover { transform: translateY(-2px); }

  /* отзывы */
  .отзывы-обёртка { display: flex; gap: 26px; align-items: stretch; }
  .отзывы-карта {
    flex: 1; min-width: 0; background: var(--плитка); border: 1px solid var(--плитка-край);
    border-radius: 20px; padding: 24px;
    display: flex; flex-direction: column; gap: 16px;
  }
  .отзывы-цифры { display: flex; gap: 10px; flex-wrap: wrap; }
  .цифра {
    flex: 1; min-width: 120px; background: var(--крем); border: 1px solid var(--плитка-край);
    border-radius: 14px; padding: 14px; text-align: center;
  }
  .цифра b { display: block; font-size: 27px; font-weight: 800; letter-spacing: -.8px; }
  .цифра span { font-size: 12px; color: var(--текст-тихий); }
  .цифра .звёзды { color: #f5a623; font-size: 14px; letter-spacing: 2px; }
  .отзывы-текст { font-size: 14.5px; line-height: 1.65; color: var(--текст-тихий); margin: 0; }
  .к-отзывам {
    align-self: flex-start; display: inline-block; text-decoration: none;
    padding: 12px 22px; border-radius: 40px; background: var(--акцент); color: #22260c;
    font-size: 14px; font-weight: 700;
  }
  .отзывы-фото {
    flex: 0 0 32%; max-width: 360px; border-radius: 20px; object-fit: cover; display: block;
  }
  @media (max-width: 760px) {
    .отзывы-обёртка { flex-direction: column; }
    .отзывы-фото { width: 100%; max-width: none; flex: none; aspect-ratio: 4/3; }
  }

  /* FAQ */
  .faq details {
    background: var(--плитка); border: 1px solid var(--плитка-край);
    border-radius: 14px; padding: 0 18px; margin-bottom: 10px;
  }
  .faq summary {
    cursor: pointer; list-style: none; padding: 16px 0;
    font-size: 15.5px; font-weight: 700; display: flex; align-items: center; gap: 10px;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; margin-left: auto; font-size: 20px; color: var(--акцент-глубокий); }
  .faq details[open] summary::after { content: "−"; }
  .faq .ответ { padding: 0 0 16px; font-size: 14.5px; line-height: 1.65; color: var(--текст-тихий); }
  .faq .ответ b { color: var(--текст); }

  /* форма обратного звонка */
  .звонок-карта {
    background: var(--чернила); color: var(--белый-на-чернилах);
    border-radius: 22px; padding: 28px 22px; position: relative; overflow: hidden;
  }
  .звонок-карта::after {
    content: ""; position: absolute; right: -60px; top: -60px;
    width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--акцент), transparent 68%); opacity: .4;
  }
  .звонок-карта h2 { margin: 0 0 6px; font-size: 24px; font-weight: 800; letter-spacing: -.5px; position: relative; }
  .звонок-карта p { margin: 0 0 18px; font-size: 14px; line-height: 1.6; opacity: .75; position: relative; max-width: 480px; }
  .звонок-поля { display: flex; gap: 10px; flex-wrap: wrap; position: relative; }
  .звонок-поля input {
    flex: 1 1 200px; padding: 14px; border-radius: 12px; border: none;
    background: var(--чернила-мягкая); color: var(--белый-на-чернилах);
    font: inherit; font-size: 15px;
  }
  .звонок-поля input::placeholder { color: rgba(244,244,236,.5); }
  .звонок-поля input:focus { outline: 2px solid var(--акцент); }
  .звонок-поля button {
    flex: 1 1 160px; padding: 14px 22px; border: none; border-radius: 12px; cursor: pointer;
    background: var(--акцент); color: #22260c; font-size: 15px; font-weight: 700;
  }
  .звонок-согласие {
    position: relative; margin: 12px 0 0; font-size: 11.5px; line-height: 1.5; opacity: .6;
  }
  .звонок-согласие a { color: inherit; }

  /* контакты */
  .контакты-обёртка { display: flex; gap: 26px; }
  .контакты-карта {
    flex: 1; background: var(--плитка); border: 1px solid var(--плитка-край);
    border-radius: 20px; padding: 24px;
  }
  .контакты-карта .строка-контакта {
    display: flex; gap: 12px; padding: 10px 0; font-size: 15px; line-height: 1.5;
    border-bottom: 1px solid var(--плитка-край); align-items: baseline;
  }
  .контакты-карта .строка-контакта:last-child { border-bottom: none; }
  .контакты-карта .строка-контакта b { font-weight: 700; }
  .контакты-карта a { color: var(--акцент-глубокий); text-decoration: none; font-weight: 700; }
  .карта-кнопка {
    display: inline-block; margin-top: 14px; text-decoration: none;
    padding: 12px 22px; border-radius: 40px;
    background: var(--чернила); color: var(--белый-на-чернилах) !important;
    font-size: 14px; font-weight: 700;
  }

  /* прощание в конце главной — та самая «Ждём вас каждый день» */
  .прощание {
    margin: 42px 14px 8px; text-align: center;
    font-size: 24px; font-weight: 700; letter-spacing: -.4px; color: var(--акцент-глубокий);
  }
  @media (min-width: 700px) { .прощание { font-size: 30px; margin-top: 56px; } }

  /* ---------- каталог ---------- */
  .баннеры { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 0; }
  @media (min-width: 700px) { .баннеры { gap: 14px; } }
  .баннер {
    padding: 16px; cursor: pointer; min-height: 150px;
    display: flex; flex-direction: column;
    background: var(--чернила); color: var(--белый-на-чернилах);
    border-radius: 16px; position: relative; overflow: hidden;
    transition: transform .12s;
  }
  .баннер:hover { transform: translateY(-2px); }
  .баннер:active { transform: scale(.985); }
  .баннер::after {
    content: ""; position: absolute; right: -30px; top: -30px;
    width: 120px; height: 120px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--акцент), transparent 68%); opacity: .5;
  }
  .баннер h3 { margin: 0 0 5px; font-size: 16px; font-weight: 700; letter-spacing: -.3px; position: relative; }
  .баннер p { margin: 0 0 12px; font-size: 12.5px; line-height: 1.45; opacity: .72; position: relative; max-width: 300px; }
  .баннер .кн {
    display: inline-block; align-self: flex-start; margin-top: auto;
    background: var(--акцент); color: #22260c;
    padding: 9px 16px; border-radius: 40px; font-size: 13px; font-weight: 700; position: relative;
  }
  .баннер .метка-баннера {
    align-self: flex-start; margin: auto 0 7px; position: relative;
    padding: 4px 9px; border-radius: 20px;
    background: rgba(184, 198, 85, .16); border: 1px solid rgba(184, 198, 85, .45);
    color: var(--акцент); font-size: 10px; font-weight: 700;
    letter-spacing: .5px; text-transform: uppercase; white-space: nowrap;
  }
  .баннер .метка-баннера + .кн { margin-top: 0; }
  /* Метка про скидку длиннее обычной и в строку не влезает: баннеры стоят по два в ряд */
  .баннер .метка-баннера.скидка {
    white-space: normal; text-transform: none; letter-spacing: 0;
    font-size: 11px; line-height: 1.25; text-align: left;
    background: rgba(184, 198, 85, .22); border-color: rgba(184, 198, 85, .6);
  }
  .баннер.светлый { background: var(--акцент); color: #22260c; }
  .баннер.светлый::after { background: radial-gradient(circle at 30% 30%, #ffffff, transparent 68%); opacity: .45; }
  .баннер.светлый p { opacity: .78; }
  .баннер.светлый .кн { background: #22260c; color: var(--акцент); }
  @media (min-width: 700px) {
    .баннер h3 { font-size: 19px; }
    .баннер p { font-size: 13.5px; }
  }

  .поиск-обёртка { margin: 18px 0 0; position: relative; max-width: 640px; }
  .поиск {
    width: 100%; padding: 13px 40px 13px 14px;
    background: var(--плитка); border: 1px solid var(--плитка-край);
    border-radius: 12px; font-size: 15px; font-family: inherit; color: var(--текст);
  }
  .поиск::placeholder { color: var(--текст-тихий); }
  .поиск:focus { outline: none; border-color: var(--акцент); }
  .очистить {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; color: var(--текст-тихий); font-size: 20px;
    padding: 4px 8px; cursor: pointer; display: none;
  }
  .очистить.видна { display: block; }

  .заголовок-блока { font-size: 18px; font-weight: 700; letter-spacing: -.3px; margin: 22px 0 10px; }
  .узкий .заголовок-блока, .узкий .лента, .узкий .промо, .узкий .промо-ответ,
  .узкий .итоги, .узкий .сноска, .узкий .бонусы-строка,
  .узкий .сверка { margin-left: 14px; margin-right: 14px; }   /* сверке отступ забыли — строки липли к краю (01.10.2026) */

  /* сверху 10px запаса: лента прокручивается, и без него ярлычок «промокод»
     у сезонной подборки обрезался бы краем (та же беда была в мини-аппе) */
  .лента { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 2px; scrollbar-width: none; }
  .лента::-webkit-scrollbar { height: 0; }
  .чип {
    flex: none; cursor: pointer;
    border: 1px solid var(--плитка-край); background: var(--плитка); color: var(--текст);
    font-size: 13.5px; font-weight: 500; padding: 9px 14px; border-radius: 40px; white-space: nowrap;
    transition: border-color .15s;
  }
  .чип:hover { border-color: var(--акцент); }
  .чип.выбран { background: var(--акцент); border-color: var(--акцент); color: #22260c; font-weight: 600; }
  /* Время, на которое уже не успеть, и сегодняшний день после последнего развоза:
     видно, что вариант есть, но выбрать нельзя (Илья, 25.08.2026). */
  .чип.поздно, .сегмент.поздно {
    opacity: .35; cursor: default; text-decoration: line-through;
  }
  .чип.поздно:active, .сегмент.поздно:active { transform: none; }
  /* Сезонная подборка с промокодом: ярлычок сидит поверх кнопки, чтобы скидку
     было видно до нажатия. Лента прокручивается, поэтому запас сверху нужен всей
     ленте, иначе ярлычок обрежется краем (Илья, 20.08.2026). */
  .чип.с-промо { position: relative; }
  .чип.с-промо .промо-ярлык {
    position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
    padding: 2px 8px; border-radius: 20px; white-space: nowrap;
    background: var(--акцент-глубокий); color: var(--крем);
    font-size: 9px; font-weight: 700; letter-spacing: .3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .16);
  }

  /* Непросмотренные букеты — кружок с цифрой на баннере генератора, как
     непрочитанные сообщения. Баннер и так position: relative (Илья, 16.08.2026). */
  .баннер { position: relative; }
  .баннер .значок-новых, .значок-новых {
    position: absolute; top: 10px; right: 10px; z-index: 3;
    min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: #e05740; color: #fff; font-size: 13px; font-weight: 700;
    line-height: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  }
  .значок-новых[hidden] { display: none; }

  /* Выбор при входе в генератор: собрать новый или посмотреть свои букеты. */
  .выбор-фон {
    position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .45);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .18s;
  }
  .выбор-фон.видна { opacity: 1; }
  .выбор-панель {
    width: min(420px, calc(100% - 32px)); background: var(--фон); color: var(--текст);
    border-radius: 18px; padding: 20px 20px 22px;
    transform: translateY(14px); transition: transform .18s;
  }
  .выбор-фон.видна .выбор-панель { transform: translateY(0); }
  .выбор-панель h3 { margin: 0 0 14px; font-size: 19px; font-weight: 700; letter-spacing: -.4px; }
  .выбор-кнопка {
    display: block; width: 100%; margin-bottom: 9px; padding: 14px 16px;
    border: 1.5px solid var(--плитка-край); border-radius: 14px; background: var(--плитка);
    color: var(--текст); font: inherit; font-size: 15px; font-weight: 700;
    text-align: left; cursor: pointer;
  }
  .выбор-кнопка span {
    display: block; margin-top: 3px; font-size: 12.5px; font-weight: 400; color: var(--текст-тихий);
  }
  .выбор-кнопка.главная { background: var(--акцент); border-color: var(--акцент); color: #22260c; }
  .выбор-кнопка.главная span { color: rgba(34, 38, 12, .7); }
  /* Кружок стоит прямо в строке с названием: у края кнопки он срезался.
     Правило подробное нарочно — общий стиль «.выбор-кнопка span» иначе красит
     цифру в серый и её не видно (Илья, 16.08.2026). */
  .выбор-кнопка .значок-новых.в-кнопке {
    position: static; display: inline-flex; vertical-align: middle;
    margin: 0 0 0 9px; min-width: 24px; height: 24px; padding: 0 7px;
    color: #fff; font-size: 13px; font-weight: 700; line-height: 1;
  }

  /* архив подборов */
  /* Букеты одного подбора: на телефоне столбиком, на широком экране в ряд
     по три — как в самом генераторе (Илья, 11.09.2026). */
  .архив-ряд { display: grid; gap: 12px; margin-bottom: 18px; }
  @media (min-width: 760px)  { .архив-ряд { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1000px) { .архив-ряд { grid-template-columns: repeat(3, 1fr); } }
  .архив-пояснение { margin: 0 0 14px; font-size: 13px; color: var(--текст-тихий); line-height: 1.5; }
  .архив-шапка {
    display: flex; flex-wrap: wrap; gap: 3px 10px; align-items: baseline;
    margin: 18px 0 10px; font-size: 13px;
  }
  .архив-когда { font-weight: 700; color: var(--текст); }
  .архив-бриф { color: var(--текст-тихий); }

  /* Счётчик прямо на карточке: положить и поменять количество, не заходя в товар. */
  .карточка { position: relative; }
  .счёт-плитки {
    position: absolute; right: 8px; bottom: 8px; z-index: 2;
    display: flex; align-items: center;
  }
  .счёт-плитки .кнопка-класть {
    width: 33px; height: 33px; padding: 0; border: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--акцент); color: #22260c; cursor: pointer;
    box-shadow: 0 2px 7px rgba(0, 0, 0, .2);
    transition: transform .12s ease;
  }
  .счёт-плитки .кнопка-класть:active { transform: scale(.9); }
  .счёт-плитки.есть {
    gap: 0; border-radius: 40px; background: var(--акцент);
    box-shadow: 0 2px 7px rgba(0, 0, 0, .2); overflow: hidden;
  }
  .счёт-плитки .шаг-кол {
    width: 30px; height: 33px; padding: 0; border: none; background: transparent;
    color: #22260c; font: inherit; font-size: 17px; font-weight: 700;
    line-height: 1; cursor: pointer;
  }
  .счёт-плитки .шаг-кол:hover { background: rgba(0, 0, 0, .08); }
  .счёт-плитки .сколько {
    min-width: 16px; text-align: center; color: #22260c;
    font-size: 14px; font-weight: 700;
  }
  /* подпись не должна залезать под счётчик */
  .карточка .подпись { padding-right: 46px; }

  /* Корзина в правом нижнем углу — маленькая, поверх каталога, с суммой. */
  .корзина-угол {
    position: fixed; z-index: 40;
    right: 18px; bottom: 18px;
    display: flex; align-items: center; gap: 7px;
    padding: 12px 18px; border: none; border-radius: 40px;
    background: var(--акцент); color: #22260c;
    font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
    transition: transform .12s ease;
  }
  .корзина-угол:hover { transform: scale(1.03); }
  .корзина-угол:active { transform: scale(.95); }
  .корзина-угол[hidden] { display: none; }

  /* Количество прямо в строке корзины: раньше позицию можно было только удалить. */
  .кол-в-корзине {
    /* align-self и fit-content — иначе рамка растягивается на всю строку:
       родитель у позиции колоночный, и дети по умолчанию тянутся по ширине
       (Илья, 21.08.2026) */
    display: inline-flex; align-items: center; align-self: flex-start;
    width: fit-content; margin-top: 6px;
    border: 1px solid var(--плитка-край); border-radius: 40px; overflow: hidden;
  }
  .кол-в-корзине .шаг-кол {
    width: 30px; height: 28px; padding: 0; border: none; background: transparent;
    color: var(--текст); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  }
  .кол-в-корзине .шаг-кол:hover { background: rgba(0, 0, 0, .06); }
  /* минус на единице выключен: удалять — только крестиком */
  .кол-в-корзине .шаг-кол:disabled { opacity: .35; cursor: default; background: transparent; }
  .кол-в-корзине .сколько { min-width: 20px; text-align: center; font-size: 14px; font-weight: 700; }

  /* Узкий телефон (iPhone SE и подобные): ужимаем то, что иначе слипается. */
  @media (max-width: 400px) {
    .позиция { gap: 9px; padding: 11px 12px; }
    .позиция img, .авторский-значок { width: 76px; height: 96px; }
    .позиция .н { font-size: 13px; }
    .позиция .ц { font-size: 13.5px; }
    .кол-в-корзине .шаг-кол { width: 27px; }
    .плитка-товаров { gap: 9px; }
    .карточка .подпись { padding-right: 42px; }
    .корзина-угол { right: 12px; bottom: 12px; padding: 11px 15px; font-size: 14px; }
    .кнопка-героя { padding: 14px 22px; font-size: 15px; }
    .бриф-вопрос { font-size: 20px; }
  }

  /* Ленту категорий и ценник рисует скрипт. Пока их нет, место держим за ними,
     иначе на странице раздела плитки подпрыгивают вверх (21.09.2026). */
  #категории { min-height: 49px; }
  #ценник { min-height: 161px; }

  .плитка-товаров { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
  @media (min-width: 700px)  { .плитка-товаров { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
  @media (min-width: 1000px) { .плитка-товаров { grid-template-columns: repeat(4, 1fr); gap: 16px; } }

  .карточка {
    background: var(--плитка); border: 1px solid var(--плитка-край);
    border-radius: 14px; overflow: hidden; cursor: pointer;
    display: flex; flex-direction: column; text-align: left; padding: 0;
    font-family: inherit; color: inherit;
    transition: transform .12s, box-shadow .12s;
  }
  .карточка:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(43,46,38,.08); }
  .карточка:active { transform: scale(.985); }
  .карточка .фото { aspect-ratio: 3/4; background: var(--плитка-край); position: relative; overflow: hidden; }
  .карточка .фото .полоса {
    display: flex; height: 100%; width: 100%;
    will-change: transform;
    transition: transform .28s cubic-bezier(.22,.61,.36,1);
    touch-action: pan-y;
  }
  .карточка .фото .полоса.тянут { transition: none; }
  .карточка .фото .б28-кадр { display: block; width: 100%; height: 100%; flex: 0 0 100%; }
  .карточка .фото img {
    width: 100%; height: 100%; flex: 0 0 100%;
    object-fit: cover; display: block; pointer-events: none;
  }
  .точки-мини {
    position: absolute; bottom: 7px; left: 0; right: 0;
    display: flex; justify-content: center; gap: 4px; pointer-events: none;
  }
  .точки-мини i {
    width: 5px; height: 5px; border-radius: 50%;
    background: rgba(255,255,255,.55); box-shadow: 0 0 3px rgba(0,0,0,.35);
    transition: width .2s;
  }
  .точки-мини i.активна { width: 13px; border-radius: 3px; background: #fff; }
  .карточка .подпись { padding: 9px 10px 11px; display: flex; flex-direction: column; gap: 4px; }
  .карточка .название {
    font-size: 12.5px; line-height: 1.35; color: var(--текст-тихий);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 34px;
  }
  .карточка .цена { font-size: 16px; font-weight: 700; letter-spacing: -.3px; }
  .карточка .цена s { font-size: 12.5px; font-weight: 500; color: var(--текст-тихий); margin-left: 3px; }

  .метка {
    position: absolute; left: 7px; top: 7px; z-index: 1;
    background: var(--акцент); color: #22260c;
    font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 20px; letter-spacing: .2px;
  }
  .метка.скидка { background: #d94f3d; color: #fff; }

  .пусто { padding: 50px 24px; text-align: center; color: var(--текст-тихий); font-size: 14.5px; line-height: 1.6; }

  /* ---------- витрина «Придумано на днях» и букет дня (перенос из приложения) ----------
     На сайте лента шире: на компьютере это сетка, на телефоне — прокрутка вбок. */
  .витрина { margin-top: 34px; }
  .витрина .строка-подписи {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin-bottom: 6px;
  }
  .витрина h2 { margin: 0; }
  .придумать-свой {
    flex: none; background: var(--акцент); color: #22260c; border: 0;
    border-radius: 999px; padding: 9px 16px; font-family: inherit;
    font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
    transition: transform .1s;
  }
  .придумать-свой:active { transform: scale(.95); }
  .витрина .пояснение { margin: 0 0 16px; font-size: 14px; color: var(--текст-тихий); line-height: 1.5; max-width: 720px; }
  .витрина-лента {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
  }
  @media (max-width: 1100px) { .витрина-лента { grid-template-columns: repeat(4, 1fr); } }
  @media (max-width: 700px) {
    .витрина-лента {
      display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px;
      scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .витрина-лента::-webkit-scrollbar { display: none; }
    .витрина-карточка { flex: none; width: 140px; }
  }
  .витрина-карточка {
    cursor: pointer; background: none; border: 0; padding: 0;
    font-family: inherit; text-align: left; transition: transform .12s;
  }
  .витрина-карточка:hover { transform: translateY(-3px); }
  .витрина-карточка img {
    width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px;
    background: var(--плитка); display: block;
  }
  .витрина-карточка .цена {
    display: block; margin-top: 8px; font-size: 15px; font-weight: 700; color: var(--текст);
  }

  .букет-дня {
    margin-top: 22px; border-radius: 20px; overflow: hidden; position: relative;
    cursor: pointer; max-width: 560px;
  }
  .букет-дня img { width: 100%; height: 320px; object-fit: cover; display: block; background: var(--плитка); }
  .букет-дня .поверх {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 18px;
    background: linear-gradient(to top, rgba(10, 11, 7, .95) 32%, transparent);
  }
  .букет-дня .ярлык {
    display: inline-block; background: var(--акцент); color: #22260c;
    padding: 4px 11px; border-radius: 20px; font-size: 11px; font-weight: 800;
    letter-spacing: .6px; text-transform: uppercase; margin-bottom: 9px;
  }
  .букет-дня h3 { margin: 0 0 6px; font-size: 21px; letter-spacing: -.4px; color: #fff; }
  .букет-дня .цена { font-size: 23px; font-weight: 800; color: var(--акцент); }

  .промо-подсказка {
    margin: 0 0 8px; padding: 10px 12px; border-radius: 10px;
    background: rgba(184, 198, 85, .16); border: 1px solid rgba(184, 198, 85, .45);
    color: var(--акцент-глубокий); font-size: 13.5px; line-height: 1.4;
  }
  html.тёмная .промо-подсказка { color: var(--акцент); }
  .промо-подсказка b { font-weight: 700; }

  /* Цена с промокодом в подборе: люди приходили за скидкой, видели полный ценник
     и уходили, ничего не взяв (разбор 13.08.2026) */
  .подбор-карточка .цена.со-скидкой {
    text-decoration: line-through; text-decoration-thickness: 1.5px;
    color: var(--текст-тихий); font-size: 15px; font-weight: 600;
  }
  .подбор-карточка .цена-со-скидкой {
    font-size: 19px; font-weight: 700; letter-spacing: -.5px; color: var(--акцент-глубокий);
  }
  html.тёмная .подбор-карточка .цена-со-скидкой { color: var(--акцент); }
  .подбор-карточка .подбор-промо {
    margin: -4px 0 2px; padding: 7px 10px; border-radius: 9px;
    background: rgba(184, 198, 85, .16); border: 1px solid rgba(184, 198, 85, .45);
    color: var(--акцент-глубокий); font-size: 13px; line-height: 1.3;
  }
  html.тёмная .подбор-карточка .подбор-промо { color: var(--акцент); }

  /* Подарки к заказу: их кладут в каждый букет, снять нельзя (перенос из приложения) */
  .подарки {
    display: flex; align-items: center; gap: 12px;
    padding: 10px; border-radius: 14px;
    background: rgba(184, 198, 85, .12); border: 1px solid rgba(184, 198, 85, .4);
  }
  .подарки img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; flex: none; }
  @media (min-width: 700px) {
    .подарки img { width: 86px; height: 86px; }
    .подарки-текст b { font-size: 16px; }
    .подарки-текст span { font-size: 13.5px; }
    .подарки-цена { font-size: 16px; }
  }
  .подарки-текст { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .подарки-текст b { font-size: 14px; font-weight: 700; }
  .подарки-текст span { font-size: 12px; color: var(--текст-тихий); line-height: 1.35; }
  .подарки-цена { font-size: 14px; font-weight: 700; color: var(--акцент-глубокий); white-space: nowrap; }
  html.тёмная .подарки-цена { color: var(--акцент); }

  /* Сверка перед оплатой: всё, что человек выбрал, одним взглядом */
  .сверка { display: flex; flex-direction: column; gap: 0; }
  .сверка-строка {
    display: flex; gap: 12px; padding: 9px 0;
    border-bottom: 1px solid var(--плитка-край); font-size: 13.5px; line-height: 1.4;
  }
  .сверка-строка:last-child { border-bottom: 0; }
  .сверка-что { flex: none; width: 110px; color: var(--текст-тихий); }
  .сверка-как { flex: 1; min-width: 0; }
  /* товар в сверке — с миниатюрой: одни названия глазами не сверяют */
  .сверка-товар { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
  .сверка-товар:last-child { margin-bottom: 0; }
  .сверка-товар img { width: 46px; height: 58px; object-fit: cover; border-radius: 8px; flex: none; }
  .сверка-значок {
    width: 46px; height: 58px; border-radius: 8px; flex: none;
    background: var(--чернила); color: var(--акцент);
    display: flex; align-items: center; justify-content: center; font-size: 20px;
  }

  /* Фотографии вместо значков у дополнений — как в приложении */
  .допродажа img { width: 100%; height: 108px; object-fit: cover; display: block; margin-bottom: 6px; }
  .допродажа .имя { font-size: 13.5px; font-weight: 700; line-height: 1.25; padding: 0 10px; }
  .допродажа .подпись { font-size: 11.5px; color: var(--текст-тихий); padding: 0 10px; line-height: 1.3; }
  .допродажа .цена { font-size: 13px; font-weight: 600; padding: 2px 10px 0; }
  .допродажа.выбран .цена { color: var(--акцент-глубокий); }
  .допродажа.выбран .цена::after { content: ' ✓'; }

  /* Перечёркнутая цена и ярлычок скидки букета дня (перенос из приложения) */
  .цена-была {
    text-decoration: line-through; text-decoration-thickness: 1.5px;
    opacity: .6; font-weight: 600; margin-right: 4px;
  }
  .ярлык-дня {
    display: inline-block; margin-left: 8px; padding: 3px 8px; border-radius: 8px;
    background: rgba(184, 198, 85, .18); border: 1px solid rgba(184, 198, 85, .45);
    color: var(--акцент-глубокий); font-size: 12px; font-weight: 700;
    vertical-align: middle; letter-spacing: .2px;
  }
  html.тёмная .ярлык-дня { color: var(--акцент); }
  .букет-дня .цена .цена-была { color: #fff; font-size: 18px; }

  /* карточка букета, выбранного из витрины */
  .витрина-крупно { max-width: 560px; }
  .витрина-крупно img { width: 100%; border-radius: 18px; display: block; background: var(--плитка); }

  .витрина-цена { margin-top: 14px; font-size: 26px; font-weight: 800; color: var(--акцент-глубокий); }
  .витрина-состав { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--текст-тихий); }
  /* На компьютере цена, состав и «Хочу такой же» стояли под большим фото, и до кнопки
     приходилось листать (Илья, 18.09.2026). Там фото слева, остальное справа — как
     в карточке обычного букета. На телефоне всё по-прежнему в одну колонку. */
  /* на телефоне заголовок, цена и состав стояли вплотную к краю экрана */
  .лист[data-лист="витрина-букет"] .узкий { padding-left: 14px; padding-right: 14px; }
  @media (min-width: 900px) {
    .лист[data-лист="витрина-букет"] .узкий { max-width: 1000px; }
    .витрина-крупно { max-width: none; display: flex; gap: 32px; align-items: flex-start; }
    .витрина-крупно img { flex: 0 0 46%; width: 46%; }
    .витрина-справа { flex: 1; min-width: 0; }
    .витрина-справа .витрина-цена { margin-top: 4px; }
  }

  /* ---------- «Что входит в цену» (перенос из приложения, 23.08.2026) ----------
     Марианна 21.08: «на страницу букетов добавила бы инфо про доставку, коробку,
     свежесть» — в приложении этот блок уже есть, здесь его не было. */
  .что-в-цену {
    /* нижний отступ: без него подпись «Сколько стеблей» липла к рамке блока
       и читалась как его часть (Илья, 11.09.2026) */
    margin: 16px 0 18px; border-radius: 16px;
    background: linear-gradient(135deg, rgba(184, 198, 85, .13), rgba(184, 198, 85, .03));
    border: 1px solid rgba(184, 198, 85, .35); max-width: 560px;
  }
  .что-в-цену summary {
    list-style: none; cursor: pointer; padding: 14px 16px;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 14.5px; font-weight: 700; letter-spacing: -.2px; color: var(--акцент-глубокий);
  }
  .что-в-цену summary::-webkit-details-marker { display: none; }
  .что-в-цену summary::after { content: "▾"; font-size: 12px; opacity: .7; }
  .что-в-цену[open] summary::after { content: "▴"; }
  .что-в-цену .внутри { padding: 0 16px 14px; }
  .что-в-цену .строка {
    display: flex; align-items: center; gap: 11px; padding: 8px 0;
    font-size: 14px; line-height: 1.4; color: var(--текст);
  }
  .что-в-цену .строка + .строка { border-top: 1px solid rgba(184, 198, 85, .18); }
  .что-в-цену .строка b { display: block; font-weight: 600; }
  .что-в-цену .строка i { font-style: normal; display: block; font-size: 12.5px; color: var(--текст-тихий); }
  .что-в-цену svg {
    flex: none; width: 21px; height: 21px; stroke: var(--акцент-глубокий); fill: none;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  }

  /* Карточка товара всегда тёмная, независимо от темы устройства. Текст блока
     брал общий цвет — на тёмном фоне названия строк были почти не видны
     (Илья, 07.09.2026, скриншот). Внутри шторки красим его отдельно. */
  .шторка .что-в-цену {
    background: linear-gradient(135deg, rgba(184, 198, 85, .16), rgba(184, 198, 85, .04));
    border-color: rgba(184, 198, 85, .42);
  }
  .шторка .что-в-цену summary { color: var(--акцент); }
  .шторка .что-в-цену .строка,
  .шторка .что-в-цену .строка b { color: var(--белый-на-чернилах); }
  .шторка .что-в-цену .строка i { color: rgba(244, 244, 236, .62); }
  .шторка .что-в-цену .строка + .строка { border-top-color: rgba(184, 198, 85, .22); }
  .шторка .что-в-цену svg { stroke: var(--акцент); }
  /* Текст выпадающих блоков (состав, уход, доставка, вопросы) — в цвет карточки:
     общий тёмный цвет на чёрном фоне не читался (Илья, 21.09.2026, скриншот). */
  .шторка .что-в-цену .текстом,
  .шторка .что-в-цену .текстом li,
  .шторка .что-в-цену .вопрос { color: var(--белый-на-чернилах); }
  .шторка .что-в-цену .текстом .ответ { color: rgba(244, 244, 236, .68); }
  .шторка .что-в-цену .текстом ul li::marker { color: var(--акцент); }

  /* ---------- ползунок цены с распределением (перенос из приложения, 23.08.2026) ----------
     Заменяет кнопки-диапазоны: полоска со столбиками показывает, сколько букетов
     в какой цене, справа в той же строке — порядок показа (сортировка по цене,
     которой Марианна не нашла 21.08). */
  /* Поля для ручного ввода цены: ползунком трудно попасть в точную сумму,
     особенно мышкой на компьютере (Илья, 07.09.2026) */
  .цена-руками {
    display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; flex-wrap: wrap;
  }
  .цена-руками label { font-size: 13px; color: var(--текст-тихий); }
  .цена-руками input {
    width: 104px; padding: 8px 10px; border-radius: 10px;
    border: 1px solid var(--плитка-край); background: var(--фон); color: var(--текст);
    font: inherit; font-size: 14px; font-weight: 600;
  }
  .цена-руками input:focus { outline: 2px solid var(--акцент); outline-offset: 1px; }
  .цена-руками .тире { color: var(--текст-тихий); }

  /* Сумма в генераторе: та же крупная цифра, но её можно набрать руками */
  .бюджет-поле {
    width: 190px; margin: 0 auto; display: block; text-align: center;
    padding: 6px 10px; border-radius: 12px;
    border: 1px solid var(--плитка-край); background: var(--фон); color: var(--текст);
    font: inherit; font-size: 30px; font-weight: 800; letter-spacing: -.8px;
  }
  .бюджет-поле:focus { outline: 2px solid var(--акцент); outline-offset: 1px; }

  .ценник { padding: 2px 14px 0; }
  .ценник-строка {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 8px;
  }
  .ценник-цифры { font-size: 15px; font-weight: 700; color: var(--текст); }
  .ценник-порядок {
    flex: none; background: none; border: 0; padding: 6px 2px;
    font-family: inherit; font-size: 13px; color: var(--текст-тихий);
    cursor: pointer; white-space: nowrap;
    display: flex; align-items: center; gap: 5px;
  }
  /* Стрелки рисуем сами. Знак ↕ на айфоне подменяется цветным значком-смайликом
     и торчит из оформления синим квадратом (Илья, 21.08.2026). */
  .ценник-порядок svg { flex: none; display: block; }
  .ценник-порядок svg path { fill: currentColor; opacity: .35; }
  .ценник-порядок svg path.горит { opacity: 1; }
  .ценник-порядок.выбран { color: var(--акцент); font-weight: 600; }
  .ценник-порядок:active { opacity: .6; }

  .ценник-гист { display: flex; align-items: flex-end; gap: 2px; height: 34px; }
  .ценник-гист div {
    flex: 1; background: var(--плитка-край); border-radius: 2px 2px 0 0;
    min-height: 3px; transition: background .15s;
  }
  .ценник-гист div.внутри { background: var(--акцент); }

  /* Дорожка нарочно высокая: по кружкам 22 px пальцем не попасть (Илья, 21.08.2026).
     Ловим нажатие всей полосой и двигаем тот кружок, что ближе. */
  .ценник-дорожка { position: relative; height: 42px; touch-action: none; user-select: none; cursor: pointer; }
  .ценник-рельс {
    position: absolute; top: 19px; left: 0; right: 0; height: 4px;
    background: var(--плитка-край); border-radius: 999px;
  }
  .ценник-заливка { position: absolute; top: 19px; height: 4px; background: var(--акцент); border-radius: 999px; }
  .ценник-бегунок {
    position: absolute; top: 10px; width: 22px; height: 22px; margin-left: -11px;
    background: var(--акцент); border: 3px solid var(--фон); border-radius: 50%;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .45);
    transition: transform .12s;
  }
  .ценник-бегунок.тянут { transform: scale(1.25); }

  /* Кнопки мессенджеров в контактах. Марина 09.09.2026 назвала прежние
     «ядерными»: фирменные цвета мессенджеров кричали на кремовом фоне, а серые
     кружки вместо значков читались как недогрузившаяся картинка. Теперь кнопки
     в цвете сайта, а принадлежность показывает маленькая точка. */
  .мессенджеры { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
  .мессенджер {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600;
    text-decoration: none; color: var(--текст) !important;
    background: var(--фон); border: 1px solid var(--плитка-край);
    transition: border-color .15s, background .15s;
  }
  .мессенджер:hover { border-color: var(--акцент); background: var(--крем); }
  .мессенджер::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
  .мессенджер.тг::before { background: #2aabee; }
  .мессенджер.вк::before { background: #0077ff; }
  .мессенджер.вотсап::before { background: #25d366; }

  /* 2. Меню на телефоне: раньше «О нас», «Отзывы», «FAQ» и «Контакты» уезжали
     за край экрана и до них нельзя было добраться (найдено 23.08.2026). Теперь
     на узких экранах пункты переносятся на вторую строку. */
  @media (max-width: 760px) {
    /* Марина 09.09.2026: «отцентровать» — на телефоне пункты уходят на вторую
       строку и прижимались к левому краю, строка выглядела оборванной. */
    .меню-строка { flex-wrap: wrap; overflow-x: visible; gap: 6px 18px; justify-content: center; }
    .меню-строка a { flex: 0 0 auto; font-size: 14px; padding: 6px 0; }
    .меню-строка a.акцентный { padding: 4px 12px; }
  }

  /* ---------- галерея работ ---------- */
  .галерея-сетка { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; }
  @media (min-width: 700px)  { .галерея-сетка { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 1000px) { .галерея-сетка { grid-template-columns: repeat(4, 1fr); } }
  .галерея-сетка .кадр-галереи {
    border: none; padding: 0; cursor: pointer; border-radius: 14px; overflow: hidden;
    aspect-ratio: 3/4; background: var(--плитка-край); transition: transform .12s;
  }
  .галерея-сетка .кадр-галереи:hover { transform: translateY(-2px); }
  .галерея-сетка img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .галерея-ещё {
    display: block; margin: 20px auto 0; padding: 12px 26px; border-radius: 40px;
    border: 1.5px solid var(--плитка-край); background: var(--плитка); color: var(--текст);
    font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  }

  /* ---------- подвал, как на сайте ---------- */
  .подвал { margin-top: 48px; background: var(--крем); border-top: 1px solid var(--плитка-край); }
  .подвал .внутри {
    max-width: 1120px; margin: 0 auto; padding: 30px 14px 90px;
    font-size: 12.5px; line-height: 1.6; color: var(--текст-тихий);
  }
  .подвал .колонки { display: flex; flex-wrap: wrap; gap: 28px 48px; margin-bottom: 22px; }
  .подвал .колонка { min-width: 150px; }
  .подвал .колонка .шапка-колонки {
    font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--текст); margin-bottom: 10px;
  }
  .подвал .колонка a {
    display: block; padding: 3px 0; color: var(--текст-тихий);
    text-decoration: none; cursor: pointer;
  }
  .подвал .колонка a:hover { color: var(--акцент-глубокий); }
  .подвал img { height: 34px; width: auto; display: block; margin-bottom: 12px; }
  .подвал .контакты-подвала a { color: var(--текст-тихий); display: inline; padding: 0; }
  .подвал .подборки-подвала {
    display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 16px;
    font-size: 11px; line-height: 1.7; opacity: .6;
  }
  .подвал .подборки-подвала a { display: inline; padding: 0; color: var(--текст-тихий); }
  .подвал .реквизиты { opacity: .72; border-top: 1px solid var(--плитка-край); padding-top: 14px; }

  /* ---------- карточка товара ---------- */
  .товар-обёртка { max-width: 1000px; margin: 0 auto; }
  @media (min-width: 900px) {
    /* Фото и описание — одной высоты: правый блок кончался раньше картинки,
       и низ карточки выглядел рваным (Илья, 11.09.2026). */
    .товар-обёртка { display: flex; gap: 24px; padding: 20px 14px 0; align-items: flex-start; }
    /* Левая колонка тянется до низа правой: раньше под фото оставалась белая полоса
       (Илья, 21.09.2026, скриншот). Фото занимает всё свободное место,
       миниатюры остальных кадров стоят под ним. */
    .товар-обёртка > .лево {
      flex: 0 0 46%; display: flex; flex-direction: column; min-width: 0;
      /* фото стоит на месте, пока человек раскрывает блоки справа и листает карточку
         (Илья, 21.09.2026: «при нажатии на выпадающий список фото зачем-то расширяется») */
      position: sticky; top: 14px;
    }
    .товар-обёртка .галерея { flex: none; height: min(72vh, 700px); border-radius: 18px; overflow: hidden; }
    .товар-обёртка .галерея .полоса { height: 100%; }
    .товар-обёртка .галерея img { height: 100%; aspect-ratio: auto; }
    .товар-обёртка .шторка {
      flex: 1; margin-top: 0 !important; border-radius: 20px !important;
      display: flex; flex-direction: column;
    }
    /* размеры не растягиваем — они прижимаются к своей подписи, а пустота уходит вниз */
    .товар-обёртка .шторка > .габариты { margin-top: auto; }
    /* В разметке выбор размера стоит под ценой — это для телефона (Илья, 07.10.2026).
       На компьютере порядок прежний: размеры, габариты, опции, количество и кнопка
       «В корзину» — под выпадающими блоками. */
    .товар-обёртка .шторка > #блокРазмеров,
    .товар-обёртка .шторка > .габариты,
    .товар-обёртка .шторка > #опции,
    .товар-обёртка .шторка > .кол-во,
    .товар-обёртка .шторка > #главнаяКнопка { order: 1; }
  }
  /* на телефоне размеры сразу под ценой и звёздами — отступ, чтобы не липли к ним */
  @media (max-width: 899px) {
    .шторка > #блокРазмеров { margin-top: 14px; }
  }
  .галерея { position: relative; background: var(--плитка); }
  .галерея .полоса { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .галерея .полоса::-webkit-scrollbar { height: 0; }
  .галерея img { width: 100%; flex: none; aspect-ratio: 1/1; object-fit: cover; scroll-snap-align: center; display: block; }
  /* Миниатюры остальных фото под основным — как в обычных магазинах
     (Илья, 21.09.2026). На телефоне листаются пальцем. */
  .миниатюры { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
  .миниатюры::-webkit-scrollbar { height: 0; }
  .миниатюры[hidden] { display: none; }
  .миниатюра {
    flex: none; width: 74px; height: 74px; border-radius: 12px; overflow: hidden;
    border: 2px solid transparent; padding: 0; cursor: pointer; background: var(--плитка);
  }
  .миниатюра img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .миниатюра.выбрана { border-color: var(--акцент); }
  @media (max-width: 899px) {
    /* на телефоне шторка карточки заходит наверх на 20 px — оставляем миниатюрам место */
    .миниатюры { padding: 0 14px; margin-bottom: 22px; }
    .миниатюра { width: 62px; height: 62px; }
  }

  .точки { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; }
  .точка { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); transition: width .2s; }
  .точка.активна { width: 18px; border-radius: 4px; background: #fff; }
  .стрелка-галереи {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(255,255,255,.85); color: #2b2e26; font-size: 17px; font-weight: 700;
    display: none; align-items: center; justify-content: center;
  }
  .стрелка-галереи.лево { left: 10px; }
  .стрелка-галереи.право { right: 10px; }
  @media (hover: hover) and (pointer: fine) { .галерея:hover .стрелка-галереи { display: flex; } }

  .шторка {
    background: var(--чернила); color: var(--белый-на-чернилах);
    border-radius: 20px 20px 0 0; margin-top: -20px; position: relative; padding: 16px 16px 24px;
  }
  .ручка { width: 36px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.22); margin: 0 auto 14px; }
  @media (min-width: 900px) { .ручка { display: none; } }
  .шторка h1, .шторка h2 { margin: 0 0 8px; font-size: 20px; font-weight: 700; letter-spacing: -.4px; line-height: 1.3; }
  .шторка .название-с-размером { margin: 0 0 8px; font-size: 20px; font-weight: 700; letter-spacing: -.4px; line-height: 1.3; }
  .шторка .название-с-размером h1, .шторка .название-с-размером h2 { display: inline; margin: 0; font: inherit; letter-spacing: inherit; line-height: inherit; }
  .шторка .цена-крупно { font-size: 24px; font-weight: 700; letter-spacing: -.6px; display: block; margin-bottom: 14px; }
  .шторка .цена-крупно s { font-size: 16px; font-weight: 500; opacity: .5; margin-left: 6px; }
  .шторка .описание { font-size: 14px; line-height: 1.65; opacity: .74; margin: 0 0 18px; white-space: pre-line; }
  .подзаголовок { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; opacity: .5; margin-bottom: 9px; }
  .размеры { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; margin-bottom: 16px; scrollbar-width: none; }
  .размеры::-webkit-scrollbar { height: 0; }
  .размер {
    flex: 1 0 auto; min-width: 74px; cursor: pointer;
    background: var(--чернила-мягкая); border: 1.5px solid transparent;
    color: var(--белый-на-чернилах); border-radius: 12px; padding: 10px 8px;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
  }
  .размер.выбран { border-color: var(--акцент); background: rgba(184,198,85,.15); }
  .размер .б { font-size: 14.5px; font-weight: 700; white-space: nowrap; }
  .размер .м { font-size: 11.5px; opacity: .65; white-space: nowrap; }

  .габариты { font-size: 13px; opacity: .6; margin-bottom: 16px; }

  .опция {
    display: flex; align-items: center; gap: 11px; cursor: pointer; width: 100%;
    background: var(--чернила-мягкая); border: 1.5px solid transparent; color: var(--белый-на-чернилах);
    border-radius: 12px; padding: 12px 13px; margin-bottom: 16px; text-align: left;
  }
  .опция.выбран { border-color: var(--акцент); background: rgba(184,198,85,.15); }
  .опция .бокс {
    width: 20px; height: 20px; border-radius: 6px; flex: none;
    border: 1.5px solid rgba(255,255,255,.4);
    display: flex; align-items: center; justify-content: center; font-size: 12px; color: #22260c;
  }
  .опция.выбран .бокс { background: var(--акцент); border-color: var(--акцент); }
  .опция .т { font-size: 14px; font-weight: 600; }
  .опция .ц { margin-left: auto; font-size: 14px; font-weight: 700; }

  .кол-во { display: flex; align-items: center; gap: 14px; }
  .кол-во .лейбл { font-size: 13px; opacity: .6; }
  .кол-во .кнопки { display: flex; align-items: center; gap: 4px; margin-left: auto; background: var(--чернила-мягкая); border-radius: 40px; padding: 4px; }
  .кол-во button {
    width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
    background: none; color: var(--белый-на-чернилах); font-size: 19px;
  }
  .кол-во button:active { background: rgba(255,255,255,.1); }
  .кол-во .число { min-width: 26px; text-align: center; font-size: 16px; font-weight: 700; }

  /* ---------- корзина ---------- */
  .позиция { display: flex; gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--плитка-край); align-items: center; }
  /* Крупнее, чем было (58×72): букет в корзине человек разглядывает,
     а не опознаёт по значку (Илья, 07.09.2026) */
  .позиция img { width: 92px; height: 116px; object-fit: cover; border-radius: 12px; flex: none; }
  .позиция .тело { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .позиция .н { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
  .позиция .д { font-size: 12.5px; color: var(--текст-тихий); }

  /* На компьютере строка корзины широкая, и снимок в ней терялся (Илья, 07.09.2026).
     Заодно подтягиваем название и цену — иначе букет крупный, а подпись мелкая. */
  @media (min-width: 700px) {
    .позиция { gap: 18px; padding: 18px 16px; }
    .позиция img, .авторский-значок { width: 150px; height: 190px; border-radius: 14px; }
    .позиция .н { font-size: 17px; }
    .позиция .д { font-size: 14px; }
    .позиция .ц { font-size: 18px; }
    .позиция .убрать { font-size: 24px; }
  }
  .позиция .убрать { background: none; border: 0; color: var(--текст-тихий); font-size: 20px; padding: 6px; cursor: pointer; }
  .авторский-значок {
    width: 58px; height: 72px; border-radius: 10px; flex: none;
    background: var(--чернила); color: var(--акцент);
    display: flex; align-items: center; justify-content: center; font-size: 26px;
  }
  .позиция .ц { font-size: 14.5px; font-weight: 700; white-space: nowrap; }

  .поле-ввода {
    width: 100%; font-family: inherit; font-size: 15px; color: var(--текст);
    background: var(--плитка); border: 1px solid var(--плитка-край);
    border-radius: 12px; padding: 13px 14px; margin-bottom: 8px;
  }
  .поле-ввода::placeholder { color: var(--текст-тихий); }
  .поле-ввода:focus { outline: none; border-color: var(--акцент); }
  textarea.поле-ввода { resize: none; min-height: 76px; line-height: 1.5; }

  .блок-поля { margin: 0 14px; }
  .блок-поля .поле-ввода { width: 100%; }

  .допродажа {
    flex: none; width: 106px; cursor: pointer; color: inherit;
    background: var(--плитка); border: 1.5px solid var(--плитка-край);
    border-radius: 14px; padding: 12px 11px; text-align: left;
    display: flex; flex-direction: column; gap: 4px;
  }
  .допродажа.выбран { border-color: var(--акцент); background: rgba(184,198,85,.13); }
  .допродажа .э { font-size: 21px; line-height: 1; }
  .допродажа .н { font-size: 13px; font-weight: 600; line-height: 1.3; }
  .допродажа .ц { font-size: 12.5px; color: var(--текст-тихий); }
  .допродажа.выбран .ц { color: var(--акцент-глубокий); font-weight: 600; }

  .промо { display: flex; gap: 8px; }
  .промо .поле-ввода { margin-bottom: 0; text-transform: uppercase; }
  .промо .поле-ввода::placeholder { text-transform: none; }
  .кнопка-промо {
    flex: none; cursor: pointer; font-size: 14px; font-weight: 600;
    background: var(--чернила); color: var(--белый-на-чернилах);
    border: 0; border-radius: 12px; padding: 0 18px;
  }
  .кнопка-промо:disabled { opacity: .5; }
  .промо-ответ { margin-top: 8px; font-size: 13px; line-height: 1.45; display: none; }
  .промо-ответ.виден { display: block; }
  .промо-ответ.удача { color: var(--акцент-глубокий); font-weight: 600; }
  .промо-ответ.мимо { color: #d94f3d; }

  .итоги { margin-top: 16px; padding: 14px; background: var(--плитка); border: 1px solid var(--плитка-край); border-radius: 14px; }
  .итоги .р.скидка b { color: var(--акцент-глубокий); }
  .итоги [hidden] { display: none !important; }
  .итоги .р { display: flex; justify-content: space-between; font-size: 14px; padding: 5px 0; color: var(--текст-тихий); }
  .итоги .р b { color: var(--текст); font-weight: 500; }
  .итоги .всего {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-top: 9px; padding-top: 11px; border-top: 1px solid var(--плитка-край);
    font-size: 15px; font-weight: 600;
  }
  .итоги .всего b { font-size: 21px; font-weight: 700; letter-spacing: -.4px; }

  /* ---------- оформление ---------- */
  .группа { margin: 18px 14px 0; }
  .группа > .лейбл {
    font-size: 12px; text-transform: uppercase; letter-spacing: .8px;
    color: var(--текст-тихий); margin-bottom: 9px; font-weight: 600;
  }
  /* ---------- весть о выходном ---------- */
  /* Полоса над шапкой: фирменная олива, чтобы человек заметил, но не пугался.
     Илья выбрал этот вариант из пяти 29.09.2026. */
  .весть-выходного {
    position: sticky; top: 0; z-index: 40;   /* Илья попросил закрепить: 29.09.2026 */
    background: var(--акцент); color: #22260c;
    padding: 13px 16px; text-align: center; line-height: 1.4;
  }
  .весть-выходного[hidden] { display: none; }
  .весть-выходного b { display: block; font-size: 14.5px; font-weight: 700; }
  .весть-выходного span { display: block; font-size: 12.5px; font-weight: 500; opacity: .8; margin-top: 3px; }

  /* ---------- способы оплаты ---------- */
  /* Плитки касс: человек выбирает кассу прямо в форме, а не на чужой странице
     (Илья, 29.09.2026). Две наши плитки и две фирменные кнопки Яндекса — все
     одного размера, в одной сетке. */
  .кассы { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .касса {
    position: relative; cursor: pointer; text-align: left; font-family: inherit;
    background: var(--плитка); border: 1.5px solid var(--плитка-край); border-radius: 12px;
    padding: 12px 34px 12px 12px; color: var(--текст);
    display: flex; flex-direction: column; gap: 6px; min-height: 78px;
  }
  .касса.выбран { border-color: var(--акцент); background: rgba(184,198,85,.13); }
  .касса .т { font-size: 14px; font-weight: 600; line-height: 1.25; }
  .касса .п { font-size: 11.5px; line-height: 1.35; color: var(--текст-тихий); }
  .касса .кружок-выбора {
    position: absolute; top: 12px; right: 12px;
    width: 19px; height: 19px; border-radius: 50%; border: 1.5px solid var(--плитка-край);
    display: flex; align-items: center; justify-content: center; font-size: 11px; color: transparent;
  }
  .касса.выбран .кружок-выбора { background: var(--акцент); border-color: var(--акцент); color: #22260c; }
  .касса .лого { display: flex; align-items: center; gap: 6px; margin-top: auto; flex-wrap: wrap; }
  .касса .знак {
    height: 20px; padding: 0 7px; border-radius: 6px; font-size: 10.5px; font-weight: 800;
    display: inline-flex; align-items: center; letter-spacing: .2px;
  }
  .знак.сбп { background: linear-gradient(90deg,#1f8fff,#8f4bd8); color: #fff; }
  .знак.карты { background: rgba(0,0,0,.07); color: var(--текст-тихий); }

  /* Ячейка с кнопкой Яндекса: кнопку рисует их SDK, но открывать форму по клику
     нельзя — уйти с неё некуда. Поэтому сверху прозрачный слой-ловушка. */
  .касса-япэй {
    position: relative; min-height: 78px; display: flex; cursor: pointer;
    border: 1.5px solid transparent; border-radius: 14px; padding: 2px;
  }
  .касса-япэй[hidden] { display: none; }
  .касса-япэй .место-кнопки { width: 100%; height: 100%; }
  /* кнопка SDK приходит высотой 54px и болталась в ячейке как обрезанная */
  .касса-япэй .ya-pay-button { height: 100% !important; width: 100% !important; }
  .касса-япэй .ya-pay-button iframe { height: 100% !important; width: 100% !important; }
  .касса-япэй .ловушка { position: absolute; inset: 0; z-index: 2; border-radius: 12px; }
  .касса-япэй .кружок-выбора {
    position: absolute; top: 6px; right: 6px; z-index: 3;
    width: 18px; height: 18px; border-radius: 50%;
    align-items: center; justify-content: center; font-size: 11px;
    display: none;   /* у невыбранной кнопки пусто: кружок налезал на надпись */
  }
  .касса-япэй.выбран { border-color: var(--акцент); }
  .касса-япэй.выбран .кружок-выбора {
    display: flex; background: var(--акцент); color: #22260c;
    box-shadow: 0 0 0 2px rgba(0,0,0,.35);
  }

  .бейдж-сплита { margin: 8px 0 0; }
  .бейдж-сплита:empty { display: none; }

  .сегменты { display: flex; gap: 8px; }
  .сегмент {
    flex: 1; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--текст);
    background: var(--плитка); border: 1.5px solid var(--плитка-край); border-radius: 12px; padding: 12px 8px;
  }
  .сегмент.выбран { border-color: var(--акцент); background: rgba(184,198,85,.13); font-weight: 600; }
  /* пока способ получения не выбран, подсвечиваем кнопки — без выбора дальше не пустим */
  .сегменты.ждёт-выбора .сегмент { border-color: var(--пудра); border-style: dashed; }
  .подпись-выбора {
    margin: 7px 2px 0; font-size: 12.5px; line-height: 1.45;
    color: var(--акцент-глубокий); font-weight: 500;
  }
  .подпись-доставки {
    margin: 9px 2px 0; font-size: 12.5px; line-height: 1.5; color: var(--текст-тихий);
  }

  .галка {
    display: flex; align-items: flex-start; gap: 10px; cursor: pointer; width: 100%;
    background: var(--плитка); border: 1.5px solid var(--плитка-край); color: inherit;
    border-radius: 12px; padding: 12px 13px; text-align: left; margin-top: 2px;
  }
  .галка.выбран { border-color: var(--акцент); background: rgba(184,198,85,.13); }
  .галка .бокс {
    width: 20px; height: 20px; border-radius: 6px; flex: none; margin-top: 1px;
    border: 1.5px solid var(--текст-тихий);
    display: flex; align-items: center; justify-content: center; font-size: 12px; color: transparent;
  }
  .галка.выбран .бокс { background: var(--акцент); border-color: var(--акцент); color: #22260c; }
  #поляПолучателя { margin-top: 8px; }
  .галка .т { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; }
  .галка .п { display: block; font-size: 12.5px; color: var(--текст-тихий); line-height: 1.45; margin-top: 2px; }

  .ошибка-поля { border-color: #d9534f !important; }
  .подсказка-самовывоз {
    background: var(--плитка); border: 1px solid var(--плитка-край);
    border-radius: 12px; padding: 13px 14px;
    font-size: 13.5px; line-height: 1.55; color: var(--текст-тихий);
  }
  .подсказка-самовывоз b { color: var(--текст); }

  .сноска { margin-top: 14px; font-size: 11.5px; line-height: 1.5; color: var(--текст-тихий); }
  .сноска a { color: var(--акцент-глубокий); text-decoration: underline; text-underline-offset: 2px; }

  /* ---------- готово ---------- */
  .готово { padding: 48px 24px 24px; text-align: center; }
  .кружок {
    width: 70px; height: 70px; border-radius: 50%; margin: 0 auto 18px;
    background: var(--акцент); color: #22260c;
    display: flex; align-items: center; justify-content: center; font-size: 34px;
  }
  .готово .номер { font-size: 23px; font-weight: 700; letter-spacing: -.5px; margin-bottom: 10px; }
  .готово .текст { font-size: 14.5px; line-height: 1.65; color: var(--текст-тихий); }
  .готово .к-оплате {
    display: inline-block; margin-top: 20px; padding: 14px 26px; border-radius: 12px;
    background: var(--акцент); color: #22260c; text-decoration: none;
    font-size: 15px; font-weight: 700;
  }
  /* без этой строки display:inline-block перебивал hidden, и тем, кто платит переводом,
     показывалась кнопка «Перейти к оплате», которая никуда не вела (найдено 18.09.2026) */
  .готово .к-оплате[hidden] { display: none; }

  /* Выпадающие блоки карточки: состав, уход, доставка, вопросы. Вид тот же,
     что у «Что входит в цену», чтобы читались одним столбиком. */
  /* Одинаковые промежутки между всеми выпадающими блоками: первый лежит в своём
     контейнере, и отступы с соседом складывались (Илья, 21.09.2026). */
  #чтоВЦенуТовар .что-в-цену { margin: 16px 0 12px; }
  #блокиТовара .что-в-цену { margin: 0 0 12px; }
  #блокиТовара .что-в-цену:last-child { margin-bottom: 18px; }
  .что-в-цену .текстом { font-size: 14px; line-height: 1.55; color: var(--текст); }
  .что-в-цену .текстом p { margin: 0 0 8px; }
  .что-в-цену .текстом p:last-child { margin-bottom: 0; }
  .что-в-цену .текстом ul { margin: 0; padding-left: 18px; }
  .что-в-цену .текстом li { padding: 3px 0; }
  .что-в-цену .вопрос { font-weight: 600; margin-top: 10px; }
  .что-в-цену .вопрос:first-child { margin-top: 0; }
  .что-в-цену .ответ { color: var(--текст-тихий); margin: 2px 0 0; }

  /* Текст страницы букета для поисковика: человек видит его доли секунды, пока
     грузится магазин, дальше скрипт его убирает (Илья, 21.09.2026). */
  .для-поиска { max-width: 760px; margin: 0 auto; padding: 18px 16px 40px; }
  .для-поиска h1 { font-size: 26px; line-height: 1.2; margin: 10px 0 6px; }
  .для-поиска h2 { font-size: 18px; margin: 18px 0 6px; }
  .для-поиска img { width: 100%; max-width: 560px; border-radius: 18px; display: block; margin: 12px 0; }
  .для-поиска .цена-крупно { font-size: 22px; font-weight: 800; color: var(--акцент-глубокий); }
  .для-поиска ul { margin: 0; padding-left: 20px; }
  .для-поиска .хлебные { font-size: 13.5px; color: var(--текст-тихий); }
  .для-поиска .кнопка {
    display: inline-block; margin-top: 14px; padding: 12px 22px; border-radius: 40px;
    background: var(--акцент); color: #22260c; text-decoration: none; font-weight: 700;
  }

  /* ---------- оценки букетов (Илья, 20.09.2026) ---------- */
  .оценка-товара { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; flex-wrap: wrap; }
  .оценка-товара[hidden] { display: none; }
  .звёзды { display: inline-flex; gap: 2px; font-size: 19px; line-height: 1; color: #d8d8c8; }
  .звёзды .звезда { cursor: default; }
  .звёзды .звезда.горит { color: #f0a92b; }
  .звёзды.можно .звезда { cursor: pointer; }
  .звёзды.можно .звезда:hover { transform: scale(1.12); }
  .оценка-подпись { font-size: 13.5px; color: var(--текст-тихий); }
  /* маленькие звёзды в плитке каталога */
  .карточка .оценка-мини {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12.5px; color: var(--текст-тихий); margin-top: 2px;
  }
  .карточка .оценка-мини b { color: var(--текст); font-weight: 700; }
  .карточка .оценка-мини .звезда { color: #f0a92b; font-size: 13px; }
  .связь-после {
    margin: 22px auto 0; max-width: 380px; padding: 16px 16px 14px;
    border: 1px solid var(--плитка-край); border-radius: 16px;
  }
  .связь-после p { margin: 0 0 6px; font-size: 14px; line-height: 1.5; color: var(--текст-тихий); }
  .телефон-после {
    display: inline-block; font-size: 21px; font-weight: 700; letter-spacing: -.3px;
    color: var(--текст); text-decoration: none;
  }
  .связь-после .мессенджеры { justify-content: center; margin: 12px 0 0; }

  /* ---------- загрузка ---------- */
  .загрузка { padding: 80px 24px; text-align: center; color: var(--текст-тихий); font-size: 14.5px; }
  .колесо {
    width: 28px; height: 28px; margin: 0 auto 14px;
    border: 3px solid var(--плитка-край); border-top-color: var(--акцент);
    border-radius: 50%; animation: вращение .8s linear infinite;
  }
  @keyframes вращение { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .колесо { animation: none; } }

  /* Пока человек печатает, плавающая кнопка и корзина в углу только мешают:
     на телефоне клавиатура поджимает экран, и они наезжают на поле ввода
     (Илья, 25.08.2026).
     Кнопку в корзине это правило не трогает: она стоит в конце списка, ничего
     не перекрывает — а пропадала, стоило тронуть открытку или промокод, и человек
     оставался без «Дальше» (Илья, 07.09.2026). На широком экране клавиатуры нет
     вовсе, поэтому прячем только на узких. */
  @media (max-width: 699px) {
    body.печатает .главная-кнопка:not(.в-потоке),
    body.печатает .корзина-угол { display: none; }
  }

  /* ---------- нижняя кнопка ---------- */
  .главная-кнопка {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: 14px; z-index: 50;
    width: min(592px, calc(100% - 28px));
    padding: 16px; border: none; border-radius: 14px; cursor: pointer;
    background: var(--акцент); color: #22260c;
    font-size: 16px; font-weight: 700; letter-spacing: -.2px;
    box-shadow: 0 8px 26px rgba(43,46,38,.28);
    display: none; align-items: center; justify-content: center; gap: 10px;
    transition: transform .1s;
  }
  .главная-кнопка.видна { display: flex; }
  /* В корзине кнопка не плавает, а стоит в конце списка, под итогами: плавающая
     она закрывала суммы и мешала читать (Илья, 25.08.2026). */
  .главная-кнопка.в-потоке {
    position: static; transform: none;
    width: 100%; margin: 14px 0 0; box-shadow: none;
  }
  .главная-кнопка.в-потоке:active { transform: scale(.985); }
  .главная-кнопка:active { transform: translateX(-50%) scale(.985); }
  .главная-кнопка:disabled { opacity: .6; cursor: default; }
  .главная-кнопка .колесо { width: 18px; height: 18px; border-width: 2px; margin: 0; border-color: rgba(34,38,12,.25); border-top-color: #22260c; }

  /* ---------- справка по плиткам доверия ---------- */
  .справка-фон {
    position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.45);
    display: flex; align-items: flex-end; justify-content: center;
    opacity: 0; transition: opacity .18s;
  }
  .справка-фон.видна { opacity: 1; }
  .справка-панель {
    width: 100%; max-width: 560px; max-height: 82vh; overflow-y: auto;
    background: var(--фон); color: var(--текст);
    border-radius: 20px 20px 0 0; padding: 8px 18px 24px;
    transform: translateY(14px); transition: transform .18s;
  }
  @media (min-width: 700px) {
    .справка-фон { align-items: center; }
    .справка-панель { border-radius: 20px; }
  }
  .справка-фон.видна .справка-панель { transform: translateY(0); }
  .справка-панель .ручка-справки { width: 36px; height: 4px; border-radius: 4px; background: var(--плитка-край); margin: 6px auto 14px; }
  .справка-панель h3 { margin: 0 0 12px; font-size: 19px; font-weight: 700; letter-spacing: -.4px; }
  .справка-панель ul { margin: 0; padding: 0; list-style: none; }
  .справка-панель li { font-size: 14px; line-height: 1.55; padding: 9px 0; border-bottom: 1px solid var(--плитка-край); }
  .справка-панель li:last-child { border-bottom: none; }
  .справка-панель li a { color: var(--акцент-глубокий); text-decoration: underline; text-underline-offset: 3px; }
  .справка-панель .сноска-справки { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--текст-тихий); }
  .справка-панель .закрыть-справку {
    margin-top: 16px; width: 100%; padding: 13px; border: none; border-radius: 12px;
    background: var(--акцент); color: #22260c; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  }

  /* ---------- бриф ---------- */
  .бриф-шапка { position: sticky; top: 92px; z-index: 5; padding: 14px 14px 10px; background: var(--фон); }
  .бриф-полоса { height: 3px; background: var(--плитка-край); border-radius: 2px; overflow: hidden; }
  .бриф-полоса i { display: block; height: 100%; background: var(--акцент); border-radius: 2px; transition: width .3s ease; }
  .бриф-счётчик { margin-top: 7px; font-size: 11.5px; color: var(--текст-тихий); letter-spacing: .3px; }

  .бриф-вопрос {
    position: relative; z-index: 1;
    margin: 6px 14px 0; font-size: 22px; line-height: 1.25;
    font-weight: 700; letter-spacing: -.5px; color: var(--текст);
  }
  .бриф-подсказка { margin: 7px 14px 0; font-size: 13.5px; line-height: 1.5; color: var(--текст-тихий); }
  .бриф-тело { margin: 18px 14px 0; display: flex; flex-direction: column; gap: 9px; }

  .вариант {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    padding: 14px 15px; border: 1.5px solid var(--плитка-край); background: var(--плитка);
    border-radius: 13px; font: inherit; color: var(--текст); cursor: pointer;
    transition: border-color .15s, background .15s, transform .1s;
  }
  .вариант:hover { border-color: var(--акцент); }
  .вариант:active { transform: scale(.985); }
  .вариант .знак { font-size: 21px; line-height: 1; flex: 0 0 auto; }
  .вариант .подпись { font-size: 15px; font-weight: 600; }
  .вариант .пояснение { display: block; font-size: 12.5px; font-weight: 400; color: var(--текст-тихий); margin-top: 2px; }
  .вариант.выбран { border-color: var(--акцент); background: rgba(184,198,85,.14); }

  /* бриф на широком экране — не узкая колонка, а сетка */
  @media (min-width: 900px) { .бриф-колонка { max-width: 980px; } }
  @media (min-width: 700px) {
    .бриф-выбор { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .бриф-фото { grid-template-columns: repeat(3, 1fr) !important; }
    .бриф-подбор { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
    .бриф-подбор .ранняя-доставка,
    .бриф-подбор .подбор-ждём,
    .бриф-подбор .бриф-ещё,
    .бриф-подбор .бриф-в-корзину,
    .бриф-подбор .бриф-заново { grid-column: 1 / -1; }
    .бриф-бюджет { max-width: 560px; }
    .бриф-важное { max-width: 660px; }
  }

  .бриф-фото { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .бриф-фото .кадр {
    position: relative; aspect-ratio: 3/4; border-radius: 13px; overflow: hidden;
    border: 2.5px solid transparent; background: var(--плитка); cursor: pointer;
  }
  .бриф-фото .кадр img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .бриф-фото .кадр.выбран { border-color: var(--акцент); }
  .бриф-фото .кадр .галка-фото {
    position: absolute; right: 8px; top: 8px; width: 24px; height: 24px; border-radius: 50%;
    background: var(--акцент); color: #22260c; font-size: 14px; font-weight: 700;
    display: none; align-items: center; justify-content: center;
  }
  .бриф-фото .кадр.выбран .галка-фото { display: flex; }

  .бюджет-сумма { text-align: center; font-size: 34px; font-weight: 700; letter-spacing: -1px; color: var(--текст); margin-bottom: 2px; }
  .бюджет-реакция { text-align: center; font-size: 16px; font-weight: 600; color: var(--акцент-глубокий); min-height: 22px; margin-bottom: 18px; }
  .бюджет-ползунок { width: 100%; margin: 0; accent-color: var(--акцент); }
  .бюджет-края { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px; color: var(--текст-тихий); }

  .бриф-метки { display: flex; flex-wrap: wrap; gap: 8px; }
  .бриф-метки .метка-брифа {
    padding: 9px 13px; border-radius: 20px; border: 1.5px solid var(--плитка-край);
    background: var(--плитка); font-size: 13.5px; font-weight: 600; color: var(--текст); cursor: pointer;
  }
  .бриф-метки .метка-брифа.выбран { border-color: var(--акцент); background: rgba(184,198,85,.14); }
  .бриф-поле {
    width: 100%; margin-top: 12px; padding: 13px 14px; border-radius: 13px;
    border: 1.5px solid var(--плитка-край); background: var(--плитка); color: var(--текст);
    font: inherit; font-size: 15px; resize: vertical; min-height: 84px;
  }
  .бриф-поле:focus { outline: none; border-color: var(--акцент); }

  .подбор-карточка {
    border: 1.5px solid var(--плитка-край); background: var(--плитка);
    border-radius: 14px; padding: 15px; display: flex; flex-direction: column; gap: 9px;
  }
  .подбор-карточка .шапка { display: flex; align-items: baseline; gap: 10px; }
  .подбор-карточка .номер { font-size: 12px; font-weight: 700; color: var(--текст-тихий); letter-spacing: .4px; }
  .подбор-карточка .цена { margin-left: auto; font-size: 19px; font-weight: 700; letter-spacing: -.5px; }
  .подбор-карточка .состав { display: flex; flex-direction: column; gap: 5px; }
  .подбор-карточка .строка-состава { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
  .подбор-карточка .строка-состава span:last-child { color: var(--текст-тихий); white-space: nowrap; }
  .подбор-карточка .примечание { font-size: 12.5px; color: var(--текст-тихий); line-height: 1.45; }
  .подбор-карточка .взять {
    margin-top: 3px; padding: 12px; border-radius: 11px; border: none;
    background: var(--акцент); color: #22260c; font: inherit; font-size: 15px;
    font-weight: 700; cursor: pointer;
  }
  /* букет уже взят: кнопка не пропадает, а ведёт в корзину */
  .подбор-карточка .взять.взят { background: var(--плитка); border: 1.5px solid var(--акцент); color: var(--текст); }
  /* «Сделать похожие» — тише основной кнопки, это уточнение, а не действие */
  .подбор-карточка .похожие {
    margin-top: 7px; padding: 10px; border-radius: 11px;
    border: 1px solid var(--плитка-край); background: transparent;
    color: var(--текст-тихий); font: inherit; font-size: 14px; cursor: pointer;
  }
  .подбор-карточка .похожие:hover { background: rgba(127, 127, 127, .1); }
  /* Собрать ещё три и переход в корзину — под списком вариантов */
  .бриф-ещё {
    display: block; width: 100%; margin: 22px 0 0; padding: 15px 22px; border-radius: 14px;
    border: 1.5px solid var(--акцент); background: transparent; color: var(--акцент-глубокий);
    font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  }
  .бриф-ещё:disabled { opacity: .55; cursor: default; }
  .бриф-в-корзину {
    display: block; width: 100%; margin: 18px 0 0; padding: 15px 22px; border-radius: 14px;
    border: none; background: var(--акцент); color: #22260c;
    font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  }
  .подбор-ждём { padding: 40px 14px; text-align: center; color: var(--текст-тихий); font-size: 14.5px; }

  .эскиз-место { position: relative; border-radius: 11px; overflow: hidden; background: var(--фон); min-height: 92px; }
  .эскиз-место .эскиз { width: 100%; display: block; }
  /* Ожидание эскиза: карточка наливается снизу вверх, как ваза, показывает проценты
     и рассказывает, что сейчас делает флорист. Пустое «рисуем полторы минуты» люди
     воспринимали как зависание (Илья, 21.08.2026). */
  .эскиз-ждём {
    position: relative; overflow: hidden;
    min-height: 168px; padding: 26px 16px; text-align: center;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  }
  .эскиз-ждём .налив {
    position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
    background: linear-gradient(to top, rgba(184, 198, 85, .34), rgba(184, 198, 85, .08));
    border-top: 1px solid rgba(184, 198, 85, .55);
    transition: height .9s ease;
  }
  .эскиз-ждём .доля {
    position: relative; font-size: 34px; font-weight: 800; letter-spacing: -1.3px;
    line-height: 1; color: var(--акцент-глубокий);
  }
  html.тёмная .эскиз-ждём .доля { color: var(--акцент); }
  .эскиз-ждём .чем-занят { position: relative; font-size: 14px; font-weight: 700; color: var(--текст); }
  .эскиз-ждём .мелко-ждём { position: relative; font-size: 12px; color: var(--текст-тихий); }
  .эскиз-метка {
    position: absolute; left: 9px; bottom: 9px; padding: 3px 9px; border-radius: 6px;
    background: rgba(0,0,0,.55); color: #fff; font-size: 10.5px; font-weight: 700;
    letter-spacing: .6px; text-transform: uppercase;
  }

  .бонусы-строка {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 15px; background: var(--плитка); border: 1.5px solid var(--плитка-край);
    border-radius: 13px;
  }
  .бонусы-текст { flex: 1; min-width: 0; }
  .бонусы-текст b { display: block; font-size: 15px; font-weight: 700; }
  .бонусы-текст span { font-size: 12.5px; color: var(--текст-тихий); }
  .переключатель { position: relative; width: 48px; height: 28px; flex: 0 0 auto; }
  .переключатель input { position: absolute; opacity: 0; width: 0; height: 0; }
  .переключатель .ползун {
    position: absolute; inset: 0; background: var(--плитка-край); border-radius: 20px;
    transition: background .18s; cursor: pointer;
  }
  .переключатель .ползун::before {
    content: ''; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px;
    background: #fff; border-radius: 50%; transition: transform .18s;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
  }
  .переключатель input:checked + .ползун { background: var(--акцент); }
  .переключатель input:checked + .ползун::before { transform: translateX(20px); }

  .телефон-блок { display: flex; gap: 8px; margin: 10px 14px 0; }
  .телефон-блок .поле-ввода { flex: 1; margin-bottom: 0; }
  .кн-телефон {
    padding: 0 16px; border-radius: 11px; border: none; background: var(--акцент);
    color: #22260c; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap;
  }

  .готово-плашка {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 90px; z-index: 55;
    width: min(560px, calc(100% - 28px));
    display: flex; align-items: center; gap: 12px; padding: 13px 15px;
    background: var(--чернила); color: var(--белый-на-чернилах);
    border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.3);
    font-size: 14.5px; font-weight: 600;
    animation: всплыть .28s cubic-bezier(.22,.61,.36,1);
  }
  html.тёмная .готово-плашка { background: var(--акцент); color: #22260c; }
  /* заказ ушёл на оплату и не оплачен — висит, пока не оплатят или не скроют */
  .плашка-оплаты {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 90px; z-index: 56;
    width: min(560px, calc(100% - 28px));
    display: flex; align-items: center; gap: 12px; padding: 13px 12px 13px 15px;
    background: var(--чернила); color: var(--белый-на-чернилах);
    border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.3);
    animation: всплыть .28s cubic-bezier(.22,.61,.36,1);
  }
  .плашка-оплаты .текст { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .плашка-оплаты .текст b { font-size: 14.5px; font-weight: 700; }
  .плашка-оплаты .текст span { font-size: 12.5px; line-height: 1.4; opacity: .78; }
  .плашка-оплаты .оплатить {
    margin-left: auto; padding: 9px 16px; border-radius: 10px;
    background: var(--акцент); color: #22260c; font-size: 14px; font-weight: 700;
    text-decoration: none; white-space: nowrap; flex: none;
  }
  .плашка-оплаты .закрыть {
    flex: none; width: 28px; height: 28px; border: none; background: transparent;
    color: inherit; opacity: .6; font-size: 20px; line-height: 1; cursor: pointer; padding: 0;
  }
  html.тёмная .плашка-оплаты { background: #2f3226; }
  @keyframes всплыть { from { transform: translate(-50%, 24px); opacity: 0; } }
  .готово-плашка .открыть {
    margin-left: auto; padding: 7px 14px; border-radius: 9px; border: none;
    background: var(--акцент); color: #22260c; font: inherit; font-size: 13.5px;
    font-weight: 700; cursor: pointer; white-space: nowrap;
  }
  html.тёмная .готово-плашка .открыть { background: #22260c; color: var(--акцент); }
  .готово-плашка .закрыть {
    border: none; background: transparent; color: inherit; opacity: .6;
    font-size: 19px; line-height: 1; cursor: pointer; padding: 0 2px;
  }

  .ранняя-доставка {
    margin: 0 0 16px; padding: 14px; border-radius: 15px;
    background: var(--плитка); border: 1px solid var(--плитка-край);
  }
  .ранняя-доставка.готово { border-color: var(--акцент); }
  .ранняя-доставка .статус { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; margin-bottom: 3px; }
  .ранняя-доставка .статус .колесо { width: 15px; height: 15px; border-width: 2px; margin: 0; }
  .ранняя-доставка .пояснение { font-size: 12.5px; line-height: 1.45; color: var(--текст-тихий); margin-bottom: 12px; }
  .ранняя-доставка .лейбл { font-size: 11.5px; text-transform: uppercase; letter-spacing: .7px; color: var(--текст-тихий); margin: 12px 0 7px; }
  .ранняя-доставка .поле-ввода { margin-bottom: 8px; width: 100%; }
  .ранняя-доставка .поле-ввода:last-child { margin-bottom: 0; }
  .ранняя-доставка .лента { padding: 0; }
  .ранняя-доставка .самовывоз-подсказка { font-size: 12.5px; line-height: 1.5; color: var(--текст-тихий); margin-top: 10px; }

  .кабинет-шапка {
    margin: 14px 14px 0; padding: 16px; border-radius: 14px;
    background: linear-gradient(100deg, var(--акцент) 0%, #cdd97e 100%); color: #22260c;
  }
  .кабинет-шапка .имя { font-size: 17px; font-weight: 700; }
  .кабинет-шапка .баллы { margin-top: 9px; font-size: 27px; font-weight: 700; letter-spacing: -.8px; }
  .кабинет-шапка .подпись { font-size: 12.5px; opacity: .75; margin-top: 2px; }

  .заказ-карточка {
    display: flex; gap: 12px; padding: 13px; margin: 0 14px 9px;
    border: 1.5px solid var(--плитка-край); background: var(--плитка); border-radius: 13px;
  }
  .заказ-карточка .миниатюра { width: 58px; height: 58px; flex: 0 0 auto; border-radius: 9px; object-fit: cover; background: var(--фон); }
  .заказ-карточка .значок-вместо-фото {
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: var(--акцент-глубокий); background: var(--плитка);
  }
  .заказ-карточка .данные { flex: 1; min-width: 0; }
  .заказ-карточка .строка-1 { display: flex; align-items: baseline; gap: 8px; }
  .заказ-карточка .номер { font-size: 14.5px; font-weight: 700; }
  .заказ-карточка .сумма { margin-left: auto; font-weight: 700; font-size: 14.5px; white-space: nowrap; }
  .заказ-карточка .состав {
    font-size: 12.5px; color: var(--текст-тихий); margin-top: 3px; line-height: 1.4;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .заказ-карточка .низ { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
  .заказ-карточка .дата { font-size: 11.5px; color: var(--текст-тихий); }
  .ярлык { padding: 2px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
  .ярлык.оплачен { background: rgba(120,170,60,.18); color: var(--акцент-глубокий); }
  .ярлык.ждёт { background: rgba(200,140,40,.16); color: #a4700f; }
  html.тёмная .ярлык.ждёт { color: #d8a13f; }
  .повторить {
    margin-left: auto; padding: 6px 12px; border-radius: 8px; border: 1.5px solid var(--плитка-край);
    background: transparent; color: var(--текст); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  }
  .кабинет-пусто { padding: 50px 24px; text-align: center; color: var(--текст-тихий); font-size: 14.5px; line-height: 1.6; }

  .бриф-заново {
    display: block; margin: 20px auto 0; padding: 12px 22px; border-radius: 12px;
    border: 1.5px solid var(--плитка-край); background: transparent; color: var(--текст-тихий);
    font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  }

  .авторский-шапка { padding: 20px 14px 0; }
  .авторский-шапка h2 { margin: 0 0 8px; font-size: 21px; font-weight: 700; letter-spacing: -.4px; }
  .авторский-шапка p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--текст-тихий); }

  /* ---------- похожие букеты (21.09.2026) ----------
     Человеку — что посмотреть дальше, поиску — ссылки вглубь сайта: до этого
     на карточку букета вёл только каталог. На компьютере колонка справа
     (Илья: «для десктопа оставляй 5»), на телефоне плитки под карточкой
     («для телефона вариант 2»). */
  .похожие { max-width: 1120px; margin: 30px auto 0; padding: 0 14px; }
  .похожие[hidden] { display: none; }
  .похожие h3 { font-size: 19px; margin: 0 0 12px; letter-spacing: -.3px; }
  .похожие a { text-decoration: none; color: inherit; }
  .похожие-строка { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .похожие-все { font-size: 13.5px; font-weight: 700; color: var(--акцент-глубокий); white-space: nowrap; }
  .похожие .цена { font-size: 15.5px; font-weight: 700; letter-spacing: -.3px; white-space: nowrap; }
  .похожие .цена s { font-size: 12.5px; font-weight: 500; color: var(--текст-тихий); margin-left: 3px; }

  /* плитки под карточкой — как в каталоге */
  .похожие.в2 .похожие-место { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
  .похожие.в2 .похожий {
    display: flex; flex-direction: column; background: var(--плитка);
    border: 1px solid var(--плитка-край); border-radius: 14px; overflow: hidden;
    transition: transform .12s, box-shadow .12s;
  }
  .похожие.в2 .похожий:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(43,46,38,.08); }
  .похожие.в2 .похожий img {
    width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; background: var(--плитка-край);
  }
  .похожие.в2 .низ { padding: 9px 10px 11px; display: flex; flex-direction: column; gap: 4px; }
  .похожие.в2 .имя {
    font-size: 12.5px; line-height: 1.35; color: var(--текст-тихий);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 34px;
  }

  /* колонка справа от карточки */
  .похожие.сбоку { max-width: none; margin: 0; padding: 0; }
  .похожие.сбоку h3 { font-size: 15px; margin: 0 0 10px; color: var(--текст-тихий); font-weight: 700; }
  .похожие.сбоку .похожие-место { display: flex; flex-direction: column; gap: 14px; }
  .похожие.сбоку .похожий img {
    width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 14px; display: block;
    background: var(--плитка-край); transition: transform .12s;
  }
  .похожие.сбоку .похожий:hover img { transform: translateY(-2px); }
  .похожие.сбоку .низ { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
  .похожие.сбоку .имя {
    font-size: 12px; line-height: 1.3; color: var(--текст-тихий);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .похожие.сбоку .цена { font-size: 14px; }
  .похожие.сбоку .похожие-все { display: block; margin-top: 10px; font-size: 12.5px; }

  @media (min-width: 1280px) {
    /* карточка раздвигается, чтобы колонка встала в пустое поле сбоку */
    .товар-обёртка.с-боком { max-width: 1210px; }
    /* колонка не удлиняет страницу: она по высоте фото и прокручивается внутри
       себя (Илья: «сделай чтоб прокручивалась не страница, а сами похожие») */
    .товар-обёртка.с-боком .похожие.сбоку {
      flex: 0 0 176px; position: sticky; top: 14px;
      height: min(72vh, 700px); display: flex; flex-direction: column; min-height: 0;
    }
    .товар-обёртка.с-боком .похожие.сбоку .похожие-место {
      overflow-y: auto; min-height: 0; padding-right: 6px;
      scrollbar-width: thin; scrollbar-color: var(--плитка-край) transparent;
      /* букет не обрывается ровной линией посреди фото: карточки встают по месту,
         а края ленты растворяются */
      scroll-snap-type: y proximity; scroll-behavior: smooth;
    }
    .товар-обёртка.с-боком .похожие.сбоку .похожий { scroll-snap-align: start; }
    .товар-обёртка.с-боком .похожие.сбоку .похожие-место::-webkit-scrollbar { width: 6px; }
    .товар-обёртка.с-боком .похожие.сбоку .похожие-место::-webkit-scrollbar-thumb {
      background: var(--плитка-край); border-radius: 3px;
    }
    .товар-обёртка.с-боком .похожие.сбоку .похожие-место.тает-низ {
      -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
              mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
    }
    .товар-обёртка.с-боком .похожие.сбоку .похожие-место.тает-верх {
      -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40px);
              mask-image: linear-gradient(to bottom, transparent, #000 40px);
    }
    .товар-обёртка.с-боком .похожие.сбоку .похожие-место.тает-верх.тает-низ {
      -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40px, #000 calc(100% - 40px), transparent);
              mask-image: linear-gradient(to bottom, transparent, #000 40px, #000 calc(100% - 40px), transparent);
    }
  }
  @media (max-width: 1279px) { .похожие.сбоку { display: none !important; } }
  @media (max-width: 1000px) { .похожие.в2 .похожие-место { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 700px) {
    .похожие { margin-top: 24px; }
    .похожие-строка { flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 10px; }
    .похожие.в2 .похожие-место { grid-template-columns: 1fr 1fr; gap: 11px; }
    /* на телефоне шесть плиток — это два экрана, показываем четыре */
    .похожие.в2 .похожий:nth-child(n+5) { display: none; }
  }

  @media (max-width: 899px) {
    /* «Назад» стояла отдельной пустой полосой над фото (Илья, 21.09.2026:
       «некрасиво "назад" встаёт на телефоне»). Теперь круглая кнопка на самом фото. */
    body[data-экран="товар"] .назад-строка {
      position: relative; z-index: 6; height: 0; padding: 0; overflow: visible;
      /* иначе кнопка центруется по нулевой линии и вылезает выше фото, где её режет шапка */
      align-items: flex-start;
    }
    body[data-экран="товар"] .назад-строка span { display: none; }
    body[data-экран="товар"] .назад-строка button {
      position: relative; top: 12px; left: 12px;
      width: 38px; height: 38px; padding: 0; border-radius: 50%;
      font-size: 0; border-color: transparent;
      background: rgba(255,255,255,.92); color: #2b2e26;
      box-shadow: 0 2px 10px rgba(43,46,38,.2);
      display: flex; align-items: center; justify-content: center;
    }
    body[data-экран="товар"] .назад-строка button::before {
      content: '←'; font-size: 19px; font-weight: 700; line-height: 1;
    }

    /* Под карточкой зияла пустая полоса в 158 px: запас под плавающую кнопку стоял
       у самого экрана товара (Илья, 21.09.2026, скриншот). Отдаём запас подвалу —
       кнопка по-прежнему ничего не перекрывает. */
    .лист[data-лист="товар"] { padding-bottom: 18px; }
    .подвал { padding-bottom: 104px; }
    /* Под контактами главной перед подвалом зияла пустая полоса (Илья, 06.10.2026, скриншот):
       запас под плавающую кнопку на телефоне уже держит подвал, у главной свой не нужен. */
    .лист[data-лист="главная"] { padding-bottom: 0; }
  }


  /* ---------- текст раздела и подборки (22.09.2026) ----------
     Виден только на странице раздела или подборки, пришедшей из поиска. */
  .текст-раздела { max-width: 860px; padding: 16px 0 6px; }
  .текст-раздела[hidden] { display: none; }
  .текст-раздела .хлебные { font-size: 13px; color: var(--текст-тихий); }
  .текст-раздела .хлебные a { color: var(--текст-тихий); }
  .текст-раздела h1 { font-size: 27px; line-height: 1.18; margin: 8px 0 8px; letter-spacing: -.6px; }
  .текст-раздела p { font-size: 14.5px; line-height: 1.62; color: var(--текст-тихий); margin: 0 0 10px; }
  .текст-раздела.низ { padding-top: 38px; }
  .текст-раздела.низ h2 { font-size: 19px; margin: 24px 0 8px; letter-spacing: -.3px; color: var(--текст); }
  .текст-раздела.низ p { color: var(--текст); opacity: .82; }
  .текст-раздела details { border-bottom: 1px solid var(--плитка-край); padding: 11px 0; }
  .текст-раздела summary { cursor: pointer; font-weight: 600; font-size: 15px; color: var(--текст); }
  .текст-раздела details p { margin: 8px 0 2px; }
  .текст-раздела .подборки { display: flex; flex-wrap: wrap; gap: 8px; }
  .текст-раздела .подборки a {
    border: 1px solid var(--плитка-край); border-radius: 999px; padding: 7px 13px;
    font-size: 13.5px; text-decoration: none; color: var(--текст); background: var(--плитка);
  }
  .текст-раздела .подборки a:hover { border-color: var(--акцент); }
  @media (max-width: 640px) { .текст-раздела h1 { font-size: 23px; } }

  /* ---------- брошенная корзина (01.10.2026) ----------
     Плашка для вернувшегося: его букет и промокод БУКЕТ500. Тёмная, внизу экрана,
     как «Заказ ждёт оплаты» — Илья выбрал из трёх вариантов. */
  .плашка-корзины {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 90px; z-index: 55;
    width: min(560px, calc(100% - 28px));
    display: flex; align-items: center; gap: 12px; padding: 10px;
    border-radius: 16px; box-shadow: 0 8px 28px rgba(0,0,0,.22);
    background: var(--чернила); color: var(--белый-на-чернилах);
    animation: всплыть .28s cubic-bezier(.22,.61,.36,1);
  }
  html.тёмная .плашка-корзины { background: #2f3226; }
  .плашка-корзины img, .плашка-корзины .значок {
    width: 46px; height: 56px; border-radius: 10px; object-fit: cover; flex: none;
  }
  .плашка-корзины .значок { display: flex; align-items: center; justify-content: center;
    background: var(--чернила-мягкая); color: var(--акцент); font-size: 20px; }
  .плашка-корзины .текст { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
  .плашка-корзины .текст > b { font-size: 14.5px; font-weight: 700; line-height: 1.25; }
  .плашка-корзины .текст span { font-size: 12.5px; line-height: 1.4; opacity: .8; }
  .плашка-корзины .текст span b { color: var(--акцент); }
  .плашка-корзины .оформить {
    margin-left: auto; padding: 10px 15px; border-radius: 10px; border: none; cursor: pointer;
    background: var(--акцент); color: #22260c; font: inherit; font-size: 14px; font-weight: 700;
    white-space: nowrap; flex: none;
  }
  .плашка-корзины .закрыть {
    flex: none; width: 26px; height: 26px; border: none; background: transparent;
    color: inherit; opacity: .55; font-size: 20px; line-height: 1; cursor: pointer; padding: 0;
  }

  /* «Спросить флориста» в корзине, карточкой: переписка даёт магазину контакт */
  #спроситьФлориста { margin: 6px 14px 4px; }
  .флорист { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px; border-radius: 14px; background: var(--голубой-светлый); }
  html.тёмная .флорист { background: #2f3226; }
  .флорист-лицо { width: 42px; height: 42px; border-radius: 50%; background: var(--плитка);
    display: flex; align-items: center; justify-content: center; font-size: 22px; flex: none; }
  .флорист .текст { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; }
  .флорист .текст b { font-size: 14.5px; }
  .флорист .текст span { font-size: 12.5px; color: var(--текст-тихий); line-height: 1.4; }
  .флорист-кнопки { display: flex; gap: 8px; width: 100%; }
  .флорист-кнопки a {
    flex: 1; justify-content: center;
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px;
    font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap;
    border: 1px solid var(--плитка-край); background: var(--плитка); color: var(--текст);
  }
  .флорист-кнопки a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
  .флорист-кнопки a.вотсап::before { background: #25d366; }
  .флорист-кнопки a.тг::before { background: #2aabee; }
  .флорист-кнопки a:hover { border-color: var(--акцент); }

  /* ---------- «Похожие» на карточке не уходят за край (02.10.2026) ----------
     На компьютере (от 1280 px) в ряд стоят фото, тёмная карточка и колонка
     «Похожие». У букетов с 5–7 размерами («15 шт … 301 шт») ряд кнопок размеров
     в одну строку шире места под карточку: карточка не сжималась и выталкивала
     колонку за правый край экрана (на 1280 — на 135 px). Теперь карточка
     сжимается до своего места, а кнопки размеров, если их 5 и больше, встают
     ровной сеткой по 4 в ряд. Если размеров 4 и меньше — всё как было. */
  @media (min-width: 1280px) {
    .товар-обёртка.с-боком .шторка { min-width: 0; }
    .товар-обёртка.с-боком .размеры:has(> .размер:nth-child(5)) {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    }
  }

  /* ---------- подборки /flowers/… в виде самого магазина (02.10.2026) ----------
     Илья: «чтоб выглядели ровно так же, как наш сайт». Верх — как у раздела каталога
     (крошки, H1, вступление, лента с выбранным чипом подборки). Под плиткой — блоки
     главной: абзацы карточками, вопросы как FAQ главной (класс faq), ссылки чипами
     как в ленте разделов. Раньше там был голый текст с треугольниками браузера. */
  a.карточка { text-decoration: none; }   /* плитка — ссылки, без подчёркиваний */
  .подб-низ { padding-top: 44px; }
  .подб-низ[hidden] { display: none; }
  .подб-статья {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  .подб-абзац {
    background: var(--плитка); border: 1px solid var(--плитка-край);
    border-radius: 20px; padding: 22px 22px 16px;
  }
  .подб-абзац h2 {
    margin: 0 0 10px; font-size: 18px; font-weight: 800; letter-spacing: -.4px; line-height: 1.25;
  }
  .подб-абзац p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.65; color: var(--текст-тихий); }
  .подб-абзац a { color: var(--акцент-глубокий); font-weight: 700; text-decoration: none; }
  .подб-блок { margin-top: 44px; }
  .подб-блок .заголовок-блока { margin: 0 0 4px; }
  .подб-блок .заголовок-блока ~ .заголовок-блока { margin-top: 22px; }
  .подб-ссылки { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
  .подб-ссылки .чип { text-decoration: none; display: inline-block; }
  /* ---------- строка цены в каталоге сайта (02.10.2026) ----------
     Ползунок со столбиками с сайта убран (Илья: «бегунок с сайта убери вообще,
     в приложении оставь. только градацию по цене не убирай»; поля «от/до» — «нет, это
     оставь»). Одна строка под лентой разделов: поля цены в виде чипов и порядок
     «по цене» чипом справа; выбранный порядок закрашен, как выбранный раздел. */
  #ценник.кат-цена { min-height: 0; }
  .кат-цена {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    flex-wrap: wrap; margin-top: 12px;
  }
  .кат-цена .цена-руками { margin: 0; gap: 6px; flex-wrap: nowrap; }
  .кат-цена .цена-руками label { font-size: 13.5px; color: var(--текст-тихий); white-space: nowrap; }
  .кат-цена .цена-руками input {
    width: 96px; padding: 8px 14px; border-radius: 40px;
    background: var(--плитка); font-size: 13.5px; font-weight: 600;
  }
  .кат-порядок { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; }
  .кат-порядок svg { flex: none; display: block; }
  .кат-порядок svg path { fill: currentColor; opacity: .35; }
  .кат-порядок svg path.горит { opacity: 1; }
  /* ---------- главная приходит нарисованной (02.10.2026, аудит С3) ----------
     Адрес ведёт на другой экран — до запуска магазина главную прячем, крутилку
     показываем (класс ставит ранний скрипт в начале <body>, снимает показать()). */
  html.экран-не-главная .лист[data-лист="главная"] { display: none; }
  html.экран-не-главная #загрузка[hidden] { display: block; }
  @media (max-width: 640px) {
    .подб-низ { padding-top: 34px; }
    .подб-абзац { padding: 18px 18px 12px; border-radius: 16px; }
    .подб-блок { margin-top: 34px; }
    .подб-ссылки .чип { padding: 8px 12px; font-size: 13px; }
    .кат-полно { display: none; }   /* на телефоне «дешевле» вместо «сначала дешевле» */
    /* 16 px — иначе айфон увеличивает страницу, когда ставишь курсор в поле */
    .кат-цена .цена-руками input { width: 74px; padding: 7px 10px; font-size: 16px; font-weight: 500; }
    .кат-цена .цена-руками label { font-size: 13px; }
  }
  /* ---------- карточка букета на 900–1279 px не уходит за край (02.10.2026) ----------
     Тот же приём, что у блока «Похожие» от 1280 px (выше), только без класса «с-боком»:
     его на этих ширинах нет. Ряд из 5–7 кнопок размеров («15 шт … 301 шт») был шире
     тёмной карточки, она не сжималась, и правый край с кнопкой «В корзину» срезался
     (на 900 px — на 137 px). Теперь карточка сжимается до своего места, а кнопки
     размеров, если их 5 и больше, встают ровной сеткой. На телефоне всё как было. */
  @media (min-width: 900px) {
    .товар-обёртка .шторка { min-width: 0; }
    .товар-обёртка .размеры:has(> .размер:nth-child(5)) {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    }
  }

/* =====================================================================
   ДИЗАЙН «ПЛИТКИ» — 05.10.2026
   Илья: «хочу упростить: чисто белый фон, поменьше фото, главная чётко и по
   делу; генератор и букет дня не убирать», потом — «прорывное, но понятное
   клиенту». Примерка шла на тестовой копии (kapusta-dizain.vercel.app,
   варианты «Просто» и «Плитки»), Илья выбрал «Плитки». Сайт с этого дня
   только светлый (тёмная тема выключена в новый.js). Правила ниже
   перекрывают прежние — старые оставлены выше, чтобы не ломать то, что
   не трогали.
   ===================================================================== */

:root {
  --акцент: #b8c655;            /* олива логотипа — только точечные акценты */
  --акцент-глубокий: #5f6d1c;
  --крем: #ffffff;
  --фон: #ffffff;
  --голубой: #ffffff;
  --голубой-светлый: #f6f6f4;
  --пудра: #f4f4f2;
  --пудра-светлая: #f6f6f4;
  --плитка: #ffffff;
  --плитка-край: #e9e9e6;
  --чернила: #1a1a1a;
  --чернила-мягкая: #333333;
  --текст: #1a1a1a;
  --текст-тихий: #777773;
  --белый-на-чернилах: #ffffff;
  --серая-плитка: #f4f4f1;
}

/* ---------- шапка: белая, меню без рамок ---------- */
.шапка-сайта { background: #ffffff; }
.меню-строка a.акцентный { border-color: var(--плитка-край); color: var(--текст); }
.меню-строка a.акцентный:hover { background: #f6f6f4; color: var(--текст); }
/* на телефоне меню одной строкой и листается вбок: в три строки шапка
   съедала треть экрана */
@media (max-width: 640px) {
  .шапка-сайта .меню-строка {
    flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    gap: 0 18px; padding: 4px 0 2px;
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
            mask-image: linear-gradient(to right, #000 82%, transparent);
  }
  .шапка-сайта .ряд { padding-bottom: 6px; row-gap: 6px; }
}

/* справа: телефон, кабинет, корзина — значки линиями вместо эмодзи (Илья:
   «как выглядит этот блок мне не нравится») */
.шапка-право { gap: 8px; }
.шапка-телефон { font-size: 15.5px; font-weight: 700; letter-spacing: -.2px; margin-right: 10px; text-align: right; }
.шапка-телефон span { font-size: 12px; font-weight: 500; color: var(--текст-тихий); margin-top: 2px; }
.шапка-телефон .б-часы { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.шапка-кнопка {
  width: 42px; height: 42px; border: 0;
  background: var(--серая-плитка); color: var(--текст); transition: background .15s;
}
.шапка-кнопка:hover { background: #e8e8e4; }
.шапка-кнопка svg {
  width: 21px; height: 21px; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.шапка-кнопка .число-в-шапке {
  top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  background: var(--текст); color: #ffffff; font-size: 11px; font-weight: 700;
  border-radius: 9px; box-shadow: 0 0 0 2px #ffffff;
}
@media (max-width: 640px) {
  .шапка-кнопка { width: 38px; height: 38px; }
  .шапка-кнопка svg { width: 19px; height: 19px; }
  .шапка-телефон { font-size: 14px; margin-right: 4px; }
  .шапка-телефон .б-часы { display: none; }
}

/* ---------- меню «Как связаться» под номером в шапке (Илья, 07.10.2026) ----------
   Обёртка встаёт в ряд вместо самого номера, поэтому отступ справа переехал на неё —
   шапка не сдвигается. Меню висит поверх страницы и место в шапке не занимает. */
.связь { position: relative; display: flex; align-items: center; flex: none; margin-right: 10px; }
.связь .шапка-телефон { margin-right: 0; cursor: pointer; }
.связь-меню {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  display: flex; flex-direction: column; min-width: 214px; padding: 6px;
  background: #ffffff; border: 1px solid var(--плитка-край); border-radius: 16px;
  box-shadow: 0 14px 34px rgba(26, 26, 26, .14);
}
.связь-меню[hidden] { display: none; }
.связь-заголовок { padding: 6px 10px 4px; font-size: 12px; font-weight: 600; color: var(--текст-тихий); }
.связь-пункт {
  display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 11px;
  text-decoration: none; color: var(--текст); font-size: 15px; font-weight: 600; white-space: nowrap;
}
.связь-пункт:hover, .связь-пункт:focus-visible { background: var(--серая-плитка); color: var(--текст); }
.связь-пункт i {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.связь-пункт svg { width: 15px; height: 15px; fill: none; stroke: #ffffff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.связь-пункт.ва i { background: #25d366; }
.связь-пункт.тг i { background: #2aabee; }
.связь-пункт.макс i { background: linear-gradient(135deg, #3d8bff, #8b3dff); }
.связь-пункт.звонок i { background: #1a1a1a; }
@media (max-width: 640px) {
  .связь { margin-right: 4px; }
}

/* «открыто до 21:00» — точка зелёная, после закрытия серая (заполняет новый.js) */
.б-часы i { width: 7px; height: 7px; border-radius: 50%; background: #3bb54a; flex: none; }
.б-часы.закрыто i { background: #c9c9c4; }

/* ---------- строка акций: стоит на месте, промокоды копируются касанием ---------- */
.акции-строка { background: #f6f6f4; border-bottom: 1px solid var(--плитка-край); }
.бегущая { animation: none; width: auto; justify-content: center; flex-wrap: wrap; gap: 2px 28px; padding: 9px 14px; }
.бегущая span {
  flex: 0 1 auto; padding: 0; color: var(--текст); text-transform: none; letter-spacing: 0;
  font-size: 13px; font-weight: 500; white-space: normal; text-align: center;
}
.акция-кратко { display: none; }
@media (max-width: 699px) {
  .бегущая > span:nth-child(2) { display: none; }
  /* на телефоне — короткая фраза в одну строку (Илья 05.10.2026: «съезжает на вторую строку») */
  .акция-полно { display: none; }
  .бегущая .акция-кратко { display: inline; }
  .бегущая > span:first-child, .бегущая .акция-кратко { white-space: nowrap; }
}
@media (max-width: 350px) { .бегущая > span:first-child { font-size: 12px; } }
.б-код {
  font: inherit; font-weight: 800; cursor: pointer; color: var(--текст);
  background: #ffffff; border: 1px dashed #b9b9b4; border-radius: 6px;
  padding: 1px 7px; margin: 0 2px; transition: background .15s, border-color .15s;
}
.б-код:hover { border-color: var(--текст); }
.б-код.скопирован { background: #e3f5e1; border-color: #3bb54a; border-style: solid; }

/* ---------- первый экран плитками (бенто) ---------- */
/* 1120px, как у .раздел: края плиток совпадают с хитами, FAQ и контактами
   (было 1148px — на компьютере плитки торчали на 14px с каждой стороны, проверка 05.10.2026) */
.бенто-обёртка { max-width: 1120px; margin: 16px auto 0; padding: 0 14px; }
.бенто { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(150px, auto); gap: 12px; }
.б-плитка {
  position: relative; overflow: hidden; border-radius: 24px;
  background: var(--серая-плитка); color: var(--текст);
  transition: transform .18s ease, box-shadow .18s ease;
}
a.б-плитка, button.б-плитка { text-decoration: none; cursor: pointer; border: 0; font: inherit; text-align: left; }
/* приподнимаются только те плитки, на которые можно нажать */
a.б-плитка:hover, button.б-плитка:hover, .б-дня:hover, .бенто .баннер:hover {
  transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0, 0, 0, .08);
}

.б-главная {
  grid-column: 1 / 3; grid-row: 1 / 3;
  padding: 30px 32px 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
}
.б-главная h1 {
  margin: 0; font-size: clamp(34px, 4.2vw, 58px); font-weight: 800;
  letter-spacing: -2px; line-height: 1.02;
}
.б-главная .герой-кнопки { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.кнопка-героя { border-radius: 12px; padding: 17px 30px; }
.кнопка-героя.втор { background: transparent; color: var(--текст); box-shadow: inset 0 0 0 1px #d6d6d2; }
.кнопка-героя:hover { transform: none; opacity: .9; }

/* живой статус: привезём ли сегодня */
.б-статус {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 9px;
  background: #ffffff; border-radius: 14px; padding: 8px 14px 8px 12px;
  line-height: 1.3; text-wrap: balance; font-size: 13.5px; font-weight: 600;
}
.б-статус[hidden] { display: none; }
.б-статус i {
  width: 9px; height: 9px; border-radius: 50%; flex: none; background: #3bb54a;
  animation: б-пульс 1.8s infinite;
}
.б-статус.жёлтый i { background: #e8a33a; animation: none; }
@keyframes б-пульс {
  0% { box-shadow: 0 0 0 0 rgba(59, 181, 74, .5); }
  70% { box-shadow: 0 0 0 9px rgba(59, 181, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(59, 181, 74, 0); }
}

/* букет дня — большое фото с отсчётом скидки */
.б-дня { grid-column: 3 / 5; grid-row: 1 / 3; min-height: 440px; background: #ecece8; cursor: pointer; }
.б-заглушка {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--текст-тихий); font-weight: 600;
}
.б-дня .букет-дня {
  position: absolute; inset: 0; margin: 0; max-width: none;
  display: block; border: 0; border-radius: 0; background: none;
}
.б-дня .букет-дня[hidden] { display: none; }
.б-дня .букет-дня img {
  width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .6s ease;
}
.б-дня:hover .букет-дня img { transform: scale(1.04); }
.б-дня .букет-дня .поверх {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 24px 22px;
  display: flex; flex-direction: column; align-items: flex-start;
  background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0));
}
.б-дня .букет-дня .ярлык { background: #ffffff; color: var(--текст); }
.б-дня .букет-дня h3 { color: #ffffff; font-size: 22px; max-width: 460px; }
.б-дня .букет-дня .цена { color: #ffffff; font-size: 26px; }
.б-дня .букет-дня .цена .цена-была { color: rgba(255, 255, 255, .65); font-size: 17px; font-weight: 500; }
.б-дня .букет-дня .поверх::after {
  content: "Смотреть букет →"; margin-top: 12px; font-size: 14px; font-weight: 700; color: #ffffff;
}
.б-таймер {
  position: absolute; top: 16px; right: 16px; z-index: 2; pointer-events: none;
  background: rgba(20, 20, 20, .72); color: #ffffff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: 999px; padding: 7px 13px; font-size: 12.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.б-таймер[hidden] { display: none; }

/* генератор и букет по бюджету — прежние баннеры сайта, теперь плитки */
.бенто .баннер {
  min-height: 0; margin: 0; padding: 22px; border: 0; border-radius: 24px;
  display: flex; flex-direction: column;
}
.бенто .баннер::after { display: none; }
.бенто .баннер h3 { font-size: 20px; }
.бенто .баннер p { opacity: 1; }
.бенто .б-бриф { background: #1a1a1a; color: #ffffff; }
.бенто .б-бриф p { color: rgba(255, 255, 255, .68); }
.бенто .б-бриф .кн { background: #ffffff; color: #1a1a1a; border-radius: 10px; }
.бенто .б-бриф .метка-баннера.скидка { background: rgba(184, 198, 85, .2); border-color: transparent; color: #d4e07c; }
.бенто .б-бюджет { background: var(--серая-плитка); color: var(--текст); }
.бенто .б-бюджет p { color: var(--текст-тихий); }
.бенто .б-бюджет .кн { background: #1a1a1a; color: #ffffff; border-radius: 10px; }

/* рейтинг и гарантия */
.б-рейтинг, .б-гарантия { padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; }
.б-рейтинг { background: #f1f5d8; }
.б-рейтинг b, .б-гарантия b { font-size: 40px; font-weight: 800; letter-spacing: -1.5px; line-height: 1; }
.б-звёзды { color: #f0a92b; letter-spacing: 2px; font-size: 15px; }
.б-рейтинг span:last-child, .б-гарантия span { font-size: 13.5px; color: var(--текст-тихий); line-height: 1.4; }

/* строка разделов под плитками */
.б-разделы { display: flex; gap: 8px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.б-разделы::-webkit-scrollbar { display: none; }
.б-разделы a {
  flex: none; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--плитка-край);
  color: var(--текст); text-decoration: none; font-size: 14px; font-weight: 600;
  transition: background .15s, border-color .15s, color .15s;
}
.б-разделы a:hover { background: #1a1a1a; border-color: #1a1a1a; color: #ffffff; }
/* с ссылками «Букет на день рождения» и «Мужской букет» (задача 3.9, 05.10.2026) двенадцать
   разделов на компьютере в одну строку не влезают — переносим на вторую линию; на телефоне
   строка, как раньше, листается вбок */
@media (min-width: 900px) {
  .б-разделы { flex-wrap: wrap; overflow-x: visible; }
}

@media (max-width: 760px) {
  .бенто { grid-template-columns: 1fr 1fr; gap: 10px; grid-auto-rows: auto; }
  .б-главная, .б-дня { grid-column: 1 / -1; grid-row: auto; }
  .б-главная { padding: 22px 20px; gap: 18px; }
  .б-главная h1 { font-size: 34px; letter-spacing: -1.4px; }
  .б-главная .герой-кнопки { flex-direction: column; align-items: stretch; }
  .б-дня { min-height: 0; aspect-ratio: 4 / 5; }
  .б-статус { font-size: 12.5px; }
  .бенто .баннер, .б-рейтинг, .б-гарантия { padding: 16px; border-radius: 20px; min-height: 150px; }
  .бенто .баннер h3 { font-size: 17px; }
  .бенто .баннер p { font-size: 12.5px; }
  .б-рейтинг b, .б-гарантия b { font-size: 32px; }
  .б-плитка { border-radius: 20px; }
  a.б-плитка:hover, button.б-плитка:hover, .б-дня:hover, .бенто .баннер:hover { transform: none; box-shadow: none; }
}
/* до 379px «48 часов» в 32px не влезает в плитку и рвётся на «48» / «часов» (проверка
   05.10.2026, 320px). Чуть мельче — и в одну строку; «5,0» рядом в том же размере.
   Без nowrap: если шрифт не загрузился и вышел шире, строка лучше перенесётся, чем обрежется. */
@media (max-width: 379px) {
  .б-рейтинг b, .б-гарантия b { font-size: 26px; letter-spacing: -1px; }
}

/* ---------- разделы главной ---------- */
.раздел-шапка .надзаголовок { display: none; }
.раздел-шапка h2 { letter-spacing: -1px; }
@media (min-width: 700px) { .раздел-шапка h2 { font-size: 36px; } }

/* хиты и подбор по цене: карточки без рамок, на телефоне по четыре */
.б-цены { display: flex; gap: 8px; margin: -4px 0 16px; overflow-x: auto; scrollbar-width: none; }
.б-цены::-webkit-scrollbar { display: none; }
.б-цена {
  flex: none; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 10px 16px; border-radius: 999px; border: 1px solid var(--плитка-край);
  background: #ffffff; color: var(--текст); transition: background .15s, color .15s, border-color .15s;
}
.б-цена:hover { border-color: var(--текст); }
.б-цена.выбрана { background: #1a1a1a; border-color: #1a1a1a; color: #ffffff; }
.плитка-товаров[hidden] { display: none !important; }
.б-пусто { grid-column: 1 / -1; color: var(--текст-тихий); margin: 8px 0; }
@media (max-width: 699px) {
  #хиты > .карточка:nth-child(n+5), .б-подбор > .карточка:nth-child(n+5) { display: none; }
}
.карточка { border: 0; border-radius: 0; background: transparent; }
.карточка:hover { box-shadow: none; transform: none; }
.карточка .фото { border-radius: 12px; }
.карточка .подпись { padding: 9px 2px 6px; }
.карточка .название { color: var(--текст); }
.в-каталог { border-radius: 12px; }

/* «Бесплатно и входит в цену букета»: на компьютере — четыре колонки */
#o_nas .в-коробке { margin-top: 0; }
@media (min-width: 700px) {
  #o_nas .в-коробке { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 18px; }
  #o_nas .строка-коробки { border-bottom: 0; border-top: 2px solid var(--текст); padding-top: 12px; }
}

/* Фото коробки рядом с тем, что входит в цену букета. */
.кор-блок { display: grid; gap: 22px; }
.кор-фото { margin: 0; min-width: 0; }
.кор-фото img {
  display: block; width: 100%; height: min(420px, 105vw);
  object-fit: cover; object-position: center 65%; border-radius: 12px;
}
.кор-фото figcaption { margin-top: 9px; font-size: 12px; line-height: 1.45; color: var(--текст-тихий); }
@media (min-width: 700px) {
  .кор-блок { grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); gap: 32px; align-items: start; }
  .кор-фото img { height: 390px; }
  #o_nas .кор-блок .в-коробке { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; }
}

/* отзывы — только цифры и ссылка */
.отзывы-карта { border: 0; padding: 0; background: transparent; }
.цифра { background: transparent; border: 0; border-radius: 0; text-align: left; padding: 0 0 0 16px; border-left: 2px solid var(--текст); }
.цифра b { font-size: 34px; }
.к-отзывам { background: transparent; color: var(--текст); padding: 0; border-radius: 0; text-decoration: underline; text-underline-offset: 4px; }

/* вопросы — строки с линией вместо карточек */
.faq details { background: transparent; border: 0; border-bottom: 1px solid var(--плитка-край); border-radius: 0; padding: 0 2px; margin: 0; }
.faq details:first-of-type { border-top: 1px solid var(--плитка-край); }
.faq summary::after { color: var(--текст); }

/* «Остались вопросы?» — светло-серая плитка вместо тёмной */
.звонок-карта { background: #f6f6f4; color: var(--текст); border-radius: 24px; }
.звонок-карта::after { display: none; }
.звонок-карта p { opacity: 1; color: var(--текст-тихий); }
.звонок-карта .звонок-согласие a { color: var(--текст-тихий); }
.звонок-поля input { background: #ffffff; color: var(--текст); box-shadow: inset 0 0 0 1px #dcdcd8; }
.звонок-поля input::placeholder { color: #9a9a96; }
.звонок-поля input:focus { outline: 2px solid var(--текст); }
.звонок-поля button { background: var(--чернила); color: #ffffff; }

/* ---------- контакты плитками ---------- */
.б-контакты { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.б-адрес {
  grid-column: 1 / 3; grid-row: 1 / 3; padding: 28px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}
.б-звонок { grid-column: 3 / 5; padding: 24px; display: flex; flex-direction: column; gap: 6px; background: #1a1a1a; color: #ffffff; }
.б-написать { grid-column: 3 / 5; padding: 24px; }
.б-ярлык { font-size: 13px; font-weight: 600; color: var(--текст-тихий); margin-bottom: 4px; }
.б-крупно { font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -1px; line-height: 1.05; }
.б-метро { font-size: 16px; font-weight: 600; }
.б-адрес p { color: var(--текст-тихий); margin: 8px 0 18px; max-width: 420px; line-height: 1.5; font-size: 14.5px; }
.б-кнопка {
  margin-top: auto; background: #1a1a1a; color: #ffffff; border-radius: 12px;
  padding: 14px 22px; font-weight: 700; font-size: 15px; text-decoration: none;
}
.б-кнопка:hover { opacity: .9; }
.б-звонок .б-ярлык, .б-звонок .б-мелко { color: rgba(255, 255, 255, .62); }
.б-звонок .б-часы { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; }
.б-мелко { font-size: 13px; }
.б-мессенджеры { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.б-мсг {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px 7px 7px;
  border-radius: 999px; background: #ffffff; color: var(--текст);
  text-decoration: none; font-weight: 600; font-size: 14px; transition: transform .15s;
}
.б-мсг:hover { transform: translateY(-2px); }
.б-мсг i {
  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #ffffff; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: -.3px;
}
.б-мсг svg { width: 15px; height: 15px; fill: none; stroke: #ffffff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.б-мсг.тг i { background: #2aabee; }
.б-мсг.ва i { background: #25d366; }
.б-мсг.вк i { background: #0077ff; }
.б-почта { color: var(--текст); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .б-контакты { grid-template-columns: 1fr; gap: 10px; }
  .б-адрес, .б-звонок, .б-написать { grid-column: auto; grid-row: auto; padding: 22px 20px; }
  .б-звонок { order: -1; }   /* на телефоне позвонить — первое, что нужно */
}

/* ---------- во всём магазине ---------- */
.подвал { background: #ffffff; }
.чип { border-radius: 10px; }
.чип.выбран { background: var(--чернила); border-color: var(--чернила); color: #ffffff; }
.придумать-свой { background: var(--чернила); color: #ffffff; }
.главная-кнопка { background: var(--чернила); color: #ffffff; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }

/* карточка букета: шторка белая, как весь сайт (раньше была тёмной всегда) */
.шторка { background: #ffffff; color: var(--текст); box-shadow: 0 -10px 30px rgba(0, 0, 0, .07); }
@media (min-width: 900px) {
  .товар-обёртка .шторка { box-shadow: none; border: 1px solid var(--плитка-край); }
}
.ручка { background: #dcdcd8; }
.шторка .описание { opacity: 1; color: var(--текст-тихий); }
.размер, .опция { background: #f6f6f4; color: var(--текст); }
.размер.выбран, .опция.выбран { background: #ffffff; border-color: var(--текст); }
.опция .бокс { border-color: rgba(0, 0, 0, .3); color: #ffffff; }
.опция.выбран .бокс { background: var(--текст); border-color: var(--текст); }
.кол-во .кнопки { background: #f6f6f4; }
.кол-во button { color: var(--текст); }
.кол-во button:active { background: rgba(0, 0, 0, .06); }
.шторка .что-в-цену { background: #ffffff; border-color: var(--плитка-край); }
.шторка .что-в-цену summary { color: var(--текст); }
.шторка .что-в-цену .строка,
.шторка .что-в-цену .строка b,
.шторка .что-в-цену .текстом,
.шторка .что-в-цену .текстом li,
.шторка .что-в-цену .вопрос { color: var(--текст); }
.шторка .что-в-цену .строка i,
.шторка .что-в-цену .текстом .ответ { color: var(--текст-тихий); }
.шторка .что-в-цену .строка + .строка { border-top-color: var(--плитка-край); }
.шторка .что-в-цену svg { stroke: var(--текст); }
.шторка .что-в-цену .текстом ul li::marker { color: var(--текст-тихий); }
.миниатюра.выбрана { border-color: var(--текст); }

/* ---------- движение: плитки при загрузке, блоки при прокрутке ---------- */
@keyframes б-появление {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .бенто > * { animation: б-появление .6s cubic-bezier(.2, .7, .2, 1) backwards; }
  .бенто > :nth-child(2) { animation-delay: .07s; }
  .бенто > :nth-child(3) { animation-delay: .14s; }
  .бенто > :nth-child(4) { animation-delay: .2s; }
  .бенто > :nth-child(5) { animation-delay: .26s; }
  .бенто > :nth-child(6) { animation-delay: .32s; }
  .б-разделы { animation: б-появление .6s .38s cubic-bezier(.2, .7, .2, 1) backwards; }
  .б-подбор .б-появись { animation: б-появление .45s cubic-bezier(.2, .7, .2, 1) backwards; }
  .б-подбор .б-появись:nth-child(2) { animation-delay: .04s; }
  .б-подбор .б-появись:nth-child(3) { animation-delay: .08s; }
  .б-подбор .б-появись:nth-child(4) { animation-delay: .12s; }
  .б-подбор .б-появись:nth-child(n+5) { animation-delay: .16s; }
  /* класс б-прячь новый.js ставит только после первой прокрутки человеком (05.10.2026, вечер):
     до этого — и у роботов, которые не листают, — блоки видны сразу */
  .раздел.б-прячь { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
  .раздел.б-прячь.б-видно { opacity: 1; transform: none; }
}
/* при печати и сохранении в PDF ничего не прячем */
@media print { .раздел.б-прячь { opacity: 1; transform: none; transition: none; } }

/* Фото букета дня выплывает без прозрачности, чтобы браузер сразу засчитал его показ. */
@keyframes б-появление-фото { from { transform: translateY(16px) scale(.985); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .бенто > .б-дня { animation: б-появление-фото .6s .07s cubic-bezier(.2, .7, .2, 1) backwards; }
}

/* ---------- отклик плиток на наведение мышью (07.10.2026) ----------
   Илья: на компьютере при наведении карточка букета и зелёная кнопка корзины
   должны «откликаться», как в магазинах. Только для мыши — на телефоне ничего
   не залипает. Двигаем через transform, поэтому соседние плитки стоят на месте.
   Тень — у фото: карточка в «Плитках» прозрачная, без рамки. overflow: visible —
   иначе карточка срезает тень своего же фото; min-width: 0 держит колонки сетки
   той же ширины, как было при overflow: hidden. */
@media (hover: hover) and (pointer: fine) {
  .карточка { overflow: visible; min-width: 0; transition: transform .2s ease; }
  .карточка .фото { transition: box-shadow .2s ease; }
  .карточка:hover .фото { box-shadow: 0 12px 28px rgba(0, 0, 0, .14); }
  .счёт-плитки .кнопка-класть {
    cursor: pointer;
    transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
  }
  .счёт-плитки .кнопка-класть:hover { background: #a3b13f; box-shadow: 0 4px 12px rgba(0, 0, 0, .26); }
  .похожие.в2 .похожий { transition: transform .2s ease, box-shadow .2s ease; }
  .похожие.в2 .похожий:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, .12); }
  .похожие.сбоку .похожий img { transition: transform .2s ease, box-shadow .2s ease; }
  /* колонка сбоку прокручивается и срезает края — тень узкая, только вниз */
  .похожие.сбоку .похожий:hover img { box-shadow: 0 10px 14px -8px rgba(0, 0, 0, .3); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .карточка:hover { transform: translateY(-4px) scale(1.02); }
  .счёт-плитки .кнопка-класть:hover { transform: scale(1.1); }
  .счёт-плитки .кнопка-класть:active { transform: scale(.92); }
  .похожие.в2 .похожий:hover { transform: translateY(-4px); }
  .похожие.сбоку .похожий:hover img { transform: translateY(-3px); }
}
/* просят меньше движения — без увеличения и подъёма, остаются тень и цвет */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .карточка:hover, .карточка:active,
  .похожие.в2 .похожий:hover, .похожие.сбоку .похожий:hover img,
  .счёт-плитки .кнопка-класть:hover, .счёт-плитки .кнопка-класть:active { transform: none; }
}

/* ============================================================================
   08.10.2026 — три правки, которые Илья одобрил на тестовой копии («да, все выкатывай»):
   корзина и оформление по шагам, короткий подвал на телефоне, фильтры каталога слева
   на компьютере. Разметка — в новый.html, поведение — в новый.js.
   ============================================================================ */

/* ---------- корзина и оформление по шагам ---------- */

/* корзина: тихая строка под итогом, пока не выбрано, везём или забирают сами */
.подпись-получения {
  margin: 10px 14px 0; font-size: 13px; line-height: 1.45; color: var(--текст-тихий);
}
/* кнопка «Оформить заказ» с теми же отступами, что у блоков: на телефоне она
   выходила за левый край (Илья, 07.10.2026) */
#корзинаНиз > .главная-кнопка.в-потоке { width: calc(100% - 28px); margin: 14px 14px 0; }
/* На шагах кнопка стоит в конце шага, сразу под последним блоком: плавающая кнопка и запас
   под неё давали пустую полосу (Илья, iPhone, 07.10.2026). Ставит её туда поставитьКнопкуНаМесто(). */
.шаг-оформления > .главная-кнопка.в-потоке { width: calc(100% - 28px); margin: 22px 14px 0; }

/* В корзине и на шагах оформления подвала нет — ни на телефоне, ни на компьютере
   (Илья, 07.10.2026); у кнопки «Отправить заказ» остаётся строка про оферту и политику.
   Под кнопкой — небольшой запас до края экрана. */
body[data-экран="корзина"] .подвал,
body[data-экран="доставка"] .подвал,
body[data-экран="к-букету"] .подвал,
body[data-экран="оформление"] .подвал { display: none; }
.лист[data-лист="корзина"],
.лист[data-лист="доставка"],
.лист[data-лист="к-букету"],
.лист[data-лист="оформление"] { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
/* «Спросить флориста» не липнет к карточкам допродаж */
.шаг-оформления > #спроситьФлориста { margin-top: 18px; }

/* полоска «Шаг N из 3» под шапкой экрана */
.прогресс-шага { margin: 2px 14px 0; }
.прогресс-шага-текст {
  font-size: 12.5px; font-weight: 600; letter-spacing: .2px; color: var(--текст-тихий); margin-bottom: 6px;
}
.прогресс-шага-полоса { height: 4px; border-radius: 4px; background: var(--плитка-край); overflow: hidden; }
.прогресс-шага-полоса i { display: block; height: 100%; border-radius: 4px; background: var(--чернила); }
/* первый блок шага сразу под полоской — без большого отступа */
.прогресс-шага + .заголовок-блока { margin-top: 18px; }
/* на шаге 1 сразу под полоской — выбор «доставка или самовывоз», у него в разметке margin-top:0 */
.прогресс-шага + .группа { margin-top: 18px !important; }

/* шаг 2: подарки — с отступами, как остальные блоки */
.шаг-оформления .подарки { margin-left: 14px; margin-right: 14px; }

/* шаг 3: промокод свёрнут в строку «Есть промокод?» */
#промоПодсказка { margin: 18px 14px 0; }
.есть-промокод {
  display: inline-block; margin: 16px 14px 0; padding: 6px 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--текст);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.есть-промокод:active { opacity: .6; }
/* раскрыли — строка уходит, на её месте поле (на тестовой копии строка оставалась видна) */
.есть-промокод[hidden] { display: none; }
.промо-раскрыто { margin-top: 18px; }
.промо-раскрыто[hidden] { display: none; }

/* шаг 3: короткая сводка — букеты, способ и время, адрес или самовывоз.
   Получатель, «Вы» и открытка в ней не нужны: человек только что всё ввёл. */
#сверка .сверка-что { width: 92px; }
#сверка .сверка-товар img,
#сверка .сверка-значок { width: 34px; height: 42px; border-radius: 6px; }

/* незаполненное: красная рамка вокруг пары кнопок или ленты, текст под полем */
.ошибка-выбора { outline: 2px solid #d9534f; outline-offset: 4px; border-radius: 14px; }
.текст-ошибки { margin: 8px 2px 4px; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: #d9534f; }
.шаг-оформления > .текст-ошибки { margin-left: 14px; margin-right: 14px; }
/* пока висит ошибка, постоянная подсказка «Выберите один вариант…» не нужна — текст один */
.ошибка-выбора ~ .подпись-выбора { display: none; }

/* ---------- короткий подвал на телефоне ----------
   На телефоне (375) подвал занимал почти два экрана. До 899 px: логотип меньше, контакты
   в две строки, «Для клиентов», «Каталог», «Помощь» и «Все разделы» — свёрнутые строки
   (раскрывает связатьПодвал() в новый.js), оплата и данные продавца — мелким шрифтом.
   Свёрнуто стилями с первой отрисовки — подвал не прыгает при запуске скрипта.
   Компьютер (от 900 px) не меняется. */
.подвал .контакты-кратко, .подвал .шапка-разделов { display: none; }

@media (max-width: 899px) {
  .подвал .внутри { padding: 18px 16px 18px; }
  /* запас под плавающую кнопку («В корзину») — только когда она на экране */
  @supports selector(:has(a)) {
    .подвал { padding-bottom: 0; }
    body:has(.главная-кнопка.видна:not(.в-потоке)) .подвал {
      padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    }
  }

  /* логотип и контакты плотнее */
  .подвал .колонки { display: block; margin: 0; }
  .подвал .колонка { min-width: 0; }
  .подвал .колонка:first-child { margin-bottom: 14px; }
  .подвал img { height: 26px; margin-bottom: 8px; }
  .подвал .контакты-подвала { display: none; }
  .подвал .контакты-кратко { display: block; font-size: 12.5px; line-height: 1.55; }
  /* ссылки в колонках подвала блочные — телефону и почте возвращаем строку */
  .подвал .контакты-кратко a {
    display: inline; padding: 0; color: var(--текст); text-decoration: none; white-space: nowrap;
  }

  /* строки-раскрывашки: «Для клиентов», «Каталог», «Помощь», «Все разделы» */
  .подвал .шапка-колонки.шапка-раскрытия {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 44px; margin: 0; padding: 0;
    border-top: 1px solid var(--плитка-край);
    font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--текст);
    cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none;
  }
  .подвал .шапка-раскрытия::after {
    content: ''; width: 7px; height: 7px; margin-right: 4px; flex: none;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg); transition: transform .2s;
  }
  .подвал .шапка-раскрытия[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
  .подвал .шапка-раскрытия:focus-visible { outline: 2px solid var(--текст); outline-offset: 2px; }

  /* закрыто — ссылок не видно, но они на месте в разметке */
  .подвал .колонка.свёрнутый:not(.развёрнут) a,
  .подвал .подборки-подвала.свёрнутый:not(.развёрнут) { display: none; }
  .подвал .колонка.развёрнут { padding-bottom: 8px; }
  .подвал .колонка.развёрнут a { padding: 6px 0; font-size: 13.5px; }
  .подвал .подборки-подвала.развёрнут {
    margin: 0; padding: 2px 0 14px; gap: 8px 16px;
    font-size: 13px; opacity: 1;
  }

  /* оплата и данные продавца — мелко и плотно */
  .подвал .реквизиты {
    font-size: 10.5px; line-height: 1.45; padding-top: 0; border-top: 0;
  }
  .подвал .подборки-подвала + .реквизиты {
    border-top: 1px solid var(--плитка-край); padding-top: 12px;
  }
  .подвал .реквизиты + .реквизиты { margin-top: 4px; }
}

/* ---------- фильтры каталога слева на компьютере ----------
   На компьютере поиск, разделы, «Цена от — до» и «по цене» стояли строкой над плитками —
   чтобы сменить раздел или цену, приходилось листать наверх. От 1100 px они в левой колонке
   (.колонка-фильтров), которая едет вместе со страницей сразу под шапкой; справа плитки.
   Высоту шапки для «липкой» колонки меряет связатьКолонкуФильтров() в новый.js.
   Телефон и планшет (до 1099 px): обёртки «прозрачные», каталог как раньше. */
.раскладка-каталога,
.колонка-фильтров,
.плитки-каталога { display: contents; }
.подпись-разделов { display: none; }

@media (min-width: 1100px) {
  /* Блок каталога шириной с шапку (Илья, 08.10.2026: «а сузил для чего? места куча ещё по
     бокам»). Ряд шапки — до 1220 px с полями 14 px, каталог и строка «← Назад» — так же:
     левый край колонки под логотипом, правый край плиток под кнопкой корзины. */
  .лист[data-лист="каталог"] > .широкий,
  body[data-экран="каталог"] .назад-строка { max-width: 1220px; }

  /* 244 + 28 px колонка с отступом; справа плитки */
  .раскладка-каталога {
    display: grid;
    grid-template-columns: 244px minmax(0, 1fr);
    column-gap: 28px;
    align-items: start;
    margin-top: 18px;
  }
  .плитки-каталога { display: block; min-width: 0; }
  /* колонок столько, сколько влезет плиток не уже 255 px: 1100 px — 3 по 256, 1220–1439 — 3 по 296 */
  .плитки-каталога #плитка { grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }

  /* липнет сразу под шапкой; если выше экрана — прокручивается сама */
  .колонка-фильтров {
    display: block;
    position: sticky;
    top: calc(var(--высота-шапки, 65px) + 16px);
    max-height: calc(100vh - var(--высота-шапки, 65px) - 32px);
    overflow-y: auto;
    scrollbar-width: thin;
    padding: 0 4px 6px 0;
  }

  /* поиск во всю колонку */
  .колонка-фильтров .поиск-обёртка { margin: 0; max-width: none; }
  .колонка-фильтров .поиск {
    padding: 11px 34px 11px 12px; font-size: 14px; border-radius: 10px;
    text-overflow: ellipsis;
  }
  .колонка-фильтров .поиск::placeholder { text-overflow: ellipsis; }

  .подпись-разделов {
    display: block;
    margin: 20px 0 6px 12px;
    font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
    color: var(--текст-тихий);
  }

  /* разделы — вертикальным списком, выбранный закрашен (чёрный, как был) */
  .колонка-фильтров #категории {
    display: flex; flex-direction: column; gap: 2px;
    overflow: visible; padding: 0; min-height: 0;
    margin-top: 0 !important;   /* в разметке стоит style="margin-top:14px" */
  }
  .колонка-фильтров #категории .чип {
    display: block; width: 100%; text-align: left;
    background: transparent; border-color: transparent;
    padding: 9px 12px; border-radius: 10px;
    font-size: 14.5px; white-space: normal;
  }
  .колонка-фильтров #категории .чип:hover { background: var(--серая-плитка, #f4f4f1); border-color: transparent; }
  .колонка-фильтров #категории .чип.выбран,
  .колонка-фильтров #категории .чип.выбран:hover {
    background: var(--чернила, #1a1a1a); border-color: var(--чернила, #1a1a1a); color: #ffffff;
  }
  /* ярлычок «промокод …» у сезонной подборки — в строку, а не над кнопкой:
     в столбике он налез бы на соседний раздел */
  .колонка-фильтров #категории .чип.с-промо .промо-ярлык {
    position: static; transform: none; display: inline-block;
    margin-left: 8px; vertical-align: 1px;
  }

  /* цена от — до и «по цене» друг под другом */
  .колонка-фильтров #ценник.кат-цена {
    flex-direction: column; align-items: flex-start; gap: 10px;
    margin-top: 16px; padding: 16px 0 0 0;
    border-top: 1px solid var(--плитка-край);
  }
  .колонка-фильтров .кат-цена .цена-руками { width: 100%; }
  .колонка-фильтров .кат-цена .цена-руками input {
    flex: 1 1 0; min-width: 0; width: auto; padding: 8px 10px;
  }

  /* справа заголовок «Все букеты · 178» встаёт вровень с поиском */
  .плитки-каталога #заголовокКаталога { margin-top: 0; min-height: 22px; }
}

/* ---------- широкий экран (от 1440 px): лишнее место — в новые колонки ----------
   В ширину шапки (1192 px без полей) четыре плитки по 255+ px рядом с колонкой не входят,
   поэтому с 1440 px каталог выходит шире шапки: поля 50 px от края окна. Плитки 255–300 px:
   1440–1710 — 4 колонки, 1711–1981 — 5, от 1982 — 6 и больше. Где плитки выросли бы
   больше 300 px, блок перестаёт расти и стоит по центру. */
@media (min-width: 1440px) {
  .лист[data-лист="каталог"] > .широкий,
  body[data-экран="каталог"] .назад-строка {
    max-width: 1620px; padding-left: 50px; padding-right: 50px;   /* 4 × 300 + колонка */
  }
}
@media (min-width: 1711px) {
  .лист[data-лист="каталог"] > .широкий,
  body[data-экран="каталог"] .назад-строка { max-width: 1936px; }   /* 5 × 300 */
}
@media (min-width: 1982px) {
  /* от шести колонок плитка сама не вырастает больше ~300 px */
  .лист[data-лист="каталог"] > .широкий,
  body[data-экран="каталог"] .назад-строка { max-width: none; }
}