// Breakpoints
@bp-larger-than-mobile: 400px;
@bp-larger-than-phablet: 550px;
@bp-larger-than-tablet: 750px;
@bp-larger-than-desktop: 1000px;
@bp-larger-than-desktophd: 1200px;

// Colors
@light-grey: #e1e1e1;
@dark-grey: #333;
@primary-color: #33c3f0;
@secondary-color: lighten(@dark-grey, 13.5%);
@border-color: #bbb;
@link-color: #1eaedb;
@font-color: #222;

// Grid Variables
@container-width: 100%;
@container-width-larger-than-mobile: 100%;
@container-width-larger-than-phablet: 100%;
@total-columns: 12;
@column-width: 100 / @total-columns; // calculates individual column width based off of # of columns
@column-margin: 4%; // space between columns

// Misc
@global-radius: 4px;

// Functions
//––––––––––––––––––––––––––––––––––––––––––––––––––
.grid-column-width(@n) {
  width: @column-width * @n - (@column-margin*(@total-columns - @n)/@total-columns);
}

.grid-offset-length(@n) {
  margin-left: @column-width * @n - (@column-margin*(@total-columns - @n)/@total-columns) + @column-margin;
}

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.mprm-container {
  position: relative;
  width: 100%;
  max-width: @container-width;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.mprm-column,
.mprm-columns {
  width: 100%;
  float: left;
  box-sizing: border-box;
}

/* For devices larger than 400px */
@media (min-width: @bp-larger-than-mobile) {
  .mprm-container {
	width: @container-width-larger-than-mobile;
	padding: 0;
  }
}

@media (max-width: 768px) {
  .mprm-container.mprm-shortcode-categories,
  .mprm-container.mprm-shortcode-items,
  .mprm-container.mprm-page-template-items,
  .mprm-container.mprm-widget-categories,
  .mprm-container.mprm-widget-items {
	&.mprm-view-grid {
	  margin-bottom: @margin-bottom-default;
	  .mprm-row {
		padding-bottom: 0;
		.mprm-column,
		.mprm-columns {
		  margin-bottom: @margin-bottom-default;
		  padding-bottom: 0;
		  .mprm-category-content {
			padding: 2em 1.5em;
		  }
		}
	  }
	}
	&.mprm-view-list {
	  margin-bottom: @margin-bottom-default;
	  .mprm-row {
		padding-bottom: 0;
		.mprm-column,
		.mprm-columns {
		  margin-bottom: @margin-bottom-default;
		  padding-bottom: 0;
		  .mprm-column,
		  .mprm-columns {
			&.mprm-five {
			  margin-right: 4%;
			}
			&.mprm_menu_item_buy_button.mprm-offset-by-five {
			  .grid-offset-length(5);
			}
			margin-bottom: 0;
			padding-bottom: 0;
		  }
		}
	  }
	}
	&.mprm-view-simple-list {
	  .mprm-simple-view-column {
		.mprm-columns {
		  padding: 0;
		}
	  }
	  .mprm-all-items {
		columns: auto !important;
		column-gap: 0;
	  }
	}
  }

  .mprm-column,
  .mprm-columns {
	padding-bottom: @padding-bottom-default;

	.mprm-column:first-child,
	.mprm-columns:first-child {
	  margin-left: 0;
	}
  }
}

/* For devices larger than 769px */
@media (min-width: 769px) {
  .mprm-container {
	width: @container-width-larger-than-phablet;
  }

  .mprm-column,
  .mprm-columns {
	margin-left: @column-margin;
  }

  .mprm-column:first-child,
  .mprm-columns:first-child {
	margin-left: 0;
  }

  .mprm-one.mprm-column,
  .mprm-one.mprm-columns {
	.grid-column-width(1);
  }

  .mprm-two.mprm-columns {
	.grid-column-width(2);
  }

  .mprm-three.mprm-columns {
	.grid-column-width(3);
  }

  .mprm-four.mprm-columns {
	.grid-column-width(4);
  }

  .mprm-five.mprm-columns {
	.grid-column-width(5);
  }

  .mprm-six.mprm-columns {
	.grid-column-width(6);
  }

  .mprm-seven.mprm-columns {
	.grid-column-width(7);
  }

  .mprm-eight.mprm-columns {
	.grid-column-width(8);
  }

  .mprm-nine.mprm-columns {
	.grid-column-width(9);
  }

  .mprm-ten.mprm-columns {
	.grid-column-width(10);
  }

  .mprm-eleven.mprm-columns {
	.grid-column-width(11);
  }

  .mprm-twelve.mprm-columns {
	width: 100%;
	margin-left: 0;
  }

  .mprm-one-third.mprm-column, .mprm-one-third.mprm-columns {
	.grid-column-width(4);
  }

  .mprm-two-thirds.mprm-column, .mprm-two-thirds.mprm-columns {
	.grid-column-width(8);
  }

  .mprm-one-half.mprm-column, .mprm-one-half.mprm-columns {
	.grid-column-width(6);
  }

  /* Offsets */
  .mprm-offset-by-one.mprm-column,
  .mprm-offset-by-one.mprm-columns {
	.grid-offset-length(1);
  }

  .mprm-offset-by-two.mprm-column,
  .mprm-offset-by-two.mprm-columns {
	.grid-offset-length(2);
  }

  .mprm-offset-by-three.mprm-column,
  .mprm-offset-by-three.mprm-columns {
	.grid-offset-length(3);
  }

  .mprm-offset-by-four.mprm-column,
  .mprm-offset-by-four.mprm-columns {
	.grid-offset-length(4);
  }

  .mprm-offset-by-five.mprm-column,
  .mprm-offset-by-five.mprm-columns {
	.grid-offset-length(5);
  }

  .mprm-offset-by-six.mprm-column,
  .mprm-offset-by-six.mprm-columns {
	.grid-offset-length(6);
  }

  .mprm-offset-by-seven.mprm-column,
  .mprm-offset-by-seven.mprm-columns {
	.grid-offset-length(7);
  }

  .mprm-offset-by-eight.mprm-column,
  .mprm-offset-by-eight.mprm-columns {
	.grid-offset-length(8);
  }

  .mprm-offset-by-nine.mprm-column,
  .mprm-offset-by-nine.mprm-columns {
	.grid-offset-length(9);
  }

  .mprm-offset-by-ten.mprm-column,
  .mprm-offset-by-ten.mprm-columns {
	.grid-offset-length(10);
  }

  .mprm-offset-by-eleven.mprm-column,
  .mprm-offset-by-eleven.mprm-columns {
	.grid-offset-length(11);
  }

  .mprm-offset-by-one-third.mprm-column,
  .mprm-offset-by-one-third.mprm-columns {
	.grid-offset-length(4);
  }

  .mprm-offset-by-two-thirds.mprm-column,
  .mprm-offset-by-two-thirds.mprm-columns {
	.grid-offset-length(8);
  }

  .mprm-offset-by-one-half.mprm-column,
  .mprm-offset-by-one-half.mprm-column {
	.grid-offset-length(6);
  }
}

.mprm-u-full-width {
  width: 100%;
  box-sizing: border-box;
}

.mprm-u-max-full-width {
  max-width: 100%;
  box-sizing: border-box;
}

.mprm-u-pull-right {
  float: right;
}

.mprm-u-pull-left {
  float: left;
}

/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */

.mprm-container:after,
.mprm-row:after,
.mprm-u-cf {
  content: "";
  display: table;
  clear: both;
}

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Larger than mobile */
@media (min-width: @bp-larger-than-mobile) {

}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: @bp-larger-than-phablet) {
}

/* Larger than tablet */
@media (min-width: @bp-larger-than-tablet) {
}

/* Larger than desktop */
@media (min-width: @bp-larger-than-desktop) {
}

/* Larger than Desktop HD */
@media (min-width: @bp-larger-than-desktophd) {
}

@media (max-width: @bp-larger-than-phablet) {
  .mprm-column {
	.mprm-columns {
	  margin-bottom: 1rem;
	}
  }

  .mprm-columns {
	margin-bottom: @margin-bottom-default;
	&:last-child {
	  margin-bottom: 0;
	}
  }
}