.pd-top{padding:16px 0 0}
.pd-top .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;color:var(--gray);min-width:0}
.crumbs a{color:var(--gray);white-space:nowrap}
.crumbs a:hover{color:var(--green-dark)}
.crumbs i{font-style:normal;opacity:.45}
.crumbs em{font-style:normal;color:var(--ink);white-space:nowrap}
/* ============================================================
О НАС (design-about.html)
Токены и компоненты – из дизайн-системы, новых цветов нет.
Аккордеон правил – тот же .faq-group, что в FAQ на главной.
============================================================ */
/* --- шапка страницы --- */
.ab-top{padding:16px 0 4px}
/* Заголовок на десктопе – одной строкой (правка клиента 17.08.2026). Ломал его не дефицит места,
а сам max-width – та же грабля, что была на главной. Бюджет: при кегле 34px строке нужно 883px,
плюс padding .wrap 24+24 – значит от 940px помещается. Ниже переносим как обычно. */
.ab-top h1{max-width:26ch;text-wrap:balance}
@media(min-width:940px){.ab-top h1{max-width:none;text-wrap:nowrap}}
.ab-facts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:12px;font-size:13.5px;color:var(--gray)}
.ab-facts b{color:var(--ink)}
.ab-facts .st{color:var(--orange);letter-spacing:1px}
.ab-facts .sep{opacity:.4}
@media(max-width:700px){.ab-facts .sep{display:none}} /* при переносе точки повисают в конце строк */
.ab-lead{margin-top:14px;max-width:78ch;color:var(--gray);font-size:14.5px;line-height:1.65}
.ab-row{display:flex;gap:28px;align-items:center}
.ab-txt{flex:1 1 auto;min-width:0}
.ab-ill{flex:0 0 auto;width:190px;display:block}
@media(max-width:900px){.ab-ill{display:none}}
.ab-lead b{color:var(--ink)}
/* --- цифры доверия --- */
.ab-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ab-num{background:#fff;border-radius:var(--r);padding:18px 20px;box-shadow:var(--sh-sm)}
.ab-num b{display:block;font-family:var(--head);font-size:25px;font-weight:800;color:var(--green-dark);line-height:1.15}
.ab-num b .st{color:var(--orange)}
.ab-num small{display:block;margin-top:5px;font-size:12.5px;color:var(--gray);line-height:1.5}
/* --- «как собирается букет»: видео + шаги --- */
.vsplit{display:grid;grid-template-columns:minmax(0,304px) minmax(0,1fr);gap:26px 36px;align-items:start}
.vmedia{margin:0}
.vp{position:relative;aspect-ratio:9/16;border-radius:var(--r-lg);overflow:hidden;
background:#101a16;box-shadow:var(--sh-md)}
.vp video{display:block;width:100%;height:100%;object-fit:cover}
/* большая кнопка старта – единственный способ запустить ролик */
.vp-start{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;
background:linear-gradient(180deg,rgba(16,26,22,.10) 0%,rgba(16,26,22,.14) 55%,rgba(16,26,22,.50) 100%);
color:#fff;cursor:pointer;transition:opacity .3s var(--ease)}
.vp-start .ring{width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.95);color:var(--green-dark);
display:grid;place-items:center;box-shadow:0 12px 32px rgba(16,26,22,.34);transition:transform .24s var(--ease)}
.vp-start .ring svg{width:26px;height:26px;margin-left:4px}
.vp-start:hover .ring{transform:scale(1.07)}
.vp-start .lbl{font-family:var(--head);font-weight:700;font-size:15px;text-shadow:0 1px 8px rgba(16,26,22,.5)}
.vp-start .mute{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.05em;
text-transform:uppercase;background:rgba(16,26,22,.42);border-radius:var(--r-pill);padding:5px 11px}
.vp-start .mute svg{width:13px;height:13px}
.vp.is-live .vp-start{opacity:0;pointer-events:none}
/* панель управления – появляется только после старта */
.vp-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:9px;padding:14px 12px 12px;
background:linear-gradient(180deg,rgba(16,26,22,0),rgba(16,26,22,.74));
opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.vp.is-live .vp-bar{opacity:1;pointer-events:auto}
.vp-btn{width:34px;height:34px;flex:0 0 auto;border-radius:50%;background:rgba(255,255,255,.20);color:#fff;
display:grid;place-items:center;transition:background .18s,color .18s,transform .16s var(--ease)}
.vp-btn:hover{background:rgba(255,255,255,.36)}
.vp-btn:active{transform:scale(.94)}
.vp-btn svg{width:17px;height:17px}
.vp-btn.on{background:#fff;color:var(--green-dark)}
.vp-track{flex:1 1 auto;min-width:0;height:4px;border-radius:100px;background:rgba(255,255,255,.30);cursor:pointer}
.vp-track i{display:block;height:100%;width:0;border-radius:100px;background:#fff}
.vp-time{flex:0 0 auto;font-size:11.5px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;opacity:.9}
/* на кнопке видна одна иконка: идёт ролик – «пауза», стоит – «плей» */
.vp-ic-play{display:none}
.vp-ic-pause{display:block}
.vp.is-paused .vp-ic-play{display:block}
.vp.is-paused .vp-ic-pause{display:none}
/* пока файл качается (preload="none" – качаем только по нажатию) над постером крутится колечко */
.vp-load{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
border:3px solid rgba(255,255,255,.35);border-top-color:#fff;opacity:0;pointer-events:none;
transition:opacity .2s var(--ease)}
.vp.is-loading .vp-load{opacity:1;animation:vpSpin .9s linear infinite}
@keyframes vpSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.vp.is-loading .vp-load{animation-duration:2.4s}}
/* подпись под роликом */
.vcap{margin-top:12px;font-size:12.5px;color:var(--gray);line-height:1.55}
.vcap b{color:var(--ink)}
/* шаги */
.vsteps{display:grid;gap:11px}
.vstep{display:flex;gap:14px;background:#fff;border-radius:var(--r);padding:15px 18px;box-shadow:var(--sh-sm)}
.vstep .n{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--green-light);color:var(--green-dark);
font-family:var(--head);font-weight:800;font-size:14px;display:grid;place-items:center}
.vstep .tx{min-width:0}
.vstep b{display:block;font-family:var(--head);font-size:15px;margin-bottom:3px}
.vstep small{display:block;font-size:13px;color:var(--gray);line-height:1.55}
/* замыкающая плашка под шагами: правая колонка иначе кончается намного выше вертикального ролика */
.vnote{margin-top:5px;background:var(--grad-green);position:relative;isolation:isolate;
border-radius:var(--r);padding:17px 20px}
.vnote::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
background-image:var(--grain);background-size:220px 220px;opacity:.32;mix-blend-mode:multiply}
.vnote b{display:block;font-family:var(--head);font-size:15px;color:var(--green-dark)}
.vnote small{display:block;margin-top:5px;font-size:13px;color:var(--ink);line-height:1.55;max-width:62ch}
.vnote .btn{margin-top:13px}
.vstep .free{display:inline-block;margin-left:6px;background:var(--cream);color:var(--orange-text);
font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;border-radius:var(--r-pill);padding:3px 9px;
vertical-align:1px}
/* --- салоны --- */
.ab-salons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.salon{display:grid;grid-template-columns:minmax(0,196px) minmax(0,1fr);background:#fff;
border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm)}
.salon .ph{position:relative;background:#e9edf1;min-height:100%}
.salon .ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 26%}/* на десктопе кадр режется по бокам и сдвиг по вертикали не работает; он нужен на мобильном,
где карточка становится 4:3 и без сдвига вывеска уезжает за верхний край */
.salon .city{position:absolute;left:10px;top:10px;background:rgba(255,255,255,.94);color:var(--green-dark);
font-size:11.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
border-radius:var(--r-pill);padding:5px 11px;box-shadow:var(--sh-sm)}
.salon .body{padding:20px 22px 22px}
.salon h3{font-family:var(--head);font-size:18px;font-weight:800}
.salon .hours{display:inline-flex;align-items:center;gap:6px;margin-top:8px;background:var(--green-light);
color:var(--green-dark);font-size:12px;font-weight:700;border-radius:var(--r-pill);padding:5px 11px}
.salon .hours .dot{width:6px;height:6px;border-radius:50%;background:var(--green)}
.salon dl{margin-top:14px;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:7px 14px;font-size:13.5px}
.salon dt{color:var(--gray);white-space:nowrap}
.salon dd{min-width:0;word-break:break-word}
.salon dd a{color:var(--green-dark);text-decoration:underline;text-underline-offset:3px}
.salon dd a:hover{color:var(--green)}
.salon dd .free-call{color:var(--gray);font-size:12px}
.salon .chans{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.salon .chans a{display:inline-flex;align-items:center;gap:7px;background:var(--page);border-radius:var(--r-pill);
padding:7px 13px;font-size:12.5px;font-weight:700;color:var(--ink);transition:.18s}
.salon .chans a:hover{background:var(--green-light);color:var(--green-dark)}
.salon .chans svg{width:15px;height:15px}
.salon .site{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:13px;font-weight:700;
color:var(--green-dark);text-decoration:underline;text-underline-offset:3px}
.salon .site svg{width:15px;height:15px}
/* --- галерея «магазин изнутри» --- */
.ab-gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.gtile{position:relative;margin:0;border-radius:var(--r);overflow:hidden;background:#e9edf1;box-shadow:var(--sh-sm)}
/* height:auto обязателен: у ![]()
стоят атрибуты width/height, и «презентационный» height
перебивает aspect-ratio – плитки становились вдвое выше задуманных 3:4 */
.gtile img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;transition:transform .55s var(--ease)}
.gtile:hover img{transform:scale(1.035)}
.gtile figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 13px;color:#fff;font-size:13px;
font-weight:600;line-height:1.4;background:linear-gradient(180deg,rgba(16,26,22,0),rgba(16,26,22,.80))}
.gtile .city{position:absolute;left:10px;top:10px;background:rgba(255,255,255,.94);color:var(--green-dark);
font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
border-radius:var(--r-pill);padding:4px 10px}
/* --- правила --- */
.rules .faq-group p{padding:0 22px 11px;max-width:82ch}
.rules .faq-group p:last-child{padding-bottom:20px}
.rules .faq-group summary{font-size:15px}
/* .faq центрирует текст, а .docs – флекс, ему нужно своё выравнивание */
.faq .docs{justify-content:center;margin-top:26px}
.faq .rules-more{max-width:70ch;margin-left:auto;margin-right:auto}
.docs{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.docs a{display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:var(--r-pill);
padding:9px 15px;font-size:13px;font-weight:700;box-shadow:inset 0 0 0 1.5px var(--line-2);transition:.18s}
.docs a:hover{box-shadow:inset 0 0 0 1.5px var(--green);color:var(--green-dark)}
.docs svg{width:15px;height:15px;color:var(--green-dark)}
.rules-more{margin-top:16px;font-size:13.5px;color:var(--gray)}
.rules-more a{color:var(--green-dark);text-decoration:underline;text-underline-offset:3px}
/* --- реквизиты --- */
/* Реквизиты – четвёртая тема правил: внутри аккордеона не абзацы, а список определений */
.rules .faq-group dl{margin:0;padding:0 22px 20px;display:grid;grid-template-columns:max-content minmax(0,1fr);
gap:8px 18px;font-size:13.5px}
.rules .faq-group dt{color:var(--gray);white-space:nowrap}
.rules .faq-group dd{min-width:0;word-break:break-word}
.rules .faq-group dd a{color:var(--green-dark);text-decoration:underline;text-underline-offset:3px}
.gal-hint{display:none;margin-top:10px;font-size:12px;color:var(--gray)}
/* --- адаптив --- */
@media(max-width:1080px){
.ab-nums{grid-template-columns:repeat(2,minmax(0,1fr))}
.vsplit{grid-template-columns:minmax(0,276px) minmax(0,1fr);gap:24px}
.salon{grid-template-columns:minmax(0,164px) minmax(0,1fr)}
.salon .body{padding:18px 18px 20px}
}
@media(max-width:900px){
.ab-salons{grid-template-columns:1fr}
.ab-gal{grid-template-columns:repeat(2,minmax(0,1fr))}
/* ролик вертикальный: на узком экране режем не ширину, а высоту – иначе он выше экрана */
.vsplit{grid-template-columns:1fr;gap:22px}
.vmedia{width:min(100%,calc(72vh * 0.5625));margin:0 auto}
}
@media(max-width:560px){
.ab-nums{grid-template-columns:1fr}
.salon{grid-template-columns:1fr}
.salon .ph{aspect-ratio:4/3}
/* галерея лентой со снапом – шесть портретных плиток в столбик слишком длинно.
Вылет за край делаем ровно на padding самой .wrap (ниже 760 это 16px, ниже 370 – 12px),
иначе лента шире экрана и появляется горизонтальная прокрутка всей страницы. */
.ab-gal{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
margin:0 -16px;padding:0 16px 6px;-webkit-overflow-scrolling:touch}
.ab-gal .gtile{flex:0 0 74%;scroll-snap-align:center}
.gal-hint{display:block}
.vmedia{width:min(100%,calc(66vh * 0.5625))}
.rules .faq-group dl,.salon dl{grid-template-columns:1fr;gap:2px 0}
.rules .faq-group dt,.salon dt{margin-top:8px}
}
@media(max-width:370px){
.ab-gal{margin:0 -12px;padding:0 12px 6px}
.vmedia{width:min(100%,calc(62vh * 0.5625))}
}
/* атрибут hidden не гасит элемент с display:flex/grid – гасим явно */
.ab-facts[hidden],.vp-bar[hidden],.ab-gal[hidden]{display:none}
@media(prefers-reduced-motion:reduce){
.gtile img{transition:none}
.gtile:hover img{transform:none}
}
/* объёмные иконки */
/* Иконка – один