/*

This is the css for the related 'products' and 'customer also bought' on customer sites

Remember to minify this CSS!

*/



/* ==================== //
// More Products Module //
// ==================== */

/* Thats 'related products' and 'customer also bought' on the shop pages*/

.more-products {
	margin-top: 20px;
}
.more-products__header__text {
	margin: 0;
}
.more-products__content {
	padding: 10px;

}



/* ================ //
// Products Summary //
// ================ */

/* This is the indivudual product styling*/
/* This could possibly be in the boilerplate and be used for shop home page, side column items etc etc.*/

.more-products .product-summary {
	text-align: center;
	border: none;
}
.more-products .product-summary a { 
	text-decoration: none; 
}
.product-summary__body {
	margin: 0;
}


/* Text */

.more-products .product-summary__details__title {
	width: 100%;
	font-weight: normal;
	white-space: normal;
	height: 80px;

}

@media (max-width: 480px) {
	.more-products .product-summary__image {
		padding-bottom: 0;
	}
}

.more-products .product-summary__details__price {
	width: 100%;
	height: 24px;
}


.moreInformation { clear:both; margin-top:5px; display:none; }
.basketBox { font-weight:bold; padding-top:5px; }
.centersection { margin:0 auto; text-align:center; }

.more-info-btn { 
	border:none;
	max-width: 100%;
}

/* Sold Out Banner */
.more-products .product-summary__sold-out-banner { 
	position: absolute;
	top:0;
	left:0; 
}

.more-products .product-summary__details>li {
	margin-top: 0;
}




/* Bigger Slider Navigation Buttons on Palm View */
/* Responsive templates only */
@media (max-width: 718px) {
	.template-rwd .owl-theme .owl-controls .owl-buttons div {
		height: 100% !important;
		top: 0 !important;  
	}
	.template-rwd .owl-theme .owl-controls .owl-buttons div:before {
		position: absolute;
		top: 50%;
		left: 0; 
	  	-webkit-transform: translateY(-50%);
	  	-ms-transform: translateY(-50%);
	  	transform: translateY(-50%);
	}
}

/* ==== //
// GRID //
// ==== */

.more-products__header {
	text-align: left; /* Required for the basket page which is wrapped in <center></center> tags -setting all content to text-align center. This can be removed once the basket page does not include the center tags. */
}

.more-products .grid {
	text-align: center;	
}

@media (max-width: 718px) {
	.template-rwd .grid .more-products__content {
		margin-left: -10px;
		margin-right: -10px;
	}
}


/* ===================== //
// SLIDER / Owl Carousel //
// ===================== */
/*Only applies when slider is used - not the grid*/

/* No js fallback */
.no-js .owl-carousel {
	display: block !important;
}


.more-products .owl-container {
	padding-top: 0;
}

.more-products .owl-container .product-summary {
	margin: 0px 5px;
}

.more-products .owl-item {
	margin-top: 10px;
}


/*Owl Navigation Buttons*/

.more-products .owl-theme .owl-controls .owl-buttons .owl-next,
.more-products .owl-theme .owl-controls .owl-buttons .owl-prev {
	margin: 0;
	padding: 0;
	border-radius: 0;

	position: absolute;
	top: 45%; 
	opacity: 0.9;
}

.more-products .owl-next {right: -40px;}
.more-products .owl-prev {left: -40px;}

.more-products .owl-container {
	padding-left: 40px;
	padding-right: 40px;
}




/*If the buttons are shown we give them some space using padding, they only show when there are more items than are currently displayed.*/
/*The break points and amount to show are in the owl carousel settings declared in relatde_products.php - itemsCustom: [[0, 1], [500, 2], [720, 3], [1024, 4]],*/

/* 3 items - center above 720px */
@media (min-width: 720px) {
	.more-products .owl-container--three-items {
		max-width: 620px;
		margin: auto;
		padding-left: 0;
		padding-right: 0;
	}
}

/* 2 items - center above 500px */
@media (min-width: 500px) {
	.more-products .owl-container--two-items {
		max-width: 400px;
		margin: auto;
		padding-left: 0;
		padding-right: 0;
	}
}

/* 1 item - center always */
.more-products .owl-container--one-item {
	max-width: 250px;
	margin: auto;
	padding-left: 0;
	padding-right: 0; /*One item will never have navigation arrows so doesn't require space for them*/
}



.more-products .owl-controls .owl-buttons .i {
	font-size: 32px;
	height: 32px;
	width: 32px;
}


/* Owl Pagination Styles */
/*This is the 'Page 2' part of the owl Carousel*/
	
	/* Position it outside but underneath the Carousel */
	.more-products .owl-container .owl-pagination {
		position: absolute;
		bottom: -5px;
		left: 0;
		width: 100%;
	}
	.owl-carousel {
		list-style-type: none;
		margin: 0;
	}

	/* Make only the Active number display and place it inline*/
	.more-products .owl-page {
		cursor: default !important;
		font-size: 12px;
		display: none !important;
	}
	.more-products .owl-page.active,
	.more-products .owl-numbers {
		display: inline-block !important;
	}

	/*Add 'Page' before the number*/
	.more-products .owl-page:before {
		content: "Page ";
	}

	/*Overide of the default owl styling*/
	.more-products .owl-numbers {
		background-color: transparent !important;
		padding: 0 !important;
		margin: 0 !important;
		color: inherit !important;
		font-size: inherit !important;
	}