/* FL-NAV-F-D-54 (Den 12.11.2026) — меню ☰ «Постачальники» на всіх сторінках, крім головної (замість «?» у шапці).
   Телефон (≤760): весь екран, усі постачальники одразу — сітка 2 × N, ряди ділять висоту порівну, без скролу; лише поява карт.
   ПК: панель зверху, карти як на головній (біла карта, смуга з назвою, фото), у кожної свій тихий рух + зміна тканини.
   Кольори — змінні теми (світла / темна / рожева). */
html body .fl-top .fm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:40px;height:40px;padding:0;border:0;border-radius:999px;
  background:var(--ink,#2a2320);color:var(--bg,#fbf8f4);cursor:pointer;font:600 14px/1 Manrope,sans-serif;box-shadow:0 1px 0 rgba(0,0,0,.04)}
html body .fl-top .fm-btn svg{width:18px;height:14px;flex:none}
html body .fl-top .fm-btn .fm-bl{display:none}
@media (min-width:761px){html body .fl-top .fm-btn{width:auto;padding:0 17px 0 14px}html body .fl-top .fm-btn .fm-bl{display:inline}}
@media (max-width:760px){html body .fl-top .fm-btn{width:36px;height:36px}}
html.fm-lock{overflow:hidden}

.fm-sh{position:fixed;inset:0;z-index:9700;box-sizing:border-box;display:flex;flex-direction:column;height:100vh;height:100dvh;
  padding:0 16px max(12px,env(safe-area-inset-bottom));background:var(--bg,#ede6dd);color:var(--ink,#2a2320);font-family:Manrope,sans-serif;opacity:0;transition:opacity .18s ease}
.fm-sh[hidden]{display:none}
.fm-sh.on{opacity:1}
.fm-sh *{box-sizing:border-box}
.fm-sh a{color:var(--ink,#2a2320);text-decoration:none}
.fm-top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px}
.fm-h{font:700 20px/1.1 Manrope,sans-serif;letter-spacing:-.01em;margin:0}
.fm-sub{display:none;font:500 14px/1.4 Manrope,sans-serif;color:var(--muted,#6d625b);margin:6px 0 0}
.fm-tb{display:flex;gap:8px;flex:none}
.fm-ic{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:999px;cursor:pointer;font:700 17px/1 Manrope,sans-serif}
.fm-x{background:var(--ink,#2a2320);color:var(--bg,#fbf8f4)}
.fm-q,.fm-t{background:var(--card,#fbf8f4);color:var(--ink,#2a2320)}
.fm-t svg{width:18px;height:18px}
.fm-grid{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:10px;margin:0;padding:0;list-style:none}
.mc{position:relative;display:flex;flex-direction:column;min-height:0;padding:6px;border-radius:14px;background:var(--card,#fbf9f5);
  box-shadow:0 1px 1.5px rgba(40,25,10,.16),0 2px 5px -1px rgba(40,25,10,.16),-6px 6px 14px -8px rgba(40,25,10,.3);
  opacity:0;transform:translateY(14px);transition:opacity .3s ease,transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .25s;transition-delay:var(--d,0s)}
.fm-sh.on .mc{opacity:1;transform:none}
.mc:active{transform:scale(.97)}
.mc .ph{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;border-radius:9px;background:linear-gradient(160deg,rgba(150,128,105,.10),rgba(150,128,105,.24));box-shadow:inset 0 0 0 1px rgba(40,25,10,.08)}
.mc .ph i{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transition:opacity 1s ease}
.mc .ph i.on{opacity:1}
/* fd54fo: складки тканини (як на головній); телефон — плитки лежать, тому рендер повернуто на 90° */
.mc .ph .fd{position:absolute;inset:0;z-index:1;pointer-events:none;background-size:100% 100%;opacity:0;transition:opacity .4s ease-out}
.mc .ph .fd.on{opacity:1}
.mc .ph .fd[data-m="1"]{transform:scaleY(-1)}
@media (max-width:760px){@supports (width:1cqh){
  .mc .ph{container-type:size}
  .mc .ph .fd{inset:auto;left:50%;top:50%;width:100cqh;height:100cqw;transform:translate(-50%,-50%) rotate(90deg)}
  .mc .ph .fd[data-m="1"]{transform:translate(-50%,-50%) rotate(90deg) scaleY(-1)}}}
.mc .nm{flex:none;display:flex;padding:7px 4px 2px;min-width:0}
.mc .nm b{display:flex;align-items:baseline;justify-content:space-between;gap:6px;width:100%;min-width:0;overflow:hidden;white-space:nowrap;
  font:700 13px/1.15 Manrope,sans-serif;letter-spacing:.5px;text-transform:uppercase}
.mc .nm b span{font:600 11px/1 Manrope,sans-serif;letter-spacing:0;text-transform:none;color:var(--muted,#6d625b)}
.mc.here{box-shadow:0 0 0 2px var(--ink,#2a2320)}
.mc .hr{position:absolute;right:11px;top:11px;z-index:2;font:700 11px/1 Manrope,sans-serif;font-style:normal;background:var(--ink,#2a2320);color:var(--bg,#fbf8f4);border-radius:999px;padding:5px 8px}
.fm-bot{flex:none;display:flex;gap:8px;padding-top:12px}
.fm-bot a{flex:1;display:flex;justify-content:center;align-items:center;height:46px;padding:0 14px;border-radius:999px;font:700 14px/1 Manrope,sans-serif;white-space:nowrap}
.fm-sh a.fm-all{background:var(--ink,#2a2320);color:var(--bg,#fbf8f4)}
.fm-sh a.fm-how{background:var(--card,#fbf8f4)}
.fm-dim{display:none}
.fm-tb .fm-pc{display:none}

@media (min-width:761px){
  .fm-dim{display:block;position:fixed;inset:0;z-index:9690;background:rgba(20,15,12,.38);opacity:0;transition:opacity .2s}
  .fm-dim[hidden]{display:none}
  .fm-dim.on{opacity:1}
  .fm-sh{bottom:auto;height:auto;max-height:100vh;overflow:auto;padding:0 max(40px,calc((100vw - 1160px)/2)) 40px;border-radius:0 0 28px 28px;box-shadow:0 30px 70px rgba(42,35,32,.25)}
  .fm-top{height:auto;align-items:flex-end;padding:26px 0 22px}
  .fm-h{font-size:26px}
  .fm-sub{display:block}
  .fm-bot{display:none}
  .fm-tb{align-items:center;gap:10px}
  .fm-tb .fm-pc{display:flex;align-items:center;height:44px;padding:0 22px;border-radius:999px;font:700 15px/1 Manrope,sans-serif;white-space:nowrap}
  .fm-tb .fm-ic{width:44px;height:44px}
  .fm-grid{grid-template-columns:repeat(5,1fr);grid-auto-rows:auto;gap:26px 24px;perspective:900px}
  .mc{display:block;aspect-ratio:158/226;padding:0;border-radius:16px}
  .mc .ph{position:absolute;left:30px;right:7px;top:7px;bottom:7px}
  .mc .nm{position:absolute;left:0;top:0;bottom:0;width:30px;padding:0 0 12px;align-items:flex-end;justify-content:center}
  .mc .nm b{display:block;width:auto;writing-mode:vertical-rl;transform:rotate(180deg);font:600 14px/1 Manrope,sans-serif;letter-spacing:.84px}
  .mc .nm b span{display:inline-block;margin-top:8px;opacity:.85}
  .mc .hr{top:14px;right:14px}
  .mc:hover{box-shadow:0 1px 1.5px rgba(40,25,10,.16),0 6px 14px -2px rgba(40,25,10,.2),-12px 14px 28px -8px rgba(40,25,10,.38)}
  .mc.here:hover{box-shadow:0 0 0 2px var(--ink,#2a2320)}
}
/* ПК: у кожної карти свій тихий рух (після появи), без стрибка — починається і закінчується у спокої */
@media (min-width:761px) and (prefers-reduced-motion:no-preference){
  .fm-sh.on .mc.mv{animation:var(--an) var(--t,6s) ease-in-out calc(var(--d,0s) + .9s) infinite}
  .mc.sway{--an:fmSway;transform-origin:50% 100%}.mc.flt{--an:fmFloat}.mc.tilt{--an:fmTilt}.mc.brth{--an:fmBreathe}.mc.pan{--an:none}
  .fm-sh.on .mc.pan .ph i.on{animation:fmPan 9s ease-in-out infinite alternate}
}
@keyframes fmSway{0%,100%{transform:none}25%{transform:rotate(-1.5deg)}75%{transform:rotate(1.5deg)}}
@keyframes fmFloat{0%,100%{transform:none}50%{transform:translateY(-7px)}}
@keyframes fmTilt{0%,100%{transform:none}25%{transform:perspective(900px) rotateY(-7deg)}75%{transform:perspective(900px) rotateY(7deg)}}
@keyframes fmBreathe{0%,100%{transform:none}50%{transform:scale(1.025)}}
@keyframes fmPan{from{transform:scale(1.04) translate(-2%,-1.5%)}to{transform:scale(1.09) translate(2%,1.5%)}}
@media (prefers-reduced-motion:reduce){.fm-sh,.mc,.fm-dim{transition:none}.mc{transform:none}}