/* Productlisting
   ========================================================================== */

$tile-height: $gx-product-listing-image-height + $gx-ribbons-padding + $gx-products-name-height + $gx-rating-height + $gx-products-price-height + $gx-product-tile-additional-container;
$tile-height-mobile: $gx-product-listing-image-height-mobile + $gx-ribbons-padding + $gx-products-name-height + $gx-rating-height + $gx-products-price-height + $gx-product-tile-additional-container;

.productlist {
	padding: 0 0 $grid-gutter-width;

	// transitions when switching viewmode

	@include opacity(1);
	@include transition(300ms ease opacity);

	&.fadeOut {
		@include opacity(0);
	}
}

// swiper container

.productlist-swiper {
	position: relative;
	margin-bottom: $grid-gutter-width;

	.swiper-button-prev {
		left: 0;
		margin-top: -30px;

		@media (min-width: ($screen-sm-min)) {
			left: -15px;
		}

		@media (min-width: ($screen-lg-min + 120)) {
			left: -60px;
		}
	}

	.swiper-button-next {
		right: 0;
		margin-top: -30px;

		@media (min-width: ($screen-sm-min)) {
			right: -15px;
		}

		@media (min-width: ($screen-lg-min + 120)) {
			right: -60px;
		}
	}

	.swiper-pagination {
		display: none;
	}

	.swiper-button-prev,
	.swiper-button-next {

		// show arrows always 
		// but for small devices as overlay

		@media (max-width: ($screen-lg-min + 119)) {
			display: block;
			background: rgba(220, 220, 220, .6);
			color: #FFFFFF;
			z-index: 1001;

			&:hover {
				background: rgba(220, 220, 220, .9);
			}
		}
	}
}

// PRODUCT BLOCK

