/* Product Info
   ========================================================================== */

// PAGE LAYOUT

.product-info {

	// stage and swiper

	.product-info-stage {
		&.centered {
			padding: 0 15px;
		}

		.ribbon-manufacturer {
			position: absolute;
			top: 0px;
			right: 55px;
			left: auto;
			z-index: 2;
		}

		height: ($gx-product-info-stage-height-mobile + $gx-product-info-thumbnail-width-mobile + $grid-gutter-width);
		margin-bottom: $grid-gutter-width;

		@media (min-width: $screen-md-min) {
			height: $gx-product-info-stage-height;
			padding-left: ($gx-product-info-thumbnail-width + $grid-gutter-width);
		}
	}

	// title

	.product-info-title-mobile {
		> span {
			color: $gx-product-info-details-color;
			margin-top: ($line-height-computed / 2);
			margin-bottom: $line-height-computed;
			display: block;
			font-size: $font-size-h4;
		}
	}

	// details and buying

	.product-info-details {
		z-index: 2;
		color: $gx-product-info-details-color;
		min-height: $gx-product-info-stage-height-mobile;
		margin-bottom: $grid-gutter-width;
		padding: ($grid-gutter-width / 2);

		@include border-radius($border-radius-base);
		@include background($gx-product-info-details-bg-color,
				$gx-product-info-details-bg-image-url,
				$gx-product-info-details-bg-image-position,
				$gx-product-info-details-bg-image-repeat,
				$gx-product-info-details-bg-image-size,
				$gx-product-info-details-bg-image-attachment,
				$gx-product-info-details-bg-image-enabled,   
				$gx-product-info-details-bg-gradient-enabled,
				$gx-product-info-details-bg-gradient-color1, 
				$gx-product-info-details-bg-gradient-color2, 
				$gx-product-info-details-bg-gradient-type,   
				$gx-product-info-details-bg-gradient-angle); 

		@media (min-width: $screen-md-min) {
			min-height: $gx-product-info-stage-height;
			position: absolute;
			top: -38px;
			right: 0;
		}
		@if ($gx-product-info-details-border-width) {
			border-width: $gx-product-info-details-border-width;
			@if ($gx-product-info-details-border-style) {
				border-style: $gx-product-info-details-border-style;
			}
			@if ($gx-product-info-details-border-color) {
				border-color: $gx-product-info-details-border-color;
			}
		}

		.loading-overlay {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(#fff, .7) url("../../images/loading.gif") 50% 50% no-repeat;
			z-index: 1;
			display: none;

			.loading & {
				display: block;
			}
		}

		&.loading {
			.loading-overlay {
				display: block;
			}
		}

		// padding for ribbons

		.product-info-title-desktop {
			color: $gx-product-info-details-color;
			border-bottom: 1px solid #D5D5D5;
			margin-bottom: 15px;
		}

		// prevent line break for shipping time link

		.dl-horizontal {
			a {
				&.js-open-modal {
					&.text-small {
						white-space: nowrap;
					}
				}
			}
		}

		.form-horizontal {
			fieldset {
				.form-group {
					label {
						&.control-label {
							word-wrap: break-word;
						}
					}
				}
			}
		}

		.ribbon-spacing {
			min-height: 6px;
		}

		.blockpricing-heading {
			font-size: 16px;
		}
	}

	// description

	.product-info-description {
		margin-bottom: $grid-gutter-width;
		clear: both;
		@media (min-width: $screen-md-min) {
			clear: left;
		}
		margin-top: $grid-gutter-width;

		.nav-tabs-container > .nav.nav-tabs {
			height: auto;

			li {
				position: relative;
				top: 3px;
			}
		}
	}

	.products_info_available {
		margin-bottom: $grid-gutter-width;
		color: #999999;
	}

	.paypal-ec-button-container {
		text-align: center;
		margin: 8px 0;

		.paypal-ec-button {
			cursor: pointer;
		}
	}
}

// MAIN IMAGE

.product-info-image,
.product-info-layer-image {
	margin-bottom: 5px;

	.product-info-image-inside {
		position: relative;
		width: 100%;
		height: 100%;
		cursor: pointer;

		.swiper-slide {
			content: " ";
			display: table;
			table-layout: fixed; // Bugfix for IE11's misbehaiviour to interpret width as min-width

			@include background($gx-product-info-img-bg-color,
					$gx-product-info-img-bg-image-url,
					$gx-product-info-img-bg-image-position,
					$gx-product-info-img-bg-image-repeat,
					$gx-product-info-img-bg-image-size,
					$gx-product-info-img-bg-image-attachment,
					$gx-product-info-img-bg-image-enabled,   
					$gx-product-info-img-bg-gradient-enabled,
					$gx-product-info-img-bg-gradient-color1, 
					$gx-product-info-img-bg-gradient-color2, 
					$gx-product-info-img-bg-gradient-type,   
					$gx-product-info-img-bg-gradient-angle); 

			.swiper-slide-inside {
				display: table-cell;
				float: none;
				vertical-align: middle;
				text-align: center;
				width: 100%;

				img {
					display: inline-block;
					// vertical scaling
					max-height: 100%;
					width: auto;
				}
			}
		}
	}
}

.product-info-image {
	height: $gx-product-info-stage-height-mobile;

	@media (min-width: $screen-md-min) {
		height: $gx-product-info-stage-height;
	}

	.swiper-slide-inside {
		height: $gx-product-info-stage-height-mobile;

		@media (min-width: $screen-md-min) {
			height: $gx-product-info-stage-height;
		}
	}
}

.product-info-layer-image {
	height: $gx-product-info-layer-stage-height-mobile;

	@media (min-width: $screen-md-min) {
		height: $gx-product-info-layer-stage-height;
	}

	.swiper-slide-inside {
		height: $gx-product-info-layer-stage-height-mobile;

		@media (min-width: $screen-md-min) {
			height: $gx-product-info-layer-stage-height;
		}
	}
}

.product-info-image {
	.swiper-button-prev,
	.swiper-button-next {
		display: none;
	}
}

// magnifier cursor image

@media (min-width: $screen-md-min) {
	.product-info-image {
		&.has-zoom {
			img[data-magnifier-src] {
				cursor: url("../../images/magnifier.cur"), auto;
			}
		}
	}
}

// THUMBNAILS

// general

.product-info-thumbnails,
.product-info-thumbnails-mobile,
.product-info-layer-thumbnails {

	&.product-info-layer-thumbnails {
		position: relative;
	}

	#product-info-layer-thumbnails {
		.swiper-slide-inside {
			display: table;

			.align-middle {
				display: table-cell;
				vertical-align: middle;

				img {
					margin: 0 auto;
				}
			}
		}
	}

	// smaller arrows
	.swiper-button-prev,
	.swiper-button-next {
		width: 40px;
		height: 40px;
		@media (max-width: $screen-sm-max) {
			width: 25px !important;
		}

		&:before {
			font-size: 40px;
		}
	}

	.swiper-button-prev {
		margin-left: -20px;
	}

	// thumbnail borders
	.swiper-slide {
		@extend .img-thumbnail;
		padding: 0;
		text-align: center;
		width: 94px;

		&.active,
		&:hover {
			border-color: $brand-primary;
		}

		.swiper-slide-inside {
			height: 100%;
			width: 100%;

			&.vertical {
				display: table;

				.align-middle {
					display: table-cell;
					vertical-align: middle;
					padding-bottom: 2px;

					img {
						margin: 0 auto;
					}
				}
			}

			img {
				// vertical scaling
				max-height: 100%;
				max-width: 100%;
				width: auto;
			}
		}

		cursor: pointer;
		overflow: hidden;
	}

}

