/*
 * FlowCatalog — вітрина: перемикач варіантів на сторінці товару (.fc-variants) і ряд значень на картці лінійки
 * в списках (.fc-line). «Вигляд» (THEMES-SPEC §2): кольори й радіус — лише змінні --fct-* на корені .fct-root.
 * Значення нижче = пресет «Нейтральний» (дзеркало FlowCatalog\Variant\ThemeSpec::NEUTRAL, стереже
 * FlowCatalogThemeSpecTest); власні значення й пресети модуль виводить інлайном на .fct-root.fct-root.
 * Глобальна «ручка» теми: :root{--fl-primary:…} у CSS теми — підхоплять усі модулі Flow.
 * Копіювати шаблон variants.twig у тему більше не потрібно: класи й змінні — тут.
 */
.fct-root {
	--fct-primary: var(--fl-primary, #222222);
	--fct-primary-contrast: var(--fl-primary-contrast, #FFFFFF);
	--fct-text: var(--fl-text, #333333);
	--fct-muted: var(--fl-muted, #6B6B6B);
	--fct-surface: var(--fl-surface, #FFFFFF);
	--fct-border: var(--fl-border, #CCCCCC);
	--fct-radius: var(--fl-radius, 4px);
	--fct-border-strong: var(--fl-border-strong, #555555);
	--fct-text-hover: var(--fl-text, #000000);
	--fct-out: var(--fl-muted, #6B6B6B);
	--fct-out-current: var(--fl-primary-contrast, #DDDDDD);
}
/* картка лінійки у списках — рамки трохи світліші, ніж у перемикача на сторінці товару (як до «Вигляду») */
.fc-line {
	--fct-border: var(--fl-border, #D5D5D5);
	--fct-border-strong: var(--fl-border-strong, #666666);
}

/* ---- перемикач варіантів (catalog/view/theme/default/template/flowcatalog/variants.twig) ---- */
.fc-variants{margin:0 0 15px}
.fc-variants__axis{margin-bottom:10px}
.fc-variants__label{font-size:12px;color:var(--fct-muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:.03em}
.fc-variants__values{display:flex;flex-wrap:wrap;gap:6px}
.fc-variants__value{display:inline-block;padding:5px 12px;border:1px solid var(--fct-border);border-radius:var(--fct-radius);background:var(--fct-surface);color:var(--fct-text);font-size:13px;line-height:1.3;text-decoration:none;transition:border-color .15s}
.fc-variants__value:hover{border-color:var(--fct-border-strong);color:var(--fct-text-hover);text-decoration:none}
.fc-variants__value.is-current{border-color:var(--fct-primary);background:var(--fct-primary);color:var(--fct-primary-contrast);cursor:default}
/* кнопка, не посилання: підкреслення теми для a:hover / a:focus сюди не доходить */
.fc-variants .fc-variants__value:hover,.fc-variants .fc-variants__value:focus,.fc-variants .fc-variants__value:active,.fc-variants .fc-variants__value.is-current{text-decoration:none}
.fc-variants__value.is-out{color:var(--fct-out);border-style:dashed}
.fc-variants__value.is-out.is-current{color:var(--fct-out-current)}
.fc-variants__select{display:block;width:auto;max-width:280px;padding:5px 10px;border:1px solid var(--fct-border);border-radius:var(--fct-radius);background:var(--fct-surface);color:var(--fct-text);font-size:13px;line-height:1.3}
.fc-variants__select:hover{border-color:var(--fct-border-strong)}
.fc-variants__select.is-loading{opacity:.6}

/* ---- зразок кольору/картинки (show_product/show_list = swatch, FlowCatalog\Variant\Swatch) ---- */
.fc-variants__values--swatch{align-items:center}
.fc-variants__value--swatch{box-sizing:border-box;width:34px;height:34px;padding:0;border-radius:50%;background-size:cover;background-position:center;background-repeat:no-repeat}
.fc-variants__value--swatch:hover{border-color:var(--fct-border-strong)}
.fc-variants__value--swatch.is-current{border-color:var(--fct-primary);box-shadow:0 0 0 2px var(--fct-surface),0 0 0 4px var(--fct-primary);background-color:var(--fct-surface)}
.fc-variants__value--swatch.is-out{opacity:.45;border-style:dashed}
.fc-variants__value--text.fc-variants__value--swatch{width:auto;height:auto;min-width:34px;min-height:34px;padding:5px 10px;border-radius:var(--fct-radius);display:inline-flex;align-items:center;justify-content:center}
.fc-variants__swatch-text{font-size:12px;line-height:1.2}
.fc-variants__current-value{font-size:12px;color:var(--fct-muted);margin:4px 0 10px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- картка лінійки у списках (catalog/view/javascript/flowcatalog/lines.js) ---- */
.fc-line{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 4px}
.fc-line__value{display:inline-flex;align-items:center;min-height:28px;padding:2px 9px;border:1px solid var(--fct-border);border-radius:var(--fct-radius);font-size:12px;line-height:1.3;color:var(--fct-text);background:var(--fct-surface);text-decoration:none;white-space:nowrap;cursor:pointer}
.fc-line__value:hover{border-color:var(--fct-border-strong);color:var(--fct-text-hover);text-decoration:none}
.fc-line__value.is-current{border-color:var(--fct-primary);background:var(--fct-primary);color:var(--fct-primary-contrast)}
.fc-line .fc-line__value:hover,.fc-line .fc-line__value:focus,.fc-line .fc-line__value:active,.fc-line .fc-line__value.is-current{text-decoration:none}
/* немає в наявності: закреслено; на картці списку такий варіант не обирається (lines.js) */
.fc-variants .fc-variants__value.is-out,.fc-line .fc-line__value.is-out{text-decoration:line-through}
.fc-line .fc-line__value.is-out[aria-disabled="true"]{cursor:not-allowed}
.fc-line__value.is-out{color:var(--fct-out);border-style:dashed}
.fc-line__value.is-out.is-current{color:var(--fct-out-current)}
.fc-line__choose{cursor:pointer}
.fc-line__choose--plain{display:inline-block;margin-top:6px;font-size:13px;font-weight:600;text-decoration:underline}
@media(pointer:coarse){.fc-line__value{min-height:34px;padding:4px 12px;font-size:13px}}

/* ---- зразок кольору/картинки в списку (lines.js, FlowCatalog\Variant\Swatch) — тач-ціль лишається ≥34px за рахунок прозорих відступів навколо меншого кружечка */
.fc-line__value--swatch{box-sizing:border-box;width:24px;height:24px;min-height:24px;padding:0;border-radius:50%;background-size:cover;background-position:center;background-repeat:no-repeat}
.fc-line__value--swatch.is-current{box-shadow:0 0 0 2px var(--fct-surface),0 0 0 4px var(--fct-primary)}
.fc-line__value--swatch.is-out{opacity:.45;border-style:dashed}
@media(pointer:coarse){.fc-line__value--swatch{width:34px;height:34px;min-height:34px;padding:0}}

/* картка лінійки з кількома відмінностями: один рядок підпису + чипів на кожну — замість одного стовпця
   повних назв (48 кнопок на 5×10 комбінацій розвалювали картку), fc-line.js (buildMultiRow) */
.fc-line--multi{display:block}
.fc-line--multi .fc-line__axis{display:block;margin:3px 0}
.fc-line--multi .fc-line__axis-label{font-size:11px;line-height:1.3;color:var(--fct-muted);margin-bottom:2px}
.fc-line--multi .fc-line__chips{display:flex;flex-wrap:wrap;gap:4px}
.fc-line__more{color:var(--fct-muted);border-style:dashed;cursor:pointer}

/* випадний список замість ряду чипів (lines.js: значень більше за «Кнопок у списку» або «Випадаючий список завжди»; лише
   режими «Міні-вибір» і «з передвибраним варіантом»). На ньому й клас .fc-line__value — висота, шрифт, рамка, кути й кольори
   ті самі, що в чипів (і власний CSS теми для .fc-line__value діє й тут); тут лише те, що відрізняє список: ширина за
   найдовшим значенням, але не ширше картки (довге значення — з трикрапкою), стрілку малює браузер */
.fc-line .fc-line__select{display:inline-block;width:auto;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;font-family:inherit;box-sizing:border-box;cursor:pointer}
.fc-line .fc-line__select:disabled{cursor:default}
/* на сенсорному екрані — 16px: Safari на iPhone наближає сторінку при фокусі на полі з дрібнішим шрифтом; селектор
   сильніший за власне правило магазину для чипів (.fc-line .fc-line__value{font-size:13px}) */
@media(pointer:coarse){.fc-line .fc-line__select.fc-line__value{font-size:16px}}