// For Card Catalog and Card Product elements with same properties
// Created mixins and variables for easy editing

@mixin card-cp-title {
	font-weight: 500;
	font-size: $card-title-font-size;
	line-height: 20px;
	text-transform: uppercase;
	flex-basis: 100%;
	@include text-overflow(ellipsis);
  }
  
  @mixin card-cp-rating {
	margin: 2px 0 2px 0;
	flex-basis: 100%;
	@include media-breakpoint-up($card-breakpoint-desktop) {
	  margin: 2px 0 4px 0;
	}
	&__container {
	  height: 13px;
	  width: 80px;
	}
  }
  
  @mixin card-cp-colorpicker {
	&__colorpicker {
	  .colorpicker-mobile {
		position: absolute;
		z-index: 1;
		top: 10px;
		left: 10px;
		line-height: 0;
		@include media-breakpoint-up($card-breakpoint-desktop) {
		  display: none;
		}
	  }
	  .colorpicker-desktop {
		position: absolute;
		top: 10px;
		left: 0;
		display: none;
		z-index: 1;
		@include media-breakpoint-up($card-breakpoint-desktop) {
		  display: block;
		  width: 40px;
		}
	  }
	}
	.colorpicker {
	  background-color: rgba(white, 0.7);
	  border-left: none;
	}
  }
  
  @mixin card-cp-brand {
	.brand {
	  margin-bottom: 2px;
	  &.brand--be {
		transform: translateY(3px);
	  }
	}
  }
  
  @mixin card-cp-wrapper {
	flex-basis: auto;
	max-width: 70%;
	display: flex;
	flex-flow: row wrap;
  }
  
  .card-plain {
	$self: &;
	&__container {
	  display: flex;
	  align-self: center;
	  position: relative;
	  padding: 15px 0px;
	  height: 80px;
	  color: inherit;
	  border-top: 1px solid #dedede;
	  @include media-breakpoint-up(sm) {
		border-top: none;
	  }
	  &:hover {
		color: inherit;
		text-decoration: none;
	  }
	  @include media-breakpoint-up(sm) {
		display: block;
		height: auto;
		padding: 0;
	  }
  
	  &--square {
		position: relative;
		&:after {
		  content: "";
		  display: block;
		  padding-bottom: 100%;
		}
		.content {
		  position: absolute;
		  width: 100%;
		  height: 100%;
		}
	  }
	}
	&__image-holder {
	  flex-basis: 58px;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  position: relative;
	  margin-left: 10px;
	  img {
		height: auto;
		max-height: 100%;
		max-width: 100%;
		position: absolute;
		@include absolute-position(50%, auto, auto, 50%, translate(-50%, -50%));
  
		@include media-breakpoint-up(md) {
		  max-width: 70%;
		}
  
		@include media-breakpoint-up(lg) {
		  max-width: 50%;
		}
	  }
	  @include media-breakpoint-up(sm) {
		height: 130px;
		margin: 0 auto;
	  }
	}
	&__details {
	  flex-basis: calc(100% - 58px);
	  align-self: center;
	  padding-left: 15px;
	  @include media-breakpoint-up(sm) {
		padding-left: 0;
	  }
	  .title {
		margin: 3px 0 0 0;
		font-weight: 500;
		color: $black;
		font-size: 16px;
		@include media-breakpoint-up(sm) {
		  text-align: center;
		  margin: 15px 0 8px 0;
		}
	  }
	}
	&__indicator {
	  position: relative;
	  @include media-breakpoint-up(sm) {
		display: none;
	  }
	  &:before {
		content: "";
		position: absolute;
		border-bottom: 1px solid #a3a3a3;
		border-right: 1px solid #a3a3a3;
		width: 13px;
		height: 13px;
		top: 50%;
		right: 0;
		margin-top: -2px;
		margin-right: -2px;
		transform: rotate(-45deg) translateY(-50%);
	  }
	}
  }
  
  .card-promo {
	$self: &;
	&__container {
	  border: $border;
	  position: relative;
	  overflow: hidden;
	  display: flex;
	  flex-direction: column;
	  color: inherit;
	  height: $card-container;
	  &:hover {
		color: inherit;
		text-decoration: none;
	  }
  
	  .grid-2 & {
		height: 160px;
		@include media-breakpoint-up(sm) {
		  height: $card-container;
		}
	  }
	}
	&__image-holder {
	  height: $card-img-holder;
	  position: relative;
	  margin: 10px 10px 0 10px;
	  flex-grow: 1;
  
	  img {
		height: auto;
		max-height: 100%;
		@include absolute-position(50%, auto, auto, 50%, translate(-50%, -50%));
	  }
	}
	&__details {
	  text-align: center;
	  padding: 10px 5px 4px 5px;
	  @include media-breakpoint-up(sm) {
		padding: 10px 5px 12px 5px;
	  }
	  p {
		margin: 0;
	  }
	  &-title {
		font-size: 16px;
		line-height: 1em;
		@include media-breakpoint-up(sm) {
		  line-height: 1.8em;
		}
	  }
	  &-desc {
		font-size: 14px;
	  }
	}
	&__ribbon {
	  position: absolute;
	  top: 20px;
	  left: -42px;
	  height: 18px;
	  background-color: #d81f28;
	  color: #fff;
	  font-size: 12px;
	  text-align: center;
	  font-weight: 500;
	  transform: rotate(-45deg);
	  padding: 1px 35px;
	  @include media-breakpoint-up(sm) {
		font: {
		  size: 16px;
		  weight: 600;
		}
		top: 27px;
		height: 32px;
		line-height: 32px;
	  }
	}
  }
  
  .card-widget {
	$self: &;
	border: $border;
	&__title {
	  font-size: 22px;
	  padding: 20px 20px 10px 20px;
	  margin: 0;
	  line-height: 20px;
	}
	&__list {
	  counter-reset: increment;
	}
	&__list-item {
	  display: flex;
	  margin: 0px 20px;
	  padding: 15px 0px 10px 0;
	  position: relative;
	  color: inherit;
	  border-bottom: $border;
	  &:hover {
		color: inherit;
		text-decoration: none;
	  }
	  &:last-child {
		border: none;
	  }
	}
	&__image-holder {
	  width: 100%;
	  max-width: 130px;
	  height: auto;
	  position: relative;
	  display: flex;
	  justify-content: center;
  
	  @include media-breakpoint-up(sm) {
		padding-right: 0;
	  }
  
	  img {
		height: auto;
		max-height: 90px;
		max-width: 99px;
		align-self: center;
		margin: 0 auto;
		display: block;
		padding: 0 15px 0 0;
		@include media-breakpoint-up($card-breakpoint-desktop) {
		  padding: 0 15px;
		  max-width: 100%;
		}
	  }
	}
	&__details {
	  width: calc(100% - 96px);
	  transform: translateY(-3px);
	  overflow: hidden;
	  @include media-breakpoint-up($card-breakpoint-desktop) {
		width: calc(100% - 126px);
	  }
	  .title {
		margin: 0;
		font-weight: 500;
		font-size: 16px;
		line-height: 1.2;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	  }
	  .sub-title {
		color: #666666;
		font-size: 14px;
		margin: 3px 0;
		overflow: hidden;
		max-height: 33px;
		line-height: 1.2;
	  }
	  .price {
		font-weight: 500;
		font-size: 20px;
		line-height: 1;
	  }
	  .sub-price {
		color: #999999;
		font-size: 13px;
		font-weight: 500;
		line-height: 1.5;
	  }
	}
	&__footer {
	  text-align: center;
	  padding: 13px 0px;
	  font-size: 16px;
	  border-top: $border;
	  display: block;
	}
	&--number {
	  #{$self}__list {
		counter-reset: item-counter;
	  }
	  #{$self}__list-item {
		counter-increment: item-counter;
		&:before {
		  content: counter(item-counter);
		  font-size: 14px;
		  position: absolute;
		  top: 15px;
		  left: 0;
		  line-height: 1;
		  z-index: 1;
		}
	  }
	}
  }
  
  .card-catalog {
	$self: &;
	display: flex;
	flex-wrap: wrap;
	&__container {
	  border: 1px solid $card-border;
	  position: relative;
	  display: flex;
	  flex-flow: wrap;
	  margin-bottom: 10px;
	  margin-top: 0;
	  @include media-breakpoint-up($card-breakpoint-desktop) {
		height: $card-container;
	  }
	}
	&__wrapper {
	  position: relative;
	  display: flex;
	  flex-flow: nowrap;
	  width: 100%;
	  min-height: $card-cp-listview-height;
	  @include media-breakpoint-up($card-breakpoint-desktop) {
		flex-flow: wrap;
		min-height: auto;
		height: 100%;
	  }
	}
	&__image-holder {
	  align-self: center;
	  flex-basis: $card-cp-listview-image-holder-width;
	  position: relative;
	  height: 110px;
	  @include media-breakpoint-up($card-breakpoint-desktop) {
		flex-basis: 100%;
		margin: $card-space $card-space 0 $card-space;
		height: $card-img-holder;
	  }
	  img {
		height: auto;
		max-height: 100%;
		max-width: 80%;
		@include absolute-position(50%, auto, auto, 50%, translate(-50%, -50%));
	  }
	}
	&__details {
	  flex-basis: calc(100% - #{$card-cp-listview-image-holder-width});
	  padding: 7px 10px 10px 0;
	  display: flex;
	  flex-flow: row wrap;
	  overflow: hidden;
	  @include media-breakpoint-up($card-breakpoint-desktop) {
		flex-basis: 100%;
		padding: 20px 20px 15px 20px;
		margin-top: auto;
	  }
	  p {
		margin: 0;
		word-break: break-word;
	  }
	  img {
		display: inline-block;
		max-width: 80px;
	  }
	  .title {
		@include card-cp-title;
	  }
	  .rating-stars {
		@include card-cp-rating;
	  }
	  .brand-name {
		font-size: 12px;
		line-height: 16px;
		color: $gray;
	  }
	  .price {
		font-weight: $card-price-font-weight;
		font-size: $card-price-font-size;
		line-height: 18px;
		word-break: break-word;
		display: inline-block;
		margin-top: 4px;
		margin-right: 6px;
	  }
	  .sub-price {
		@include media-breakpoint-up($card-breakpoint-desktop) {
		  align-self: flex-end;
		  line-height: 14px;
		}
	  }
	  .status {
		&.limited {
		  color: $pumpkin;
		}
  
		&.out-of-stock {
		  color: $alt-gray;
		}
	  }
	  .wrapper {
		flex-basis: 100%;
		color: inherit;
  
		&:hover {
		  text-decoration: none;
		}
		@include media-breakpoint-up($card-breakpoint-desktop) {
		  align-self: flex-end;
		  @include card-cp-wrapper;
		}
		+ .wrapper {
		  margin-top: auto;
		  @include media-breakpoint-up($card-breakpoint-desktop) {
			justify-content: flex-end;
		  }
		}
	  }
	}
  
	.mobile-action {
	  @include media-breakpoint-up($card-breakpoint-desktop) {
		display: none;
	  }
	}
	.mobile-action__links {
	  display: flex;
	  justify-content: space-between;
  
	  .compare {
		@include absolute-position(auto, 10px, 10px, auto, "none");
		color: $alt-gray-2;
		text-decoration: underline;
		font-size: 12px;
	  }
	}
	.desktop-action {
	  display: none;
	  @include media-breakpoint-up($card-breakpoint-desktop) {
		display: block;
		text-align: right;
		.list {
		  li {
			padding-right: 0;
			padding-left: 5px;
		  }
		  img {
			height: $card-cp-action-img-height;
			width: auto;
		  }
		}
	  }
	  .price-container {
		display: none;
	  }
	}
	&__desc {
	  display: none;
	}
	.tab-content {
	  width: 100%;
	  margin-bottom: 0;
	  .tab-pane {
		margin-top: 0px;
		height: 100%;
	  }
	}
	.card-catalog__colorpicker .colorpicker-desktop {
	  left: -1px;
	}
	@include card-cp-colorpicker;
	@include card-cp-brand;
  
	.badge {
	  background-color: #d81e26;
	  color: white;
	  position: absolute;
	  z-index: 1;
	  top: 20px;
	  right: 20px;
	  height: 70px;
	  width: 70px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  border-radius: 50%;
	  font-size: 20px;
	  font-weight: 600;
	  white-space: pre-line;
	}
	&--listview {
	  $breakpoint: "md";
	  @include media-breakpoint-up($breakpoint) {
		#{$self}__container {
		  flex-basis: 100%;
		  width: 100%;
		  height: auto;
		}
		#{$self}__desc {
		  display: block;
		  padding: 0 0 0 $spacing / 2;
		  max-height: 100px;
		  overflow: hidden;
		  line-height: 20px;
		}
		#{$self}__image-holder {
		  flex-basis: $card-cp-listview-image-holder-width-desktop;
		  height: 110px;
		  margin: 0;
		  padding: 0;
		}
		#{$self}__wrapper {
		  flex-flow: nowrap;
		  min-height: 0;
		  height: $card-cp-listview-height;
		  padding: 20px 10px;
		}
		#{$self}__details {
		  flex-basis: calc(
			100% - #{$card-cp-listview-image-holder-width-desktop}
		  );
		  flex-flow: wrap;
		  padding: 0;
		}
		.rating-stars {
		  margin: 2px 0 7px 0;
		}
		.wrapper {
		  align-self: flex-start;
		  padding: 0;
		  height: 100%;
		  overflow: hidden;
		  &-brands {
			align-self: flex-start;
		  }
		  &:nth-child(1) {
			flex-basis: calc(100% - #{$card-cp-listview-details-width});
			max-width: calc(100% - #{$card-cp-listview-details-width});
			display: block;
			.price-container {
			  display: none;
			}
		  }
		  &:nth-child(2) {
			flex-basis: 100%;
			align-self: auto;
			justify-content: flex-end;
			flex-basis: $card-cp-listview-details-width;
			max-width: $card-cp-listview-details-width;
			.price-container {
			  display: block;
			}
		  }
		  + .wrapper {
			margin: 0;
		  }
		}
		.desktop-action {
		  display: flex;
		  flex-flow: column wrap;
		  .price {
			font: {
			  size: 30px;
			  weight: 600;
			}
			display: block;
			line-height: 1.05em;
			margin: 0;
		  }
		  .brand {
			margin-top: auto;
			align-self: flex-end;
		  }
		}
		.brand {
		  margin-bottom: 8px;
		}
	  }
	}
  }
  
  .card-product {
	$self: &;
	&__container {
	  position: relative;
	  &:not(:last-child) {
		margin-bottom: 5px;
	  }
	}
	&__wrapper {
	  border: $border;
	  display: flex;
	  flex-flow: wrap;
	  min-height: $card-container;
	}
	&__image-holder {
	  flex-basis: 100%;
	  display: flex;
	  align-self: center;
	  justify-content: center;
	  height: $card-img-holder;
	  position: relative;
	  margin: $card-space $card-space 0 $card-space;
	  @include media-breakpoint-up(sm) {
		flex-basis: 100%;
	  }
	  img {
		height: auto;
		max-height: 100%;
		max-width: 100%;
		position: absolute;
		@include absolute-position(50%, auto, auto, 50%, translate(-50%, -50%));
	  }
	}
	&__details {
	  display: flex;
	  flex-basis: 100%;
	  flex-wrap: wrap;
	  padding: $card-details-space;
	  max-width: 100%;
	  p {
		margin: 0;
		word-break: break-word;
	  }
	  img {
		display: inline-block;
		max-width: 80px;
	  }
	  .title {
		@include card-cp-title();
	  }
	  .rating-stars {
		@include card-cp-rating;
	  }
	  .price {
		line-height: 18px;
		margin-top: 4px;
		margin-right: 6px;
		font-weight: $card-price-font-weight;
		font-size: $card-price-font-size;
		word-break: break-word;
		display: inline-block;
	  }
	  .status {
		&.limited {
		  color: $pumpkin;
		}
  
		&.out-of-stock {
		  color: $alt-gray;
		}
	  }
	  .mobile-action {
		display: none;
	  }
	  .mobile-action div {
		display: flex;
		justify-content: space-between;
	  }
	  .desktop-action {
		display: block;
		text-align: right;
		.list {
		  li {
			padding-right: 0;
			padding-left: 5px;
		  }
		  img {
			height: $card-cp-action-img-height;
		  }
		}
		.price-container {
		  display: none;
		}
	  }
	  .list-description {
		display: none;
	  }
	}
	.wrapper {
	  @include card-cp-wrapper;
	  align-self: flex-end;
	  + .wrapper {
		justify-content: flex-end;
	  }
	  &-brands {
		align-self: center;
		flex-basis: 100%;
	  }
	  &.wrapper--full {
		flex-basis: 100%;
	  }
	}
	&--listview {
	  margin: 0;
  
	  #{$self}__container {
		flex-basis: 100% !important;
		margin-left: 0;
		margin-right: 0;
	  }
	  #{$self}__wrapper {
		flex-flow: nowrap;
		min-height: 0;
		height: $card-cp-listview-height;
	  }
	  #{$self}__image-holder {
		flex-basis: $card-cp-listview-image-holder-width-desktop;
		height: 110px;
		padding: 10px 0 10px 10px;
		margin: 0;
		@include media-breakpoint-up(sm) {
		  flex-basis: $card-cp-listview-image-holder-width;
		}
	  }
	  #{$self}__details {
		flex-basis: calc(100% - #{$card-cp-listview-image-holder-width-desktop});
		flex-flow: wrap;
		padding: 7px 9px 10px 9px;
	  }
	  .wrapper {
		align-self: center;
		&-brands {
		  align-self: flex-start;
		}
		&:nth-child(1) {
		  flex-basis: 100%;
		  max-width: 100%;
		  @include media-breakpoint-up(sm) {
			flex-basis: calc(100% - #{$card-cp-listview-details-width});
			max-width: calc(100% - #{$card-cp-listview-details-width});
		  }
		  .price-container {
			@include media-breakpoint-up(sm) {
			  display: none;
			}
		  }
		}
		&:nth-child(2) {
		  flex-basis: 100%;
		  max-width: 100%;
		  align-self: flex-end;
		  justify-content: normal;
		  @include media-breakpoint-up(sm) {
			align-self: auto;
			justify-content: flex-end;
			flex-basis: $card-cp-listview-details-width;
			max-width: $card-cp-listview-details-width;
		  }
		  .price-container {
			display: block;
		  }
		}
		.list {
		  font-size: 16px;
		  list-style-position: inside;
		}
	  }
	  .list-description {
		max-height: 100px;
		overflow: hidden;
		line-height: 20px;
		@include media-breakpoint-up(sm) {
		  display: block;
		}
  
		&.show {
		  display: block !important;
		}
	  }
	  .desktop-action {
		.sub-price {
		  display: block;
		}
		display: none;
		@include media-breakpoint-up(sm) {
		  display: flex;
		  flex-flow: column;
		}
		.price-container {
		  margin-bottom: auto;
		}
		.price {
		  margin: 0;
		}
		img {
		  align-self: flex-end;
		}
	  }
	  .mobile-action {
		display: block;
		@include media-breakpoint-up(sm) {
		  display: none;
		}
	  }
	}
	.tab-pane {
	  margin-top: 0;
	}
	.price {
	  &-container {
		//   display: flex;
		line-height: 1em;
	  }
	}
	@include card-cp-colorpicker;
	@include card-cp-brand;
	& + & {
	  #{$self}__wrapper {
		border-top: none;
		@include media-breakpoint-up($card-breakpoint-desktop) {
		  border-top: $border;
		}
	  }
	}
  }
  
  .card {
	&-catalog,
	&-product {
	  a {
		color: inherit;
		&:hover {
		  text-decoration: none;
		}
		&.btn--standard {
		  color: white;
		}
	  }
	}
	&-catalog,
	&-product--listview {
	  .mobile-action__links {
		&--compare {
		  @include absolute-position(auto, 10px, 10px, auto, "none");
		  color: $alt-gray-2;
		  text-decoration: underline;
		  font-size: 12px;
		}
	  }
	  .price-container {
		//   display: flex;
		line-height: 1em;
	  }
	}
	&-catalog,
	&-product {
	  &__details {
		.status {
		  color: #3ac600;
		  font-size: 12px;
		  font-weight: 500;
		  margin: 3px 0 7px 0;
		}
	  }
	  .brand-name {
		font-size: 12px;
		line-height: 16px;
		color: #999999;
	  }
	  .sub-price {
		font-size: 12.5px;
		font-weight: 500;
		color: #666666;
		word-break: break-word;
		display: inline-block;
		align-self: flex-end;
		line-height: 14px;
	  }
	}
  }
  
  .card-schedule {
	background: #f1f1f1;
	padding: 30px;
	position: relative;
	&__title {
	  margin-bottom: 15px;
	}
	&__details {
	  table {
		width: 100%;
		tr {
		  vertical-align: top;
		  &.active {
			font-weight: 400;
		  }
		}
		td {
		  padding: 0;
		}
	  }
	  .time {
		text-align: right;
	  }
	}
	&__btn {
	  width: calc(100% - 4px);
	  margin: 0 auto;
	}
	p {
	  margin-bottom: 8px;
	}
	&__flag {
	  position: absolute;
	  right: 0;
	  top: 0;
	  img {
		width: 100%;
		max-width: 70px;
	  }
	}
  }
  
  .card-video {
	position: relative;
	&__overlay {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-color: rgba(0, 0, 0, 0.2);
	}
	&__frame {
	  line-height: 1;
	  height: 250px;
	}
	&__action {
	  position: absolute;
	  display: block;
	  z-index: 1;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  border: 1.5px solid White;
	  border-radius: 50px;
	  background-color: black;
	  width: 60px;
	  height: 60px;
	  cursor: pointer;
	  @include media-breakpoint-up(sm) {
		width: 60px;
		height: 60px;
	  }
	  &:before {
		content: "";
		width: 25px;
		height: 25px;
		z-index: 2;
		position: absolute;
		top: 55%;
		left: 60%;
		transform: translate(-55%, -60%);
		border-width: 15px 0px 15px 25px;
		border-color: transparent transparent transparent white;
		border-style: solid;
		@include media-breakpoint-up(sm) {
		  width: 30px;
		  height: 30px;
		  top: 62%;
		  left: 66%;
		  transform: translate(-60%, -73%);
		}
	  }
	}
	&__details {
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  padding: 5px 10px 20px;
	  .title {
		color: #fff;
		margin: 0;
		font-size: 14px;
	  }
	}
  }
  
  .card-discussion {
	display: flex;
	flex-flow: wrap;
	border-top: $border;
	border-left: $border;
	&__container {
	  display: flex;
	  border-right: $border;
	  border-bottom: $border;
	  padding: 10px;
	  width: 100%;
	  overflow: hidden;
	  @include media-breakpoint-up(sm) {
		width: calc(50%);
		padding: 25px;
	  }
	}
	&__image-holder {
	  img {
		width: 50px;
		border: 1px solid #000;
		border-radius: 100%;
		@include media-breakpoint-up(sm) {
		  width: 80px;
		}
	  }
	}
	&__details {
	  margin-left: 10px;
	  position: relative;
	  flex-basis: 100%;
	  overflow: hidden;
	  @include media-breakpoint-up(sm) {
		display: flex;
		flex-flow: wrap;
		margin-left: 20px;
	  }
	  .time {
		position: absolute;
		right: 5px;
		color: #a9a9a9;
		font-weight: 600;
		@include media-breakpoint-up(sm) {
		  display: none;
		}
	  }
	  .author {
		margin: 0;
		display: inline-block;
		font-weight: 600;
		margin-bottom: 5px;
		@include media-breakpoint-up(sm) {
		  order: 1;
		  font-weight: 100;
		  margin: 0;
		  margin-right: 10px;
		}
	  }
	  .badge {
		display: none;
		@include media-breakpoint-up(sm) {
		  display: inline-block;
		  right: 470px;
		  order: 2;
		  height: 18px;
		  margin-top: 2px;
		}
	  }
	  .title {
		font-weight: 600;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		margin: 0;
	  }
	  .description {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		font-weight: 500;
		@include media-breakpoint-up(sm) {
		  margin-bottom: 10px;
		}
	  }
	}
  }
  
  .card-simple {
	&__image-holder {
	  position: relative;
	  height: 92px;
	  width: 100%;
	  background-size: contain;
	  background-position: center;
	  background-repeat: no-repeat;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  @include media-breakpoint-up(sm) {
		height: 130px;
	  }
	  &--warranty,
	  &--money-back,
	  &--shipping,
	  &--care-center {
		height: 92px;
		margin-bottom: 10px;
	  }
	  &--warranty {
		img {
		  width: 62px;
		}
	  }
	  &--money-back {
		img {
		  width: 77px;
		}
	  }
	  &--shipping {
		img {
		  width: 135px;
		}
	  }
	  &--care-center {
		img {
		  width: 100px;
		}
	  }
	  img {
		max-height: 100%;
		max-width: 100%;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	  }
	}
	&__details {
	  text-align: center;
	  margin-top: 5px;
	  .title {
		font-size: 16px;
		font-weight: 500;
		line-height: 1.25;
		margin-bottom: 0;
	  }
	}
  
	// added for logo asset adjustment on card
	&--review {
	  .card-simple__image-holder {
		height: 80px;
		@include media-breakpoint-up(sm) {
		  height: 64px;
		}
	  }
	}
  }
  
  .card-outline {
	$self: &;
	transition: all 0.5s ease;
	display: block;
	text-decoration: none;
	position: relative;
	border: $border;
	text-decoration: none;
	color: $black;
  
	&:hover {
	  text-decoration: none;
	}
  
	a {
	  text-decoration: none;
	  color: $black;
  
	  &:hover {
		text-decoration: none;
	  }
	}
  
	&--video {
	  .card-outline {
		&__image-holder {
		  background-color: #000;
		}
		&__content {
		  max-height: $card-container;
		}
	  }
	  .video_container {
		position: relative;
		padding-bottom: 56.25%;
		/* 16:9 */
		padding-top: 25px;
		height: 0;
		top: 50%;
		transform: translateY(-50%);
		iframe,
		video {
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		  width: 100%;
		  height: 100%;
		}
	  }
	  #{$self}__image-holder {
		height: 218px;
	  }
  
	  #{$self}__details {
		height: 94px;
		padding: 15px;
		color: $alt-gray-2;
  
		.title {
		  font-size: 16px;
		  line-height: 1.25;
		}
	  }
	}
  
	&--bestseller {
	  overflow: visible;
  
	  #{$self}__image-holder {
		position: absolute;
		top: 20px;
		right: 15px;
		border: none;
		img {
		  position: absolute;
		  top: 0;
		  right: 0;
		}
	  }
	  #{$self}__details {
		max-height: 100%;
		height: 100%;
		justify-content: flex-end;
		color: $black;
		background-color: transparent;
  
		.price {
		  &-converted {
			line-height: 1;
			font-size: 21px;
		  }
  
		  &-original {
			line-height: 1;
			font-size: 12px;
			color: $gray;
		  }
		}
  
		.title {
		  font-size: 14px;
		  color: #5c5c5c;
		  line-height: 1.14;
		  margin-top: 8px;
		}
  
		.desc {
		  font-size: 10px;
		  line-height: 1.6;
		  color: #5c5c5c;
		  margin-top: 5px;
		}
	  }
	}
  
	&__content {
	  width: 100%;
	  height: 100%;
	  position: relative;
	  display: flex;
	  align-items: flex-end;
	  background-color: #fff;
	  overflow: hidden;
	  &:after {
		content: "";
		display: block;
		padding-bottom: 100%;
	  }
	}
  
	&__image-holder {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: calc(100% - 50px);
	  background-size: contain;
	  background-position: 50% 50%;
	  background-repeat: no-repeat;
	  border-bottom: $border;
	  @include media-breakpoint-up(sm) {
		height: calc(100% - 60px);
	  }
  
	  &--full {
		height: 100%;
  
		@include media-breakpoint-up(sm) {
		  height: 100%;
		}
	  }
  
	  .media {
		position: absolute;
  
		&--sm {
		  height: 25%;
		  width: 25%;
		}
  
		&--md {
		  height: 50%;
		  width: 50%;
		}
  
		&--lg {
		  height: 75%;
		  width: 75%;
		}
  
		&--xl {
		  height: 100%;
		  width: 100%;
		}
	  }
  
	  .contain {
		img {
		  max-height: 100%;
		  max-width: 100%;
		}
	  }
  
	  .contain-y {
		img {
		  height: 100%;
		  width: auto;
		  max-width: none;
		}
	  }
  
	  .contain-x {
		img {
		  width: 100%;
		  height: auto;
		  max-height: none;
		}
	  }
	}
	//  round color background
	&__bg-color {
	  position: absolute;
	  height: 90%;
	  width: 90%;
	  top: 5%;
	  right: 25%;
	  border-radius: 100%;
	}
  
	&__colorpicker {
	  z-index: 3;
	  position: absolute;
  
	  .colorpicker-mobile {
		position: absolute;
		z-index: 1;
		top: 10px;
		left: 10px;
		line-height: 0;
		@include media-breakpoint-up(sm) {
		  display: none;
		}
	  }
	  .colorpicker-desktop {
		position: absolute;
		top: 10px;
		left: 0;
		display: none;
		z-index: 1;
		@include media-breakpoint-up(sm) {
		  display: block;
		  width: 40px;
		}
		.colorpicker {
		  padding-left: 15px;
		}
	  }
	}
  
	&__description {
	  &-toggle {
		position: absolute;
		content: "";
		top: 10px;
		right: 10px;
		height: 15px;
		width: 5px;
		z-index: 5;
		background-image: url("../../public/images/icons/icon_vertical-menu.svg");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		opacity: 0.7;
		@include hover-opacity-fadeIn();
  
		@include media-breakpoint-up(sm) {
		  width: 10px;
		  height: 20px;
		}
	  }
  
	  &-close {
		@include close-button();
		@include absolute-position(10px, 10px, auto, auto, none);
	  }
	}
  
	&__details-wrapper {
	  @include absolute-position(0, 0, auto, auto, none);
	  height: 100%;
	  width: 100%;
	  display: flex;
	  align-items: flex-end;
	}
  
	&__details {
	  position: relative;
	  display: flex;
	  flex-direction: column;
	  width: 100%;
	  height: auto;
	  max-height: 50%;
	  padding: 6%;
	  bottom: 0;
	  left: 0;
	  background-color: #fff;
	  z-index: 2;
  
	  &-content {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		overflow-y: hidden;
	  }
  
	  &--bg-transparent {
		background-color: rgba(255, 255, 255, 0.75);
	  }
  
	  &:not(.js-expanded) {
		min-height: 50px;
  
		@include media-breakpoint-up(sm) {
		  min-height: 60px;
		}
  
		.js-text-expand {
		  p {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			margin: 0;
		  }
		}
	  }
  
	  &.js-expanded {
		cursor: default;
  
		@include media-breakpoint-up(sm) {
		  border-top: $border;
  
		  .btn-close {
			display: block;
		  }
		}
	  }
  
	  &.mCustomScrollbar {
		padding: 0;
  
		.mCSB_container {
		  padding: 10px;
  
		  .btn-close {
			top: 15px;
			right: 10px;
		  }
		}
	  }
  
	  .btn-close {
		@include close-button();
		@include absolute-position(0, 0, auto, auto, none);
		display: none;
	  }
  
	  p {
		margin: 0;
  
		&.brand {
		  position: absolute;
		  right: 4%;
		  bottom: 6%;
		}
	  }
	}
  
	&__ribbon {
	  height: 126px;
	  width: 126px;
	  position: absolute;
	  top: -7px;
	  left: -7px;
	  z-index: 5;
	  background-image: url("../../public/images/common/ribbon-126.png");
	  background-size: cover;
	  background-repeat: no-repeat;
	  background-position: top 0 left 0;
  
	  .label {
		text-transform: uppercase;
		color: #fff;
		transform: rotate(-49deg);
		display: block;
		text-align: center;
		position: absolute;
		top: 29%;
		right: 14%;
		width: 100%;
		font-size: 16px;
	  }
	}
  
	.toggle-ellipsis {
	  background: #cccccc;
	}
  
	// description popup
	&__pop-detail {
	  @include absolute-position(20px, auto, auto, 20px, none);
	  overflow: visible;
	  height: 3px;
	  width: 3px;
	  border-radius: 100%;
	  background-color: #58595b;
  
	  &::before,
	  &::after {
		content: "";
		height: 3px;
		width: 3px;
		border-radius: 100%;
		background-color: #58595b;
	  }
  
	  &::before {
		@include absolute-position(-5px, auto, auto, 0, none);
	  }
  
	  &::after {
		@include absolute-position(auto, auto, -5px, 0, none);
	  }
	}
  }
  
  .card-customer-service {
	$breakpoint: "md";
	position: relative;
	background-color: #f4f4f4;
	text-align: center;
	height: 330px;
	display: flex;
	flex-flow: column;
	overflow: hidden;
  
	@include media-breakpoint-up($breakpoint) {
	  height: 200px;
	  flex-flow: row wrap;
	  text-align: left;
	  align-items: center;
	  justify-content: space-between;
	  padding: 0 50px;
	}
  
	&__image-holder {
	  display: flex;
	  align-items: flex-end;
	  justify-content: flex-end;
	  flex: 1;
	  img {
		max-width: 100%;
	  }
	  @include media-breakpoint-up(sm) {
		justify-content: center;
		height: 100%;
	  }
	}
  
	&__details {
	  padding: 30px 5px;
	  @include media-breakpoint-up($breakpoint) {
		padding: 0;
		flex: 1;
	  }
	  &-title {
		margin: 0;
		font: {
		  size: 20px;
		}
		@include media-breakpoint-up($breakpoint) {
		  font-size: 26px;
		  line-height: 30px;
		}
	  }
	  img {
		max-width: 21px;
		max-height: 21px;
		margin-right: 10px;
	  }
	}
  
	&__contacts {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  margin-top: 14px;
	  font-size: 14px;
	  @include media-breakpoint-up($breakpoint) {
		justify-content: flex-start;
		font: {
		  size: 16px;
		  weight: 600;
		}
	  }
  
	  a {
		color: $black;
		display: inline-block;
		+ img {
		  margin-left: 20px;
		}
	  }
	}
  }
  
  .card-blog {
	font-size: $body-font-size;
	margin-bottom: 15px;
	color: $body-color;
	&:hover {
	  color: inherit;
	  text-decoration: none;
	}
	&__title {
	  font-weight: 600;
	  height: 36px;
	  line-height: 1.2em;
	  margin: 15px 0;
	  @include media-breakpoint-up(sm) {
		padding: 0 10px;
	  }
	}
	&__desc {
	  @include media-breakpoint-up(sm) {
		padding: 0 10px;
	  }
	}
	&__img-holder {
	  border: $border;
	  height: $card-container;
	  overflow: hidden;
	  background: {
		repeat: no-repeat;
		size: cover;
		position: center;
	  }
	}
  }
  
  .card-table {
	$breakpoint: "lg";
	$img-width: 160px;
	$img-width-desktop: 126px;
	margin-top: 17px;
	margin-bottom: 20px;
	p {
	  margin-bottom: 0;
	}
	@include media-breakpoint-up($breakpoint) {
	  border-bottom: 1px solid #333333;
	  margin-top: 5px;
	}
	&__item {
	  display: flex;
	  border: 1px solid #d7d7d7;
	  height: 160px;
	  @include media-breakpoint-up($breakpoint) {
		height: 110px;
		border: none;
		border-top: 1px solid #d7d7d7;
	  }
	  &-img {
		flex-basis: $img-width;
		height: auto;
		padding: 12px 12px 12px 25px;
		align-content: center;
		display: flex;
		@include media-breakpoint-up($breakpoint) {
		  position: absolute;
		  width: $img-width-desktop;
		  height: 110px;
		}
		img {
		  width: auto;
		  max-height: 130px;
		  align-self: center;
		  max-width: 120px;
		  margin: 0 auto;
		  @include media-breakpoint-up($breakpoint) {
			max-height: 85px;
			justify-content: center;
			margin: 0 auto;
			max-width: 100%;
		  }
		}
	  }
	  &-details {
		padding: 12px;
		flex: calc(100% - #{$img-width});
		@include media-breakpoint-up($breakpoint) {
		  display: flex;
		}
		.title {
		  @include media-breakpoint-up($breakpoint) {
			font: {
			  size: 20px;
			  weight: 600;
			}
			order: 1;
		  }
		}
		.brand {
		  font: {
			size: 12px;
		  }
		  color: #999999;
		  margin-bottom: 5px;
		  @include media-breakpoint-up($breakpoint) {
			order: 0;
			display: inline-flex;
			font: {
			  size: 20px;
			  weight: 600;
			}
			color: #333;
			margin-right: 5px;
		  }
		}
		.availability {
		  font-size: 14px;
		  color: #3ac600;
		  @include media-breakpoint-up($breakpoint) {
			font-size: 16px;
			order: 1;
			margin: 5px 0 7px 0;
			flex-basis: 100%;
		  }
		}
		.actions {
		  font-size: 14px;
		  @include media-breakpoint-up($breakpoint) {
			font: {
			  size: 16px;
			}
			order: 1;
		  }
		  li {
			color: $blue;
			padding-right: 7px;
			line-height: 13px;
			padding-top: 2px;
			cursor: pointer;
			+ li {
			  padding-left: 7px;
			  border-left: 1px solid #666666;
			}
		  }
		}
		.date {
		  font-size: 14px;
		  width: calc(100% - 70px);
		  @include media-breakpoint-up($breakpoint) {
			font-size: 16px;
		  }
		}
		.price {
		  font: {
			size: 20px;
			weight: 600;
		  }
		  margin-right: 5px;
		  @include media-breakpoint-up($breakpoint) {
			font-size: 24px;
			color: #333333;
			margin-right: 0;
			display: block;
			margin-left: auto;
		  }
		  &-orig {
			color: #666666;
			font: {
			  size: 12px;
			}
			@include media-breakpoint-up($breakpoint) {
			  font-size: 16px;
			  color: #999999;
			  margin-top: 7px;
			  display: block;
			  margin-left: auto;
			}
		  }
		}
		.quantity,
		.date,
		.price,
		.price-orig {
		  display: inline-flex;
		}
		select {
		  width: 60px;
		  height: 26px;
		  margin: 5px 6px 3px 0;
		  padding: 0 0.75rem;
		}
		&-row {
		  @include media-breakpoint-up($breakpoint) {
			display: flex;
			align-items: center;
			width: 100%;
		  }
		}
		&-col {
		  &.price {
			width: 100%;
			align-items: baseline;
		  }
		  @include media-breakpoint-up($breakpoint) {
			display: flex;
			width: 100%;
			flex-flow: row wrap;
			&.item {
			  width: 57.53%;
			  order: 0;
			  padding-left: $img-width-desktop;
			}
			&.date {
			  width: 22.28%;
			  order: 1;
			}
			&.quantity {
			  width: 10.37%;
			  text-align: center;
			  order: 2;
			}
			&.price {
			  width: 19.75%;
			  margin-left: auto;
			  order: 2;
			  flex-flow: column wrap;
			  text-align: right;
			  align-items: flex-end;
			}
		  }
		}
	  }
	  &-head {
		display: none;
		@include media-breakpoint-up($breakpoint) {
		  display: block;
		  width: 100%;
		  padding: 8px 12px;
		}
		.card-table__item-details-col {
		  &.item {
			width: 57.53%;
			transform: translateX(-90px);
		  }
		}
	  }
	  & + & {
		margin-top: 10px;
		@include media-breakpoint-up($breakpoint) {
		  margin-top: 0;
		}
	  }
	}
  }
  