// vertical thumbnails
// stage in desktop view

.product-info-thumbnails {
	position: absolute;
	left: 0;
	top: 0;
	width: ($gx-product-info-thumbnail-width + $grid-gutter-width);
	height: $gx-product-info-stage-height;
	padding: 0 15px;

	#product_thumbnail_swiper {
		height: $gx-product-info-stage-height - 80;
		margin-top: 40px;
	}

	// no padding
	&.swiper-vertical {
		.swiper-container-vertical {
			max-width: $gx-product-info-thumbnail-width - 6;
		}

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

		.swiper-button-next {
			bottom: -15px;
			margin-left: -20px;
		}
	}
}

// horizontal thumbnails
// in mobile view and lightbox-layer

.product-info-thumbnails-mobile,
.product-info-layer-thumbnails {
	&,
	#product_thumbnail_swiper_mobile {
		height: ($gx-product-info-thumbnail-width-mobile + $grid-gutter-width);

		.swiper-slide-inside {
			display: table;

			.align-vertical {
				display: table-cell;
				height: ($gx-product-info-thumbnail-width-mobile + $grid-gutter-width);
				padding-bottom: 2px;
				vertical-align: middle;
			}
		}
	}

	@media (min-width: $grid-float-breakpoint) {
		padding: 0 40px;
	}

	// no padding
	.swiper-button-prev {
		left: 0;
		margin-top: -20px;
		width: 40px !important;
	}

	.swiper-button-next {
		right: 0;
		margin-top: -20px;
		width: 40px !important;
	}
}

