/* Кастомний шаблон "Колор-мікси — матриця аналогів" — brukton.com.ua/kolor-miksy/ */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;1,9..144,600&family=Manrope:wght@400;600;700;800&display=swap");

.bt-cmx{
	/* Палітра блоку. Бренд-акцент міняється однією змінною --bt-accent. */
	--bt-bg:#f5f1ea; --bt-card:#fffdf9; --bt-ink:#26221d; --bt-mute:#7c746a;
	--bt-line:#e3dbcf; --bt-accent:#b4532e; --bt-accent-soft:#f3e3d9;
	--bt-ok:#3f7d4e; --bt-ok-soft:#e4efe4; --bt-no:#b23b3b; --bt-no-soft:#f9ece9;
	/* 6 колонок × --bt-cell мають влазити у ширину блоку без скролу */
	/* --bt-tile мусить бути таким, щоб у клітинку влазило 2 плитки в ряд,
	   інакше кілька відтінків шикуються стовпчиком і рядок стає височезним */
	--bt-cell:255px; --bt-cell-us:255px; --bt-tile:108px; --bt-tile-max:200px;
	/* Ширина блоку: ширше за контейнер теми, але не в край екрана */
	--bt-w:min(92vw,1600px);
	font-family:"Manrope",-apple-system,BlinkMacSystemFont,sans-serif;
	color:var(--bt-ink); background:var(--bt-bg);
	padding:clamp(20px,3vw,40px) clamp(14px,2vw,30px);
	line-height:1.5; box-sizing:border-box; border-radius:18px;
	/* Вихід за контейнер теми БЕЗ transform — інакше зламається position:fixed
	   у нижньої панелі та лайтбокса (вони всередині цього блоку). */
	position:relative; width:var(--bt-w); max-width:none;
	margin:clamp(16px,3vw,40px) calc((100% - var(--bt-w)) / 2);
}
.bt-cmx *{box-sizing:border-box;}
/* Гасимо горизонтальний скрол від 100vw (як на "Про нас"):
   ставимо на обгортку контенту, а НЕ на .bt-cmx — інакше обріже сам bleed. */
.wd-page-content{overflow-x:clip;}

/* ── Шапка ─────────────────────────────────────────────────────── */
.bt-head{max-width:820px; margin-bottom:26px;}
.bt-kicker{font-size:12px; letter-spacing:.22em; text-transform:uppercase;
	color:var(--bt-accent); font-weight:700; margin:0 0 10px;}
.bt-cmx .bt-title{font-family:"Fraunces",Georgia,serif; font-weight:600;
	font-size:clamp(26px,4.4vw,42px); line-height:1.08; margin:0 0 12px; color:var(--bt-ink);}
.bt-cmx .bt-title em{font-style:italic; color:var(--bt-accent);}
.bt-cmx .bt-sub{font-size:clamp(14px,1.6vw,16px); color:var(--bt-mute); margin:0;}
.bt-cmx .bt-hint{font-size:13.5px; font-weight:600; color:var(--bt-accent); margin:16px 0 0;}
.bt-cmx .bt-foot{font-size:12.5px; color:var(--bt-mute); margin:18px 0 0; max-width:820px;}

/* ── Зведення по брендах ───────────────────────────────────────── */
.bt-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
	gap:10px; margin:0 0 18px;}
.bt-stat{background:var(--bt-card); border:1px solid var(--bt-line); border-radius:12px;
	padding:12px 14px; display:flex; flex-direction:column;}
.bt-stat--us{border-color:var(--bt-accent); box-shadow:0 6px 18px rgba(180,83,46,.12);}
.bt-stat__brand{font-family:"Fraunces",Georgia,serif; font-size:15px; font-weight:600;}
.bt-stat__num{font-size:30px; font-weight:800; line-height:1.1; margin-top:2px;}
.bt-stat--us .bt-stat__num{color:var(--bt-accent);}
.bt-stat__lbl{font-size:12px; color:var(--bt-mute); margin-top:-2px;}
.bt-stat__note{font-size:11.5px; color:var(--bt-mute); margin-top:6px; line-height:1.35;}

/* ── Висновки ──────────────────────────────────────────────────── */
.bt-notes{display:flex; flex-direction:column; gap:8px; margin:0 0 6px;}
.bt-cmx .bt-note{font-size:13.5px; line-height:1.5; margin:0; padding:10px 14px;
	border-radius:10px; border-left:3px solid transparent;}
