/* F-D-50 v11. Телефон: список колекції — копія живого сайту (режим «Жива галерея», виміряно 03.11); нове лише кнопка «Деталі ›» у картці.
   «Деталі» (шторка на телефоні, панель справа на комп'ютері) — за пакетом (таблиця F-D-50, Den 03.11): гість не бачить; зареєстрований — наявність,
   характеристики (I-199), взірець, фото, диван звичайної якості; «Я є PRO» 179 — диван покращеної якості + світло; «Салон PRO» 499 — 3D 360° і «Показати клієнту».
   Закрите — з пломбою якості (I-194, макет s106_maket_chips_seal): пломба на початку чипа; дотик — картка пакета «Оформити / Не зараз».
   Екран клієнта (furnview) — точна копія, без змін. Пороги статусів — з Адмінки «Загальні пороги залишків» (тут: значення 03.11). */
#lf{--card2:color-mix(in srgb,var(--ink) 6%,var(--card));--dim:color-mix(in srgb,var(--muted) 72%,var(--bg));--act:var(--ink);--acttx:var(--card);--ok:#2F9E5B;--g1:#F6DB8B;--g2:#C9951F;--text:"Manrope",-apple-system,"Segoe UI",Roboto,sans-serif;--disp:"Unbounded",system-ui,sans-serif}
   /* сайт на телефоні — темна тема; прототип показує саме її */

#lf *{box-sizing:border-box}

#lf button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
#lf svg.seal{width:18px;height:18px;flex:none}

/* прототип: перемикач пакета (видно, не прихований прапорець) */
#lf .proto{position:relative;z-index:30;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 12px 0;padding:7px 9px;border:1px dashed rgba(201,149,31,.5);border-radius:12px;font-size:12px;color:var(--muted)}
#lf .proto .seg{display:flex;flex-wrap:wrap;gap:3px}
#lf .seg{display:inline-flex;background:var(--card);border-radius:999px;padding:3px;gap:2px}
#lf .seg button{padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px;color:var(--muted);white-space:nowrap}
#lf .seg button[aria-pressed="true"]{background:var(--act);color:var(--acttx)}

/* ===== ТЕЛЕФОН: копія живого списку ===== */
#lf .ph{padding:0 24px 200px}
#lf .top{display:flex;align-items:center;justify-content:space-between;padding:10px 0 0;margin:0 -8px}
#lf .logo{display:flex;align-items:center;gap:8px}#lf .logo b{font:800 17px/1 var(--text);letter-spacing:-.03em}#lf .logo i{width:1px;height:14px;background:var(--ink);opacity:.35}#lf .logo span{font:600 8px/1 var(--text);letter-spacing:.3em;margin-top:-6px}
#lf .tb{display:flex;gap:8px}#lf .tb span{height:38px;min-width:38px;border-radius:999px;background:var(--card);display:grid;place-items:center;font-weight:700;font-size:14px;padding:0 14px}
#lf .hero{text-align:center;margin:26px 0 0}
#lf .hero h1{margin:0;font:500 25px/1.15 var(--disp);letter-spacing:-.01em}#lf .hero h1 b{font-weight:800}#lf .hero h1 em{font-style:normal;font-weight:800;background:linear-gradient(#F0A15B,#B8561E);-webkit-background-clip:text;background-clip:text;color:transparent}
#lf .hero p{margin:12px 0 0;color:var(--muted);font-size:14px;line-height:1.5}
#lf .search{display:flex;align-items:center;gap:6px;margin:26px 0 0;padding:7px 7px 7px 16px;border-radius:24px;background:var(--card);box-shadow:0 0 0 1px rgba(255,255,255,.07) inset}
#lf .search span{flex:1;color:var(--dim);font-size:16px;font-weight:600}
#lf .search i{width:46px;height:46px;border-radius:16px;background:#F5EEE6;display:grid;place-items:center}
#lf .search i svg{width:20px;height:20px;stroke:#1B1714;fill:none;stroke-width:2}
#lf .gh{position:sticky;top:0;z-index:10;background:var(--bg);margin:26px -24px 0;padding:10px 24px 10px}
#lf .gh .r{display:flex;align-items:center;justify-content:space-between}
#lf .gh .bk{font-size:14px;font-weight:600;letter-spacing:.06em}
#lf .gh .lg{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:700;letter-spacing:.08em;color:#E8D9C3}
#lf .gh .fan3{position:relative;width:44px;height:36px}#lf .gh .fan3 i{position:absolute;top:2px;left:8px;width:28px;height:30px;border-radius:5px;border:2px solid #EFE8E1;background:#6E665E center/cover;box-shadow:0 2px 6px rgba(0,0,0,.4)}
#lf .gh .fan3 i:nth-child(1){transform:rotate(-14deg) translateX(-6px)}#lf .gh .fan3 i:nth-child(2){transform:rotate(-4deg)}#lf .gh .fan3 i:nth-child(3){transform:rotate(8deg) translateX(6px)}
#lf .gh .r2{display:flex;align-items:center;justify-content:center;position:relative;margin-top:6px;min-height:22px}
#lf .gh .cnt{font-size:12px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
#lf .gh .tg{position:absolute;right:0;width:34px;height:20px;border-radius:999px;background:#EFE8E1}#lf .gh .tg::after{content:"";position:absolute;right:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#1B1714}
#lf .list{display:grid;gap:12px;margin:14px 0 0}
#lf .rc{position:relative;height:118px;border-radius:16px;background:var(--card);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 1px 2px rgba(0,0,0,.08);width:100%;display:block;text-align:left;transition:box-shadow .3s}
#lf .rc .inf{position:absolute;left:16px;top:14px;right:150px;transition:opacity .32s ease-out}
#lf .rc .nm{font:700 16px/20px var(--text);letter-spacing:-.02em}
#lf .rc .mt{font-size:12px;color:var(--muted);letter-spacing:.02em;margin-top:3px}
#lf .rc .det{position:absolute;right:10px;bottom:4px;z-index:3;display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 10px;border-radius:999px;background:rgba(27,23,20,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-size:11.5px;font-weight:700;color:var(--ink)}   /* v18: завжди справа внизу, в ряду статусу — рядків не додає */
#lf .rc .sw{position:absolute;left:150px;top:-42px;width:206px;height:206px;pointer-events:none}
#lf .rc .sw img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
#lf .rc .sw .sh{opacity:.85}
#lf .rc.on{box-shadow:inset 0 0 0 2px rgba(239,232,225,.6),0 0 22px rgba(239,232,225,.12)}
#lf.dock .rc:not(.on) :is(.inf,.pill){opacity:.4}
/* статуси — як на сайті: «в наявності» галочка внизу зліва; решта — смуга 30px на всю ширину знизу */
#lf .pill{display:inline-flex;align-items:center;gap:8px;font:600 13px/1.2 var(--text);letter-spacing:.01em;white-space:nowrap}
#lf .pill::before{content:"";width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
#lf .pill.in_stock{color:color-mix(in srgb,var(--ink) 80%,transparent)}#lf .pill.in_stock::before{color:var(--ok)}
#lf .pill.unknown{color:var(--muted)}
#lf .pill.low{--bg:#B36A10}#lf .pill.remnant{--bg:#7E4FB0}#lf .pill.on_order{--bg:#2F6FA8}#lf .pill.out{--bg:#B23A2B}
#lf .pill.band{background:var(--bg);color:#fff;box-shadow:0 4px 10px -5px var(--bg)}
#lf .pill.in_stock{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E")}
#lf .pill.low{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2.4'/%3E%3Cpath d='M12 3a9 9 0 0 1 0 18z' fill='black'/%3E%3C/svg%3E")}
#lf .pill.remnant{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M8.1 8.1L20 20M8.1 15.9L20 4'/%3E%3C/svg%3E")}
#lf .pill.on_order{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
#lf .pill.out{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
#lf .pill.unknown{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M9.2 9a3 3 0 1 1 4.3 2.7c-.9.4-1.5 1.2-1.5 2.2v.6'/%3E%3Ccircle cx='12' cy='18' r='.6' fill='black'/%3E%3C/svg%3E")}
#lf .pill small{font:600 11.5px/1 var(--text);text-transform:none;letter-spacing:0;opacity:.92}
#lf .rc>.pill{position:absolute;left:16px;bottom:0;height:30px;transition:opacity .32s ease-out}
#lf .rc>.pill.band{left:0;right:0;border-radius:0 0 16px 16px;padding:0 16px;gap:7px;font:700 11.5px/1 var(--text);letter-spacing:.06em;text-transform:uppercase}
#lf .rc>.pill.band::before{width:15px;height:15px}
/* док «Примірки» — як на сайті: з'являється після першого гортання або дотику */
#lf .dk{position:fixed;left:0;right:0;bottom:0;z-index:20;height:179px;transform:translateY(105%);transition:transform .35s cubic-bezier(.22,1,.36,1);background:linear-gradient(to top,var(--bg) 22%,rgba(27,23,20,.85) 60%,rgba(27,23,20,0))}
#lf.dock .dk{transform:none}
#lf .dk .so{position:absolute;left:28px;right:28px;bottom:46px;height:118px;display:flex;align-items:flex-end;justify-content:center}
#lf .dk .so img{max-width:118%;max-height:150px;filter:drop-shadow(0 12px 10px rgba(0,0,0,.45))}
#lf .dk .lb{position:absolute;left:16px;right:16px;bottom:max(12px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;gap:9px;height:24px}
#lf .dk .lb img{width:24px;height:24px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #2A241F,0 1px 4px rgba(0,0,0,.35)}
#lf .dk .lb b{font:700 16px/20px var(--text);letter-spacing:-.02em}#lf .dk .lb small{font:600 11px/1 var(--text);color:var(--muted)}

