/**
 * Блок «Обери свій бренд» — горизонтальный свайп на мобильном (как отзывы).
 */

@media (max-width: 767px) {
	.ruby-home-brands-scroll,
	.elementor-element-6a70804 {
		overflow: hidden;
		padding-bottom: 28px;
	}

	.ruby-home-brands-scroll > .elementor-container,
	.elementor-element-6a70804 > .elementor-container {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 15px;
		gap: 12px;
		max-width: none;
		width: auto;
		margin-inline: -15px;
		padding: 0 15px 8px;
		scrollbar-width: none;
	}

	.ruby-home-brands-scroll > .elementor-container::-webkit-scrollbar,
	.elementor-element-6a70804 > .elementor-container::-webkit-scrollbar {
		display: none;
	}

	.ruby-home-brands-scroll > .elementor-container > .elementor-column,
	.elementor-element-6a70804 > .elementor-container > .elementor-column {
		flex: 0 0 calc(100% - 36px);
		width: calc(100% - 36px) !important;
		max-width: calc(100% - 36px) !important;
		scroll-snap-align: center;
	}

	.ruby-home-brands-scroll .elementor-widget-wrap,
	.elementor-element-6a70804 .elementor-widget-wrap {
		height: 100%;
	}

	.ruby-home-brands-scroll .wd-info-box,
	.elementor-element-6a70804 .wd-info-box {
		min-height: 220px;
		padding: 16px 16px 72px !important;
	}

	.ruby-home-brands-scroll .box-icon-wrapper,
	.elementor-element-6a70804 .box-icon-wrapper {
		max-width: 72px;
	}

	.ruby-home-brands-scroll .info-box-icon img,
	.elementor-element-6a70804 .info-box-icon img {
		width: 100%;
		height: auto;
		object-fit: contain;
	}

	.ruby-brands-dots {
		display: block;
		width: 100%;
		margin: 12px 0 0;
		padding: 0;
		list-style: none;
		text-align: center;
		border: none;
	}

	.ruby-brands-dots li {
		position: relative;
		display: inline-block;
		width: 24px;
		height: 24px;
		margin: 0 4px;
		padding: 0;
		cursor: pointer;
	}

	.ruby-brands-dots li button {
		position: relative !important;
		font-size: 0 !important;
		line-height: 0 !important;
		display: block !important;
		width: 24px !important;
		height: 24px !important;
		min-height: 0 !important;
		min-width: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		background: transparent !important;
		color: transparent !important;
		cursor: pointer;
		outline: none;
		transform: none !important;
	}

	.ruby-brands-dots li button:hover,
	.ruby-brands-dots li button:focus {
		background: transparent !important;
		outline: none;
	}

	.ruby-brands-dots li button::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 8px;
		height: 8px;
		margin: 0;
		border-radius: 50%;
		background-color: #bbb;
		transform: translate(-50%, -50%);
		opacity: 1;
	}

	.ruby-brands-dots li.is-active button::before {
		width: 10px;
		height: 10px;
		background-color: #333;
	}
}

@media (min-width: 768px) {
	.ruby-brands-dots {
		display: none;
	}
}