$direction: ltr;

@import "../helpers/direction";

// Core variables and mixins
@import "../helpers/variables";
@import "../editor/breakpoints";
@import "../frontend/breakpoints/breakpoints";
@import "../helpers/mixins";

.elementor-msie {

	ul.products, .elementor-grid {
		display: flex;
		flex-wrap: wrap;

		li.product, .elementor-grid-item {
			word-break: break-word;
		}
	}

	.elementor-grid {
		@mixin grid_loop($device) {
			@for $i from 1 through 12 {
				&#{$device}-#{$i} {
					.elementor-grid-item {
						width: 100% / $i;
					}
				}
			}
		}
		@include grid_loop('');

		@media (max-width: $screen-md-max) {
			@include grid_loop(-tablet);
		}
		@media (max-width: $screen-sm-max) {
			@include grid_loop(-mobile);
		}
	}

	.elementor-element.elementor-wc-products.elementor-products-columns {
		@mixin product_loop($device) {
			@for $i from 1 through 12 {
				&#{$device}-#{$i} {
					ul.products li.product {
						width: 100% / $i;
					}
				}
			}
		}
		@include product_loop('');

		@media (max-width: $screen-md-max) {
			@include product_loop(-tablet);
		}
		@media (max-width: $screen-sm-max) {
			@include product_loop(-mobile);
		}
	}
}