.product-container {
	position: relative;
	padding: 0;

	@include background($gx-product-bg,
			$gx-product-bg-image-url,
			$gx-product-bg-image-position,
			$gx-product-bg-image-repeat,
			$gx-product-bg-image-size,
			$gx-product-bg-image-attachment);

	&.flyover {
		.inside {
			min-height: 380px;
		}
	}

	// GENERAL

	.inside {
		.hidden-list {
			display: none;
		}

		.content-container {
			padding: 0 15px;

			.content-container-inner {
				.title {
					font-weight: $headings-font-weight;
					font-size: 14px;
					max-height: 81px;
					overflow: hidden;
					text-overflow: ellipsis;

					@media (min-width: $screen-xs-min) {
						font-size: $font-size-h4;
					}

					@media (max-width: $screen-xs-min) {
						max-height: 75px;
					}

					a {
						color: $text-color;

						&:hover {
							text-decoration: none;
						}
					}
				}

				.price {
					font-size: 14px;
					font-weight: 700;
					white-space: nowrap;

					@media (min-width: $screen-xs-min) {
						font-size: $font-size-h4;
						white-space: inherit;
					}

					.productOldPrice {
						font-size: $font-size-base;
						color: $gray-light;
						font-weight: normal;
					}

					a {
						color: $text-color;

						&:hover {
							text-decoration: none;
						}
					}

					.gm_products_vpe {
						&.products-vpe {
							font-size: $font-size-small;
							font-weight: normal;
							color: $gray-light;
						}
					}
				}

				.tax-shipping-hint {
					font-size: $font-size-small;
					color: $gray-light;

					a {
						color: $gray-light;
						text-decoration: underline;
					}
				}

				.graduated-prices {
					margin-top: 15px;
				}
			}
		}
	}

	&.has-discount {
		.price {
			text-decoration: line-through;
		}
	}

	.shipping-info-short {
		display: inline-block;
	}

	.gallery {
		position: absolute;
		display: none;
		width: $gx-product-listing-gallery-width;
		left: 0;
		top: 0;
		height: $tile-height + 49px;
		overflow-y: auto;

		@include border-left-radius($border-radius-base);
		@include background($gx-gallery-bg,
				$gx-gallery-bg-image-url,
				$gx-gallery-bg-image-position,
				$gx-gallery-bg-image-repeat,
				$gx-gallery-bg-image-size,
				$gx-gallery-bg-image-attachment);
		@include reset-list();

		> li {
			display: block;
			margin: 10px 10px 0 10px;
			height: $gx-product-listing-gallery-image-height;
			overflow: hidden;
			border: 1px solid #DDDDDD;
			@include border-radius($border-radius-base);
			background-color: #FFFFFF;

			&.loaded {
				a {
					display: block;
				}
			}

			img {
				@extend .img-thumbnail;
				@extend .img-responsive;
				border: none;
				max-height: 95%;
				cursor: pointer;
				display: inline-block;
				vertical-align: middle;
				width: 90%;

				&.spinner {
					width: 32px;
					height: 32px;
					margin-left: -4px;
				}
			}

			a {
				height: 100%;
				width: 100%;
			}

		}
	}

	// GRID VIEW

	.productlist-viewmode-grid &,
	.productlist-swiper &,
	&.flyover {
		height: $tile-height;
		text-align: center;
		z-index: 1;

		@media (max-width: $screen-xs-max) {
			height: $tile-height-mobile;
		}

		// apply grid cols

		@include make-xs-column($gx-product-listing-col-xs);
		@include make-sm-column($gx-product-listing-col-sm);
		@include make-md-column($gx-product-listing-col-md);
		@include make-lg-column($gx-product-listing-col-lg);

		// Reset padding of grid columns
		padding: 0;

		//  hide some details

		.hidden-grid {
			display: none;
		}

		.hidden-list {
			display: block;
		}

		.product-tile {
			border-right: 1px solid $gx-product-list-border-color;
			height: 100%;

			figure {
				padding: $gx-ribbons-padding 15px 0 15px;
				display: table;
				height: $gx-product-listing-image-height + $gx-ribbons-padding;
				width: 100%;

				/* Add some rules only needed for IE missbehaviours */
				@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
					table-layout: fixed;
				}

				@media (max-width: $screen-xs-max) {
					height: $gx-product-listing-image-height-mobile + $gx-ribbons-padding;
				}

				.product-image {
					display: table-cell;
					vertical-align: bottom;

					/* Add some rules only needed for IE missbehaviours */
					@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
						width: 100%;
					}

					img {
						display: inline-block;
						height: auto;
						max-height: $gx-product-listing-image-height;
						max-width: 100%;

						@media (max-width: $screen-xs-max) {
							max-height: $gx-product-listing-image-height-mobile;
						}
					}
				}
			}

			.ribbons {
				right: 0;
			}

			.title-description {
				display: table;
				height: $gx-products-name-height;
				padding: 0 15px;
				width: 100%;

				@media (min-width: $screen-sm-min) {
					padding: 0 30px;
				}

				.title {
					display: table-cell;
					font-weight: $headings-font-weight;
					font-size: 14px;
					padding-top: 15px;
					vertical-align: top;

					a {
						color: $text-color;
						display: inline-block;
						max-height: $gx-products-name-height - 30px;
						overflow: hidden;
						text-overflow: ellipsis;

						&:hover {
							text-decoration: none;
						}
					}
				}
			}

			.rating-container {
				display: table;
				height: $gx-rating-height;
				width: 100%;

				> span {
					display: table-cell;
					vertical-align: middle;
				}
			}

			.price-tax {
				.price {
					font-size: 14px;
					font-weight: 700;

					@media (min-width: $screen-xs-min) {
						font-size: $font-size-h4;
					}

					.current-price-container {
						// workaround to fake product old price row
						&:before {
							content: " ";
							display: block;
							height: 20px;
						}

						.productOldPrice {
							margin-top: -22px;
							display: block;
							margin-bottom: -20px;
							font-size: $font-size-base;
							color: $gray-light;
							font-weight: normal;
						}
					}

					a {
						color: $text-color;

						&:hover {
							text-decoration: none;
						}
					}

					.gm_products_vpe {
						&.products-vpe {
							font-size: $font-size-small;
							font-weight: normal;
							color: $gray-light;
						}
					}
				}

				@if ($gx-show-shipping-in-tile == true) {
					.shipping {
						color: #999999;
						display: block;
						width: 100%;
					}
				}
			}
		}

	}

	.productlist-viewmode-grid & {
		margin-bottom: 30px;

		.price-tax {
			border-bottom: 1px solid $gx-product-list-border-color;
			margin: 0 15px;
			@if ($gx-show-shipping-in-tile == true) {
				padding-bottom: 15px;

				.shipping {
					display: block !important;

					.shipping-info-short {
						> img {
							display: none;
						}
					}
				}
			} @else {
				padding-bottom: 30px;
			}
		}
	}

	// grid borders for swiper
	.productlist-swiper & {
		> form {
			border-bottom-color: transparent;
		}

		> form {
			border-right: 1px solid $gx-product-list-border-color !important;
		}

		border-bottom: transparent;
	}

	// LIST VIEW

	.productlist-viewmode-list & {
		@include clearfix();

		.inside {
			.content-container {
				.content-container-inner {
					width: 100%;
					text-align: left;
					padding: ($grid-gutter-width / 2) 0;

					@include clearfix();

					@media (min-width: $screen-md-min) {
						display: table;
					}

					.image {
						position: relative;
						@include make-sm-column(4);
						@include make-md-column(2);
						@include make-lg-column(2);

						a {
							height: 130px;
							width: 100%;
						}

						@media (min-width: $screen-md-min) {
							float: none !important;
							display: table-cell;
							height: 100%;
							vertical-align: top;
						}

						.product-image {
							display: block;
							cursor: pointer;
							height: $gx-product-listing-image-height;
							overflow: hidden;
							display: table-cell;
							vertical-align: middle;

							img {
								position: absolute;
								top: 50%;
								left: 50%;
								max-width: 100%;
								max-height: 100%;
								transform: translateX(-50%) translateY(-50%);
								-webkit-transform: translateX(-50%) translateY(-50%); // used to solve compatibility issues
								-moz-transform: translateX(-50%) translateY(-50%); // used to solve compatibility issues
								-ms-transform: translateX(-50%) translateY(-50%); // used to solve compatibility issues
							}
						}

						&.no-image {
							padding: 0 5px;

							.product-image {
								display: block;
							}
						}
					}

					.title-description {
						@include make-sm-column(8);
						@include make-md-column(6);
						@include make-lg-column(6);

						.title {
							margin-bottom: 15px;
						}

						.description {
							min-height: 50px;
						}

						.shipping {
							margin-top: 15px;
							font-size: $font-size-small;

							&.visible-list {
								display: inline-block !important;
							}
						}

						@media (min-width: $screen-md-min) {
							float: none !important;
							display: table-cell;
							height: 100%;
							vertical-align: top;
						}

						.listing_attributes_selection {
							dl {
								margin-top: 18px;

								.option-value {
									select {
										&.col-xs-12 {
											margin-bottom: 10px;
											padding: 5px;
										}
									}
								}
							}
						}
					}

					.price-tax {
						@include make-sm-column(12);
						@include make-md-column(4);
						@include make-lg-column(4);

						padding-top: 30px;
						padding-right: 0;
						padding-left: 0;

						@media (min-width: $screen-md-min) {
							padding-left: 15px;
						}

						position: relative;

						@media (min-width: $screen-lg-min) {
							.rating {
								position: absolute;
								top: 0;
								right: 0;
							}

							.quantity-input {
								padding-right: 0;
							}
						}

						text-align: right;

						.quantity-unit {
							display: inherit;
							text-align: left;
						}

						.cart-error-msg {
							text-align: center;
						}

						.tax-shipping-hint {
							margin-bottom: 15px;
						}

						.input-number,
						.form-control {

							margin-bottom: ($grid-gutter-width / 2);
							@media (min-width: $screen-lg-min) {
								margin-bottom: 0;
							}
						}

						.btn {
							font-size: 12px;
						}

						@media (min-width: $screen-md-min) {
							float: none !important;
							display: table-cell;
							height: 100%;
							vertical-align: bottom;
							border-left: 1px solid $gx-product-list-border-color;
						}
					}
				}
			}
		}

		// borders

		border-bottom: 1px solid $gx-product-list-border-color;

	}

	// FLYOVER

	&.flyover {
		position: absolute;
		float: none;
		height: $tile-height + 19px !important;
		z-index: 1000;
		border-right-color: transparent;
		border-bottom-color: transparent;
		box-sizing: content-box;
		margin: ($grid-gutter-width / 2 * -1);
		padding: ($grid-gutter-width / 2);
		cursor: pointer;

		@include background($gx-product-bg,
				$gx-product-bg-image-url,
				$gx-product-bg-image-position,
				$gx-product-bg-image-repeat,
				$gx-product-bg-image-size,
				$gx-product-bg-image-attachment);
		@include box-shadow($gx-product-hover-box-shadow);
		@include border-radius($border-radius-base);

		.product-tile {
			border-color: transparent;

			.price-tax {
				margin: 0;
				border: 0;
			}

			.shipping {
				color: #999999;
				padding: 0 30px;
				width: 100%;

				&.visible-flyover,
				&.hidden-grid {
					display: block !important;

					:not(.shipping-info-short) {
						display: none;
					}
				}
			}
		}

		// disable on mobile

		display: none;

		@media (min-width: $grid-float-breakpoint) {
			display: block;
		}

		body.has-touch & {
			display: none;
		}

		// gallery

		&.has-gallery {

			margin-left: -$gx-product-listing-gallery-width;
			padding-left: $gx-product-listing-gallery-width;

			.gallery {
				display: block;
			}

			&.gallery-right {
				margin-left: 0px;
				padding-left: 0px;
				margin-right: -$gx-product-listing-gallery-width;
				padding-right: $gx-product-listing-gallery-width;

				@include border-left-radius($border-radius-base);

				.gallery {
					right: 0px;
					left: auto;

					@include border-left-radius(0);
					@include border-right-radius($border-radius-base);
				}
			}
		}
	}

	// show manufactirer logo
	// only in flyover

	.manufacturer-logo {
		display: none;
	}

	&.flyover .manufacturer-logo {
		display: block;
	}
}

