/**
 * Ecommoda Brands Elementor widget — layout only. All colors, typography,
 * spacing, sizing and dot styling are controlled from Elementor's own
 * controls (see class-ecommoda-brands-widget.php); this file only supplies
 * the structural rules Elementor selectors build on top of.
 */

/*
 * Default heading typography matches the existing "Why Ecommoda" /
 * "Best choice for you" section headings — both plain <h3> tags styled only
 * by the global h3 rule in ecommoda.css (Poppins, 600, --ecm-font-size-h3 /
 * 23px, --ecm-color-heading). Reusing those exact tokens here (rather than
 * relying on inheritance alone) keeps this default correct regardless of
 * load order, without inventing new values. Elementor's Typography/Color
 * controls have no baked-in default, so they emit no CSS until an editor
 * sets one — at that point Elementor's generated CSS (same selector, printed
 * later) overrides these rules normally.
 */
.ecommoda-brands__title {
	margin: 0;
	color: var(--ecm-color-heading);
	font-family: var(--ecm-font-heading);
	font-size: var(--ecm-font-size-h3);
	font-weight: var(--ecm-font-weight-heading);
	line-height: var(--ecm-line-height-heading);
}

.ecommoda-brands__carousel {
	/*
	 * Fallback values for the two Elementor-editable settings (Slides to
	 * Show / Gap Between Logos). Elementor's own generated CSS (from the
	 * widget's `items`/`gap` controls) overrides these per breakpoint the
	 * moment an editor sets a value — see class-ecommoda-brands-widget.php
	 * for why these are read via CSS custom properties rather than PHP.
	 */
	--ecommoda-brands-items: 5;
	--ecommoda-brands-gap: 30px;
	overflow: hidden;
}

/*
 * Out-of-the-box responsive defaults (5 desktop / 2 tablet / 2 mobile),
 * matching Elementor's own default breakpoints (tablet <=1024px, mobile
 * <=767px). An editor overriding "Slides to Show" for a given breakpoint
 * from Elementor produces a more specific inline rule that wins over these.
 */
@media (max-width: 1024px) {
	.ecommoda-brands__carousel {
		--ecommoda-brands-items: 2;
	}
}

@media (max-width: 767px) {
	.ecommoda-brands__carousel {
		--ecommoda-brands-items: 2;
	}
}

.ecommoda-brands__carousel .swiper-wrapper {
	align-items: center;
	gap: var(--ecommoda-brands-gap);
}

.ecommoda-brands__slide {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex: 0 0 auto;
	width: calc( ( 100% - ( var(--ecommoda-brands-items) - 1 ) * var(--ecommoda-brands-gap) ) / var(--ecommoda-brands-items) );
}

.ecommoda-brands__logo {
	display: block;
	line-height: 0;
}

.ecommoda-brands__logo img {
	display: block;
	height: auto;
	width: auto;
}

.ecommoda-brands__dots {
	position: relative;
	margin-top: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ecommoda-brands__dots .swiper-pagination-bullet {
	background: #c4c4c4;
	opacity: 1;
	margin: 0 4px;
}

.ecommoda-brands__dots .swiper-pagination-bullet-active {
	background: #111111;
}