// position of the swiper buttons on mobile screens

.product-info-thumbnails-mobile {
	.swiper-button-prev {
		margin-left: -20px;
	}

	.swiper-button-next {
		margin-right: -20px;
	}
}

// position of the swiper buttons in a lightbox

.product-info-layer-thumbnails {
	.swiper-button-prev {
		margin-left: 0;
	}

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

// hide image layer

#product_image_layer {
	display: none;
}

// product images layer

.product_images {
	.modal-dialog {
		@media (min-width: $screen-lg-min) {
			width: 1000px !important;
			height: 800px;
		}
	}
}

// MAGNIFIER

.product-info .magnifier-overlay {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #FFFFFF;
	z-index: $gx-product-info-magnifier-z-index;

	@include opacity(.7);

	body.magnifier-active & {
		display: block;
	}
}

.product-info .magnifier-target {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	background-color: #FFFFFF;
	overflow: hidden;
	height: $gx-product-info-stage-height;
	z-index: $gx-product-info-magnifier-z-index;

	@media (min-width: $screen-md-min) {
		height: $gx-product-info-stage-height;
	}

	@include box-shadow($gx-product-hover-box-shadow);
}

.page-product-info .product-info .magnifier-target .preloader {
	width: 100%;
	height: 100%;
	background: #FFFFFF url("../../images/loading.gif") 50% 50% no-repeat;
}

// HIDE ADDITIONAL IMAGES OF THE SWIPER

.product-info-stage {

	.product-info-image {
		.product-info-image-inside {
			.swiper-container {
				.swiper-slide {
					&[data-index] {
						z-index: -1;

						.swiper-slide-inside {
							img {
								&.img-responsive {
									display: none;
								}
							}
						}
					}
				}
			}
		}
	}

	.product-info-thumbnails {
		&.swiper-vertical {
			.swiper-slide {
				&[data-index] {
					display: none;
				}
			}
		}
	}
}

// DETAILS