.bt-note--ok{background:var(--bt-ok-soft); border-left-color:var(--bt-ok); color:#2f5c3a;}
.bt-note--no{background:var(--bt-no-soft); border-left-color:var(--bt-no); color:#8d2f2f;}

/* ── Матриця ───────────────────────────────────────────────────── */
.bt-mx-wrap{position:relative;}
/* Таблиця — власна область прокрутки по обох осях. Це принципово:
   position:sticky прилипає до найближчого скрол-контейнера, тож поки таблиця
   скролилась лише по горизонталі, шапка по вертикалі не фіксувалась взагалі. */
/* overscroll-behavior НЕ ставимо: хай прокрутка нормально передається сторінці,
   коли таблиця домотана до краю. */
.bt-mx{overflow:auto; max-height:max(480px,82vh); padding:0 0 8px;
	-webkit-overflow-scrolling:touch;
	border:1px solid var(--bt-line); border-radius:12px; background:var(--bt-bg);
	scrollbar-color:var(--bt-accent) var(--bt-line); scrollbar-width:thin;}
.bt-mx::-webkit-scrollbar{height:10px; width:10px;}
.bt-mx::-webkit-scrollbar-track{background:var(--bt-line); border-radius:8px;}
.bt-mx::-webkit-scrollbar-thumb{background:var(--bt-accent); border-radius:8px;}

/* Панель гортання над таблицею — показується, лише коли таблиця не влазить
   (клас .scrollable ставить JS). Тримаємо її саме тут, а не збоку від таблиці:
   таблиця висока, і плаваючі стрілки по центру просто не потрапляли б на екран. */
.bt-mx-bar{display:none; align-items:center; justify-content:space-between; gap:14px;
	padding:10px 12px; margin-bottom:2px; background:var(--bt-card);
	border:1px solid var(--bt-line); border-radius:12px;}
.bt-mx-wrap.scrollable .bt-mx-bar{display:flex;}
.bt-swipe{font-size:13px; font-weight:600; color:var(--bt-accent);}
.bt-mx-nav{display:flex; gap:8px; flex:0 0 auto;}
.bt-nav{width:40px; height:40px; border-radius:50%; border:1px solid var(--bt-line);
	background:var(--bt-bg); color:var(--bt-ink); font-size:24px; line-height:1;
	padding:0 0 3px; cursor:pointer; display:flex; align-items:center; justify-content:center;
	transition:background .15s, color .15s;}
.bt-nav:hover:not([disabled]){background:var(--bt-accent); border-color:var(--bt-accent); color:#fff;}
.bt-nav[disabled]{opacity:.35; cursor:default;}
/* Мінімальна ширина = сума мінімумів колонок; ширше — колонки тягнуться самі */
.bt-mx__inner{min-width:calc(var(--bt-cell-us) + var(--bt-cell) * 5);}

.bt-mrow{display:flex; align-items:stretch;}
.bt-mrow + .bt-mrow{border-top:1px solid var(--bt-line);}
.bt-mrow--gap{background:var(--bt-no-soft);}

.bt-cell{flex:1 1 0; min-width:var(--bt-cell); padding:10px;}
.bt-cell.bt-us{min-width:var(--bt-cell-us); position:sticky; left:0; z-index:2;
	background:var(--bt-accent-soft); border-right:1px solid var(--bt-line);}
.bt-mrow--gap .bt-cell.bt-us{background:#f6ddd6;}

/* Шапка матриці: прилипає згори при прокрутці таблиці вниз.
   Фон обовʼязково непрозорий — під нею проїжджають плитки. */
.bt-mrow--head{position:sticky; top:0; z-index:5; background:var(--bt-bg);
	border-bottom:2px solid var(--bt-line);
	box-shadow:0 6px 14px -8px rgba(38,34,29,.5);}
.bt-cell--head{display:flex; align-items:center; gap:8px; padding:14px 10px;
	background:var(--bt-bg);}
/* Кут «шапка × наша колонка» липне одразу по двох осях — має бути найвище */
.bt-mrow--head .bt-cell.bt-us{z-index:6; background:var(--bt-accent-soft);}
.bt-cell__brand{font-family:"Fraunces",Georgia,serif; font-size:17px; font-weight:600;}
.bt-mine{font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
	color:#fff; background:var(--bt-accent); padding:3px 7px; border-radius:20px; white-space:nowrap;}

.bt-empty{display:flex; align-items:center; justify-content:center; height:100%;
	min-height:60px; color:var(--bt-line); font-size:20px;}

/* Підпис бренду на плитці й заголовок ряду — тільки для мобільної розкладки,
   де шапки з колонками немає (вмикаються в @media нижче). */
.bt-brandtag{display:none;}
.bt-rowlabel{display:none;}

/* ── Плитки відтінків ──────────────────────────────────────────── */
/* auto-fit — щоб одинична плитка не тулилась у пів-клітинки, а зайняла все місце;
   max-width тримає її співмірною з плитками в клітинках, де відтінків кілька. */
.bt-items{display:grid; grid-template-columns:repeat(auto-fit,minmax(var(--bt-tile),1fr)); gap:8px;}
.bt-cmx .bt-tile{position:relative; aspect-ratio:1/1; max-width:var(--bt-tile-max);
	border-radius:9px; overflow:hidden;
	background:#ddd6cb; border:1px solid var(--bt-line); cursor:pointer; margin:0;
	transition:transform .18s, box-shadow .18s;}
.bt-cmx .bt-tile:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(38,34,29,.16);}
.bt-cmx .bt-tile .bt-sw{position:absolute; inset:0; width:100%; height:100%;
	object-fit:cover; margin:0; max-width:none; display:block;}
.bt-cmx .bt-tile .bt-name{position:absolute; left:0; right:0; bottom:0; z-index:2;
	font-size:11.5px; font-weight:600; color:#fff; padding:18px 8px 6px; line-height:1.25;
	background:linear-gradient(to top,rgba(20,16,12,.85),rgba(20,16,12,0));
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}

/* Вибрана плитка */
.bt-cmx .bt-tile.sel{outline:3px solid var(--bt-accent); outline-offset:-3px;}
.bt-cmx .bt-tile.sel::before{content:"\2713"; position:absolute; top:5px; left:5px; z-index:5;
	width:19px; height:19px; border-radius:50%; background:var(--bt-accent); color:#fff;
	font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center;}

/* ── Нижня панель вибраного ────────────────────────────────────── */
.bt-bar{position:fixed; left:0; right:0; bottom:0; z-index:9998; background:var(--bt-card);
	border-top:1px solid var(--bt-line); box-shadow:0 -8px 30px rgba(38,34,29,.14);
	transform:translateY(115%); transition:transform .3s ease; padding:12px clamp(12px,3vw,26px);
	font-family:"Manrope",sans-serif;}
.bt-bar.on{transform:translateY(0);}
.bt-bar-in{max-width:1120px; margin:0 auto; display:flex; align-items:center; gap:16px;}
.bt-bar-label{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
	color:var(--bt-mute); white-space:nowrap;}
.bt-bar-items{display:flex; gap:12px; flex:1; overflow-x:auto; padding:2px;}
.bt-bi{flex:0 0 auto; width:118px;}
.bt-bi-ph{width:118px; height:88px; border-radius:10px; position:relative; border:1px solid var(--bt-line);
	background:#ddd6cb center/cover no-repeat;}
.bt-bi-x{position:absolute; top:4px; right:4px; width:20px; height:20px; border-radius:50%; border:none;
	background:rgba(20,16,12,.62); color:#fff; cursor:pointer; font-size:12px; line-height:1; padding:0;}
.bt-bi-nm{font-size:12.5px; font-weight:700; margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bt-bi-br{font-size:11px; color:var(--bt-mute);}
.bt-bar-act{display:flex; flex-direction:column; gap:7px; white-space:nowrap;}
.bt-cmx .bt-btn, .bt-bar .bt-btn{font-size:13px; font-weight:700; border-radius:22px; padding:9px 16px;
	cursor:pointer; border:1px solid var(--bt-line); background:none; color:var(--bt-ink);
	font-family:"Manrope",sans-serif; text-transform:none; letter-spacing:0; min-height:0;}
.bt-cmx .bt-btn.go, .bt-bar .bt-btn.go{background:var(--bt-accent); border-color:var(--bt-accent); color:#fff;}
.bt-cmx .bt-btn:disabled, .bt-bar .bt-btn:disabled{opacity:.45; cursor:default;}

/* ── Лайтбокс ──────────────────────────────────────────────────── */
.bt-lb{position:fixed; inset:0; z-index:9999; background:rgba(20,16,12,.9); display:none;
	align-items:center; justify-content:center; padding:24px; font-family:"Manrope",sans-serif;}
.bt-lb.on{display:flex;}
.bt-lb-grid{display:flex; gap:20px; max-width:1200px; width:100%; justify-content:center; flex-wrap:wrap;}
.bt-lb-card{background:#fff; border-radius:14px; overflow:hidden; flex:1 1 320px; max-width:460px;}
.bt-lb-ph{aspect-ratio:1/1; background:#ddd6cb center/cover no-repeat;}
.bt-lb-meta{padding:14px 18px;}
.bt-lb-meta .nm{font-size:17px; font-weight:700; line-height:1.25;}
.bt-lb-meta .br{font-size:13.5px; color:var(--bt-mute); margin-top:2px;}
.bt-lb-close{position:absolute; top:18px; right:20px; width:42px; height:42px; border-radius:50%; border:none;
	background:rgba(255,255,255,.16); color:#fff; font-size:22px; cursor:pointer; line-height:1; padding:0;}

/* ── Планшет у ландшафті: та сама таблиця, тільки щільніша ─────── */
@media(max-width:1200px){
	.bt-cmx{--bt-cell:220px; --bt-cell-us:200px; --bt-tile:94px; --bt-tile-max:170px;}
	.bt-cmx .bt-tile .bt-name{font-size:10.5px;}
}

/* ── ≤900px: таблиця розсипається на картки по тонових рядах ─────
   Шести колонок на телефоні не видно все одно: лишалась би наша колонка
   й половина сусідньої. Тому кожен ряд = картка: наш відтінок великий,
   аналоги під ним, і на кожній плитці підпис бренду (шапки колонок немає). */
@media(max-width:900px){
	.bt-cmx{--bt-w:calc(100vw - 20px); padding:18px 14px; border-radius:14px;}

	/* Контейнер перестає бути окремою областю прокрутки */
	.bt-mx{overflow:visible; max-height:none; border:0; background:transparent; padding:0;}
	.bt-mx__inner{min-width:0;}
	.bt-mx-wrap.scrollable .bt-mx-bar{display:none;}

	/* display:contents прибирає клітинки й сітки як бокси — плитки стають
	   прямими дітьми ряду, і їх можна розкласти однаково. */
	.bt-cell, .bt-items{display:contents;}
	.bt-cell--empty, .bt-empty{display:none;}

	.bt-mrow{display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start;
		background:var(--bt-card); border:1px solid var(--bt-line); border-radius:14px;
		padding:12px; margin-bottom:12px;}
	/* Ховаємо шапку ПІСЛЯ .bt-mrow{display:flex} — вага селекторів однакова,
	   тож вирішує порядок. */
	.bt-cmx .bt-mrow--head{display:none;}
	.bt-mrow--gap{background:var(--bt-no-soft); border-color:#e9c9c3;}

	.bt-rowlabel{display:block; flex:0 0 100%; margin:0 0 2px; font-size:12px;
		font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--bt-no);}

	/* Наш відтінок — окремим рядком і крупніший за аналоги, але з максимумом:
	   на планшеті 100% ширини картки — це вже пів-екрана заввишки. */
	.bt-cmx .bt-cell.bt-us .bt-tile{flex:0 0 100%; max-width:360px; aspect-ratio:3/2;
		outline:2px solid var(--bt-accent); outline-offset:-2px;}
	/* Аналоги — по три в ряд */
	.bt-cmx .bt-tile{flex:0 0 calc((100% - 16px) / 3); max-width:none; aspect-ratio:1/1;}

	.bt-brandtag{display:block; position:absolute; top:5px; left:5px; z-index:3;
		font-size:9px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
		color:#fff; background:rgba(20,16,12,.62); padding:2px 6px; border-radius:10px;
		max-width:calc(100% - 10px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
	.bt-cmx .bt-cell.bt-us .bt-brandtag{background:var(--bt-accent);}
	.bt-cmx .bt-tile .bt-name{font-size:10.5px; padding:14px 6px 5px;}
}

/* ── Телефон ──────────────────────────────────────────────────── */
@media(max-width:560px){
	.bt-cmx{padding:16px 12px;}
	.bt-stats{grid-template-columns:1fr 1fr; gap:8px;}
	.bt-stat{padding:10px 12px;}
	.bt-stat__num{font-size:26px;}
	/* Аналоги — по дві в ряд, щоб колір було видно */
	.bt-cmx .bt-tile{flex:0 0 calc((100% - 8px) / 2);}
	.bt-cmx .bt-cell.bt-us .bt-tile{aspect-ratio:4/3;}

	/* Панель порівняння компактніша, кнопки в один рядок */
	.bt-bar{padding:10px 12px;}
	.bt-bar-in{flex-wrap:wrap; gap:10px;}
	.bt-bar-label{display:none;}
	.bt-bar-items{order:1; flex:1 1 100%;}
	.bt-bi, .bt-bi-ph{width:92px;}
	.bt-bi-ph{height:68px;}
	.bt-bar-act{order:2; flex:1 1 100%; flex-direction:row; gap:8px;}
	.bt-cmx .bt-btn, .bt-bar .bt-btn{flex:1 1 0; padding:10px 8px;}

	/* Лайтбокс: картки стовпчиком із прокруткою */
	.bt-lb{padding:52px 12px 16px; overflow-y:auto; align-items:flex-start;}
	.bt-lb-grid{gap:12px;}
	.bt-lb-card{flex:1 1 100%; max-width:none;}
	.bt-lb-ph{aspect-ratio:16/10;}
	.bt-lb-meta{padding:10px 14px;}
	.bt-lb-close{top:10px; right:12px; width:38px; height:38px;}
}