/* ===== «ДЕТАЛІ»: шторка (телефон) / панель справа (комп'ютер) ===== */
#lf .scrim{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .25s ease}
#lf .sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;height:calc(100% - 44px);max-width:600px;margin:0 auto;background:var(--bg);border-radius:22px 22px 0 0;transform:translateY(102%);transition:transform .32s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column;box-shadow:0 -20px 40px rgba(0,0,0,.4)}
#lf.sh .scrim{opacity:1;pointer-events:auto} #lf.sh .sheet{transform:none} #lf.sh{overflow:hidden}
#lf .shd{flex:none;display:grid;grid-template-columns:1fr auto;align-items:center;padding:8px 14px 8px 18px;position:relative}
#lf .shd::before{content:"";position:absolute;left:50%;top:6px;width:38px;height:4px;border-radius:2px;background:rgba(255,255,255,.18);transform:translateX(-50%)}
#lf .shd b{font:800 20px/1.2 var(--text);margin-top:10px;display:block}
#lf .shd small{color:var(--muted);font-size:12.5px}
#lf .x{width:42px;height:42px;border-radius:999px;background:var(--card);display:grid;place-items:center}
#lf .x svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round}
#lf .body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:0 16px 20px;-webkit-overflow-scrolling:touch}
#lf .acts{flex:none;display:grid;grid-template-columns:1fr auto;gap:10px;padding:10px 16px max(12px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--bg)}
#lf .btn{height:52px;border-radius:14px;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;gap:8px}
#lf .btn.p{background:var(--act);color:var(--acttx)} #lf .btn.s{background:var(--card);padding:0 16px;min-width:132px} #lf .btn.s[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--g2)}
#lf .btn svg:not(.seal){width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#lf .btn.p.lk{background:var(--card);color:var(--ink)}

