/* SWATCH-EVERYWHERE-S102-v1: ті самі правила і для результатів пошуку в шапці (#flsResults) — пошук з будь-якої сторінки.
   SWATCH-PIN-S102-v1 — картка кольору в колекції: справжнє фото тканини на формі з Blender («взірець висить»), тінь під лампою
   «в кімнаті», тканину видно з фактурою. Колекція — одна форма; постачальник — край.
   SWATCH-ZOOM-S102-v5 (Max 15.10): статус — ТОЧНО як у звичайному вигляді (та сама плашка навігації; телефон — під назвою, відхилення —
   смуга на всю ширину внизу); збільшення — swatchpin.js (той самий кадр, без повороту).
   html[data-swp] ставить swatchpin.js; вимкнено в Адмінці — ні стилів, ні скрипта на сторінці (шаблонний тег). */
.swp-sw{display:none}
html[data-swp] :is(#results,#flsResults):not(.is-fluid) .res-card{height:124px;overflow:visible}   /* висота незмінна — список не стрибає */
/* SWATCH-NOPHOTO-S102-v1: .swp-ph — колір без фото з взірцем «Фото скоро буде» (як картка з фото) */
html[data-swp] :is(#results,#flsResults):not(.is-fluid) .res-card:is(:not([data-c-photo=""]),.swp-ph) .thumb,
html[data-swp] :is(#results,#flsResults):not(.is-fluid) .res-card:is(:not([data-c-photo=""]),.swp-ph)::before,
html[data-swp] :is(#results,#flsResults):not(.is-fluid) .res-card .cf-lb,
html[data-swp] :is(#results,#flsResults):not(.is-fluid) .res-card .cf-go{opacity:0 !important;pointer-events:none}
/* назва й статус — як у згорнутої картки звичайного вигляду (--f:0 скидає всі «розкривні» розрахунки site.css) */
html[data-swp] :is(#results,#flsResults):not(.is-fluid) .res-card .info,
html[data-swp] :is(#results,#flsResults):not(.is-fluid) .res-card > .pill{--f:0;opacity:1 !important}
html[data-swp] :is(#results,#flsResults):not(.is-fluid) .res-card:is(:not([data-c-photo=""]),.swp-ph) .info{left:18px;right:auto;width:270px}
/* взірець: кадр 240px, посередині картки, трохи вище верхнього краю; два кадри лампи (t/b) змішуються за --ly */
html[data-swp] :is(#results,#flsResults):not(.is-fluid) .swp-sw{display:block;position:absolute;z-index:3;pointer-events:none;left:calc(50% - 95px);top:-44px;width:190px;height:190px;contain:layout paint style}   /* SWATCH-SIZE-S103-v1 (Max 18.10): 190 px, як у презентації — зверху трохи, знизу не звисає на сусідню */
html[data-swp] .swp-sw .swp-in{position:absolute;inset:0}
html[data-swp] .lay{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}   /* чіткіша картинка проявляється поверх поточної (без «стрибка») */
html[data-swp] .lay.in{opacity:1}
html[data-swp] .swp-sw b{position:absolute;inset:0;background-repeat:no-repeat;background-size:200% 100%}
html[data-swp] .swp-sw .t{background-position:0 0}
html[data-swp] .swp-sw .b{background-position:100% 0;opacity:var(--ly, .5);transition:opacity .45s ease;will-change:opacity}   /* зміна лампи без перемальовування */
/* поява й прокрутка (як у Постачальника): взірець «вішають» на місце; --dir: -1 — згори (прокрутка вниз), 1 — знизу (вгору) */
html[data-swp] :is(#results,#flsResults):not(.is-fluid) .res-card:not(.swp-dealt) .swp-in{opacity:0;transform:translateY(calc(var(--dir, -1) * 22px)) rotate(calc(var(--dir, -1) * 5deg)) scale(.97)}
html[data-swp] :is(#results,#flsResults):not(.is-fluid) .res-card.swp-dealt .swp-in{transition:transform .55s cubic-bezier(.3,1.45,.55,1) calc(var(--k, 0) * 55ms),opacity .14s ease calc(var(--k, 0) * 55ms)}
html[data-swp] :is(#results,#flsResults):not(.is-fluid) .res-card.swp-still .swp-in{transition:none}
html[data-swp] .swp-sw .swp-in{transform-origin:50% 27.5%}
/* SWATCH-SHADOW-S102-v1 (Max 16.10) — формат 2: у файлі 5 кадрів (тканина t | b | тінь t | b | м'яка); тінь — окремий шар під
   тканиною: при збільшенні не росте, лише йде під тканину й м'якшає (--e пише swatchpin.js) */
.swp-sh{display:none}
html[data-swp-f2] .swp-sw b{background-size:500% 100%}
html[data-swp-f2] .swp-sw .b{background-position:25% 0}
html[data-swp] :is(#results,#flsResults):not(.is-fluid) .swp-sh{display:block;position:absolute;z-index:2;pointer-events:none;left:calc(50% - 95px);top:-44px;width:190px;height:190px;contain:layout style}   /* без paint: розмита тінь виходить за рамку кадру (SWATCH-SHADOW-S102-v6 — без «лінії прямокутника») */
html[data-swp] .swp-sh .swp-in{position:absolute;inset:0;transform-origin:50% 27.5%}
html[data-swp] .swp-sh b{position:absolute;inset:0;background-repeat:no-repeat;background-size:500% 100%}
/* SWATCH-SHADOW-S102-v4 (Max 16.10: «залишайте темну тінь, нехай не стає м'якшою»): тінь одна від початку до кінця — силует
   тканини, затемнений і розмитий (розмиття рахується раз); густина й м'якість не змінюються; піднята тканина — тінь лише
   відходить далі донизу-праворуч. Запечена світла тінь не показується (немає «перемикання» двох тіней). */
html[data-swp] .swp-sh .t,html[data-swp] .swp-sh .b,html[data-swp] .swp-sh .s{display:none}
html[data-swp] .swp-sh .silh{background-position:0 0;filter:brightness(0) blur(8px);opacity:.42;
  transform:translate(calc(7px + 9px * var(--e, 0)), calc(13px + 20px * var(--e, 0)))}
html[data-swp] .res-card.swp-big .swp-sh .silh{will-change:transform}
/* SWATCH-HD-S103-v1 (Max 18.10: «контактна тінь виглядає добре») — формат 3: під силуетом — справжня контактна тінь із Blender
   (кадр 3: щільна там, де тканина торкається стіни); коли тканина піднімається (збільшення), вона плавно зникає. Силует — без змін. */
html[data-swp-f3] .swp-sh .t{display:block;background-position:50% 0;opacity:calc(1 - var(--e, 0))}
/* SWATCH-SIZE-S103-v1: ПК — між картками 20 px (було 12, «щільно»); телефон — без змін */
@media (min-width:601px){ html[data-swp] :is(#results,#flsResults):not(.is-fluid) > .res-card{margin-bottom:20px} }
/* телефон (SWATCH-PHONE-S102-v1): взірець — ближче до правого краю; статус — під назвою (та сама плашка, в рядок);
   відхилення — смуга статусу на всю ширину картки внизу */
@media (max-width:600px){
  html[data-swp] :is(#results,#flsResults):not(.is-fluid) .res-card{height:118px}
  html[data-swp] :is(#results,#flsResults):not(.is-fluid) .res-card:is(:not([data-c-photo=""]),.swp-ph) .info{left:16px;right:150px;width:auto;top:14px;bottom:36px;transform:none;display:flex;flex-direction:column}
  /* SWATCH-STATUSROW-S102-v1 (Max 15.10): нижній рядок картки — лише статус наявності; дата приходу / менеджер / «знято» — рядком вище */
  html[data-swp] :is(#results,#flsResults):not(.is-fluid) .res-card:is(:not([data-c-photo=""]),.swp-ph) .info .restock{margin-top:auto}
  html[data-swp] :is(#results,#flsResults):not(.is-fluid) .res-card:is(:not([data-c-photo=""]),.swp-ph) .info .meta + .disc-badge{margin-top:auto}
  html[data-swp] :is(#results,#flsResults):not(.is-fluid) .res-card:is(:not([data-c-photo=""]),.swp-ph) .info .restock + .disc-badge{margin-top:3px}
  html[data-swp] :is(#results,#flsResults):not(.is-fluid) .swp-sw{left:auto;right:-16px;top:-52px;width:200px;height:200px}
  html[data-swp] :is(#results,#flsResults):not(.is-fluid) .res-card:is(:not([data-c-photo=""]),.swp-ph) > .pill:is(.in_stock,.unknown){left:16px !important;right:auto !important;top:auto !important;bottom:0 !important;
    width:auto !important;height:30px !important;flex-direction:row !important;align-items:center !important;gap:6px !important;padding:0 !important;transform:none !important}
  html[data-swp] :is(#results,#flsResults):not(.is-fluid) .res-card:is(:not([data-c-photo=""]),.swp-ph) > .pill:is(.in_stock,.unknown)::before{width:20px !important;height:20px !important}
  html[data-swp] :is(#results,#flsResults):not(.is-fluid) .res-card:is(:not([data-c-photo=""]),.swp-ph) > .pill.in_stock{--st-tx:var(--ink);font-size:13px !important;font-weight:600 !important;letter-spacing:.01em !important}   /* більший і чіткий (Max 15.10) */
  html[data-swp] :is(#results,#flsResults):not(.is-fluid) .res-card:is(:not([data-c-photo=""]),.swp-ph) > .pill:is(.low,.remnant,.on_order,.out){
    top:auto !important;bottom:0 !important;left:0 !important;right:0 !important;width:auto !important;height:30px !important;
    flex-direction:row !important;justify-content:flex-start !important;gap:7px !important;padding:0 16px !important;border-radius:0 0 16px 16px !important;
    font-size:11px !important;letter-spacing:.07em !important;line-height:1 !important}
  html[data-swp] :is(#results,#flsResults):not(.is-fluid) .res-card:is(:not([data-c-photo=""]),.swp-ph) > .pill:is(.low,.remnant,.on_order,.out)::before{width:15px !important;height:15px !important}
  html[data-swp] :is(#results,#flsResults):not(.is-fluid) .res-card .swp-sw{z-index:5}   /* взірець висить поверх смуги */
  html[data-swp] :is(#results,#flsResults):not(.is-fluid) .swp-sh{left:auto;right:-16px;top:-52px;width:200px;height:200px;z-index:4}
}
@media (prefers-reduced-motion: reduce){ html[data-swp] .swp-sw .b,html[data-swp] .lay{transition:none} html[data-swp] :is(#results,#flsResults):not(.is-fluid) .res-card .swp-in{transition:none !important;transform:none !important;opacity:1 !important} }
/* SWATCH-AB-S102-v1: перемикач вигляду — тихий текст праворуч у рядку лічильника (видно в обох виглядах); телефон — окремий рядок під ним */
:is(#results,#flsResults) .swp-tg{border:0;background:none;padding:4px 2px;cursor:pointer;
  font:600 11px/1 Manrope,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--muted) 40%,transparent)}
:is(#results,#flsResults) > .res-count .swp-tg{position:absolute;right:0;top:50%;transform:translateY(-50%)}
:is(#results,#flsResults) .swp-tg:hover{color:var(--ink)}
:is(#results,#flsResults).is-fluid > .res-count .swp-tg{display:none}
/* телефон: тумблер (увімкнено = взірці); лічильнику — місце з обох боків (лишається по центру; «туман» рядка не обрізається) */
:is(#results,#flsResults) > .res-count.swp-has-sw{padding-left:46px;padding-right:46px}
:is(#results,#flsResults) > .res-count .swp-ct{display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:top}
:is(#results,#flsResults) > .res-count .swp-tg.sw{right:2px;width:34px;height:20px;padding:0;border-radius:10px;text-decoration:none;
  background:color-mix(in srgb,var(--muted) 35%,transparent);transition:background .2s ease}
:is(#results,#flsResults) > .res-count .swp-tg.sw::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .2s ease}
:is(#results,#flsResults) > .res-count .swp-tg.sw[aria-pressed="true"]{background:var(--ink,#222)}
:is(#results,#flsResults) > .res-count .swp-tg.sw[aria-pressed="true"]::after{transform:translateX(14px)}
/* SWATCH-SEARCH-S102-v1: у пошуку рядок «Кольори · N» вирівняний ліворуч і має відступ згори (лінія-роздільник) —
   тексту лишаємо лівий край, тумблер — по центру тексту (а не всього рядка) */
:is(#results,#flsResults) > .res-colors-head.swp-has-sw{padding-left:0}
:is(#results,#flsResults) > .res-colors-head .swp-tg{top:calc(50% + 10px)}
/* SWATCH-TOGGLE-S102-v2: увімкнений тумблер — кружок кольору фону сторінки (темна тема: світла доріжка + темний кружок — видно) */
:is(#results,#flsResults) > .res-count .swp-tg.sw[aria-pressed="true"]::after{background:var(--bg,#fff)}
/* SWATCH-EVERYWHERE-S102-v1: у пошуку внутрішніх сторінок рядки лічильника не «липкі» (static) — тумблер тримаємо в рядку */
#flsResults > .res-count.swp-has-sw{position:relative}