/* Новое лого СОФАНИ и дуб в подвале — 11.10.2026 («Дизайн»), сборка tools/brand-logo.py.
   Шапка рассчитана впритык под старое лого (114 px до 1280, 141 px с 1280): меню не трогаем,
   подпись «фабрика мягкой мебели» включается только с 1366 px, где хватает места. */
.sf-lg{flex-direction:row}
.sf-lg-sub{color:#C8763C}
.sf-lg-pc{display:none;width:190px;height:auto;aspect-ratio:2560.2/648.9;flex:none}
.sf-lg-mo{display:block;width:142px;height:auto;aspect-ratio:2560.2/500;flex:none}
@media (min-width:1024px){.sf-lg-mo{width:126px}}
@media (min-width:1280px){.sf-lg-mo{width:145px}}
@media (min-width:1366px){.sf-lg-pc{display:block}.sf-lg-mo{display:none}}

/* подвал: слово + EST. 2015 */
.sf-fl-word{display:block;max-width:168px}
.sf-fw{display:block;width:100%;height:auto;aspect-ratio:2560.2/500;color:var(--sfx-strong)}
/* без верхней линии: подвал начинается цветом блока над ним и за 160 px уходит в свой цвет
   (--sf-above ставит js/sf-brand.js). Поверх соседнего блока не кладём — на главной над подвалом текст. */
.sfx-foot.sf-oak-bg{overflow:hidden;border-top:0;
 background:linear-gradient(to bottom,var(--sf-above,var(--sfx-bg)) 0,var(--sfx-bg) 160px)}
/* 17.10.2026 (владелец: «сильно давит верх на футер… переходы плавным градиентом, дать свободу дереву»):
   переход вдвое длиннее и по плавной кривой (точки по ряду Фибоначчи), колонки — ниже, на чистом фоне,
   крона дуба растёт из растворяющегося перехода. Без color-mix браузер оставит строку выше. Макет: design-mockups/footer-fade */
.sfx-foot.sf-oak-bg{background:linear-gradient(to bottom,var(--sf-above,var(--sfx-bg)) 0,
 color-mix(in oklab,var(--sf-above,var(--sfx-bg)) 82%,var(--sfx-bg)) 34px,
 color-mix(in oklab,var(--sf-above,var(--sfx-bg)) 58%,var(--sfx-bg)) 89px,
 color-mix(in oklab,var(--sf-above,var(--sfx-bg)) 34%,var(--sfx-bg)) 144px,
 color-mix(in oklab,var(--sf-above,var(--sfx-bg)) 15%,var(--sfx-bg)) 199px,
 color-mix(in oklab,var(--sf-above,var(--sfx-bg)) 5%,var(--sfx-bg)) 254px,var(--sfx-bg) 322px)}
.sfx-foot.sf-oak-bg .sfx-grid{padding-top:233px}
.sfx-foot.sf-oak-bg .sfx-in{position:relative;z-index:1}
/* дуб: две картинки владельца, по теме видна одна (скрытая ленивая не грузится);
   растворение макушки зашито в файлы — многослойные маски в Safari складываются, а не пересекаются */
.sf-oak{position:absolute;top:89px;bottom:0;left:0;right:0;z-index:-1;pointer-events:none;
 display:flex;align-items:flex-end;justify-content:center;opacity:.2}
.sf-oak img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.sf-oak .sf-oak-d{display:none}
html[data-theme="light"] .sf-oak{opacity:.26}
html[data-theme="light"] .sf-oak .sf-oak-l{display:none}
html[data-theme="light"] .sf-oak .sf-oak-d{display:block}
@media (max-width:700px){
 .sf-oak{opacity:.16}
 html[data-theme="light"] .sf-oak{opacity:.22}
}

/* ── подвал на телефоне: одна ось, ровные ряды (владелец 11.10: «бардак и хаос… красиво, симметрично, ровно»).
   Отступы — ряд Фибоначчи 13/21/34/55. Разделы ссылок — раскрывающиеся строки (скрипт ставит .sfx-acc;
   без скрипта ссылки просто видны). Разметку подвала не трогаем. ── */
@media (max-width:700px){
 .sfx-foot .sfx-grid{display:flex !important;flex-direction:column;gap:0 !important;padding-top:144px !important;padding-bottom:34px !important}
 .sfx-foot.sf-oak-bg{background:linear-gradient(to bottom,var(--sf-above,var(--sfx-bg)) 0,var(--sfx-bg) 144px);
  background:linear-gradient(to bottom,var(--sf-above,var(--sfx-bg)) 0,
  color-mix(in oklab,var(--sf-above,var(--sfx-bg)) 70%,var(--sfx-bg)) 34px,
  color-mix(in oklab,var(--sf-above,var(--sfx-bg)) 38%,var(--sfx-bg)) 89px,
  color-mix(in oklab,var(--sf-above,var(--sfx-bg)) 12%,var(--sfx-bg)) 144px,var(--sfx-bg) 199px)}
 .sf-oak{top:55px}
 .sfx-foot .sfx-brand{display:flex;flex-direction:column;align-items:center;text-align:center;padding-bottom:34px}
 .sfx-foot .sf-fl-word{margin:0 auto;max-width:168px;width:168px}
 .sfx-foot .sfx-logo i{text-align:center;padding-left:.4em;margin-top:13px}
 .sfx-foot .sfx-about{margin:21px auto 0;max-width:290px;text-align:center}
 .sfx-foot .sfx-motto{margin:13px auto 0;text-align:center}
 /* разделы ссылок */
 .sfx-foot nav.sfx-col{border-top:1px solid var(--sfx-line) !important}
 .sfx-foot nav.sfx-col:nth-of-type(3){border-bottom:1px solid var(--sfx-line) !important}
 .sfx-foot nav.sfx-col h4{display:flex;align-items:center;justify-content:space-between;min-height:55px;margin:0 !important}
 .sfx-foot.sfx-acc nav.sfx-col h4{cursor:pointer;-webkit-tap-highlight-color:transparent}
 .sfx-foot.sfx-acc nav.sfx-col h4::after{content:"";width:13px;height:13px;flex:none;
  background:linear-gradient(var(--sfx-accent),var(--sfx-accent)) center/13px 1px no-repeat,
             linear-gradient(var(--sfx-accent),var(--sfx-accent)) center/1px 13px no-repeat;transition:transform .3s ease}
 .sfx-foot.sfx-acc nav.sfx-col.is-open h4::after{transform:rotate(45deg)}
 .sfx-foot.sfx-acc nav.sfx-col:not(.is-open) > a{display:none !important}
 .sfx-foot nav.sfx-col > a:last-child{margin-bottom:21px !important}
 /* контакты по центру */
 .sfx-foot .sfx-ct{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:34px}
 .sfx-foot .sfx-ct h4{margin:0 0 13px !important}
 .sfx-foot .sfx-ct .sfx-ph{display:flex !important;justify-content:center;align-items:center;width:100% !important;max-width:340px;
  min-height:55px;margin:21px 0 8px !important;padding:0 21px !important;box-sizing:border-box}
 .sfx-foot .sfx-ct .sfx-wr{margin:13px auto 0}
 /* документы: «©» по центру, ссылки ровной сеткой в две колонки */
 .sfx-foot .sfx-legal{flex-direction:column !important;align-items:center !important;text-align:center;gap:21px !important;
  padding-top:21px !important;padding-bottom:34px !important}
 .sfx-foot .sfx-legal nav{display:grid !important;grid-template-columns:1fr 1fr;gap:13px 21px !important;width:100%;max-width:340px;justify-items:center}
 .sfx-foot .sfx-legal nav a{text-align:center}
}

/* Плавные стыки тёмных блоков со светлой страницей (17.10.2026, владелец: «все переходы сделать плавным градиентом»).
   Тёмный блок сам растворяется в страницу по плавной кривой — вместе с фото, цвет не подбирается.
   Верх — в пределах его большого внутреннего отступа (текст ниже 110 px). Низ: у заставок добавляется полоса
   их же сплошного тёмного фона (рамка, фон рисуется и под ней) и растворяется она, а не цифры и кнопки;
   у блоков с фото растворяется край самого фото, 89 px (кнопки выше). Только светлая тема; главную не трогает.
   Макет: design-mockups/section-fades */
html[data-theme="light"]{
 --sf-ft:linear-gradient(to bottom,transparent 0,rgb(0 0 0/.05) 14px,rgb(0 0 0/.15) 28px,rgb(0 0 0/.34) 42px,rgb(0 0 0/.58) 56px,rgb(0 0 0/.82) 75px,#000 110px);
 --sf-fb:linear-gradient(to top,transparent 0,rgb(0 0 0/.05) 14px,rgb(0 0 0/.15) 28px,rgb(0 0 0/.34) 42px,rgb(0 0 0/.58) 56px,rgb(0 0 0/.82) 75px,#000 110px);
 --sf-fb89:linear-gradient(to top,transparent 0,rgb(0 0 0/.06) 11px,rgb(0 0 0/.18) 23px,rgb(0 0 0/.38) 34px,rgb(0 0 0/.62) 46px,rgb(0 0 0/.85) 61px,#000 89px)}
/* светлое → тёмное: верх тёмного блока */
html[data-theme="light"] section:not(:is(.ui-dark,.dk,.ui-final,.fin,.sfx-cta,.mh,.kb-hero,.ab-hero,.fx-tr,.fx-sales,.fz-dark2,.fz-cu)) + :is(.ui-dark,.dk,.ui-final,.fin,.sfx-cta,.fx-tr,.fx-sales,.fz-dark2){-webkit-mask-image:var(--sf-ft);mask-image:var(--sf-ft)}
/* тёмная заставка → светлое */
html[data-theme="light"] :is(.mh,.kb-hero,.ab-hero,.ui-hero,.hero,.ph):has(+ section:not(:is(.ui-dark,.dk,.ui-final,.fin,.sfx-cta,.mh,.kb-hero,.ab-hero,.fx-tr,.fx-sales,.fz-dark2,.fz-cu))){border-bottom:110px solid transparent;background-clip:border-box;-webkit-mask-image:var(--sf-fb);mask-image:var(--sf-fb)}
/* блок с фото → светлое */
html[data-theme="light"] :is(.ui-final,.fin,.sfx-cta,.fx-tr,.fx-sales,.fz-dark2,.apply):has(+ section:not(:is(.ui-dark,.dk,.ui-final,.fin,.sfx-cta,.mh,.kb-hero,.ab-hero,.fx-tr,.fx-sales,.fz-dark2,.fz-cu))){-webkit-mask-image:var(--sf-fb89);mask-image:var(--sf-fb89)}
/* блок с фото между двумя светлыми */
html[data-theme="light"] section:not(:is(.ui-dark,.dk,.ui-final,.fin,.sfx-cta,.mh,.kb-hero,.ab-hero,.fx-tr,.fx-sales,.fz-dark2,.fz-cu)) + :is(.ui-final,.fin,.sfx-cta,.fx-tr,.fx-sales,.fz-dark2,.apply):has(+ section:not(:is(.ui-dark,.dk,.ui-final,.fin,.sfx-cta,.mh,.kb-hero,.ab-hero,.fx-tr,.fx-sales,.fz-dark2,.fz-cu))){-webkit-mask-image:var(--sf-ft),var(--sf-fb89);-webkit-mask-composite:source-in;mask-image:var(--sf-ft),var(--sf-fb89);mask-composite:intersect}
/* карточки моделей: «Посидите на нём в шоуруме» — последний блок обёртки .sfl, «Похожие модели» стоят после неё */
html[data-theme="light"] .sfl:has(+ section:not(:is(.ui-dark,.dk,.ui-final,.fin,.sfx-cta,.mh,.kb-hero,.ab-hero,.fx-tr,.fx-sales,.fz-dark2,.fz-cu))) > :is(.ui-final,.fin,.sfx-cta,.fx-tr,.fx-sales,.fz-dark2,.apply):last-child{-webkit-mask-image:var(--sf-fb89);mask-image:var(--sf-fb89)}
html[data-theme="light"] .sfl:has(+ section:not(:is(.ui-dark,.dk,.ui-final,.fin,.sfx-cta,.mh,.kb-hero,.ab-hero,.fx-tr,.fx-sales,.fz-dark2,.fz-cu))) > section:not(:is(.ui-dark,.dk,.ui-final,.fin,.sfx-cta,.mh,.kb-hero,.ab-hero,.fx-tr,.fx-sales,.fz-dark2,.fz-cu)) + :is(.ui-final,.fin,.sfx-cta,.fx-tr,.fx-sales,.fz-dark2,.apply):last-child{-webkit-mask-image:var(--sf-ft),var(--sf-fb89);-webkit-mask-composite:source-in;mask-image:var(--sf-ft),var(--sf-fb89);mask-composite:intersect}
/* без щели между тёмным блоком и растворением: отступы на стыке обнуляем */
html[data-theme="light"] section:not(:is(.ui-dark,.dk,.ui-final,.fin,.sfx-cta,.mh,.kb-hero,.ab-hero,.fx-tr,.fx-sales,.fz-dark2,.fz-cu)):has(+ :is(.ui-dark,.dk,.ui-final,.fin,.sfx-cta,.fx-tr,.fx-sales,.fz-dark2)){margin-bottom:0}
html[data-theme="light"] section:not(:is(.ui-dark,.dk,.ui-final,.fin,.sfx-cta,.mh,.kb-hero,.ab-hero,.fx-tr,.fx-sales,.fz-dark2,.fz-cu)) + :is(.ui-dark,.dk,.ui-final,.fin,.sfx-cta,.fx-tr,.fx-sales,.fz-dark2){margin-top:0}