/* CARDFAN-SITE-v1 (F-D-45) — design "card-fan" for ALL storefront pages (page_base.html), via the design slot _design_head.html.
   Styles only: Classic markup and logic are untouched (the Classic slot is empty -> Classic renders byte-for-byte the same).
   - fonts: headings Unbounded, text Manrope (as on the card-fan home);
   - themes Light / Dark / Powder: page_base colours are CSS variables -> a theme is just another set of them;
   - colour and collection lists: tiles (form of the dashboard "Photo" page tiles, card-fan look). Classic keeps circles.
   - gallery (.results.is-fluid): only fonts and background — no tile rules there (fragile PIXI module, I-17). */

/* ---------- tokens: Light (default) ---------- */
:root{--font:"Manrope",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --bg:#EDE6DD;--card:#FBF8F4;--ink:#2A2320;--muted:#8A7F77;--line:#DDD3C6;--accent:#2A2320;
  --cf-inv-bg:#2A241F;--cf-inv-tx:#EFE8E1;--cf-thumb:#E6DED3;--ph-color:#8A7F77;--cf-shadow:rgba(60,40,20,.28);
  --cf-glass:rgba(255,253,250,.62);--cf-hl:rgba(255,255,255,.85);--cf-edge:rgba(255,255,255,.6);--cf-sh:60,40,20;--cf-sbg:rgba(255,253,250,.8)}
/* ---------- Dark: by system (no explicit choice) or chosen ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="rose"]){--bg:#1B1714;--card:#2A241F;--ink:#EFE8E1;--muted:#A89C91;--line:#3A322C;--accent:#EFE8E1;
    --cf-inv-bg:#FBF8F4;--cf-inv-tx:#2A2320;--cf-thumb:#3A322C;--ph-color:#9A8E83;--cf-shadow:rgba(0,0,0,.6);--cf-glass:rgba(42,36,31,.66);--cf-hl:rgba(255,255,255,.07);--cf-edge:rgba(255,255,255,.08);--cf-sh:0,0,0;--cf-sbg:rgba(42,36,31,.84)} }
:root[data-theme="dark"]{--bg:#1B1714;--card:#2A241F;--ink:#EFE8E1;--muted:#A89C91;--line:#3A322C;--accent:#EFE8E1;
  --cf-inv-bg:#FBF8F4;--cf-inv-tx:#2A2320;--cf-thumb:#3A322C;--ph-color:#9A8E83;--cf-shadow:rgba(0,0,0,.6);--cf-glass:rgba(42,36,31,.66);--cf-hl:rgba(255,255,255,.07);--cf-edge:rgba(255,255,255,.08);--cf-sh:0,0,0;--cf-sbg:rgba(42,36,31,.84)}
/* ---------- Powder (variant B) ---------- */
:root[data-theme="rose"]{--bg:#F7E6EA;--card:#FFFFFF;--ink:#4A2436;--muted:#9A7282;--line:#EBCFD7;--accent:#5A2A40;
  --cf-inv-bg:#5A2A40;--cf-inv-tx:#FFF2F5;--cf-thumb:#F1DCE2;--ph-color:#A27A8C;--cf-shadow:rgba(90,42,64,.28);--cf-glass:rgba(255,255,255,.62);--cf-hl:rgba(255,255,255,.95);--cf-edge:rgba(255,255,255,.7);--cf-sh:90,42,64;--cf-sbg:rgba(255,255,255,.9)}

/* ---------- fonts ---------- */
.h1{font-family:"Unbounded",var(--font);font-weight:300;letter-spacing:-.03em}
.h1 b{font-weight:700;letter-spacing:-.035em;font-family:inherit}   /* FONTS-F-D-45: <b> у слогані — Unbounded, як заголовок (правило сайту `*{font-family}` ставило Manrope) */
.h1 *,.modal-title *{font-family:inherit}
.modal-title{font-family:"Unbounded",var(--font);font-weight:700;letter-spacing:-.02em}
.res-count,.chips-label{letter-spacing:.12em}

/* ---------- surfaces that had fixed light colours ---------- */
.modal-box{background:var(--bg)}
.modal-close,.zoom-close{background:var(--card);color:var(--ink)}
.chip{border-radius:999px;border-color:var(--line);background:var(--card);color:var(--ink)}
.chip:hover,.chip.active{background:var(--cf-inv-bg);border-color:var(--cf-inv-bg);color:var(--cf-inv-tx)}
.search-input::placeholder{color:var(--ph-color)}
a:not([class]){color:var(--ink);text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent)}   /* хлібні крихти й прості посилання — колір теми, не синій браузерний */