.product-container {
	@media (max-width: $screen-xs-max) {
		&:nth-of-type(#{(12 / $gx-product-listing-col-xs)}n+0) {
			.product-tile {
				border-right-color: transparent;
			}
		}
	}

	@media (min-width: $screen-sm-min) {
		@media (max-width: $screen-sm-max) {
			&:nth-of-type(#{(12 / $gx-product-listing-col-sm)}n+0) {
				.product-tile {
					border-right-color: transparent;
				}
			}
		}
	}

	@media (min-width: $screen-md-min) {
		@media (max-width: $screen-md-max) {
			&:nth-of-type(#{(12 / $gx-product-listing-col-md)}n+0) {
				.product-tile {
					border-right-color: transparent;
				}
			}
		}
	}

	@media (min-width: $screen-lg-min) {
		&:nth-of-type(#{(12 / $gx-product-listing-col-lg)}n+0) {
			.product-tile {
				border-right-color: transparent;
			}
		}
	}
}

// correct col widths on fullscreen pages
// five cols per row
// no outer swiper buttons on non fullscreen pages 

@if ($gx-index-full-width == true) {
	body.page-index {
		@media (min-width: $screen-lg-min) {
			.swiper-container .product-container {
				width: 20%;
			}

			.productlist-viewmode-grid .product-container {
				width: 20%;

				.product-tile {
					border-right: 1px solid $gx-product-list-border-color;
				}

				&:nth-of-type(5n+0) {
					.product-tile {
						border-right-color: transparent;
					}
				}
			}
		}
	}
} @else {
	// show arrows always on pages with sidebar activated
	body.page-index {
		.productlist-swiper {
			.swiper-button-prev {
				left: 0;
			}

			.swiper-button-next {
				right: 0;
			}

			.swiper-button-prev,
			.swiper-button-next {
				display: block;
				background: rgba(220, 220, 220, .6);
				color: #FFFFFF;
				z-index: 1001;

				&:hover {
					background: rgba(220, 220, 220, .9);
				}
			}
		}
	}
}

@if ($gx-product-info-full-width == true) {
	body.page-product-info {
		@media (min-width: $screen-lg-min) {
			.swiper-container .product-container {
				width: 20%;
			}

			.productlist-viewmode-grid .product-container {
				width: 20%;

				.product-tile {
					border-right: 1px solid $gx-product-list-border-color;
				}

				&:nth-of-type(5n+0) {
					.product-tile {
						border-right-color: transparent;
					}
				}
			}
		}
	}
} @else {
	// show arrows always on pages with sidebar activated
	body.page-product-info {
		.productlist-swiper {
			.swiper-button-prev {
				left: 0;
			}

			.swiper-button-next {
				right: 0;
			}

			.swiper-button-prev,
			.swiper-button-next {
				display: block;
				background: rgba(220, 220, 220, .6);
				color: #FFFFFF;
				z-index: 1001;

				&:hover {
					background: rgba(220, 220, 220, .9);
				}
			}
		}
	}
}