/*
Contents
========

1) General

2) Header
	a) Pagination
	b) Breadcrumb trail
	c) h1
	d) Category text
	e) Parent category list
	f) Order / sort controls (to change the order of items on the page)

3) CSS that applies to * BOTH * products and categories
	a) Titles (item/cat names) etc
	b) Image resize types (product and category images)
	c) Images

4) Categories

5) Products
	a) Product classes related to shopprod class
	b) Title, short description and dimensions etc

6) Footer

7) Modals and dialog boxes
*/



/*
1) General
==========
*/

	#productWrapper {
	}





/*
2) Header
=========
*/

	/*
	a) Pagination
	-------------
	*/
		nav#pagination {
			clear:both;
			font-size: 1.1em;
			width:100%;

		}

		nav#pagination p {
			line-height: 1em;
			float:right;
			margin:0;
			padding:0;
		}

		nav#pagination p span {
			font-weight: bold;
		}

		nav#pagination ul {
			float:right;
			list-style-type:none;
			margin:0 0 0 50px;
			padding:0;
		}

		nav#pagination ul li {
			float: left;
			line-height: 1em;

			display: inline-block;

			margin-left: 5px;
			margin-right: 5px;

			text-align: center;
		}

		nav#pagination ul li.prev {
			margin:0 5px 0 0;
			padding:0 5px 0 0;
		}

		nav#pagination ul li.next {
			margin:0 0 0 5px;
			padding:0 0 0 5px;
		}

		nav#pagination ul li a {
			text-decoration:none;
			text-transform:uppercase;
		}

		nav#pagination ul li a:hover,
		nav#pagination ul li.current a {
			font-weight: bold;
			text-decoration:none;
		}

		nav#pagination ul li .sep {
			padding:0 4px;
		}


		/* Responsive code for the above */
			@media(max-width: 640px) {
				nav#pagination ul {
					clear:both;
					margin:0 0 0 0;
					position:relative;
					right:50%;
					text-align:center;
				}
				nav#pagination ul li {
					left:50%;
					position:relative;
				}
				nav#pagination p {
					clear:both;
					float:none;
					text-align:center;
					padding-top:20px;
				}
			}




	/*
	b) Breadcrumb trail
	--------------------
	*/

		#breadcrumbs {
			clear:both;
			width:100%;
		}

		#breadcrumbs,
		#breadcrumbs a {

			font-weight:400;
			text-decoration:none;
		}

		#breadcrumbs a:hover {
			text-decoration:underline;
		}

		#breadcrumbs .sep {
			padding:0 6px;
		}


		/* Responsive code for the above */
			@media screen and (max-width: 960px) {
				#breadcrumbs {
					margin-top:20px;
				}
			}


	/*
	c) h1
	-----
	*/
		#productsWrapper h1 {
			margin-top : 20px;
			margin-bottom: 30px;
			word-wrap: break-word;
		}


	/*
	d) Category text
	----------------
	*/



	/*
	e) Parent category list
	-----------------------
	*/
		#parentCatList {
			margin-bottom:20px;
			padding:6px 0;
			-webkit-box-sizing:border-box;
			-moz-box-sizing:border-box;
			box-sizing:border-box;
			width:100%;
		}

		#parentCatList ul {
			list-style-type:none;
			margin:0 auto;
			padding:0;
			text-align:center;
			width:74%;
		}

		#parentCatList ul li {
			display:inline-block;
			padding:2px 0 2px 15px;
			position:relative;
		}

		#parentCatList ul li:before{
			content:"-";
			left:-5px;
			position:relative;
		}

		#parentCatList ul li:first-child:before{
			content:" ";
			left:0px;
			position:relative;
		}

		#parentCatList ul li a {
			font-size:1.05em;
			text-decoration:none;
		}

		#parentCatList ul li a:hover,
		#parentCatList ul li.current a {

		}

		/* Responsive code for the above */
			@media screen and (max-width: 1080px) {
				#parentCatList ul {
					width:90%;
				}
			}

			@media screen and (max-width: 960px) {
				#parentCatList {
					padding:10px 0;
				}
				#parentCatList ul {
					text-align:left;
					width:100%;
				}
				#parentCatList ul li {
					clear:both;
				}
			}

			@media screen and (max-width: 600px) {
				#parentCatList {
					display: none;
				}
			}

			@media(max-width: 540px) {
				#parentCatList ul li {
					display:block;
					padding:3px 0 3px 10px;
				}

				#parentCatList ul li:before{
					content:" ";
					position:relative;
					left:0px;
				}
			}




	/*
	f) Order / sort controls (to change the order of items on the page)
	-------------------------------------------------------------------
	*/
		.ordering-div {
			text-align: right
		}

		.ordering-div p {
			cursor: pointer;
		}

		.order-options {
			display: none;
		}

		.order-options .current {
			text-decoration: underline;
		}