/* роздивитись */
#lf .look{position:relative;aspect-ratio:1;border-radius:18px;overflow:hidden;background:radial-gradient(120% 90% at 50% 35%,#3A322C,#221D19);touch-action:none;user-select:none;-webkit-user-select:none}
#lf .look>:is(.v-sw,.v-ph,.v-d3,.v-so){position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .25s ease}
#lf .look[data-v="sw"] .v-sw,#lf .look[data-v="ph"] .v-ph,#lf .look[data-v="d3"] .v-d3,#lf .look[data-v="so"] .v-so{opacity:1;pointer-events:auto}
#lf .v-sw .z,#lf .v-ph .z,#lf .v-so .z{position:absolute;inset:-4%;transition:transform .35s cubic-bezier(.22,1,.36,1)}
#lf .v-ph .z{inset:0} #lf .v-so .z{inset:6% 2%}
@media (min-width:900px){ #lf .stage .v-so .z{inset:0} #lf .stage .v-so img{object-fit:fill} #lf .stage .v-so::after{content:"";position:absolute;left:15%;right:15%;bottom:7%;height:26px;border-radius:50%;background:radial-gradient(closest-side,rgba(40,30,22,.22),rgba(40,30,22,0));pointer-events:none} }   /* v20: диван крупніший і стоїть на підлозі */
#lf .look img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none}
#lf .v-ph img{object-fit:cover}
#lf .v-sw .fb{opacity:0}
#lf .v-so{background:linear-gradient(#F7F5F2,#ECE8E3)} #lf .v-so img{filter:drop-shadow(0 18px 14px rgba(40,30,22,.22))}
#lf .v-d3{background:#EFE9E1} #lf .look[data-v="d3"] .lh span{color:#2A2320;background:rgba(255,255,255,.75)}
#lf .r360{position:absolute;left:50%;top:80%;z-index:2;width:58px;height:58px;border-radius:50%;transform:translate(-50%,-50%);background:#F8F4EF;color:#2A2320;font:700 13px/1 var(--text);box-shadow:0 0 0 1px rgba(138,127,116,.45),0 8px 18px -8px rgba(40,30,22,.5);cursor:ew-resize;touch-action:none;display:grid;place-items:center}   /* v22: «360°» на передньому краї овалу */
#lf .v-d3 canvas{position:absolute;inset:0;width:100%;height:100%}
#lf .v-d3 .ld{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:13px}
#lf .lh{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:center;pointer-events:none}
#lf .lh span{font-size:12px;font-weight:600;color:#fff;background:rgba(0,0,0,.42);padding:5px 10px;border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#lf .look[data-v="so"] .lh span{color:#2A2320;background:rgba(255,255,255,.75)}
#lf .qual{position:absolute;left:10px;top:10px;z-index:3;display:none;align-items:center;gap:6px;height:32px;padding:0 11px 0 7px;border-radius:999px;background:rgba(42,36,31,.92);color:var(--ink);font-size:12px;font-weight:700;box-shadow:0 4px 12px rgba(0,0,0,.25)}
#lf .look[data-v="so"] .qual:not(.nak){display:inline-flex} #lf .look[data-v="d3"].naked .nak{display:inline-flex}
#lf .subh{position:absolute;left:50%;bottom:52px;z-index:4;transform:translate(-50%,8px);display:flex;align-items:center;gap:8px;max-width:calc(100% - 24px);padding:8px 8px 8px 10px;border-radius:14px;background:rgba(42,36,31,.94);color:var(--ink);font-size:12.5px;font-weight:600;line-height:1.3;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;box-shadow:0 10px 24px -10px rgba(0,0,0,.6)}
#lf .subh.on{opacity:1;transform:translate(-50%,0);pointer-events:auto} #lf .subh button{flex:none;height:30px;padding:0 12px;border-radius:10px;background:var(--act);color:var(--acttx);font-weight:800;font-size:12px}
#lf .unf{position:absolute;right:10px;top:10px;z-index:3;display:none;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;background:rgba(42,36,31,.92);color:var(--ink);font-size:12px;font-weight:700;box-shadow:0 4px 12px rgba(0,0,0,.25)}
#lf .look:is([data-v="sw"],[data-v="ph"]) .unf{display:inline-flex}   /* v20: «Фото» = розгорнутий взірець */
#lf .qual.hq{background:rgba(255,255,255,.85);color:#2A2320}
#lf .lrow{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:10px 0 0}
#lf .lrow .seg button{display:inline-flex;align-items:center;gap:5px;padding:8px 11px;font-size:12.5px}
#lf .lrow .seg button .seal{width:15px;height:15px}
#lf .lit{display:flex;gap:6px;margin:8px 0 0;height:34px;align-items:center}
#lf .lit span{font-size:12px;color:var(--muted);margin-right:2px;display:inline-flex;align-items:center;gap:5px}
#lf .lit button{padding:6px 11px;border-radius:999px;background:var(--card);font-size:12.5px;font-weight:700;color:var(--muted);display:inline-flex;align-items:center;gap:5px}
#lf .lit button[aria-pressed="true"]{color:var(--acttx);background:var(--act)}
#lf .lit.off{visibility:hidden}
#lf .lit .li{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}   /* v21: піктограма світла — зрозуміло без підпису */
#lf .look[data-light="warm"] :is(.v-sw .fa,.v-sw .fb,.v-ph img,.v-so img){filter:sepia(.22) saturate(1.08) brightness(.97)}
#lf .look[data-light="cool"] :is(.v-sw .fa,.v-sw .fb,.v-ph img,.v-so img){filter:saturate(.92) hue-rotate(6deg) brightness(1.04)}

#lf .sec{margin:22px 0 0}
#lf .sec h2{margin:0 0 10px;font:700 12px/1.2 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;align-items:baseline}
#lf .sec h2 small{letter-spacing:0;text-transform:none;font-weight:600;color:var(--dim);font-size:11.5px}
#lf .box{background:var(--card);border-radius:16px;padding:14px}
/* наявність */
#lf .stl{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:34px}
#lf .stl .pill{font-size:15px}#lf .stl .pill.band{border-radius:10px;padding:8px 12px;text-transform:uppercase;letter-spacing:.06em;font-size:12.5px;font-weight:700}
#lf .stl .m{font-size:13px;color:var(--muted);text-align:right}#lf .stl .m b{color:var(--ink);font-size:15px}
#lf .stx{font-size:13.5px;color:var(--muted);margin:10px 0 0;line-height:1.45}
#lf .fseg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0 0}
#lf .fseg button{height:58px;border-radius:12px;background:var(--card2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-weight:700;font-size:13px;color:var(--muted)}
#lf .fseg button small{font-weight:600;font-size:11px;opacity:.8}
#lf .fseg button[aria-pressed="true"]{background:var(--act);color:var(--acttx)}
#lf .enough{display:flex;align-items:baseline;gap:8px;margin:14px 0 2px;min-height:40px}
#lf .enough .n{font:800 32px/1 var(--text);letter-spacing:-.02em}
#lf .enough .w{font-size:15px;font-weight:700}#lf .enough .w small{display:block;color:var(--muted);font-weight:500;font-size:12px}
#lf .ex{font-size:11.5px;color:var(--dim);margin-top:8px}
/* ХАРАКТЕРИСТИКИ: 2×2 плитки з тонкими піктограмами + шкала зносостійкості на всю ширину */
#lf .spg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#lf .sp{background:var(--card);border-radius:14px;padding:12px 12px 13px;min-height:96px;display:flex;flex-direction:column;gap:6px}
#lf .sp .ic{width:28px;height:28px;border-radius:9px;background:var(--card2);display:grid;place-items:center}
#lf .sp .ic svg{width:17px;height:17px;stroke:#E8D9C3;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#lf .sp .k{font-size:11.5px;color:var(--muted);letter-spacing:.02em}
#lf .sp .v{font:800 17px/1.15 var(--text);letter-spacing:-.01em}
#lf .sp .h{font-size:11.5px;color:var(--dim);line-height:1.35}
#lf .sp.wide{grid-column:1/3;min-height:0}
#lf .sp.wide .row{display:flex;align-items:center;gap:10px}
#lf .mtr{position:relative;height:8px;border-radius:4px;margin:10px 0 6px;background:linear-gradient(90deg,#4A413A 0 20%,#6B5F57 20% 40%,#9C8B7C 40% 100%)}
#lf .mtr i{position:absolute;top:-5px;width:18px;height:18px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px var(--card);transform:translateX(-50%)}
#lf .mtl{display:grid;grid-template-columns:20% 20% 60%;font-size:10.5px;color:var(--dim)}
#lf .mtl span:last-child{text-align:right}
#lf .src{font-size:11.5px;color:var(--dim);margin-top:10px}
#lf .lock .sp .v{color:transparent;position:relative;width:var(--w,70%)}
#lf .lock .sp .v::after{content:"";position:absolute;inset:3px 0;border-radius:6px;background:linear-gradient(90deg,#3B342E,#4A413A,#3B342E)}
#lf .lock .sp .h{visibility:hidden}
#lf .lockcta{margin:12px 0 0;display:grid;gap:8px;text-align:center}
#lf .lockcta p{margin:0;font-size:13px;color:var(--muted)}
#lf .lockcta .btn{height:48px;background:var(--act);color:var(--acttx)}
#lf .empty{font-size:14px;color:var(--muted);background:var(--card);border-radius:14px;padding:14px}
/* схожі */
#lf .sim{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#lf .sim button{background:var(--card);border-radius:14px;padding:6px 6px 9px;text-align:left}
#lf .sim img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block}
#lf .sim b{display:block;font-size:13px;margin:7px 2px 3px}
#lf .sim .pill{font-size:11px;gap:4px}#lf .sim .pill::before{width:13px;height:13px}
#lf .sim .pill.band{padding:3px 7px;border-radius:6px;font-size:9.5px;text-transform:uppercase;font-weight:700}
/* гість: що дає реєстрація */
#lf .gl{display:grid;gap:10px;margin:6px 0 0}
#lf .gl div{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.4}
#lf .gl svg{width:20px;height:20px;flex:none;stroke:var(--ok);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}

/* картка пакета (I-194, макет s106) */
#lf .pk{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.55);display:none;align-items:flex-end;justify-content:center;padding:16px}
#lf.pko .pk{display:flex}
#lf .pk .cd{width:min(400px,100%);background:#F8F4EF;color:#2A2320;border-radius:20px;padding:28px 24px 20px;text-align:center;position:relative;box-shadow:0 24px 60px -20px rgba(0,0,0,.6);margin-bottom:max(0px,env(safe-area-inset-bottom))}
#lf .pk .cd .seal{width:64px;height:64px;display:block;margin:0 auto 12px}
#lf .pk h3{margin:0 0 8px;font:800 22px/1.2 var(--text)}
#lf .pk p{margin:0 0 6px;font-size:15px;line-height:1.5;color:#524944}
#lf .pk .pr{font-size:17px;font-weight:700;margin:12px 0 16px}
#lf .pk .go{display:block;width:100%;height:50px;border-radius:12px;background:#2A2320;color:#F8F4EF;font-weight:800;font-size:16px}
#lf .pk .later{display:block;width:100%;margin-top:10px;height:36px;font-size:15px;font-weight:600;color:#524944}
#lf .pk .cx{position:absolute;right:14px;top:12px;width:32px;height:32px;font-size:22px;color:#524944}

/* екран клієнта — копія нинішнього furnview (не змінюю) */
#lf .fv{position:fixed;inset:0;z-index:60;background:radial-gradient(120% 70% at 50% 40%,#FFFFFF,#F4F2EF 70%,#EEEBE7);color:#2B2420;display:none;font-family:var(--text)}
#lf.fvo .fv{display:block} #lf.fvo{overflow:hidden}
#lf .fv .brand{position:absolute;left:50%;top:22px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;color:#2B2420}
#lf .fv .brand .n{font:800 21px/1 var(--text);letter-spacing:-.03em}#lf .fv .brand .d{width:1px;height:18px;background:#2B2420;opacity:.35}#lf .fv .brand .o{font:600 10px/1 var(--text);letter-spacing:.32em;margin-top:-8px}
#lf .fv .fx{position:absolute;right:12px;top:12px;width:42px;height:42px;border-radius:999px;background:#2A241F;color:#EFE8E1;display:grid;place-items:center}
#lf .fv .fx svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round}
#lf .fv .hint{position:absolute;left:0;right:0;top:66px;text-align:center;font-size:12px;color:#7A6F66;transition:opacity .4s ease} #lf .fv.hint-off .hint{opacity:0}
#lf .fv .vw{position:absolute;left:0;right:0;top:66px;bottom:290px;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:pan-y}
#lf .fv .vw img{width:min(118%,1100px);max-width:none;filter:drop-shadow(0 20px 16px rgba(40,30,22,.16))}
#lf .fv .fd{position:absolute;left:16px;right:16px;bottom:max(16px,env(safe-area-inset-bottom));max-width:560px;margin:0 auto}
#lf .fv .fc{height:108px;border-radius:16px;background:#2A241F;color:#EFE8E1;display:grid;grid-template-columns:88px 1fr auto;gap:12px;align-items:center;padding:0 16px 0 10px;box-shadow:0 14px 30px -18px rgba(0,0,0,.6)}
#lf .fv .fc img{width:88px;height:88px;border-radius:10px;object-fit:cover}
#lf .fv .fc b{display:block;font:700 16px/1.25 var(--text)}#lf .fv .fc small{display:block;font-size:12px;color:#B9AEA4;margin-top:3px}
#lf .fv .fc .pill{flex-direction:column;gap:4px;font-size:11.5px;white-space:normal;text-align:center}
#lf .fv .fc .pill.in_stock{color:#B9AEA4}#lf .fv .fc .pill.in_stock::before{width:26px;height:26px}
#lf .fv .fc .pill.band{border-radius:8px;padding:6px 8px;font-size:10px;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
#lf .fv .nav{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;margin:12px 0 0}
#lf .fv .nav button{width:44px;height:44px;border-radius:999px;background:#2A241F;color:#EFE8E1;display:grid;place-items:center}
#lf .fv .nav svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
#lf .fv .nav span{text-align:center;font-size:13px;color:#7A6F66}
#lf .fv .fn{margin:14px 0 0;text-align:center;font-size:13px;line-height:1.45;color:#6F655D}
#lf .fv .fn b{display:block;color:#2B2420;font-size:14px;font-weight:700;margin-bottom:2px}#lf .fv .fn span{display:block}

#lf .toast{position:fixed;left:50%;bottom:190px;z-index:80;transform:translate(-50%,10px);background:#EFE8E1;color:#1B1714;font-weight:700;font-size:13px;padding:10px 14px;border-radius:12px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;max-width:88vw;text-align:center}
#lf .toast.on{opacity:1;transform:translate(-50%,0)}

/* ===== КОМП'ЮТЕР (на основі v9): велика сцена · віяло кольорів унизу · панель справа фіксованої ширини (лише з пакетом) ===== */
#lf .dt{display:none}
@media (min-width:900px){
  #lf .ph,#lf .dk,#lf .scrim{display:none!important}
  #lf .proto{position:fixed;left:16px;top:8px;margin:0;background:rgba(27,23,20,.9)}
  #lf .dt{display:grid;height:100vh;grid-template-columns:minmax(0,1fr) 400px;grid-template-rows:minmax(0,1fr)}   /* v19: без чорної смуги знизу — взірці лежать у самій сцені */
  #lf.guest .dt{grid-template-columns:minmax(0,1fr)}
  #lf .stage{grid-row:1;grid-column:1;position:relative;padding:66px 28px 16px;display:flex;flex-direction:column;min-height:0}
  #lf .stage .ti{display:flex;align-items:baseline;gap:14px;margin:0 0 10px}
  #lf .stage .ti b{font:800 30px/1 var(--text);letter-spacing:-.02em;min-width:178px;font-variant-numeric:tabular-nums}
  #lf .stage .ti{height:36px;align-items:center!important} #lf .stage .ti b{flex:none;width:var(--tw,190px);white-space:nowrap} #lf .stage .ti #lf-tst{flex:none;width:300px;display:flex;align-items:center}   /* v20: місця фіксовані — при зміні кольору нічого не скаче */
  #lf .stage .ti .pill{font-size:14px}#lf .stage .ti .pill.band{padding:6px 10px;border-radius:8px;text-transform:uppercase;letter-spacing:.06em;font-size:11.5px;font-weight:700}
  #lf .stage .ti small{color:var(--muted);font-size:13px}
  #lf .stage .look{flex:1;aspect-ratio:auto;min-height:0;cursor:crosshair}
  /* v17: перемикачі розведено по боках сцени — зліва «що показати», справа «світло»; кнопки стоять дугою навколо предмета (погляд іде від центру назовні) */
  #lf .stage .ctl{position:static}
  #lf .stage .ctl .lrow,#lf .stage .ctl .lit{position:absolute;top:calc(50% + 34px);transform:translateY(-50%);z-index:6;margin:0;height:auto}
  #lf .stage .ctl .lrow{left:46px;flex-direction:column;align-items:flex-start;gap:0}   /* підпис над кнопками */
  #lf .stage .ctl .lit{right:46px;left:auto}   /* світло — справа, дзеркально до лівих кнопок */
  #lf .stage .ctl .lit button:nth-of-type(1),#lf .stage .ctl .lit button:nth-of-type(3){transform:translateX(-18px)} #lf .stage .ctl .lit button:nth-of-type(1):active,#lf .stage .ctl .lit button:nth-of-type(3):active{transform:translate(-18px,4px)!important}
  #lf .stage .ctl .seg,#lf .stage .ctl .lit{display:flex;flex-direction:column;gap:10px;background:none;padding:0;box-shadow:none}
  #lf .stage .ctl .lrow .seg{align-items:flex-start} #lf .stage .ctl .lit{align-items:flex-end}
  /* v18: об'ємні кнопки (як 3D-клавіші): світлий верхній край, бічна грань знизу, м'яка тінь; натиск — кнопка опускається */
  #lf .stage .ctl .seg button,#lf .stage .ctl .lit button{height:44px;padding:0 20px;border-radius:14px;font-size:13.5px;font-weight:800;letter-spacing:.01em;color:#EFE8E1;
    background:linear-gradient(180deg,#4B4139 0%,#342D27 55%,#2A241F 100%);border:1px solid rgba(255,255,255,.06);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.4),0 5px 0 #17120F,0 12px 18px -6px rgba(0,0,0,.65);transition:transform .12s,box-shadow .12s,background .2s}
  #lf .stage .ctl .seg button:active,#lf .stage .ctl .lit button:active{transform:translateY(4px)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 0 #17120F,0 4px 8px -4px rgba(0,0,0,.6)}
  #lf .stage .ctl .seg button[aria-pressed="true"],#lf .stage .ctl .lit button[aria-pressed="true"]{color:#1B1714;background:linear-gradient(180deg,#FFFFFF 0%,#F1EAE2 55%,#E2D9CE 100%);border-color:rgba(255,255,255,.5);
    box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.12),0 5px 0 #A99C8E,0 12px 18px -6px rgba(0,0,0,.55)}
  #lf .stage .ctl .seg button:nth-child(1),#lf .stage .ctl .seg button:nth-child(3){transform:translateX(18px)} #lf .stage .ctl .seg button:nth-child(1):active,#lf .stage .ctl .seg button:nth-child(3):active{transform:translate(18px,4px)!important}   /* дуга: крайні кнопки ближче до предмета */

  #lf .stage .unf{right:auto;left:12px;top:12px}
  #lf .stage .qual:not(.nak){top:auto;bottom:198px}   /* «Покращена якість» — внизу зліва, під кутовим пультом місця немає */   /* «Розгорнути взірець» — зліва вгорі, не під гостьовою карткою */
  #lf .stage .ctl .lit #lf-litl{display:none}
  /* v24: режим «Диван» — пульти, як магніти, у верхні кути; диван займає сцену під ними */
  #lf .stage:has(.look[data-v="so"]) .ctl .lrow,#lf .stage:has(.look[data-v="so"]) .ctl .lit{top:128px;transform:none}
  #lf .stage:has(.look[data-v="so"]) .ctl .seg button:nth-child(n),#lf .stage:has(.look[data-v="so"]) .ctl .lit button:nth-of-type(n){transform:none}   /* у куті — рівним стовпчиком */
  #lf.guest .stage:has(.look[data-v="so"]) ~ .gcta,#lf.guest:has(.look[data-v="so"]) .gcta{display:none}   /* у режимі дивана гостьова картка не займає правий кут */   /* без підписів «Показати» / «Світло» — кнопки говорять самі */


  #lf .stage .lh{bottom:auto;top:14px} #lf .stage .subh,#lf .stage .subh.on{bottom:auto;top:52px;left:12px;transform:none}   /* підказка до «Салон PRO» — вгорі, не закриває «360°» */
  #lf .stage .look>:is(.v-sw,.v-ph,.v-so,.v-d3){bottom:186px}   /* предмет — над рядом взірців */
  #lf .stage .look[data-v="d3"]{background:#EFE9E1} #lf .stage .look[data-v="so"]{background:linear-gradient(#F7F5F2,#ECE8E3)}   /* фон сцени суцільний до низу */   /* піднята картка віяла заходить у сцену — підписи вище за неї */
  #lf .fanb{grid-row:1;grid-column:1;align-self:end;margin:0 28px 10px;height:248px;border-radius:0 0 18px 18px;position:relative;z-index:7;pointer-events:none;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x proximity;overscroll-behavior:contain}
  #lf .fanb::-webkit-scrollbar{display:none}
  #lf .fanb ul{display:flex;gap:4px;list-style:none;margin:0;padding:70px 50% 0;height:100%;--w:.3}
  #lf .fanb li,#lf .fanb button{pointer-events:auto}
  #lf .fanb li{flex:none;scroll-snap-align:center;transform-origin:50% 170%;will-change:transform}   /* v15: віяло з першої «Тканини» — картки по дузі, середня піднята й більша */
  #lf .fanb button{width:118px;height:160px;position:relative;display:block;background:none;transition:filter .25s}   /* v18: як картка-зразок у салоні: бирка зверху, тканина звисає під нею */
  #lf .fanb .tg{position:absolute;left:50%;top:2px;transform:translateX(-50%) rotate(calc(var(--r,0deg) * -1));width:max-content;z-index:2;padding:5px 10px;border-radius:10px;background:rgba(27,23,20,.74);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--muted);text-shadow:0 1px 6px rgba(0,0,0,.6);transition:color .25s}   /* v18: верх легкий — лише назва й статус, без плашки */
  #lf .fanb .tg .n{font:800 13px/1 var(--text);letter-spacing:-.01em}
  #lf .fanb .tg .pill{font-size:10.5px;gap:4px}#lf .fanb .tg .pill::before{width:12px;height:12px}
  #lf .fanb .tg .pill.band{height:17px;padding:0 7px;border-radius:5px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;font-size:9px;box-shadow:none}
  #lf .fanb .fs{position:absolute;left:8px;right:8px;top:50px;height:102px;pointer-events:none;filter:drop-shadow(0 8px 9px rgba(0,0,0,.42))}   /* v19: класичний зразок тканини — квадрат із зубчастим краєм (ножиці-зигзаг) */
  #lf .fanb .zs{position:absolute;inset:0;background-size:170%;background-position:center;clip-path:var(--zz)}
  #lf .fanb .zs::after{content:"";position:absolute;inset:0;background:linear-gradient(calc(70deg + var(--w) * 40deg),rgba(255,255,255,.2),rgba(255,255,255,0) 45%,rgba(0,0,0,.22))}   /* світло на тканині — за мишею */
  #lf .fanb button[aria-current="true"] .tg{color:var(--ink)} #lf .fanb button[aria-current="true"] .tg .n{font-size:15px}   /* обраний — яскравіша назва, без рамок і ліній */
  #lf .fanb button:not([aria-current="true"]){filter:brightness(.82)} #lf .fanb button:hover{filter:none}
  #lf .sheet{position:fixed;left:auto;right:0;top:0;bottom:0;width:400px;transform:none;height:auto;max-width:none;margin:0;border-radius:0;box-shadow:none;border-left:1px solid var(--line);z-index:5;transition:none}   /* панель справа фіксованої ширини: нічого не стрибає */
  #lf.guest .sheet{display:none}
  #lf .shd::before{display:none} #lf .shd .x{display:none} #lf .shd b{margin-top:14px}
  #lf .sheet .lookbox{display:none}
  #lf .gcta{position:fixed;right:42px;top:122px;z-index:6;width:300px;background:var(--card);border-radius:16px;padding:16px;display:none;box-shadow:0 18px 40px -18px rgba(0,0,0,.7)}
  #lf.guest .gcta{display:block}
  #lf .gcta b{display:block;font-size:15px;margin-bottom:6px}#lf .gcta p{margin:0 0 12px;font-size:13px;color:var(--muted);line-height:1.45}
  #lf .gcta .btn{height:44px;width:100%;background:var(--act);color:var(--acttx)}
  #lf .toast{bottom:200px}
}
@media (prefers-reduced-motion: reduce){#lf *{transition:none!important}}

/* LIVE-FABRIC-F-D-50-v1: шар «Жива тканина» поверх сторінки колекції */
#lf{position:relative;font:500 15px/1.4 var(--text);color:var(--ink)}
#lf .dt,#lf .gcta{display:none!important}
@media (min-width:900px){
  #lf.on .dt{display:grid!important;position:relative;inset:auto;z-index:auto;background:none;grid-template-columns:minmax(0,1fr) 380px;grid-template-rows:minmax(0,1fr);gap:18px;width:min(1400px,calc(100% - 48px));height:clamp(720px,calc(100vh - 170px),960px);margin:10px auto 26px}
  #lf.on .dt .stage .look>.v-d3{bottom:200px}   /* сфера з колом — над рядом зразків */
  html.lf-on #results,html.lf-on .fv-room,html.lf-on .crumbs,html.lf-on #galleryToggleWrap{display:none!important}   /* у режимі — лише «← Список» у рядку назви */
  #lf.on .dt .sheet{position:relative!important;grid-column:2;grid-row:1;inset:auto!important;width:auto!important;height:100%!important;transform:none!important;border-radius:18px;border:0!important;box-shadow:0 0 0 1px var(--line)}
  #lf.on .dt .stage{padding:0!important}
  #lf.on.guest .gcta{display:block!important;position:absolute;top:70px;right:18px;z-index:8}
  #lf:not(.on) .sheet{display:none}
  #lf .lfx{display:none!important}
  #lf.on .ti>:not(.lfx){display:none!important} #lf.on .ti{height:28px!important;margin:0 0 6px!important}   /* без дубля: назва й статус — у панелі «Деталі» */
  #lf.on .ti .lfx{display:inline-flex!important;align-items:center;margin-left:auto;padding:8px 2px;border:0;background:none;color:var(--ink);font:600 14px/1 Manrope,sans-serif;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}   /* «← Список» — у рядку назви режиму */
}
@media (max-width:899px){ #lf .lfx{display:none} }
#lf .fv,#lf .pk,#lf .toast,#lf .po{z-index:8100}
/* оверлей акції з таймером */
#lf .po{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(10,8,6,.66);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#lf.poo .po{display:flex}
#lf .po .pc{width:min(440px,100%);border-radius:22px;padding:26px 24px 20px;text-align:center;position:relative;color:var(--ink);background:radial-gradient(120% 90% at 50% 0%,#3B2F1D,#211C18 70%);box-shadow:inset 0 0 0 1px rgba(201,149,31,.45),0 30px 70px -20px rgba(0,0,0,.8)}
#lf .po .seal{width:58px;height:58px;display:block;margin:0 auto 10px}
#lf .po h3{margin:0 0 6px;font:800 22px/1.2 var(--text);color:#F6DB8B}
#lf .po p{margin:0 auto 14px;max-width:340px;font-size:14px;line-height:1.45;color:var(--muted)}
#lf .po .tm{display:flex;justify-content:center;gap:8px;margin:4px 0 16px}
#lf .po .tm span{min-width:62px;padding:10px 6px 8px;border-radius:12px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
#lf .po .tm b{display:block;font:800 26px/1 var(--text);font-variant-numeric:tabular-nums;color:var(--ink)}
#lf .po .tm small{display:block;margin-top:5px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
#lf .po .go{display:flex;width:100%;height:50px;border-radius:14px;align-items:center;justify-content:center;background:#F6DB8B;color:#2A1F0A;font-weight:800;font-size:15px;text-decoration:none}
#lf .po .later{display:block;width:100%;margin-top:8px;height:40px;font-size:14px;font-weight:700;color:var(--muted)}
#lf .po .cx{position:absolute;right:12px;top:10px;width:34px;height:34px;font-size:22px;color:var(--muted)}
#lf .pchip{position:fixed;left:12px;bottom:max(14px,env(safe-area-inset-bottom));z-index:7999;display:none;align-items:center;gap:7px;height:36px;padding:0 12px 0 8px;border-radius:999px;background:#2A241F;color:#F6DB8B;font:800 13px/1 var(--text);font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 1px rgba(201,149,31,.5),0 8px 18px -8px rgba(0,0,0,.6)}
#lf.pon .pchip{display:inline-flex}
#lf .pchip .seal{width:20px;height:20px}
#lf.sh .pchip,#lf.fvo .pchip{display:none!important}
#lf .look[data-v="d3"] .lh{top:52px;bottom:auto}   /* підказка сфери — вгорі, під чіпом, не під «360°» */
#lf .fanb .zs.nf{background:repeating-linear-gradient(45deg,#3A322C 0 6px,#332C26 6px 12px)} #lf .fanb .zs.nf::before{content:'Фото скоро';position:absolute;inset:0;display:grid;place-items:center;font:700 11px/1.2 Manrope,sans-serif;color:#B9AEA4;text-align:center}   /* шторка й екран клієнта — без чіпа акції */
/* телефон: «Деталі ›» у картці сайту — справа внизу, в ряду статусу */
.lf-det{position:absolute;right:10px;bottom:4px;z-index:40;display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:999px;background:rgba(27,23,20,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#EFE8E1;font:700 11.5px/1 Manrope,sans-serif;border:0;cursor:pointer}
@media (min-width:900px){ .lf-det{display:none} }
.lf-tog{display:inline-flex;align-items:center;gap:9px;margin-right:30px;padding:10px 2px 10px 4px;border:0;background:none;color:var(--ink);font:600 14px/1 Manrope,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;pointer-events:auto}
.lf-tog::after{content:"→";letter-spacing:0;margin-left:.3em;transition:transform .25s cubic-bezier(.2,.8,.2,1)} .lf-tog:hover::after{transform:translateX(4px)}
.lf-tog .lfg{width:30px;height:30px;border-radius:50%;flex:none;background:radial-gradient(circle at 36% 30%,rgba(255,255,255,.75) 0 6%,transparent 34%),var(--lfg,#B9AEA4) center/180%;box-shadow:inset -4px -6px 10px rgba(0,0,0,.25),0 3px 8px -3px rgba(40,30,22,.45)}   /* міні-сфера в тканині колекції */
html.lf-on .lf-tog::before{content:"←";letter-spacing:0;margin-right:.1em} html.lf-on .lf-tog::after{content:none}
@media (max-width:899px){ .lf-tog{display:none} }

/* LIVE-FABRIC-F-D-50-v2: у кольорах теми сайту (світла «галерея тканин» і темна) — не окрема чорна сторінка */
#lf .look{background:radial-gradient(120% 90% at 50% 35%,var(--card),color-mix(in srgb,var(--ink) 5%,var(--bg)))}
#lf .lh span,#lf :is(.qual,.unf,.subh){background:color-mix(in srgb,var(--card) 90%,transparent);color:var(--ink);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent),0 6px 16px -8px rgba(40,30,22,.35)}
#lf .qual.hq{background:var(--card);color:var(--ink)} #lf .subh button{background:var(--ink);color:var(--card)}
#lf .x,#lf .btn.s,#lf .lit button,#lf .seg,#lf .box,#lf .sp,#lf .sim button,#lf .empty{background:var(--card);color:var(--ink)}
#lf .sp .ic,#lf .fseg button{background:var(--card2)} #lf .sp .ic svg{stroke:var(--muted)}
#lf .sheet,#lf .acts{background:var(--bg)} #lf .acts{border-top-color:var(--line)}
#lf .mtr{background:linear-gradient(90deg,color-mix(in srgb,var(--ink) 14%,var(--card)) 0 20%,color-mix(in srgb,var(--ink) 26%,var(--card)) 20% 40%,color-mix(in srgb,var(--ink) 42%,var(--card)) 40% 100%)}
#lf .mtr i{background:var(--ink);box-shadow:0 0 0 4px var(--card)}
#lf .lock .sp .v::after{background:linear-gradient(90deg,var(--card2),color-mix(in srgb,var(--ink) 10%,var(--card)),var(--card2))}
#lf .fanb .tg{background:color-mix(in srgb,var(--card) 90%,transparent);color:var(--muted);text-shadow:none;box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 7%,transparent)}
#lf .fanb .zs.nf{background:repeating-linear-gradient(45deg,var(--card2) 0 6px,var(--card) 6px 12px)} #lf .fanb .zs.nf::before{color:var(--muted)}
#lf .toast{background:var(--ink);color:var(--card)}
#lf .gcta{background:var(--card);color:var(--ink);box-shadow:0 0 0 1px var(--line),0 18px 40px -18px rgba(40,30,22,.35)}
/* об'ємні кнопки по боках — світлі клавіші; обрана — темна */
#lf .stage .ctl .seg button,#lf .stage .ctl .lit button{color:var(--ink);background:linear-gradient(180deg,color-mix(in srgb,#fff 70%,var(--card)) 0%,var(--card) 55%,color-mix(in srgb,var(--ink) 7%,var(--card)) 100%);border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 color-mix(in srgb,var(--ink) 10%,transparent),0 5px 0 color-mix(in srgb,var(--ink) 18%,var(--bg)),0 12px 18px -8px rgba(40,30,22,.35)}
#lf .stage .ctl .seg button[aria-pressed="true"],#lf .stage .ctl .lit button[aria-pressed="true"]{color:var(--card);background:linear-gradient(180deg,color-mix(in srgb,#fff 12%,var(--ink)) 0%,var(--ink) 100%);border-color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 5px 0 color-mix(in srgb,#000 35%,var(--ink)),0 12px 18px -8px rgba(40,30,22,.45)}
/* акція — світла картка з золотою пломбою */
#lf .po{background:rgba(30,22,16,.42)} #lf .po .pc{background:var(--card);color:var(--ink);box-shadow:0 0 0 1px color-mix(in srgb,var(--g2) 40%,transparent),0 30px 70px -20px rgba(40,30,22,.5)}
#lf .po h3{color:var(--ink)} #lf .po p{color:var(--muted)} #lf .po .tm span{background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)} #lf .po .tm b{color:var(--ink)} #lf .po .tm small{color:var(--muted)}
#lf .po .go{background:var(--ink);color:var(--card)} #lf .po .later,#lf .po .cx{color:var(--muted)}
#lf .pchip{background:var(--card);color:var(--ink);box-shadow:0 0 0 1px color-mix(in srgb,var(--g2) 45%,transparent),0 8px 18px -8px rgba(40,30,22,.35)}
/* LIVE-FABRIC-F-D-50-v3: віяло легке — без розмитих підкладок і тіней-фільтрів (перемальовувались на кожен рух), картки рівні, текст чіткий */
#lf .fanb .tg{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transform:translateX(-50%)!important;background:var(--card)!important}
#lf .fanb .fs{filter:none!important}
#lf .fanb .fs::before{content:"";position:absolute;left:8%;right:8%;bottom:-10px;height:18px;border-radius:50%;background:radial-gradient(closest-side,rgba(40,30,22,.32),rgba(40,30,22,0))}   /* тінь — проста, без фільтра */
#lf .fanb .zs::after{background:linear-gradient(115deg,rgba(255,255,255,.18),rgba(255,255,255,0) 45%,rgba(0,0,0,.18))!important}
#lf .fanb li{will-change:auto!important}

/* LIVE-FABRIC-F-D-50-v4: сцена по центру вікна, панель «Деталі» — праворуч на краю вікна; без «блимання» */
html.lf-pre #results,html.lf-pre .fv-room,html.lf-pre .crumbs{visibility:hidden}
@media (min-width:900px){
  #lf.on .dt{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important;width:var(--lf-sw,1000px);height:var(--lf-sh,720px)!important;margin:12px 0 26px var(--lf-sl,0)!important;gap:0!important}
  #lf.on .dt .sheet{position:fixed!important;right:16px!important;left:auto!important;top:var(--lf-top,120px)!important;bottom:16px!important;width:380px!important;height:auto!important;z-index:60}
}
#lf .po p{max-width:none!important;text-align:left;margin:0 auto 16px!important}
#lf .po .pf{list-style:none;margin:2px auto 0;padding:0;display:inline-grid;gap:7px;text-align:left}
#lf .po .pf li{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--ink)}
#lf .po .pf li::before{content:"";width:18px;height:18px;flex:none;border-radius:50%;background:radial-gradient(circle,#F6DB8B,#C9951F);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11'/%3E%3C/svg%3E") center/contain;box-shadow:inset 0 0 0 9px transparent}
#lf .po .pf li::after{content:none}
#lf .po .pf li{position:relative} #lf .po .pf li>i{display:none}
#lf .po h3{font-size:19px!important;line-height:1.3!important}
#lf .po .pf li::before{-webkit-mask:none!important;mask:none!important;background:#C9951F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat!important}   /* золота галочка */
/* v5: сфера — без рамки, на тлі сторінки (як у першій «Тканині»); підказка «Тягніть…» — у верхньому краї */
@media (min-width:900px){ #lf.on .dt .stage .look[data-v="d3"]{background:transparent!important;box-shadow:none!important;border-radius:0!important}
  #lf.on .dt .stage .look>.v-d3{background:transparent!important} #lf.on .look[data-v="d3"] .lh{top:6px!important} }
/* v5: підказка («Ведіть мишею…» / «Тягніть — оберт 360°…») — піксель у піксель на одній висоті в усіх режимах: Взірець, Диван, Сфера */
@media (min-width:900px){ #lf.on .stage .look .lh,#lf.on .stage .look[data-v] .lh{top:14px!important;bottom:auto!important;left:0!important;right:0!important;transform:none!important} }
/* v5: кадри взірця — частини одного файлу (object-position), без перекодування */
/* v5: віяло — тягнеться мишею; обраний зразок піднятий і більший (плавно, лише він — сусіди не «скачуть») */
@media (min-width:900px){
  #lf .fanb{cursor:grab} #lf .fanb.drag{cursor:grabbing} #lf .fanb.drag button{pointer-events:none}
  #lf .fanb button{transition:transform .55s cubic-bezier(.22,1,.36,1),filter .3s}
  #lf .fanb button[aria-current="true"]{transform:translateY(-52px) scale(1.18);z-index:5}
  #lf .fanb button[aria-current="true"] .tg{background:var(--ink)!important;color:var(--card)!important}
  #lf .fanb button[aria-current="true"] .tg .pill.in_stock{color:var(--card)}
  #lf .fanb button[aria-current="true"] .fs::before{bottom:-16px;opacity:.9}
}
@media (min-width:900px){#lf .fanb button[aria-current="true"] .tg *{color:var(--card)!important;opacity:.85}}
/* v6b: фон сцени = фон сторінки в усіх режимах; оточення сцени зменшується на менших вікнах (сцена — головна) */
@media (min-width:900px){
  #lf.on .dt .stage .look,#lf.on .dt .stage .look[data-v]{background:transparent!important;box-shadow:none!important;border-radius:0!important}
  #lf.on .dt .stage .look>.v-so,#lf.on .dt .stage .look>.v-sw{background:transparent!important}
  #lf.on .dt .sheet{width:var(--lf-pw,380px)!important}
  #lf.on .dt .fanb{zoom:var(--lf-k,1)}
  #lf.on .dt .stage .look>:is(.v-sw,.v-ph,.v-so,.v-d3){bottom:calc(186px * var(--lf-k,1))!important}
  #lf.on .dt .stage .ctl .lrow{transform:translateY(-50%) scale(var(--lf-kc,1));transform-origin:left center}
  #lf.on .dt .stage .ctl .lit{transform:translateY(-50%) scale(var(--lf-kc,1));transform-origin:right center}
  #lf.on .dt .stage:has(.look[data-v="so"]) .ctl .lrow{transform:scale(var(--lf-kc,1));transform-origin:left top}
  #lf.on .dt .stage:has(.look[data-v="so"]) .ctl .lit{transform:scale(var(--lf-kc,1));transform-origin:right top}
}
@media (min-width:900px){#lf.on .dt .r360{transform:translate(-50%,-50%) scale(var(--lf-kc,1))}}
@media (min-width:900px){#lf.on .dt #lf-show,#lf.on .dt #lf-add{white-space:nowrap;font-size:clamp(12px,calc(var(--lf-pw,380px) / 26),15px);padding-left:12px;padding-right:12px}}
@media (min-width:900px){#lf.on .dt .stage .v-so::after{display:none}}
@media (min-width:900px){#lf.on .dt .stage .qual:not(.nak){top:14px!important;bottom:auto!important;left:50%!important;transform:translateX(-50%)}}   /* v6b: «Висока якість» — на місці підказки, не на дивані */
@media (min-width:900px) and (max-width:1600px){#lf.on .dt .acts{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:8px;padding-left:12px;padding-right:12px} #lf.on .dt .btn.s{min-width:0;padding:0 10px}}   /* v6b: вужча панель — обидві кнопки вміщаються */
/* v6d: три положення кнопок. Взірець — по боках посередині, дугою; Диван — верхні кути, дугою; Сфера — нижче, дугою вздовж кола */
@media (min-width:900px){
  #lf.on .dt .stage:has(.look[data-v="so"]) .ctl .seg button:nth-child(1),#lf.on .dt .stage:has(.look[data-v="so"]) .ctl .seg button:nth-child(3){transform:translateX(18px)}
  #lf.on .dt .stage:has(.look[data-v="so"]) .ctl .lit button:nth-of-type(1),#lf.on .dt .stage:has(.look[data-v="so"]) .ctl .lit button:nth-of-type(3){transform:translateX(-18px)}
  #lf.on .dt .stage:has(.look[data-v="d3"]) .ctl .lrow,#lf.on .dt .stage:has(.look[data-v="d3"]) .ctl .lit{top:calc(100% - 248px * var(--lf-k,1) - 22px - 152px * var(--lf-kc,1))!important}
  #lf.on .dt .stage:has(.look[data-v="d3"]) .ctl .lrow{transform:scale(var(--lf-kc,1))!important;transform-origin:left top}
  #lf.on .dt .stage:has(.look[data-v="d3"]) .ctl .lit{transform:scale(var(--lf-kc,1))!important;transform-origin:right top}
  #lf.on .dt .stage:has(.look[data-v="d3"]) .ctl .seg button:nth-child(1){transform:none} #lf.on .dt .stage:has(.look[data-v="d3"]) .ctl .seg button:nth-child(2){transform:translateX(26px)} #lf.on .dt .stage:has(.look[data-v="d3"]) .ctl .seg button:nth-child(3){transform:translateX(66px)}
  #lf.on .dt .stage:has(.look[data-v="d3"]) .ctl .lit button:nth-of-type(1){transform:none} #lf.on .dt .stage:has(.look[data-v="d3"]) .ctl .lit button:nth-of-type(2){transform:translateX(-26px)} #lf.on .dt .stage:has(.look[data-v="d3"]) .ctl .lit button:nth-of-type(3){transform:translateX(-66px)}
}