/* FURNVIEW-S103-v5 (телефон — «примірочна», розділ 4) — «Примірка на меблях». Лише transform/opacity (I-110). Студійний фон як на предметній зйомці меблів (еталони Max 19.10).
   Підпис у розгортанні — справжня картка кольору зі списку (.results .res-card: стилі навігації, статуси — ті самі). */

/* 1. картка: виріб майже на всю висоту, тканина відсувається на місце тексту, текст і статус тихо ховаються */
.fv-peek{position:absolute;z-index:22;cursor:zoom-in;opacity:0;transform:translateX(-26px) scale(.92);transform-origin:0 100%;
  transition:opacity .38s ease,transform .62s cubic-bezier(.2,.9,.25,1.04)}
.fv-peek.in{opacity:1;transform:none}
.fv-peek img{position:absolute;max-width:none;height:auto;pointer-events:none;user-select:none}
html[data-swp] :is(#results,#flsResults) .res-card .swp-sw,html[data-swp] :is(#results,#flsResults) .res-card .swp-sh{transition:translate .62s cubic-bezier(.22,.9,.24,1)}
html[data-swp] :is(#results,#flsResults) .res-card.fv-on .swp-sw,html[data-swp] :is(#results,#flsResults) .res-card.fv-on .swp-sh{translate:var(--fv-dx,0) 0}
html[data-swp] :is(#results,#flsResults):not(.is-fluid) .res-card .info,html[data-swp] :is(#results,#flsResults):not(.is-fluid) .res-card > .pill{transition:opacity .3s ease}
html[data-swp] :is(#results,#flsResults):not(.is-fluid) .res-card.fv-on .info,html[data-swp] :is(#results,#flsResults):not(.is-fluid) .res-card.fv-on > .pill{opacity:0 !important}

/* 2. розгортання: сторінка відходить углиб, виріб — на студійному фоні */
html body > .page{transition:transform .6s cubic-bezier(.3,.8,.3,1),opacity .5s ease;transform-origin:50% 30vh}
html.fv-open body > .page{transform:scale(.94);opacity:0;pointer-events:none}
html.fv-open{overflow:hidden}
.fv-stage{position:fixed;inset:0;z-index:9000;opacity:0;transition:opacity .5s ease;overflow:hidden;touch-action:none;
  background:radial-gradient(120% 90% at 50% 40%,#FFFFFF 0%,#FAF9F7 45%,#EFEBE6 100%)}
.fv-stage.in{opacity:1}
.fv-stage.out{opacity:0;transition:opacity .45s ease .1s}
.fv-view{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;cursor:zoom-in;transition:transform .66s cubic-bezier(.22,.9,.24,1)}
.fv-view img{position:absolute;inset:0;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
.fv-view .fv-b{opacity:0;transition:opacity .38s ease}
.fv-view .fv-b.on{opacity:1}
.fv-view img.fv-t{inset:auto;opacity:0;transition:opacity .35s ease;pointer-events:none}   /* плитки наближення (повна роздільність тканини) — проявляються поверх */
.fv-view img.fv-t.on{opacity:1}
.fv-stage.zoom .fv-view{cursor:grab}
.fv-stage.drag .fv-view{cursor:grabbing}

/* закрити */
.fv-x{position:absolute;top:22px;right:22px;width:44px;height:44px;border:0;border-radius:999px;display:grid;place-items:center;cursor:pointer;
  background:var(--card,#FBF8F4);color:var(--ink,#2A2320);box-shadow:0 1px 2px rgba(42,35,32,.1),0 10px 24px -12px rgba(42,35,32,.45);
  opacity:0;transform:scale(.8);transition:opacity .3s ease .2s,transform .4s cubic-bezier(.2,.9,.25,1.2) .2s}
.fv-x svg,.fv-arr svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){.fv-x:hover,.fv-arr:hover:not(:disabled){background:#fff;transform:translateY(-2px)}}   /* телефон: без «залиплого» наведення (Den 20.10: «світяться різним кольором») */
.fv-x,.fv-arr{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.fv-stage.in .fv-x{opacity:1;transform:none}

/* підказка — коротко, сама зникає */
.fv-hint{position:absolute;left:0;right:0;top:26px;text-align:center;font:600 13px/1.4 Manrope,sans-serif;letter-spacing:.02em;color:#7A6F66;
  opacity:0;transition:opacity .5s ease .5s;pointer-events:none}
.fv-stage.in .fv-hint{opacity:1}
.fv-stage.hint-off .fv-hint{opacity:0;transition-delay:0s}
/* лого «Fab Lab · ONLINE» (як у шапці сайту) — по центру вгорі, на висоті хрестика; сцена світла — сталий колір */
.fv-brand{position:absolute;left:50%;top:30px;transform:translateX(-50%);display:inline-flex;align-items:baseline;gap:12px;color:#2B2420;
  pointer-events:none;white-space:nowrap;opacity:0;transition:opacity .5s ease .2s}
.fv-stage.in .fv-brand{opacity:1}
.fv-brand .fl-n{font:800 28px/1 Manrope,sans-serif;letter-spacing:-.03em}
.fv-brand .fl-d{width:1px;height:20px;background:currentColor;opacity:.35}
.fv-brand .fl-o{align-self:flex-start;margin-top:2.25px;font:700 12px/1 Manrope,sans-serif;letter-spacing:.32em;margin-right:-.32em}
.fv-hint{top:84px}

/* 3. знизу — картка кольору зі списку, стрілки по боках */
.fv-dock{position:absolute;left:50%;bottom:calc(5vh + 96px);display:flex;align-items:center;gap:18px;transform:translate(-50%,24px);opacity:0;
  transition:opacity .4s ease .25s,transform .55s cubic-bezier(.2,.9,.25,1) .2s}
.fv-stage.in .fv-dock{opacity:1;transform:translate(-50%,0)}
.fv-stage.zoom .fv-dock{opacity:0;transform:translate(-50%,24px);pointer-events:none;transition-delay:0s}
.fv-cardbox.results{position:relative;width:min(560px,calc(100vw - 180px));height:124px;margin:0;max-width:none}
.fv-stage .fv-cardbox.results .res-card{position:absolute;inset:0;margin:0;transition:opacity .36s ease,transform .42s cubic-bezier(.2,.9,.25,1);
  box-shadow:0 1px 2px rgba(42,35,32,.08),0 18px 36px -18px rgba(42,35,32,.38)}
.fv-stage .fv-cardbox .res-card.in-r{opacity:0;transform:translateX(40px)}
.fv-stage .fv-cardbox .res-card.in-l{opacity:0;transform:translateX(-40px)}
.fv-stage .fv-cardbox .res-card.out-l{opacity:0;transform:translateX(-40px)}
.fv-stage .fv-cardbox .res-card.out-r{opacity:0;transform:translateX(40px)}
.fv-arr{flex:0 0 auto;width:52px;height:52px;border:0;border-radius:999px;display:grid;place-items:center;cursor:pointer;
  background:var(--card,#FBF8F4);color:var(--ink,#2A2320);box-shadow:0 1px 2px rgba(42,35,32,.1),0 10px 24px -12px rgba(42,35,32,.45);
  transition:transform .28s cubic-bezier(.2,.8,.2,1),background-color .28s,opacity .28s}
.fv-arr:active:not(:disabled){transform:scale(.94)}
.fv-arr:disabled{opacity:.3;cursor:default}
.fv-count{position:absolute;left:0;right:0;top:calc(100% + 10px);text-align:center;font:600 12px/1 Manrope,sans-serif;letter-spacing:.06em;color:#7A6F66}   /* світла сцена — сталий колір */

@media (prefers-reduced-motion: reduce){.fv-peek,.fv-view,.fv-dock,.fv-stage,.fv-x,.fv-hint,.fv-brand,.fv-cardbox .res-card,html body > .page{transition:none !important}}

/* 4. ТЕЛЕФОН (v5, Den 19.10 — варіант Б «диван-предмет»): панелі й кнопок немає. Зупинились на тканині — диван у її кольорі виїжджає знизу
   трохи збільшеним і «приземляється»: тінь за силуетом падає на картки, список під ним м'яко розфокусовується (глибина різкості).
   Гортають — зникає. Картки не змінюються (I-109). Рух — лише transform/opacity (I-110). */
.fv-room{position:fixed;z-index:40;left:0;right:0;bottom:0;pointer-events:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
html.fv-room-on .fv-room{pointer-events:auto}
html.fv-open .fv-room{visibility:hidden}
.fv-dof{position:absolute;left:0;right:0;bottom:0;top:-34px;pointer-events:none;opacity:0;transition:opacity .45s ease;
  background:var(--bg,#EDE6DD);   /* колір фону поточної теми (світла / темна / рожева); без backdrop-filter — Den 19.10: «з лагами зумиться» (розмиття під диваном
                                    iPhone перераховував на кожному кадрі, як FAN-SHADE у F-D-48) — туман і так майже непрозорий */
  -webkit-mask:linear-gradient(0deg,#000 0%,rgba(0,0,0,.96) 62%,rgba(0,0,0,.6) 82%,transparent 100%);mask:linear-gradient(0deg,#000 0%,rgba(0,0,0,.96) 62%,rgba(0,0,0,.6) 82%,transparent 100%)}
html.fv-room-on .fv-dof{opacity:1}
.fv-rv{position:absolute;left:50%;bottom:calc(46px + env(safe-area-inset-bottom));opacity:0;transform:translate(-50%,46px) scale(1.12);transform-origin:50% 100%;
  filter:drop-shadow(0 22px 16px rgba(40,25,10,.30)) drop-shadow(0 5px 4px rgba(40,25,10,.30));
  transition:transform .75s cubic-bezier(.16,1,.3,1),opacity .4s ease}
html.fv-room-on .fv-rv{opacity:1;transform:translate(-50%,0)}
.fv-rv img{position:absolute;max-width:none;height:auto;pointer-events:none;opacity:0;transition:none;-webkit-user-drag:none}
.fv-rv img.on{opacity:1}
/* назва кольору — по центру під диваном, тим самим шрифтом, що назва в картці списку; поруч — кружечок самої тканини (Den 19.10) */
.fv-rl{position:absolute;left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;gap:9px;
  opacity:0;transform:translateY(8px);transition:opacity .4s ease .15s,transform .6s cubic-bezier(.16,1,.3,1) .15s}
html.fv-room-on .fv-rl{opacity:1;transform:none}
.fv-rc{flex:0 0 auto;width:24px;height:24px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--card,#FBF8F4),0 1px 4px rgba(0,0,0,.35)}
.fv-rn{min-width:0;font:700 16px/20px Manrope,sans-serif;letter-spacing:-.02em;color:var(--ink,#2A2320);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* активна картка — м'яке сяйво кольору тканини (замість рамки; Den 19.10). Лише opacity; без зміни розмірів і руху */
.fv-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:0;transition:opacity .32s ease-out;   /* сяйво: м'яко гасне на старій і проявляється на новій (без «поїздки») */
  box-shadow:0 0 0 1.5px rgba(var(--fv-gc,120,105,92),.42),0 0 0 5px rgba(var(--fv-gc,120,105,92),.10),0 18px 34px -12px rgba(var(--fv-gc,120,105,92),.62),0 0 46px -6px rgba(var(--fv-gc,120,105,92),.45),0 22px 40px -22px rgba(40,25,10,.38)}
html.fv-room-on .fv-glow.on{opacity:1}
/* MINI: диван з'їжджає за нижній край; знизу — вузька смужка «як в iOS»: ручка (пульсує) + кружечок тканини + «Показати на дивані ↑» */
html.fv-room-mini .fv-rv{opacity:1;transform:translate(-50%,var(--fv-down,200px));transition:transform .42s cubic-bezier(.4,0,.6,1)}
.fv-mini{position:fixed;z-index:41;left:0;right:0;bottom:0;height:calc(44px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--bg,#EDE6DD);border-radius:18px 18px 0 0;
  box-shadow:0 -10px 24px -14px rgba(40,25,10,.35);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:none;
  transform:translateY(100%);pointer-events:none;transition:transform .38s cubic-bezier(.2,.9,.25,1)}
html.fv-room-mini .fv-mini{transform:none;pointer-events:auto;transition-delay:.18s}
.fv-grab{display:block;width:38px;height:5px;border-radius:3px;background:var(--ink,#2A2320);opacity:.32;animation:fvGrab 2.6s ease-in-out infinite}
@keyframes fvGrab{0%,100%{opacity:.25;transform:scaleX(1)}50%{opacity:.6;transform:scaleX(1.25)}}
.fv-mrow{display:flex;align-items:center;gap:7px;font:700 12px/1 Manrope,sans-serif;color:var(--ink,#2A2320)}
.fv-mrow img{width:16px;height:16px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1.5px var(--card,#FBF8F4),0 1px 2px rgba(0,0,0,.25)}
.fv-mrow b{font-weight:700}
.fv-mrow svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
html.fv-room-mini .fv-dof,html.fv-room-mini .fv-rl{opacity:0 !important}
html.fv-room-mini body{padding-bottom:calc(54px + env(safe-area-inset-bottom)) !important}   /* смужка має своє місце — не перекриває тканини */
/* підказка «↓ згорнути» — лише першу появу за сесію, 3 с */
.fv-rh{font:600 11px/1 Manrope,sans-serif;color:var(--muted,#8A7F76);opacity:0;max-width:0;overflow:hidden;white-space:nowrap;transition:opacity .4s ease,max-width .4s ease}
.fv-room.hint .fv-rh{opacity:.85;max-width:120px}
/* застереження в розгортанні — приглушено, під карткою кольору */
.fv-note{position:absolute;left:50%;transform:translateX(-50%);text-align:center;
  font:500 14px/1.5 Manrope,sans-serif;letter-spacing:.01em;color:#6F655D;pointer-events:none;top:calc(100% + 36px);width:max-content;max-width:calc(100vw - 48px)}   /* сцена завжди світла — кольори сталі, не з теми (Den 20.10: у темній темі не видно) */
.fv-note > *{display:block}   /* Den 20.10: речення — окремими рядками; на десктопі кожне — одним рядком */
.fv-note b{font-weight:700;font-size:15px;color:#2B2420;margin-bottom:3px}
/* Den 19.10: «зробите блідним тексти та блоки, але не тканини» — поки видно диван, у неактивних карток блякнуть текст, статус і сам блок
   (фон зливається з тлом сторінки, тінь зникає); ТКАНИНА (.swp-sw) і її тінь — завжди 100 %. Раз на зміну активної, не щокадру. */
html.fv-room-act :is(#results,#flsResults) > .res-card{transition:background-color .32s ease-out,box-shadow .32s ease-out}
html.fv-room-act :is(#results,#flsResults) > .res-card > :is(.info,.pill){transition:opacity .32s ease-out}
html.fv-room-on :is(#results,#flsResults) > .res-card[data-foto]:not(.fv-act){background-color:color-mix(in srgb,var(--card,#FBF8F4) 35%,transparent);box-shadow:none}
html.fv-room-on :is(#results,#flsResults) > .res-card[data-foto]:not(.fv-act) > :is(.info,.pill){opacity:.38 !important}   /* !important — стилі взірців ставлять прозорість тексту/статусу жорстко */
/* темна тема (як у site.css): сяйво — світліший відтінок тканини, інакше темна тканина на темному фоні не світиться */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]):not([data-theme="rose"]) .fv-glow{box-shadow:0 0 0 1.5px rgba(var(--fv-gl,200,190,180),.40),0 0 0 5px rgba(var(--fv-gl,200,190,180),.08),0 16px 34px -12px rgba(var(--fv-gl,200,190,180),.42),0 0 44px -6px rgba(var(--fv-gl,200,190,180),.40),0 22px 40px -20px rgba(0,0,0,.6)}}
:root[data-theme="dark"] .fv-glow{box-shadow:0 0 0 1.5px rgba(var(--fv-gl,200,190,180),.40),0 0 0 5px rgba(var(--fv-gl,200,190,180),.08),0 16px 34px -12px rgba(var(--fv-gl,200,190,180),.42),0 0 44px -6px rgba(var(--fv-gl,200,190,180),.40),0 22px 40px -20px rgba(0,0,0,.6)}
/* місце під диваном — щоб і остання тканина могла стати на «лінію» */
html.fv-room-act body{padding-bottom:calc(var(--fv-rh,180px) + 10px)}
/* збільшена тканина (взірці) виходить за правий край — без цього сторінка ширшає, телефон розширює вікно, і диван з'їжджає за край
   (Den 19.10, торкання взірця). clip, а не hidden: не створює контейнера прокрутки — закріплене меню (sticky) працює як і було */
html.fv-room-act,html.fv-room-act body{overflow-x:clip}
@media (prefers-reduced-motion: reduce){.fv-grab{animation:none !important}.fv-rv,.fv-rv img,.fv-dof,.fv-rl,.fv-glow,.fv-mini,.fv-grab,:is(#results,#flsResults) > .res-card,:is(#results,#flsResults) > .res-card > :is(.info,.pill){transition:none !important;animation:none !important}}
@media (max-width:600px){
  .fv-x{top:12px;right:12px;width:42px;height:42px}
  .fv-brand{top:22px;gap:10px}
  .fv-brand .fl-n{font-size:22px}.fv-brand .fl-d{height:16px}.fv-brand .fl-o{margin-top:1.75px;font-size:9.5px;letter-spacing:.32em;margin-right:-.32em}
  .fv-hint{top:66px;padding:0 64px;font-size:12px}
  .fv-dock{left:16px;right:16px;bottom:max(18px,env(safe-area-inset-bottom));transform:translateY(24px);display:grid;grid-template-columns:44px 1fr 44px;
    grid-template-areas:"card card card" "prev cnt next" "note note note";gap:12px 10px;align-items:center}
  .fv-stage.in .fv-dock{transform:none}
  .fv-stage.zoom .fv-dock{transform:translateY(24px)}
  .fv-stage .fv-cardbox.results{grid-area:card;width:auto;height:108px}
  .fv-prev{grid-area:prev}.fv-next{grid-area:next}
  .fv-arr{width:44px;height:44px}
  .fv-count{grid-area:cnt;position:static;font-size:13px}
  .fv-note{grid-area:note;position:static;transform:none;width:auto;max-width:none;margin-top:2px;font-size:13px;line-height:1.5}   /* Den 20.10: більше й видніше — місця вистачає */
  .fv-note b{font-size:14px}
}

/* FV-NOGALLERY-S103-v1 (Max 25.10): «Жива галерея» й «Розгорнуто» — без дивана (там він ставав не на місце й криво) */
.results.is-fluid .fv-peek,.results.is-fluid .fv-glow{display:none !important}