/*
3) CSS that applies to * BOTH * products and categories
=======================================================
*/


	/*
	a) Titles (item/cat names) etc
	------------------------------
	*/
		.ProdorCatItem {
			margin-bottom: 30px;
			padding: 15px;
		}

		.ProdorCatItem p {
			margin:0;
			padding:0;
		}

		.ProdorCatItem .title
		{
			line-height:17px;
			padding-bottom: 12px;
		}

		.ProdorCatItem .title.below-picture {
			padding-top: 5px;
		}

		.ProdorCatItem .title.below-picture.no-bottom-padding {
			padding-bottom: 0px;
		}

		.ProdorCatItem .title::after {
			clear: both;
			content: '';
			display: block;
		}



	/*
	b) Image resize types (product and category images)
	---------------------------------------------------

	There are various image resize settings that can be set

	These are set in Shop Settings > Listings layout in the website manager

	Depending on the image resize setting set for images on the catalogue listings page, and whether the
	theme has a restricted width or not, governs which class below is used. Only one class below is used
	at the same time.
	*/
		.pic_rt5 {
			max-height: 25vw;
			max-width: 100%;
			height: auto;
			width: auto;
		}

		.pic_rt5_wr {
			max-height: 320px;
			max-width: 100%;
			height: auto;
			width: auto;
		}

		.pic_rt6 {
			max-width: 100%;
			width: 100%;
		}


		/* Responsive code for the above */
			@media screen and (max-width: 960px) {
				.pic_rt5 {
					max-height: 45vw;
				}
			}


			@media screen and (max-width: 660px) {
				.pic_rt5 {
					max-height: 100vw;
				}
			}



	/*
	c) Images
	---------
	*/
		.ProdorCatItem .thumb {
			background-position: center center;
			background-size: cover;
			background-repeat:  no-repeat;
			min-height:100px;
			line-height:100%;
			margin-bottom: 10px;
			text-align: center;
			width:100%;
		}

		.ProdorCatItem .thumb img {
			vertical-align:middle;
		}











/*
4) Categories
=============
*/










/*
5) Products
===========
*/



	/*
	a) Product classes related to shopprod class
	---------------------------------------------
	When we output prices using the ShopProd class, the PHP in the shopprod class will give generically named classes to things like the main price, qty per pack, sale price etc

	It does this so we can then style it in the CSS

	So the below is styling related to those classes
	*/
		.ShopProd_Listing_Price {
			line-height: 1.2em;
			padding: 0px;
			margin-bottom:10px;
		}


		.ShopProd_Listing_Price_MainPrice {
			display: block;
			font-weight: bold;
		}
		.ShopProd_Listing_Price_MainPriceSub {
			display: block;
			font-size: 0.85em;
		}


		.ShopProd_Listing_Price_Info {
			font-size: 0.85em;
		}


		.ShopProd_Listing_Price_Info_QtyPerPack {
			content: '\a';
			margin-right: 2px;
			white-space: nowrap;
		}


		.ShopProd_Listing_Price_Info_PriceEach {
			font-style: italic;
			white-space: nowrap;
		}

		.ShopProd_Listing_Price_Info_RRP {
			white-space: nowrap;
		}


		/* Dimensions */
			.ShopProd_Listing_Dimensions {
				padding-bottom: 20px;
			}
			.ShopProd_Listing_Dimensions_Height, .ShopProd_Listing_Dimensions_Width, .ShopProd_Listing_Dimensions_Depth, .ShopProd_Listing_Dimensions_Length, .ShopProd_Listing_Dimensions_Diameter {
				display: inline-block;
				padding-bottom: 5px;
				margin-right: 7px;
			}


		/* Responsive code for the above */
			@media(max-width: 540px) {
				.ShopProd_AddToBasket_Variations input, .ShopProd_AddToBasket_Variations select {
					width: 100%;
				}

				.ShopProd_AddToBasket_Personalisation input, .ShopProd_AddToBasket_Personalisation select {
					width: 100%;
				}
			}


	/*
	b) Title, short description and dimensions etc
	------------------------------

	NOTE - Some of this code applies to both products and categories so will be in the "CSS that applies to * BOTH * products and categories" section above
	*/

		.ProdorCatItem .itemcode {
			padding-bottom:14px;
		}


		.ProdorCatItem .title p
		{
			float: left;
		}

		.ProdorCatItem .excerpt {
			clear: both;
			line-height:17px;
			padding-bottom: 12px;
		}

		.ProdorCatItem .excerpt.below-picture {
			padding-top: 12px;
		}

		.ProdorCatItem .price {
			font-size:1.2em;
			margin-bottom: 15px;
		}

		.ProdorCatItem .price span {

			font-size:0.8em;
			font-style:italic;
		}




/*
6) Footer
==========
*/

	.mobile-catbox {
		display: none;
	}

	/* Responsive code for the above */
		@media screen and (max-width: 600px) {
			.mobile-catbox {
				display: block;
				text-align: center;
			}

			.mobile-catbox h2 {
				word-break: break-all;
			}
		}


/*
7) Modals and dialog boxes
==========================
*/

	/* Responsive code for the above */
		@media(max-width: 540px) {
			.ui-dialog {
				width: 300px !important;
			}

			#dialogAddToBasket {
				width: 291px !important;
			}
		}