.product-info {
	.product-info-details {
		dl {
			@extend .dl-horizontal;

			// Fix the text-overflow of the dt > label elements.
			dt label {
				text-overflow: initial;
				white-space: normal;
				overflow: initial;
				font-weight: bold;
				margin-bottom: 0;
			}

			@extend .clearfix;

			dt {
				@include make-xs-column(4);
				text-align: left;
				padding: ($line-height-computed / 4) ($grid-gutter-width / 2) ($line-height-computed / 4) 0;

				@include text-overflow;
			}

			dd {
				@include make-xs-column(8);
				margin-left: 0;
				padding: ($line-height-computed / 4) ($grid-gutter-width / 2);
			}

			@media (max-width: $screen-sm-max) {
				&:first-of-type {
					&.dl-horizontal {
						border: 0;
					}
				}
			}
		}

		.attribute-images {
			dl {
				dt {
					@include make-xs-column(12);
					padding-left: 0;
				}

				dd {
					@include make-xs-column(12);
					padding: 0;
				}
			}
		}

		#properties_image {
			@include make-xs-column(12);
			padding: 0 0 15px 0;
		}

		// divider bottom

		dl,
		fieldset {
			border-bottom: 1px solid $gx-product-info-border-color;
			padding-bottom: ($grid-gutter-width / 2);
			margin-bottom: ($grid-gutter-width / 2);
		}

		// included .form-groups already have margins
		fieldset {
			padding-bottom: 0;

			&.attributes {
				clear: both;

				.attr-name {
					padding-top: 0;
				}

				.attr-selection {
					display: flex;

					.attr-option-input {
						display: inline-block;
					}

					.attr-option-name {
						display: inline-block;
						padding-left: 5px;
					}
				}
			}
		}

		.rating-stars {
			margin: 5px 0;
		}

		.cart-error-msg {
			display: none;
		}

		.price-container {
			.current-price-container {
				font-size: 22px;
				line-height: 25px;
				font-weight: 700;
				text-align: right;

				.productOldPrice {
					font-weight: normal;
					font-size: 18px;
					color: $gx-product-info-details-note-color;
				}

				.gm_products_vpe,
				.products-vpe {
					font-size: $font-size-small;
					font-weight: normal;
					color: $gx-product-info-details-note-color;
				}
			}

			.tax-shipping-text {
				text-align: right;
				color: $gx-product-info-details-note-color;
				margin: 5px 0 ($grid-gutter-width / 2);
			}
		}

		// PRODUCT INFO LINKS
		// wishlist, price-offer, product-question
		.product-info-links {
			padding: ($grid-gutter-width / 2) ($grid-gutter-width / 2) ($grid-gutter-width / 2);
			margin: 0 auto;
			min-width: 230px;
			max-width: 300px;
			width: 67.666667%;

			> div {
				> a {
					font-size: 11px;
					text-align: center;
					margin-bottom: 5px;

					color: $gx-product-info-button-color;
					background-color: $gx-product-info-button-bg;
					border-color: $gx-product-info-button-border;

					&:focus,
					&.focus {
						color: $gx-product-info-button-color;
						background-color: $gx-product-info-button-bg-hover;
						border-color: $gx-product-info-button-border-hover;
					}

					&:hover {
						color: $gx-product-info-button-color-hover;
						background-color: $gx-product-info-button-bg-hover;
						border-color: $gx-product-info-button-border-hover;
					}

					&:active,
					&.active,
					.open > &.dropdown-toggle {
						color: $gx-product-info-button-color;
						background-color: darken($gx-product-info-button-bg, 10%);
						border-color: $gx-product-info-button-border-hover;

						&:hover,
						&:focus,
						&.focus {
							color: $gx-product-info-button-color;
							background-color: darken($gx-product-info-button-bg, 17%);
							border-color: darken($gx-product-info-button-border, 25%);
						}
					}

					&:active,
					&.active,
					.open > &.dropdown-toggle {
						background-image: none;
					}

					&.disabled,
					&[disabled],
					fieldset[disabled] & {
						&:hover,
						&:focus,
						&.focus {
							background-color: $gx-product-info-button-bg;
							border-color: $gx-product-info-button-border;
						}
					}

					.badge {
						color: $gx-product-info-button-bg;
						background-color: $gx-product-info-button-bg;
					}

					@include border-radius(0);

					> span {
						float: inherit;

						&.btn-icon {
							display: inline-block;
							padding: 0 5px;
						}

						&.btn-text {
							display: inline-block;
							padding: 0;
						}

						> .fa {
							font-size: 16px;
						}
					}
				}
			}
		}
	}
}

// NUMBER INPUT & BUY BUTTON

.product-info .product-info-details {
	.input-number {
		@include make-xs-column(12);

		input[type="number"]::-webkit-outer-spin-button,
		input[type="number"]::-webkit-inner-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}
		input[type="number"] {
			-moz-appearance: textfield;
		}

		input[type=number]::-ms-clear {
			display: none;
		}
	}

	.button-container {
		// @include make-xs-column(12);
		padding: 0 ($grid-gutter-width / 2);
	}
}

// SOCIAL SHARING

.product-info-share {
	padding: 0 ($grid-gutter-width / 2) 10px;
	@include clearfix();
}

// RATING

.product-info-rating {
	.rating-item {
		padding-top: 20px;

		.rating-stars {
			margin-bottom: ($grid-gutter-width / 2);
			margin-top: 0;
		}

		.rating-caption {
			color: #999999;
			margin-bottom: 0;
		}
	}

	.no-rating-hint {
		color: $gx-no-rating-hint-color;
	}

	.rating-comment {
		.more-text-container {
			> span {
				white-space: pre-line;
			}
		}
	}

	.btn {
		margin-top: 30px;
	}
}

.no-login-hint {
	color: #CCCCCC;
	font-style: italic;

	a {
		color: #CCCCCC;
		text-decoration: underline;
	}
}

.product-info-listings {
	margin-top: 30px;
}

/* GX-Customizer START */

// OLD STYLES FROM EyeCandy-Template

body #gm_gprint_tabs {
	padding: 0px;
	overflow: hidden;
	display: none;
	height: 100%;
}

body #gm_gprint_tabs .gm_gprint_tab_active {
	margin: 0px;
	float: left;
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	cursor: default;
}

body #gm_gprint_tabs .gm_gprint_tab {
	margin: 0px;
	float: left;
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	cursor: pointer;
}

body #gm_gprint_tabs span {
	float: left;
	white-space: nowrap;
}

body #gm_gprint_content {
	display: none;
}

.surfaces_groups, .delete_surfaces_groups {
	cursor: pointer;
}

