/*
 * =============================
 * @author: 	Procurios
 * @module: 	mod_webshop
 * @about: 		Main CSS-file for the basic webshop frontend CSS
 * =============================
 */

/*
	Defaults
	--------------------------------------------------
*/

.product-list,
.product-list > ul,
.related-product-list,
.per-page,
.webshop-categories {
	margin: 0;
	padding: 0;
	list-style: none;
}

.related-product-list,
.product-list,
.related-product-list,
.webshop-categories {
    display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.product-list > li,
.related-product-list > li,
.webshop-searchresults .product-list > li {
	width: 100%;
}

.product-list > li,
.related-product-list li,
.webshop-categories > li {
	display: inline-block;
	position: relative;
    min-height: 285px;
	margin-bottom: 2em;
	border: 1px solid #ddd;
	vertical-align: top;
	background: #fff;
    transition: border-color .2s;
}

.product-list > li:hover,
.related-product-list li:hover,
.webshop-categories > li:hover {
    border-color: #1c8ede;
}

.show-product-details {
    display: none;
}

.add-to-shopping-cart-link {
    display: inline-block;
    width: 40px;
    height: 36px;
    text-indent: -999em;
    vertical-align: middle;
	background: #1c8ede url(../img/icons/icon--shoppingCart.svg) no-repeat 50% 50%;
    background-size: 20px;
}

.pli-footer,
.webshop-categories h3 {
	right: 0;
	left: 0;
	padding: 0 10px;
	border-radius: 0 0 3px 3px;
}

.packing-entity {
	display: inline-block;
	padding: 0 0 0 .5em;
	letter-spacing: .1em;
	color: #616161;
}

.product-price .regular {
	display: block;
	text-decoration: line-through;
}

.webshop-shopping-cart input.product-quantity,
input.product-quantity {
	height: 36px;
    width: 2.2em;
    line-height: 36px;
	padding: 2px;
	font-weight: 700;
	text-align: center;
    vertical-align: middle;
}
.product-meta a {
	color: #5899f3;
}

.block-link {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 125px;
	right: 0;
}

/*
	Webshop categories
	--------------------------------------------------
**/

.webshop-category-introduction {
	position: relative;
	display: none;
}

body.webshop-productoverview .category-introduction,
body.webshop-productoverview .category-description {
	position: relative;
}

.webshop-categories > li {
	overflow: hidden;
}

@media screen and (max-width: 480px) {
	.webshop-categories > li {
		width: 100%;
	}
}

@media screen and (min-width: 480px) and (max-width: 900px) {
	.webshop-categories > li {
		width: 48%;
		margin-right: 4%;
		overflow: hidden;
	}

	.webshop-categories > li:nth-child(2n+2) {
		margin-right: 0;
	}
}

@media screen and (min-width: 900px) {
	.webshop-categories > li {
		width: 32%;
		margin-right: 2%;
		overflow: hidden;
	}

	.webshop-categories > li:nth-child(3n+3) {
		margin-right: 0;
	}
}

.webshop-categories > li > a {
	width: 100%;
	max-width: 100%;
	padding: 0 10px 10px;
}

.webshop-categories a {
	display: block;
    text-decoration: none;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.webshop-categories a:hover {
	text-decoration: none;
}

.webshop-categories h3 {
	position: relative;
	z-index: 2;
	margin: 0;
	padding: 10px;
	font-size: 1.3em;
}

.webshop-categories li img {
	width: 100%;
}

.webshop-categories .category-introduction,
.webshop-categories .category-description {
	display: none;
}

/*
	(Front-end) product list
	--------------------------------------------------
*/

.product-list .product-actions {
    list-style: none;
    margin: 10px 10px 0;
}

@media screen and (min-width: 680px) {
	.product-list > li,
	.related-product-list > li,
	.webshop-searchresults .product-list > li {
		width: 47.5%;
	}

	.product-list > li:nth-child(2n+1),
	.related-product-list > li:nth-child(2n+1),
	.product-list > li:nth-child(2n+1) {
		margin-right: 5%;
	}
}

@media screen and (min-width: 768px) {
    .product-list > li:nth-child(1n),
	.related-product-list > li:nth-child(1n),
	.webshop-searchresults .product-list > li:nth-child(1n) {
		width: 100%;
        margin-right: 0;
	}
}

@media screen and (min-width: 1080px) {
	.product-list > li:nth-child(1n),
	.related-product-list > li:nth-child(1n),
	.webshop-searchresults .product-list > li:nth-child(1n) {
		width: 47.5%;
	}

	.product-list > li:nth-child(2n+1),
	.related-product-list > li:nth-child(2n+1),
	.product-list > li:nth-child(2n+1) {
		margin-right: 5%;
	}
}

.product-list a:hover {
	text-decoration: none;
}

.pli-right {
	position: relative;
	padding: 15px;
}

.pli-left {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    	width: 125px;
}

.pli-right {
    margin-left: 115px;
}

.related-product-list img.product-image,
.product-list img.product-image {
	display: block;
    margin-top: -10px;
	margin-left: -10px;
	padding: 10px;
    width: 125px;
    min-height: 169px;
    border: 1px solid #ddd;
    box-shadow: -1px -1px 10px rgba(0,0,0,0.15);
    background-color: #fff;
}

.pli-right h3 {
	margin: 0 0 .2em;
	font-size: 18px;
    color: #313131;
    overflow: hidden;
	text-overflow: ellipsis;
}

@media screen and (min-width: 768px) {
	.pli-right h3 {
        font-size: 22px;
    }
}

.pli-right .author-type,
.pli-right .book-type {
    display: block;
    font-style: italic;
    font-size: 14px;
}

.pli-right p {
    display: block;
    position: relative;
    height: 115px;
    margin-top: .3em;
    overflow: hidden;
}

.pli-right p:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow: inset 0 -28px 20px -20px rgba(255,255,255,1);
}

.related-product-list > li:hover .add-to-shopping-cart-link img,
.product-list > li:hover .add-to-shopping-cart-link img {
	background: #D4CFCD;
}

.pli-left .product-price {
    display: inline-block;
    min-width: 88px;
    margin: 5px 0 0 10px;
	font-family: 'Source Serif Pro', serif;
    font-size: 25px;
    font-weight: 400;
    color: #009fe3;
    text-align: center;
}

.add-to-shopping-cart {
    display: inline-block;
    margin: 12px 0 0 10px;
    padding: 5px;
    background-color: #1c8ede;
}

.add-to-shopping-cart-link img {
	position: absolute;
	right: 11px;
	margin-top: 5px;
	background: #e6e1de;
}

.add-to-shopping-cart-link:hover,
.add-to-quotation-cart:hover {
	text-decoration: none;
	color: #fff;
	background-color: #222;
}

.product-in-shopping-cart {
	padding-right: 17px;
	background: transparent url(../img/shopping-cart-check.png) no-repeat 100% 50%;
}

/**
 * related-products
 */

.related-product-list {
    margin-top: 20px;
}

/**
 * Product detail
 */

@media screen and (min-width: 768px) {
    .product-top {
        padding-right: 250px;
    }
}

.product-top .subtitle {
	display: block;
	font-size: .5em;
}

.webshop-back-link a {
	display: inline-block;
}

.webshop-back-link a:before {
    display: inline-block;
    margin-right: 8px;
	content: "‹";
}

.pdw-right .add-to-shopping-cart-link img {
	background: #fff;
}

.pdw-left {
	margin-bottom: 10px;
}

.pdw-right .order-product,
.product-images {
	overflow: hidden;
	background-color: #fff;
}

.pdw-right .order-product {
	display: block;
	padding: 8px 14px;
}

.pdw-right .add-to-shopping-cart-link {
	padding: 5px 15px;
}

.pdw-right .add-to-shopping-cart {
	 float: right;
}

.pdw-right .stock {
	display: block;
	text-align: right;
}

.product-images {
	position: relative;
	margin-bottom: 1.5em;
	text-align: center;
    padding-bottom: 8px;
	background: #fff url(/ui/uibase/icons/16/magnifier.png) no-repeat 48% 100%;
}

.product-images img {
	max-width: 100%;
	padding: 10px 0;
}

.webshop-back-link {
	float: right;
	margin-top: -30px;
}

.product-actions {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: left;
}

.product-actions .add-to-shopping-cart {
    float: none;
    margin-top: 0;
    margin-left: 0;
}

.product-actions .product-price {
    display: inline-block;
    min-width: 88px;
    margin-left: 10px;
    margin-top: 4px;
	font-family: 'Source Serif Pro', serif;
    font-size: 25px;
    font-weight: 400;
    color: #009fe3;
}

/**
 * product-details-review
 */

.product-details-review {
	padding-top: 1.5em;
	border-top: 2px solid #fff;
	border-bottom: 2px solid #fff
}

.product-details-wrapper {
    margin-bottom: 20px;
}

@media screen and (min-width: 1080px) {
	.product-details {
		position: relative;
	}

	.webshop-back-link {
		position: absolute;
		top: 4px;
		right: 0;
		margin-top: 0;
	}

	.product-details-wrapper {
		display: table;
		table-layout: fixed;
        margin-bottom: 0;
		width: 100%;
	}

	.pdw-left,
	.pdw-right {
		display: table-cell;
		vertical-align: top;
	}

	.pdw-left {
		width: 370px;
	}

	.pdw-right {
		padding-left: 30px;
	}

	.product-images img {
		width: auto;
	}
}

/*
	Webshop product search results
	--------------------------------------------------
*/

.webshop-searchresults #webshop-product-search,
.per-page:first-of-type,
.webshop-products-nav.top,
.webshop-products-nav .pages {
	display: none;
}

.webshop-products-nav,
.per-page {
	text-align: right;
}

.webshop-products-nav li,
.per-page li {
	margin: 0 0 1em;
	display: inline-block;
	border-right: 1px solid #D8D0CD;
}

.webshop-products-nav li:last-child,
.per-page li:last-child {
	border-right: 0;
}

.webshop-products-nav a,
.per-page a {
	display: block;
	padding: .1em .5em;
}

.webshop-products-nav .current a,
.webshop-products-nav a:hover,
.per-page .current,
.per-page a:hover {
}

/*
	Webshop breadcrumbs
	--------------------------------------------------
*/

.webshop-breadcrumbs {
	padding: 0 1em 0 0;
	margin-bottom: 2em;
}

.webshop-breadcrumbs dt,
.webshop-breadcrumbs dd {
	display: inline-block;
}

.webshop-breadcrumbs dt {
	margin-right: 1em;
}

.webshop-breadcrumbs a {
	font-weight: bold;
	text-decoration: none;
    color: #a0a0a0;
}

.webshop-breadcrumbs a:after {
    content: '>';
    margin: 0 .5em;
}

.webshop-breadcrumbs .last a {
    color: #bdbdbd;
}

.webshop-breadcrumbs .last a:after {
	content: none;
}

/**
 * webshop-category-tree
 */

.webshop-category-tree ul {
    list-style: none;
    margin: 0;
}

.webshop-category-tree li:before {
    display: inline-block;
    content: '›';
    margin-right: 4px;
    font-weight: bold;
    font-size: 20px;
	line-height: 1em;
    color: #757575;
}