/* ==========================================================================
   Список брендів [brands_list] (inc/shortcodes/brands-list.php)
   ========================================================================== */

.brands-list{
	--bl-link:   var(--theme-accent);
	--bl-hover:  var(--theme-accent-strong);
	--bl-line:   var(--theme-accent-soft);
	--bl-muted:  var(--theme-text-muted);
	--bl-col:    200px;  /* ← ПРОЄКТ мінімальна ширина колонки */

	font-family:var(--theme-font), sans-serif;
}

.brands-list [hidden]{display:none !important} /* !important — теми задають display елементам списку */

/* пошук */
.brands-list__search{max-width:400px;margin-bottom:30px}
.brands-list input.brands-list__input{
	box-sizing:border-box;width:100%;
	padding:12px 16px;
	border:1px solid var(--theme-line);
	border-radius:var(--theme-radius);
	background:var(--theme-light);
	color:var(--theme-text);
	font:inherit;font-size:16px; /* ≥16px — iOS не зумить поле */
	outline:none;
	transition:border-color .2s;
}
.brands-list input.brands-list__input::placeholder{color:var(--bl-muted);opacity:1}
.brands-list input.brands-list__input:hover,
.brands-list input.brands-list__input:focus{border-color:var(--bl-hover)}

/* групи */
.brands-list__groups{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(var(--bl-col), 1fr));
	gap:24px;
}
.brands-list__letter{
	margin:0 0 10px;padding-bottom:6px;
	border-bottom:2px solid var(--bl-line);
	color:var(--bl-link);
	font-size:20px;
}
.brands-list__items{margin:0;padding:0;list-style:none}
.brands-list__item{margin-bottom:6px}
.brands-list__item a{color:var(--bl-link);text-decoration:none;transition:color .2s}
.brands-list__item a:hover{color:var(--bl-hover)}
.brands-list__count{color:var(--bl-muted);font-size:13px}

.brands-list__empty,
.brands-list__none{margin:0;color:var(--bl-link);font-size:15px}

/* ==========================================================================
   Стрічка логотипів [brands_carousel]
   marquee — два однакові списки підряд, трек їде на ширину одного (-50%) і починає спочатку:
   шву не видно. Тривалість --bc-duration рахує PHP з кількості логотипів.
   ========================================================================== */

.brands-carousel{
	--bc-logo-h: 56px;  /* ← ПРОЄКТ висота логотипа */
	--bc-gap:    48px;  /* ← ПРОЄКТ відстань між логотипами */
	--bc-fade:   48px;  /* ← ПРОЄКТ ширина розмиття країв; 0 — без */

	overflow:hidden;
	-webkit-mask-image:linear-gradient(to right, transparent, #000 var(--bc-fade), #000 calc(100% - var(--bc-fade)), transparent);
	mask-image:linear-gradient(to right, transparent, #000 var(--bc-fade), #000 calc(100% - var(--bc-fade)), transparent);
}
.brands-carousel__track{display:flex;width:max-content}
.brands-carousel__list{
	display:flex;align-items:center;gap:var(--bc-gap);
	margin:0;padding:0 calc(var(--bc-gap) / 2);list-style:none;
}
.brands-carousel__item{flex:0 0 auto;margin:0;padding:0}
.brands-carousel__item::before,
.brands-carousel__item::marker{content:none}
.brands-carousel__link{
	display:flex;flex-direction:column;align-items:center;gap:8px;
	color:var(--theme-text);text-decoration:none;
}
.brands-carousel__logo{
	display:block;
	width:auto !important;height:var(--bc-logo-h) !important; /* !important — теми задають img{height:auto;max-width:100%} */
	max-width:none !important;
	object-fit:contain;
	opacity:.8;
	transition:opacity .2s;
}
.brands-carousel__link:hover .brands-carousel__logo,
.brands-carousel__link:focus-visible .brands-carousel__logo{opacity:1}
.brands-carousel__name{font-size:13px;white-space:nowrap}
.brands-carousel__link:hover .brands-carousel__name{color:var(--theme-accent)}

/* біжучий рядок: без JS — CSS-анімація; з brands-carousel.js (is-js) — рух, наведення й перетягування веде скрипт */
.brands-carousel--marquee .brands-carousel__track{animation:bc-marquee var(--bc-duration, 60s) linear infinite}
.brands-carousel--marquee:not(.is-js):hover .brands-carousel__track,
.brands-carousel--marquee:not(.is-js):has(:focus-visible) .brands-carousel__track{animation-play-state:paused}
@keyframes bc-marquee{to{transform:translateX(-50%)}}

.brands-carousel--marquee.is-js{cursor:grab;touch-action:pan-y} /* вертикальний скрол сторінки пальцем лишається */
.brands-carousel--marquee.is-js .brands-carousel__track{animation:none;will-change:transform}
.brands-carousel--marquee.is-dragging{cursor:grabbing;user-select:none}
.brands-carousel--marquee.is-dragging .brands-carousel__link{pointer-events:none}

/* прокрутка пальцем / колесом */
.brands-carousel--scroll{overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-mask-image:none;mask-image:none}
.brands-carousel--scroll::-webkit-scrollbar{display:none}
.brands-carousel--scroll .brands-carousel__item{scroll-snap-align:start}
.brands-carousel--scroll .brands-carousel__list{width:max-content}

/* без анімації: з JS — стоїть, але тягнеться; без JS — звичайна прокрутка, копію списку ховаємо */
@media (prefers-reduced-motion:reduce){
	.brands-carousel--marquee .brands-carousel__track{animation:none}
	.brands-carousel--marquee:not(.is-js){overflow-x:auto;-webkit-mask-image:none;mask-image:none}
	.brands-carousel--marquee:not(.is-js) .brands-carousel__list[aria-hidden="true"]{display:none}
}