.gm_gprint_flyover {
	position: absolute;
	display: none;
	background-color: #D6E6F3;
	border-style: dotted;
	border-width: 1px;
	margin: 2px;
	padding: 5px;
	z-index: 999;
	cursor: move;
}

#gm_gprint_content input[type="file"] {
	font-size: 12px;
}

#gm_gprint ul {
	background-color: transparent;
	background-image: none;
}

#gm_gprint_tabs {
	border-left: 1px solid #CCCCCC;
	margin-bottom: 2px;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
}

#gm_gprint_tabs .gm_gprint_tab {
	background-color: #FFFFFF;
	background-image: none;
	background-position: top left;
	background-repeat: repeat-x;
	border-bottom: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	border-top: 1px solid #CCCCCC;
	padding-bottom: 5px;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 5px;
}

#gm_gprint_tabs .gm_gprint_tab_active {
	background-color: #E7E7E7;
	background-image: none;
	background-position: top left;
	background-repeat: repeat-x;
	border-bottom: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	border-top: 1px solid #CCCCCC;
	padding-bottom: 5px;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 5px;
}

#gm_gprint_tabs span {
	color: #000000;
	font-size: 10px;
	text-transform: uppercase;
}

#gm_gprint {
	margin-bottom: 8px;
	margin-left: 0;
	margin-right: 0;
}

#gm_gprint a {
	color: #000000;
}

.gm_gprint_dropdown {
	background-color: #FFFFFF;
	border: 1px solid #CCCCCC;
	color: #000000;
	font-size: 12px;
}

.gm_gprint_field {
	background-color: #FFFFFF;
	border: 1px solid #CCCCCC;
	color: #000000;
	font-size: 12px;
	padding: 0;
}

.gm_gprint_surface {
	background-color: #FFFFFF;
	border: 1px solid #CCCCCC;
	color: #000000;
	font-size: 12px;
}

/* GX-Customizer END */

// alternative lightbox styling

.page-product-info {
	.mfp-gallery {
		.mfp-content {
			.mfp-counter {
				display: none;
			}
		}
	}
}

/* Buy Button
   ========================================================================== */

.btn-buy {
	position: relative;
	@include transition(ease 500ms all);

	&.btn-buy-complete {
		@include button-variant(#FFFFFF, $brand-primary, $brand-primary);
	}

	.throbbler {
		display: inline-block;
		font-size: 10px;
		text-indent: -9999em;
		width: 22px;
		height: 22px;
		border-radius: 50%;
		background: #FFFFFF;
		background: -moz-linear-gradient(left, #FFFFFF 10%, rgba(255, 255, 255, 0) 42%);
		background: -webkit-linear-gradient(left, #FFFFFF 10%, rgba(255, 255, 255, 0) 42%);
		background: -o-linear-gradient(left, #FFFFFF 10%, rgba(255, 255, 255, 0) 42%);
		background: -ms-linear-gradient(left, #FFFFFF 10%, rgba(255, 255, 255, 0) 42%);
		background: linear-gradient(to right, #FFFFFF 10%, rgba(255, 255, 255, 0) 42%);
		-webkit-animation: load3 1.4s infinite linear;
		animation: load3 1.4s infinite linear;
		-webkit-transform: translateZ(0);
		-ms-transform: translateZ(0);
		transform: translateZ(0);
		position: absolute;
		left: 10px;
		top: 9px;
	}

	.throbbler:before {
		width: 50%;
		height: 50%;
		background: #FFFFFF;
		border-radius: 100% 0 0 0;
		position: absolute;
		top: 0;
		left: 0;
		content: '';
	}

	.throbbler:after {
		background: #2EAE06;
		width: 75%;
		height: 75%;
		border-radius: 50%;
		content: '';
		margin: auto;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}
}

@-webkit-keyframes load3 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes load3 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

.product-review-heading {
	margin-bottom: 0;
}

.price-on-request {
	width: 100%;
}

/* Under 18
   ========================================================================== */

.dl-fsk18 {
	align-content: flex-start;
	align-items: center;
	display: inline-flex;

	.fsk18-icon {
		padding-bottom: 20px !important;
		padding-top: 20px !important;
		text-align: center !important;

		span {
			background: #B90014;
			border-radius: 100%;
			color: #FFFFFF;
			font-size: 20px;
			font-weight: bold;
			padding: 9px;
		}
	}

	.fsk18-text {
		color: #B90014;
		font-weight: bold;
		text-align: center !important;
	}
}