/* ---------- brand at the bottom: «Fab Lab | ONLINE» instead of the old logo image (no markup change) ---------- */
.logo-bottom{display:flex;justify-content:center;align-items:baseline;gap:10px;color:var(--ink);text-decoration:none}
.logo-bottom img{display:none}
.logo-bottom::before{content:"Fab Lab";font:800 22px/1 Manrope,sans-serif;letter-spacing:-.03em}
.logo-bottom::after{content:"ONLINE";align-self:flex-start;margin-top:1.75px;padding-left:10px;border-left:1px solid color-mix(in srgb,currentColor 35%,transparent);
  font:700 9.5px/1.7 Manrope,sans-serif;letter-spacing:.32em}

/* ---------- LISTS (NOT the gallery): sequential, one under another, normal scroll (Den) ----------
   Colour rows: SCROLL-MORPH-F-D-45 — the row near the screen centre becomes a «photo» (fabric fills the row, text on a glass label),
   the others are «cards» (photo square left + text). Row height is constant (no scroll jumps); the morph lags behind the scroll (cinema).
   --f (0 card … 1 photo) is set by site.js; the label .cf-lb is added by site.js; reduced motion -> cards only. */
.results:not(.is-fluid){max-width:720px}
.results:not(.is-fluid) .res-card{--f:0;position:relative;display:block;height:124px;padding:0;margin:0 0 12px;border:0 !important;border-radius:16px;background:var(--card);
  box-shadow:inset 0 1px 0 var(--cf-hl),0 1px 2px rgba(var(--cf-sh),.08),0 calc(10px + 14px * var(--f)) calc(22px + 20px * var(--f)) -12px rgba(var(--cf-sh),calc(.26 + .14 * var(--f)));
  transform:scale(calc(1 + .015 * var(--f)))}
.results:not(.is-fluid) .res-card:first-of-type{border-top:0 !important}
.results:not(.is-fluid) .res-card .thumb{position:absolute;inset:0;width:auto;height:auto;border-radius:16px;box-shadow:none;background-color:var(--cf-thumb);overflow:hidden;
  clip-path:inset(calc(12px * (1 - var(--f))) calc((100% - 112px) * (1 - var(--f))) calc(12px * (1 - var(--f))) calc(12px * (1 - var(--f))) round calc(10px + 6px * var(--f)))}
.results:not(.is-fluid) .res-card .thumb:hover{transform:none}
/* VOLUME-F-D-45: фото «лежить» над карткою — тінь іде за фото в обох станах; тканина опукла (відблиск + затінення країв) */
.results:not(.is-fluid) .res-card::before{content:"";position:absolute;z-index:0;pointer-events:none;
  top:calc(12px * (1 - var(--f)));bottom:calc(12px * (1 - var(--f)));left:calc(12px * (1 - var(--f)));right:calc((100% - 112px) * (1 - var(--f)));
  border-radius:calc(10px + 6px * var(--f));box-shadow:0 2px 3px rgba(var(--cf-sh),.22),0 calc(8px + 6px * var(--f)) calc(16px + 10px * var(--f)) -6px rgba(var(--cf-sh),.5)}
.results:not(.is-fluid) .res-card .thumb{z-index:1}
.results:not(.is-fluid) .res-card .thumb::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(60% 45% at 22% 12%,rgba(255,255,255,.12),rgba(255,255,255,0) 70%),   /* ANTI-HAZE-F-D-45: відблиск ледь-ледь — без «мутної плівки» на тканині */
             radial-gradient(150% 130% at 50% 45%,rgba(0,0,0,0) 62%,rgba(0,0,0,.22) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -8px 16px -12px rgba(0,0,0,.3)}
