/* SWATCH-ROW-S100-v3 — рядок колекції (сторінка постачальника + результати пошуку на головній): поруч із назвою — клаптики
   тканини її кольорів (ножиці-зигзаг, без рамки), накладаються й перехрещуються; не вміщаються — «+N».
   v3 (Max 13.10: тіні «рівня Junior», білий обідок, жорстка лінія по краях, рух гальмує, сторінка повільніша):
   * тіні — НЕ фільтри: заздалегідь розмиті маски форми зрізу (sw-shadow-contact/soft.png), браузер лише зсуває їх (GPU);
     контактна (щільна, біля краю) + мʼяка від «лампи» над рядком (напрямок і довжина — свої в кожного клаптика);
   * без білої лінії по контуру; краї тканини трохи темніші, бік до лампи — світліший;
   * ряд нічого не обрізає — тіні лягають на фон; рух — лише transform/opacity (композитор), віялом по черзі з перельотом;
     при появі рядка клаптики «розкладаються». Розкладка й світло — swatchrow.js. */
:root{--sw-pink:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M4.20%204.20%20L8.36%200.00%20L12.53%204.20%20L16.69%200.00%20L20.85%204.20%20L25.02%200.00%20L29.18%204.20%20L33.35%200.00%20L37.51%204.20%20L41.67%200.00%20L45.84%204.20%20L50.00%200.00%20L54.16%204.20%20L58.33%200.00%20L62.49%204.20%20L66.65%200.00%20L70.82%204.20%20L74.98%200.00%20L79.15%204.20%20L83.31%200.00%20L87.47%204.20%20L91.64%200.00%20L95.80%204.20%20L100.00%208.36%20L95.80%2012.53%20L100.00%2016.69%20L95.80%2020.85%20L100.00%2025.02%20L95.80%2029.18%20L100.00%2033.35%20L95.80%2037.51%20L100.00%2041.67%20L95.80%2045.84%20L100.00%2050.00%20L95.80%2054.16%20L100.00%2058.33%20L95.80%2062.49%20L100.00%2066.65%20L95.80%2070.82%20L100.00%2074.98%20L95.80%2079.15%20L100.00%2083.31%20L95.80%2087.47%20L100.00%2091.64%20L95.80%2095.80%20L91.64%20100.00%20L87.47%2095.80%20L83.31%20100.00%20L79.15%2095.80%20L74.98%20100.00%20L70.82%2095.80%20L66.65%20100.00%20L62.49%2095.80%20L58.33%20100.00%20L54.16%2095.80%20L50.00%20100.00%20L45.84%2095.80%20L41.67%20100.00%20L37.51%2095.80%20L33.35%20100.00%20L29.18%2095.80%20L25.02%20100.00%20L20.85%2095.80%20L16.69%20100.00%20L12.53%2095.80%20L8.36%20100.00%20L4.20%2095.80%20L0.00%2091.64%20L4.20%2087.47%20L0.00%2083.31%20L4.20%2079.15%20L0.00%2074.98%20L4.20%2070.82%20L0.00%2066.65%20L4.20%2062.49%20L0.00%2058.33%20L4.20%2054.16%20L0.00%2050.00%20L4.20%2045.84%20L0.00%2041.67%20L4.20%2037.51%20L0.00%2033.35%20L4.20%2029.18%20L0.00%2025.02%20L4.20%2020.85%20L0.00%2016.69%20L4.20%2012.53%20L0.00%208.36Z%22/%3E%3C/svg%3E");--sw-c:url("sw-shadow-contact.png");--sw-s:url("sw-shadow-soft.png")}
.results:not(.is-fluid) .coll-card{display:flex;align-items:center;gap:16px;content-visibility:auto;contain-intrinsic-size:auto 104px}
.results:not(.is-fluid) .coll-card > span:first-of-type{flex:0 0 270px;min-width:0}
.results:not(.is-fluid) .coll-card :is(.cname,.cmeta){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* назва й рядок постачальника — завжди один рядок (не розтягують картку) */
.results:not(.is-fluid) .coll-card .coll-right{flex:0 0 auto;margin-left:auto}
/* ПК (Max 13.10): чипи — стовпчиком, центрованим по лінії стрілки (1 чип — навпроти стрілки, 2 — вище й нижче, 3 — середній на лінії).
   Колонка висотою 0 по центру картки, вміст симетрично виходить угору й униз — висота картки не змінюється. */
@media (min-width:601px){
  .results:not(.is-fluid) .coll-card .coll-right{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:3px;
    align-self:center;height:0;position:relative;padding-right:30px;overflow:visible}
  .results:not(.is-fluid) .coll-card .coll-right > :not(.arrow){margin:0}
  .results:not(.is-fluid) .coll-card .coll-right > .arrow{position:absolute;right:0;top:0;transform:translateY(-50%)}
  .results:not(.is-fluid) .coll-card:hover .coll-right > .arrow{transform:translateY(-50%) translateX(-6px) scale(1.3)}
}
.cf-vrow{flex:1 1 auto;min-width:0;position:relative;height:var(--sw-h,38px)}
.cf-vrow.none{height:auto;white-space:nowrap;font:600 11px/1.4 Manrope,sans-serif;color:var(--muted);letter-spacing:.02em}
.cf-t{position:absolute;left:0;top:0;width:30px;height:32px;
  transform:translate(var(--x),var(--y)) rotate(var(--r));
  transition:transform .55s cubic-bezier(.3,1.45,.55,1) calc(var(--k) * 22ms),opacity .12s ease calc(var(--k) * 22ms)}   /* непрозорий майже одразу — без «скла» між клаптиками (Max 13.10) */
.cf-t::before,.cf-t::after{content:"";position:absolute;pointer-events:none;background:rgb(var(--cf-sh));
  transition:transform .55s cubic-bezier(.3,1.45,.55,1) calc(var(--k) * 22ms),opacity .55s ease calc(var(--k) * 22ms)}
.cf-t::before{inset:-9px;opacity:.30;-webkit-mask:var(--sw-s) center/100% 100% no-repeat;mask:var(--sw-s) center/100% 100% no-repeat;transform:translate(var(--sx),var(--sy))}
.cf-t::after{inset:-3px;opacity:.50;-webkit-mask:var(--sw-c) center/100% 100% no-repeat;mask:var(--sw-c) center/100% 100% no-repeat;transform:translate(var(--cx),var(--cy))}
/* зріз ножицями й затінення країв тканини — уже в самій стрічці (прозорий зубчастий край): маски на клаптику немає */
.cf-t > i{position:absolute;inset:0;z-index:1;background-image:var(--src);background-size:calc(var(--n) * 100%) 100%;background-position:var(--bx) 0}
.cf-t.more > i{-webkit-mask:var(--sw-pink) center/100% 100% no-repeat;mask:var(--sw-pink) center/100% 100% no-repeat}
.cf-t.more > i::before{content:attr(data-more);position:absolute;inset:0;z-index:1;display:grid;place-items:center;background:rgba(20,16,12,.58);color:#fff;font:700 10px/1 Manrope,sans-serif}
/* поява рядка: клаптики «розкладаються» зліва */
.cf-vrow.still .cf-t,.cf-vrow.still .cf-t::before,.cf-vrow.still .cf-t::after{transition-duration:0s}   /* поява під час прокрутки — без анімації */
.cf-vrow:not(.dealt) .cf-t{transform:translate(calc(var(--x) - 26px),calc(var(--y) + 4px)) rotate(calc(var(--r) - 16deg));opacity:0}
/* наведення: віялом по черзі, з перельотом; клаптик піднімається — мʼяка тінь довша й світліша */
@media (hover:hover){
  .coll-card:hover .cf-t{transform:translate(var(--hx),var(--hy)) rotate(var(--hr))}   /* без will-change: після руху клаптики перемальовуються начисто (різкі) */
  .coll-card:hover .cf-t::before{transform:translate(var(--shx),var(--shy)) scale(1.06);opacity:.24}
  .coll-card:hover .cf-t::after{transform:translate(var(--chx),var(--chy));opacity:.38}
}
/* SWATCH-ROW-S100-v5: телефон — дотик до колекції (без кліку) = наведення на ПК */
.coll-card.sw-touch .cf-t{transform:translate(var(--hx),var(--hy)) rotate(var(--hr))}
.coll-card.sw-touch .cf-t::before{transform:translate(var(--shx),var(--shy)) scale(1.06);opacity:.24}
.coll-card.sw-touch .cf-t::after{transform:translate(var(--chx),var(--chy));opacity:.38}
/* SWATCH-ROW-S100-v5: напис без фото — «А вже зараз перевірте наявність у «…»» друкується по літерах (swatchrow.js):
   ще не надруковані літери невидимі, але займають своє місце (розмітка не стрибає); курсор — тінь справа від останньої літери.
   Рядки однакові в усіх картках, висота картки — як у картки з клаптиками (Max 13.10):
   «Фото скоро будуть. А вже зараз» / «перевірте наявність у «…»». ПК — 11 px (у найвужчому місці, з чипом, — 208 px;
   довший рядок — 205 px), телефон — 12 px. */
.cf-vrow.none{white-space:normal;font-size:11px}
.cf-vrow.none .sw-cta{color:color-mix(in srgb,var(--ink) 78%,transparent)}
.cf-vrow.none .sw-br{display:none}
.cf-vrow.none .sw-bc{display:block;white-space:nowrap}   /* не вміщається — шрифт менший (fitNone у swatchrow.js) */
.cf-vrow.none .sw-cta.typing .sw-k{visibility:hidden}
.cf-vrow.none .sw-cta .sw-k.on{visibility:visible;color:var(--ink)}
.cf-vrow.none .sw-cta .sw-k.cur{box-shadow:1.5px 0 0 currentColor;animation:sw-caret 1s steps(1) infinite}
@keyframes sw-caret{50%{box-shadow:none}}
/* SWATCH-ROW-S100-v6 (Max 13.10): «зазив» у спокої (swatchrow.js) — віяло «вдихає» на ~третину розкриття, стрілка двічі «тукає» */
.coll-card.sw-breath .cf-t{transform:translate(calc(var(--x) + (var(--hx) - var(--x)) * .35),calc(var(--y) + (var(--hy) - var(--y)) * .35)) rotate(calc(var(--r) + (var(--hr) - var(--r)) * .35))}
.coll-card.sw-breath .cf-t::before{transform:translate(calc(var(--sx) + (var(--shx) - var(--sx)) * .35),calc(var(--sy) + (var(--shy) - var(--sy)) * .35))}
.coll-card.sw-breath .cf-t::after{transform:translate(calc(var(--cx) + (var(--chx) - var(--cx)) * .35),calc(var(--cy) + (var(--chy) - var(--cy)) * .35))}
@media (min-width:601px){ .results:not(.is-fluid) .coll-card .coll-right > .arrow.sw-knock{animation:sw-knock 1.2s ease-in-out} }
@media (max-width:600px){ .results:not(.is-fluid) .coll-card .coll-right .arrow.sw-knock{animation:sw-knock-ph 1.2s ease-in-out} }
@keyframes sw-knock{0%,50%,100%{transform:translateY(-50%)} 25%,75%{transform:translateY(-50%) translateX(-6px) scale(1.3);color:var(--accent);text-shadow:0 0 10px color-mix(in srgb,var(--accent) 35%,transparent)}}
@keyframes sw-knock-ph{0%,50%,100%{transform:translateY(-50%)} 25%,75%{transform:translateY(-50%) translateX(-4px) scale(1.3);color:var(--accent);text-shadow:0 0 10px color-mix(in srgb,var(--accent) 35%,transparent)}}
@media (prefers-reduced-motion: reduce){ .arrow.sw-knock{animation:none} .cf-t,.cf-t::before,.cf-t::after{transition:none} .cf-vrow:not(.dealt) .cf-t{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:1} }
@media (max-width:600px){
  /* SWATCH-ROW-S100-v3 (Max 13.10): телефон — однаковий каркас у кожній картці:
     рядок 1 — назва колекції + чипи; рядок 2 — постачальник · тип · кольорів, на всю ширину й завжди в один рядок;
     стрілка — справа навпроти цих двох рядків; рядок 3 — клаптики по центру або напис в один рядок по центру.
     Відступ під клаптиками = відступу над назвою. */
  .results:not(.is-fluid) .coll-card{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n c" "m m" "row row";
    align-items:center;column-gap:8px;row-gap:2px;padding:14px 40px 18px 16px;position:relative;contain-intrinsic-size:auto 120px}
  .results:not(.is-fluid) .coll-card > span:first-of-type{display:contents}
  .results:not(.is-fluid) .coll-card .cname{grid-area:n;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .results:not(.is-fluid) .coll-card .cmeta{grid-area:m;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .results:not(.is-fluid) .coll-card .coll-right{grid-area:c;display:flex;align-items:center;gap:4px;margin:0;position:static}
  .results:not(.is-fluid) .coll-card .coll-right .arrow{position:absolute;right:14px;top:50%;transform:translateY(-50%)}   /* посередині картки по висоті (Max 13.10) */
  .results:not(.is-fluid) .coll-card:hover .coll-right .arrow{transform:translateY(-50%) translateX(-4px)}
  .results:not(.is-fluid) .coll-card > .cf-vrow{grid-area:row;margin-top:8px;--sw-h:34px}
  /* напис без фото (Max 13.10): два рядки, ліворуч під рядком постачальника, приглушено — частина інформації картки, не окремий об'єкт */
  .results:not(.is-fluid) .coll-card > .cf-vrow.none .sw-br{display:none}
  .results:not(.is-fluid) .coll-card > .cf-vrow.none .sw-bc{display:block}
  .results:not(.is-fluid) .coll-card > .cf-vrow.none .sw-c{display:inline}
  .results:not(.is-fluid) .coll-card > .cf-vrow.none{display:block;height:auto;margin:14px 0 -4px;
    font-size:12px;line-height:1.35;letter-spacing:.01em;white-space:normal;color:color-mix(in srgb,var(--muted) 85%,transparent)}
  .results:not(.is-fluid) .coll-card .coll-right .chip-tag,.results:not(.is-fluid) .coll-card .coll-right .coll-badge{font-size:9.5px;padding:2px 6px;letter-spacing:.02em;margin:0}
  .cf-t{width:25px;height:27px} .cf-t::before{inset:-7.5px;opacity:.36}
  .cf-t::after{content:none}   /* на телефоні контактна тінь майже не видна — шар менше, прокрутка легша */
}