.results:not(.is-fluid) .res-card .info,.results:not(.is-fluid) .res-card > .pill{z-index:2}
.dC .results .res-card .info{background:none;border-radius:0;padding:0}   /* HOME-INFO-F-D-45: на головній card-fan є .dC .info (темна плашка сторінки кольору) — у рядку списку не потрібна */
.results:not(.is-fluid) .res-card > .res-card-link{z-index:6}   /* LINK-TOP-F-D-45: невидиме посилання рядка — НАЙВИЩЕ: натискання йде в логіку «Розгорнути» (LIST-ZOOM ловить лише .res-card-link) */
.results:not(.is-fluid) .res-card .thumb>img{object-fit:cover}
/* SHARP-THUMB-F-D-45: фото займає РІВНО видимий квадрат (а не весь рядок) — мініатюра не розтягується в 2–4 рази й одразу чітка; розгортається разом із квадратом */
.results:not(.is-fluid) .res-card .thumb>img{inset:auto;left:calc(12px * (1 - var(--f)));top:calc(12px * (1 - var(--f)));width:calc(100px + (100% - 100px) * var(--f));height:calc(100% - 24px * (1 - var(--f)))}
.results:not(.is-fluid) .res-card .info{position:absolute;left:124px;right:170px;top:50%;transform:translateY(-50%);opacity:clamp(0, calc(1 - (var(--f) - .12) * 6), 1);pointer-events:none}
.results:not(.is-fluid) .res-card > .pill{position:absolute;right:18px;top:50%;transform:translateY(-50%);opacity:clamp(0, calc(1 - (var(--f) - .12) * 6), 1);pointer-events:none}
/* name + code — ONE block, ONE style (Den) */
.results .res-card .nm{display:block;font:800 16px/1.25 Manrope,sans-serif;letter-spacing:-.01em;color:var(--ink)}
.results .res-card .nm .code{color:inherit;font-weight:inherit;margin-left:.28em}
.results .res-card .nm .chip-tag{margin-left:8px;vertical-align:2px}
.results:not(.is-fluid) .res-card .meta{font-size:12.5px;margin-top:3px}
/* the glass label of the «photo» state (added by site.js) */
.cf-lb{position:absolute;left:50%;top:50%;z-index:2;max-width:calc(100% - 32px);padding:8px 14px 9px;border-radius:12px;pointer-events:none;text-align:center;   /* CENTER-LABEL-F-D-45: посередині рядка (Den) */
  opacity:clamp(0, calc((var(--f) - .55) * 2.6), 1);transform:translate(-50%, calc(-50% + 10px * (1 - var(--f))));
  background:color-mix(in srgb,var(--card) 76%,transparent);-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);
  box-shadow:inset 0 1px 0 var(--cf-hl),0 6px 14px -8px rgba(var(--cf-sh),.45)}
.cf-lb .meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;margin-top:5px;color:var(--muted);font-size:12.5px}
.results.is-fluid .cf-lb{display:none}
@media (max-width:600px){
  .results:not(.is-fluid) .res-card{height:108px}
  .results:not(.is-fluid) .res-card .thumb{clip-path:inset(calc(10px * (1 - var(--f))) calc((100% - 98px) * (1 - var(--f))) calc(10px * (1 - var(--f))) calc(10px * (1 - var(--f))) round calc(10px + 6px * var(--f)))}
  .results:not(.is-fluid) .res-card .info{left:108px;right:14px;top:14px;transform:none}
  .results:not(.is-fluid) .res-card > .pill{left:108px;right:auto;top:auto;bottom:12px;transform:none}
  .results .res-card .nm{font-size:15px} }
@media (prefers-reduced-motion: reduce){ .results:not(.is-fluid) .res-card{--f:0 !important;transform:none} }

/* STATUS-B-F-D-45 — filled labels with an icon; EXCEPTIONS stand out, the norm is quiet (Den: ~75% are in stock -> no accent on it).
   in stock: quiet dark check + text colour, no fill · low / remnant / on order / out: solid colour + white text + icon · unknown: outline «?» */
.results .pill,.cf-lb .pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px 0 9px;border-radius:8px;white-space:nowrap;
  font:700 12px/1 Manrope,sans-serif;letter-spacing:.01em;background:var(--st-bg,transparent);color:var(--st-tx,var(--ink));box-shadow:var(--st-sh,none)}
.results .pill .pdot,.cf-lb .pill .pdot{display:none}
#results .res-card .pill{background:var(--st-bg,transparent);color:var(--st-tx,var(--ink));box-shadow:var(--st-sh,none)}   /* лише кольори — сильніше за .dC .pill головної card-fan (кнопки шапки), розміри не чіпаємо */
.results .pill::before,.cf-lb .pill::before{content:"";width:14px;height:14px;flex:0 0 auto;background:currentColor;
  -webkit-mask:var(--st-ic) center/contain no-repeat;mask:var(--st-ic) center/contain no-repeat}
.pill.in_stock::before{color:#2F9E5B;width:18px !important;height:18px !important}   /* галочка «в наявності» — зелена й трохи більша (Den); текст спокійний */
.pill.in_stock{--st-tx:color-mix(in srgb,var(--ink) 80%,transparent);padding-left:2px;
  --st-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")}
.pill.low{--st-bg:#B36A10;--st-tx:#fff;--st-sh:0 4px 10px -5px rgba(179,106,16,.6);
  --st-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")}
.pill.remnant{--st-bg:#7E4FB0;--st-tx:#fff;--st-sh:0 4px 10px -5px rgba(126,79,176,.6);
  --st-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")}
.pill.on_order{--st-bg:#2F6FA8;--st-tx:#fff;--st-sh:0 4px 10px -5px rgba(47,111,168,.6);
  --st-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")}
.pill.out{--st-bg:#B23A2B;--st-tx:#fff;--st-sh:0 4px 10px -5px rgba(178,58,43,.6);
  --st-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")}
.pill.unknown{--st-tx:var(--muted);--st-sh:inset 0 0 0 1.5px color-mix(in srgb,var(--muted) 45%,transparent);
  --st-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")}
/* STATUS-PANEL-F-D-45 (Den: «примітивні чіпи, дорослі люди їх не бачать»): у картці з ВІДСУТНІСТЮ права частина = суцільна кольорова панель
   на всю висоту: великий значок + великий напис капітелями. «В наявності» — тихий, але більший (14px). Етикетка «фото» — великий ярлик. */
.results:not(.is-fluid) .res-card > .pill{font-size:14px;height:auto;gap:8px}
.results:not(.is-fluid) .res-card > .pill::before{width:16px;height:16px}
.results:not(.is-fluid) .res-card > .pill:is(.low,.remnant,.on_order,.out,.unknown){top:0;bottom:0;right:0;transform:none;width:132px;border-radius:0 16px 16px 0;
  flex-direction:column;justify-content:center;gap:8px;padding:0 10px;white-space:normal;text-align:center;
  font:800 13px/1.15 Manrope,sans-serif;letter-spacing:.07em;text-transform:uppercase;box-shadow:none}
.results:not(.is-fluid) .res-card > .pill:is(.low,.remnant,.on_order,.out,.unknown)::before{width:26px;height:26px}
.results:not(.is-fluid) .res-card > .pill.unknown{--st-bg:color-mix(in srgb,var(--muted) 18%,var(--card));--st-tx:var(--ink)}
.results:not(.is-fluid) .res-card:has(> .pill:is(.low,.remnant,.on_order,.out,.unknown)) .info{right:148px}
.cf-lb .pill{height:30px;font-size:13.5px;padding:0 12px 0 10px}
.cf-lb .pill::before{width:16px;height:16px}
@media (max-width:600px){
  .results:not(.is-fluid) .res-card > .pill:is(.low,.remnant,.on_order,.out,.unknown){left:auto;right:0;top:0;bottom:0;width:92px;font-size:11.5px;letter-spacing:.05em;padding:0 6px}
  .results:not(.is-fluid) .res-card > .pill:is(.low,.remnant,.on_order,.out,.unknown)::before{width:22px;height:22px}
  .results:not(.is-fluid) .res-card:has(> .pill:is(.low,.remnant,.on_order,.out,.unknown)) .info{right:100px}
  .results:not(.is-fluid) .res-card > .pill.in_stock{font-size:13px} }
/* INSTOCK-CENTER-F-D-45 (Den): «в наявності» — у тій самій правій зоні, що й панелі: велика зелена галочка по центру, під нею світло-сірий напис; без заливки */
.results:not(.is-fluid) .res-card > .pill.in_stock{top:0;bottom:0;right:0;transform:none;width:132px;height:auto;flex-direction:column;justify-content:center;gap:6px;padding:0 10px;
  font:600 12px/1.2 Manrope,sans-serif;letter-spacing:.02em;color:color-mix(in srgb,var(--muted) 85%,transparent)}
.results:not(.is-fluid) .res-card > .pill.in_stock::before{width:30px !important;height:30px !important}
.results:not(.is-fluid) .res-card:has(> .pill.in_stock) .info{right:148px}
@media (max-width:600px){ .results:not(.is-fluid) .res-card .thumb>img{left:calc(10px * (1 - var(--f)));top:calc(10px * (1 - var(--f)));width:calc(88px + (100% - 88px) * var(--f));height:calc(100% - 20px * (1 - var(--f)))}
  .results:not(.is-fluid) .res-card::before{top:calc(10px * (1 - var(--f)));bottom:calc(10px * (1 - var(--f)));left:calc(10px * (1 - var(--f)));right:calc((100% - 98px) * (1 - var(--f)))}   /* тінь під фото — та сама геометрія, що й квадрат на телефоні */
  .results:not(.is-fluid) .res-card[data-c-photo=""] .thumb::before{left:10px;top:10px;bottom:10px;width:88px;font-size:10px} .results:not(.is-fluid) .res-card > .pill.in_stock{left:auto;right:0;top:0;bottom:0;width:92px;font-size:11px}
  .results:not(.is-fluid) .res-card > .pill.in_stock::before{width:26px !important;height:26px !important}
  .results:not(.is-fluid) .res-card:has(> .pill.in_stock) .info{right:100px} }
/* NO-PHOTO-F-D-45 (Den): колір без фото — той самий квадрат (фон не змінюємо) + напис про фото; такий рядок у «фото» не розгортається */
.results:not(.is-fluid) .res-card[data-c-photo=""] .thumb::before{content:"Фото\Aскоро буде";white-space:pre;position:absolute;left:12px;top:12px;bottom:12px;width:100px;z-index:1;display:grid;place-items:center;text-align:center;   /* рівно в квадрат (рядок без фото не розгортається) */ 
  font:700 11px/1.35 Manrope,sans-serif;letter-spacing:.03em;color:color-mix(in srgb,var(--muted) 90%,transparent);pointer-events:none}
/* NO-GALLERY-F-D-45 (Den): у колекції жодного фото — «Динамічна вітрина» не показується */
body:has(#results .res-card[data-c-photo]):not(:has(#results .res-card[data-c-photo]:not([data-c-photo=""]))) .gallery-toggle-wrap{display:none !important}
.results:not(.is-fluid) .res-card .restock{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}   /* дата приходу — не більше 2 рядків (не вилазить за картку) */
/* немає — фото тканини трохи знебарвлене (відсутність читається й без ярлика) */
.results:not(.is-fluid) .res-card:has(> .pill.out) .thumb>img{filter:grayscale(.75) brightness(1.04);opacity:.8}

/* collections: sequential glass cards (no grid) */
.results:not(.is-fluid) .coll-card{position:relative;margin:0 0 10px;padding:16px 18px;border:0 !important;border-radius:16px;background:var(--card);
  box-shadow:inset 0 1px 0 var(--cf-hl),0 1px 2px rgba(var(--cf-sh),.08),0 10px 22px -12px rgba(var(--cf-sh),.26);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.results:not(.is-fluid) .coll-card:hover{padding-left:18px;transform:translateY(-2px);box-shadow:inset 0 1px 0 var(--cf-hl),0 2px 4px rgba(var(--cf-sh),.1),0 18px 34px -14px rgba(var(--cf-sh),.36)}
.results:not(.is-fluid) .coll-card .cname{font:800 16px/1.25 Manrope,sans-serif;letter-spacing:-.01em}
.results:not(.is-fluid) .coll-card .cmeta{font-size:12.5px}

/* ---------- search on inner pages = the approved card-fan home search (airy glass pill, layered shadow, inverted cam/mic) ---------- */
.search-wrap{max-width:708px;background:transparent}
.search-row{width:min(660px,100%);margin:0 auto;display:flex;align-items:center;gap:8px;background:var(--cf-sbg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-radius:24px;padding:9px 9px 9px 22px;
  box-shadow:0 0 0 1px var(--cf-edge) inset,0 1px 2px rgba(var(--cf-sh),.06),0 10px 22px -8px rgba(var(--cf-sh),.16),0 30px 56px -18px rgba(var(--cf-sh),.26),0 70px 110px -40px rgba(var(--cf-sh),.28)}
.search-row .search-input{flex:1;min-width:0;height:46px;padding:0 !important;border:0 !important;background:none;font:600 17px Manrope,sans-serif;color:var(--ink)}
.search-row .clear-btn{position:static;transform:none;right:auto !important;order:1;width:34px;height:34px;border-radius:12px;color:var(--muted)}
.search-row .mic-btn{position:static;transform:none;width:46px;height:46px;border-radius:16px;flex:0 0 auto;background:var(--cf-inv-bg);color:var(--cf-inv-tx);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.search-row #cam{order:2} .search-row #mic{order:3}
.search-row .mic-btn:hover{color:var(--cf-inv-tx);transform:translateY(-1px);box-shadow:0 6px 14px -6px rgba(var(--cf-sh),.45)}
.search-row .mic-btn:active{transform:scale(.95)}
.search-row .mic-btn svg{width:20px;height:20px}
@media (max-width:600px){ .search-row{padding:7px 7px 7px 16px;gap:6px} .search-row .search-input{font-size:15px} .search-row .mic-btn{width:40px;height:40px;border-radius:14px} }

/* FOTO-CRUMBS-F-D-45: на сторінці фото крихти були закріплені в кутку й лягали на знак «Fab Lab | ONLINE» — у card-fan вони звичайний рядок над фото */
.foto-wrap .foto-crumbs{position:static;align-self:stretch;text-align:center;margin:0 auto 4px;max-width:1100px}
.foto-wrap .foto-crumbs,.foto-wrap .foto-crumbs a,.foto-wrap .foto-crumbs span{color:#E4E4E8}.foto-wrap .foto-crumbs>span:last-child{color:#fff}
/* ---------- header of inner pages: brand · theme · Sign in / account (template: designs/card-fan/storefront/page_base.html) ---------- */
.cf-top{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1240px;margin:0 auto;padding:clamp(10px,1.8vh,20px) clamp(16px,4vw,48px) 0}
.cf-brand{display:inline-flex;align-items:baseline;gap:10px;padding:6px 0;color:var(--ink);text-decoration:none}
.cf-brand .fl-n{font:800 22px/1 Manrope,sans-serif;letter-spacing:-.03em}
.cf-brand .fl-d{width:1px;height:16px;background:currentColor;opacity:.35}
.cf-brand .fl-o{align-self:flex-start;margin-top:1.75px;font:700 9.5px/1 Manrope,sans-serif;letter-spacing:.32em;margin-right:-.32em}
.cf-rt{display:flex;align-items:center;gap:8px}
.cf-pill{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;background:var(--card);color:var(--ink);font:600 14px Manrope,sans-serif;
  text-decoration:none;cursor:pointer;list-style:none;box-shadow:0 1px 0 rgba(0,0,0,.04);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.cf-pill::-webkit-details-marker{display:none}
.cf-pill:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(var(--cf-sh),.08),0 8px 18px -8px rgba(var(--cf-sh),.3)}
.cf-acct{position:relative}
.cf-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:160px;display:flex;flex-direction:column;padding:6px;border-radius:14px;z-index:50;
  background:var(--card);box-shadow:0 1px 2px rgba(var(--cf-sh),.1),0 16px 34px -12px rgba(var(--cf-sh),.4)}
.cf-menu a{padding:9px 12px;border-radius:9px;color:var(--ink);text-decoration:none;font:600 14px Manrope,sans-serif}
.cf-menu a:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.cf-top + .home-link .top{padding-top:clamp(12px,2.5vh,28px)}
.home-link .top .logo{display:none}
@media (max-width:720px){ .cf-brand .fl-n{font-size:18px} .cf-brand .fl-d{height:13px} .cf-brand .fl-o{margin-top:2.75px;font-size:8.5px;letter-spacing:.28em;margin-right:-.28em} .cf-pill{height:36px;padding:0 13px;font-size:13px} }

/* ---------- «Динамічна вітрина →»: on the back-link row, right; inverted, alive (gallery module untouched — only its button is styled/placed) ---------- */
body:has(#results:not(.is-fluid)) .gallery-toggle-wrap{width:100%;max-width:720px;padding:0 24px;margin:0 auto var(--cf-vt-pull,-64px);position:relative;z-index:3;justify-content:flex-end;pointer-events:none}
.gallery-toggle-wrap .btn-gallery-toggle{pointer-events:auto}
body .gallery-toggle-wrap .btn-gallery-toggle{position:relative;display:inline-flex;align-items:center;gap:10px;border:0;border-radius:999px;padding:10px 16px 10px 18px;
  background:var(--card);color:var(--ink);font:700 .78rem/1 Manrope,sans-serif;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;
  box-shadow:inset 0 1px 0 var(--cf-hl),0 1px 2px rgba(var(--cf-sh),.1),0 8px 18px -10px rgba(var(--cf-sh),.4);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
body .gallery-toggle-wrap .btn-gallery-toggle:hover{border-color:transparent;color:var(--ink);transform:translateY(-2px);box-shadow:inset 0 1px 0 var(--cf-hl),0 2px 4px rgba(var(--cf-sh),.12),0 14px 26px -12px rgba(var(--cf-sh),.5)}
body .gallery-toggle-wrap .btn-gallery-toggle:active{transform:scale(.97)}
body:has(#results:not(.is-fluid)) .btn-gallery-toggle::after{content:"→";font-size:1.05rem;letter-spacing:0;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
body:has(#results:not(.is-fluid)) .btn-gallery-toggle:hover::after{transform:translateX(4px)}
body:has(#results:not(.is-fluid) .res-card) #results .back-btn{display:flex;align-items:center;height:40px;padding:0;margin-bottom:10px}   /* рядок «назад» = висота кнопки: кнопка нічого не накриває */

/* ---------- theme button on inner pages (added by site.js; the home page has its own in the header) ---------- */
.cf-thm{position:fixed;top:14px;right:16px;z-index:40;width:40px;height:40px;border-radius:999px;border:0;display:grid;place-items:center;cursor:pointer;
  background:var(--card);color:var(--ink);box-shadow:0 1px 2px var(--cf-shadow);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.cf-thm:hover{transform:translateY(-2px);box-shadow:0 1px 2px var(--cf-shadow),0 10px 22px -10px var(--cf-shadow)}
.cf-thm svg{width:18px;height:18px}
.cf-thm::after{content:attr(data-label);position:absolute;top:calc(100% + 8px);right:0;white-space:nowrap;font:600 12px/1 Manrope,sans-serif;background:var(--ink);color:var(--bg);
  padding:7px 11px;border-radius:999px;opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s;pointer-events:none}
@media (hover:hover){ .cf-thm:hover::after{opacity:1;transform:none} }
.cf-thm.say::after{opacity:1;transform:none}
@media (max-width:720px){ .cf-thm{top:10px;right:10px;width:36px;height:36px} }
@media (prefers-reduced-motion: reduce){ .results .res-card,.results .coll-card,.cf-thm{transition:none} }

.cf-top .cf-thm{position:static}   /* у шапці — у ряду з «Увійти» */
/* MOB-FIX-F-D-45 (Den, телефон): фото заповнює квадрат повністю — кути заокруглює лише квадрат (у фото були свої 16px і в кутах проступав фон);
   «Фото скоро буде» — рівно по центру квадрата телефона (правило телефона раніше перебивалось загальним) */
.results:not(.is-fluid) .res-card .thumb>img{border-radius:0;box-shadow:none}
@media (max-width:600px){ .results:not(.is-fluid) .res-card[data-c-photo=""] .thumb::before{left:10px;top:10px;bottom:10px;width:88px;font-size:10px} }
/* UNKNOWN-SOFT-F-D-45 (Den: «уточнюйте» — надто різкий блок): без заливки й рамки, як «в наявності» — сірий «?» у колі + світло-сірий підпис.
   Кольором кричать лише «обмежено» / «немає» / «під замовлення» / «залишок». */
.results:not(.is-fluid) .res-card > .pill.unknown{--st-bg:transparent;--st-sh:none;--st-tx:color-mix(in srgb,var(--muted) 85%,transparent);
  gap:6px;font:600 12px/1.2 Manrope,sans-serif;letter-spacing:.02em;text-transform:none;
  --st-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='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.4 9.3a2.7 2.7 0 1 1 3.9 2.4c-.8.4-1.3 1.1-1.3 2v.5'/%3E%3Ccircle cx='12' cy='17.3' r='.5' fill='black'/%3E%3C/svg%3E")}
.results:not(.is-fluid) .res-card > .pill.unknown::before{width:30px;height:30px;opacity:.75}
@media (max-width:600px){ .results:not(.is-fluid) .res-card > .pill.unknown{font-size:11px;letter-spacing:.02em;text-transform:none} .results:not(.is-fluid) .res-card > .pill.unknown::before{width:26px;height:26px} }
/* CAPTION-BAND-F-D-45 (Den, телефон): етикетка не перекриває тканину. Після торкання рядок плавно стає вищим (+56px разом із --f):
   згори тканина на всю ширину, під нею — підпис на фоні картки (назва+номер · постачальник · статус). Лише сенсорні екрани. */
@media (max-width:600px) and (hover:none){
  .results:not(.is-fluid) .res-card{height:calc(108px + 56px * var(--f))}
  .results:not(.is-fluid) .res-card .thumb{clip-path:inset(calc(10px * (1 - var(--f))) calc((100% - 98px) * (1 - var(--f))) calc(10px * (1 - var(--f)) + 56px * var(--f)) calc(10px * (1 - var(--f))) round calc(10px + 6px * var(--f)) calc(10px + 6px * var(--f)) calc(10px - 6px * var(--f)) calc(10px - 6px * var(--f)))}
  .results:not(.is-fluid) .res-card .thumb>img{height:calc(100% - 20px * (1 - var(--f)) - 56px * var(--f))}
  .results:not(.is-fluid) .res-card::before{bottom:calc(10px * (1 - var(--f)) + 56px * var(--f));box-shadow:0 2px 3px rgba(var(--cf-sh),calc(.22 * (1 - var(--f)))),0 8px 16px -6px rgba(var(--cf-sh),calc(.5 * (1 - var(--f))))}
  .cf-lb{left:14px;right:14px;top:auto;bottom:0;height:56px;max-width:none;padding:0 0 0 2px;border-radius:0;transform:translateY(calc(8px * (1 - var(--f))));
    display:flex;flex-direction:column;justify-content:center;text-align:left;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
  .cf-lb .nm{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:118px}
  .cf-lb .meta{display:block;margin-top:2px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:118px}
  .cf-lb .pill{position:absolute;right:0;top:50%;transform:translateY(-50%);height:28px;font-size:12.5px} }