/*
 * Compressor:
 https://cssminifier.com/

 */


#productAdditionalText {
clear: none;
}

.featuredproducts ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
    overflow: hidden;
}

.featuredProduct {
  padding: 5%;
  margin: 1%;
  text-align: center;
}


.featuredimage {
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

/* default sizing for left column */
.cmsImage.featuredimage img {
  margin-left: auto;
  margin-right: auto;
  padding-bottom:3px;
  width: auto;
  max-width: 100%; /* was 240px, but did not get contained properly */
  max-height: 240px;
}
.featuredProductsHorizontal{
  display:block;
}
.featuredProductsHorizontal li img {
  max-width: 100%;
  width: auto;
  max-height: 240px;
  height: auto;
}

.featuredproducts a {
   text-decoration: none;
}

.fptitle {
  font-weight: bolder;
}

 /* need this separator for standard non sliding , multi column layout. */
.featuredProductsHorizontal .featuredProduct  {

}

.featuredProductsHorizontal ul {
  /* flex breaks it */
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  grid-gap:min(1rem,2vw);
}

.featuredProductsHorizontal li {
  display:inline-block;
  border: 1px solid #bbb;
}
.wsb-template-column .featuredProductsHorizontal ul ,
.wsb-template-column .featuredProductsHorizontal li {
  display: block;
}








/*
#FeaturedProductsFeatured ul li{
  margin-left: auto;
  margin-right: auto;
  padding-bottom:3px;
    text-align: center;
  float: left;
}
*/





/* START PRODUCT TABS */



/* only tabs links have background colours */

#product-moreinfo {
  margin: 0px;
  padding: 0px;
  width: 100%;
  margin-top: 10px;
  display: block;
  overflow: hidden;
}

ul#productTabUL {
  padding: 0px;
  margin: 0;
  list-style-type: none;
  overflow: hidden;
}

ul#productTabUL li {
  float: left;
  margin-left: 4px;
  height: auto;
  position: relative;
  list-style-type:none;
}

ul#productTabUL li a {
  background-color: #BBB;
  border: 1px solid #DDD;
  border-bottom: none;
  padding: 3px;
  display:block;
  text-decoration:none;
  color: black;
}

ul#productTabUL li a:hover { background-color: #999; }

ul#productTabUL li a.productTabAactive {
  background-color: #FFF!important;
}

@media screen {
	/* only hide tabs on screens... Where as print all the tab information... */
	#product-moreinfo .productTabContent {
	  display:none;
	  border: 1px solid #DDD;
	  padding:10px
	}
}

@media print {

	/* default layout for product tabs printing to show all information */
 	#productTabUL { display: none; }
	#product-moreinfo .productTabContent { display: block !important; }
	#product-moreinfo .productTabContent h3.printTabHeading { display: block !important; }
}


#product-moreinfo .productTabContentActive,
#product-moreinfo .productTabContent.productTabContentActive { display:block }


/* END PRODUCT TABS */



td.productlisttdimage { max-width: 160px; }

.fastOrderSheetWithQty ul.productslist { margin-left: 3%; }
.fastOrderSheetWithQty ul.productslist .cmsItem .cmsPriceAndEnquiry { float:right; width: 33%; }
.fastOrderSheetWithQty ul.productslist .cmsItem .cmsPrice { margin: 0; text-align: right; float:left; width:40%; }
.fastOrderSheetWithQty ul.productslist .cmsItem .cmsEnquiry { margin-top: 0; text-align: right; float: right; width: 50%; }
.fastOrderSheetWithQty ul.productslist .cmsItem .cmsTitleAndText {float:left; width: 45%; margin: 0; }


.productHeaderSummaryText { margin-bottom: 10px; }


/*
.productPriceTableDetailed { overflow: auto;}
.productSummaryLeftAlignedBlock { width: 49%; display: block; }
.productSummaryRightAlignedBlock { width: 49%; display: block; }
*/

/* this wraps floated blocks and ensures */ 
.cmsProductSummary { display: flow-root; overflow: hidden; }


#productAdditionalText { clear: both;}


ul.ProductPageColorSwatch li {
	/* Reuben, centering did not match left aligned labels.
/*  text-align: center; */
  float: left;
    width: 100px;
  height: 110px;
  overflow: hidden;
  margin: 1%;
  position: relative;
}


div.ColorSwatchIMG { max-height: 80px; overflow:hidden; margin-bottom:20px;}

ul.ProductPageColorSwatch li img {
  max-height: 80px;
}

ul.ProductPageColorSwatch li .ColorSwatchOption {
  display:block;
  top: 80px;
  position:absolute;
  font-size: 10px;
  line-height: 15px;
  text-align: left;
}

.ColorSwatchOption .priceWrap {
    display: block;
}

/* new rows/flex basis */

ul.ProductPageColourSwatchRows li {
    float: none;
    margin: 2%;
    overflow: hidden;
}

ul.ProductPageColourSwatchRows li .ColorSwatchIMG {
  max-height: none;
}

ul.ProductPageColorSwatch li

@media (min-width: 640px) {

  ul.ProductPageColourSwatchRows li div#ColorSwatch {
    display: flex;
    overflow: hidden;
  }

  ul.ProductPageColourSwatchRows li .ColorSwatchIMG {
  width: 25%;
  }

  ul.ProductPageColourSwatchRows li .ColorSwatchOption  {
    position: relative;
    top: auto;
    width: 75%;
    overflow: hidden;
  }
	ul.ProductPageColourSwatchRows li label input  {
	  float: left;  margin: 2%;
	}

  ul.ProductPageColourSwatchRows .variantDetail  {
    overflow: hidden;
  }
  .cmsFormPrompt

}

/* wrap prompt floats; */
.variantDetail>div  {
  clear:both;
  overflow: hidden;
}

@media (max-width: 640px) {
  .variantDetail .cmsFormPrompt ,
  .variantDetail .cmsFormData {
    float: none; width: 100%;
  }
}




/*
Swatch Button default format
Grid button size based on font-size as set on .cmsFormData
*/

/*old default
.cmsOptionButtonSet{
	display: grid;
	grid-gap: 0.25rem;
	grid-template-columns: repeat(auto-fill, minmax(5em, 1fr));
}

.cmsOptionButtonSet button{
	min-height:3em;
  padding: 0.25em;
	border-radius: 2px;
  border:1px solid #999;
  cursor:pointer;
  transition:background 0.3s ease;
}
.cmsOptionButtonSet button:hover{
  background:#e7e7e7;
}
.cmsOptionButtonSet button.optionSelected{
	background: #d6d6d6;
  border:1px solid black;
}
*/

.cmsOptionButtonSet button{
	   background:white;
    border:1px solid #ccc;
    cursor:pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:center;
    border-radius:4px;
    font-size:11px;
    line-height:1.1
}

.cmsOptionButtonSet button:has(img){
  justify-content:flex-start; /*valign top when swatch, center when text-only*/
}

.buttonLabel{
    padding-top:0.25rem;
}


.cmsOptionButtonSet button:hover{
	background:#efefef;
  border:1px solid #999;
}

.cmsOptionButtonSet button.optionSelected{
    background:#d6d6d6;
    border:1px solid black;
}
.cmsOptionButtonSet button[disabled]{
	opacity: 0.7;
}

/*AJ - cater for new display option that does not have .cmsFormElementb_size with :not :empty
to maintain uniform square display format across size options
text only no image swatch in set*/
.cmsFormElementb_size .cmsOptionButtonSet button:not(:has(img)),
.cmsOptionButtonSet:not(:has(img)) button:has(.cmsChildSize:not(:empty)){
    aspect-ratio:1;
    flex:1;
}

.cmsOptionButtonSet{
    display:grid;
    grid-gap:0.25rem;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}

.cmsFormElementb_colour .cmsOptionButtonSet button{
       padding:0.25rem;
}

.cmsFormElementb_size .cmsOptionButtonSet button{
       justify-content: center;
       font-size:13px;
}


.cmsFormElementb_size .cmsOptionButtonSet:not(:has(img)),
.cmsOptionButtonSet:has(.cmsChildSize:not(:empty)):not(:has(img)) {
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
}


/*==================================
FILTER LIST OPTION SPACING
==================================*/

body .cmsFormElementsCompressed .cmsFormElement div.FeatureListButtons,
div.checkboxButtonSet,
div.FeatureListButtons {
  display:flex;
  flex-flow:wrap;
  gap:5px;
}



/** Kaasi , 1/08/2013 ShoppingCart Tag css starts */


#ajaxCart input.shoppingbasketupdatebutton, #ajaxCart input.shoppingbasketremovebutton {font-size: 8pt;}
#ajaxCart input , #ajaxCart select, #ajaxCart option{font-size: 9pt;}


/*==================================
DEFAULT CART CSS
==================================*/

.cartSummary { width: 100% ; overflow:hidden; }
.cartSummary ul  {list-style: none; padding: 0px; margin: 0px; }
.cartSummary li { margin: 3px; padding: 0; }


.basketSummaryHeader {
  overflow:auto;
}
.basketCartDelete { display: inline-block; width: 50%; float:left; }
.basketCurrencySelector { display: inline-block; width: 50%; float:right; text-align: right; }

.deleteCart a:link { border: 1px solid #faa;  display: inline-block; font-size: 8pt;
text-decoration: none; color: #faa; text-align: center; padding: 1px 4px; margin: 2px; }

.basketSummaryCheckout{
  text-align: right;
  margin-top: 10px;
  margin-bottom: 10px;
}

.selectShippingMethodMessage {
  text-align: left;
  font-style: italic;
  font-size: 80%;
  width:75%;
}
.selectShippingMethod select {
  font-size: 110%;
}

.shoppingbasketcheckoutbutton:not(.checkoutcancelorder){font-size: 110%;} /*causes large checkout cancel button without :not*/

.basketSummaryLineItems {
  border-top: 1px solid #ccc;
}

.basketSummaryLineItems>ul>li {
  list-style: none;
  border-bottom: 1px solid #ccc;
}


.checkoutMakeChangesOrAddMoreItems
{
  border-bottom: 1px solid #ccc;
}

.basketSummaryLine, .basketSummarySubTotalLine {
  clear:both; overflow: hidden;
    margin-top: 5px;  margin-bottom:5px;
}


.basketSummarySubTotalLine_Savings{margin-top:15px;margin-bottom:10px;color:#999;font-weight:bolder}




.basketSummaryLineItemIcons a:link,
.basketSummaryLineItemIcons a:visited
{
border: 1px solid #ccc;
display: inline-block;
width: 13px;
text-align: center;
height: 14px;
line-height: 14px;
 text-decoration: none;
 margin: 2px;
 font-size: 14px;
 font-weight: bolder;
}

.basketSummaryQtyInc a:link { color: green;  }
.basketSummaryQtyDec a:link { color: red;  }


.cartSummaryFull .warning { padding:2px; color:red; background-color: white; border: 1px dashed red ; margin-bottom: 8px; }

.cartSummaryFull .basketSummaryLineMessage {
  font-size:75%;
  color: red;
}

#ajaxCart label  {font-size: 75%;}

.basketCustomisedOptions table {
border-spacing:0;
}
.cartSummaryFull td.question {
  font-size: 75%;
  min-width: 45px;
}
 {
  width: 20%;
}

.basketSummaryLineItemOptionsEditable .cmsFormData label {
display:block; width: auto;
}

.basketSummaryLineItemOptionsEditable .cmsFormPrompt,
.cartSummaryFull label, .basketID , .vieworderstable label {
  font-size: 75%;
  min-width: 45px;
  display: inline-block;
 }

.fullPrice{ text-decoration: line-through; color:red;}

.basketSummaryLineRight .fullPrice{ text-align: right; }


.basketCheckoutDiv {
  padding-top: 10px;
  clear:both;
  text-align: right;
}

.basketSummaryPrompt {
  font-size:75%;
  text-align: right;
}


.basketSummaryTotal {
  border-top: 1px solid #ccc;
  font-weight: bolder;
}

.basketSummaryLineLeft{width:83%; float: left; }
.basketSummaryLineRight{width:17%; float: right; text-align: right; }
.cartSummaryFull .basketSummaryLineImage img {max-width:100%; max-height: 100%; height:auto;}
.basketSummaryLineOtherDetails { font-size: 80% }

@media (min-width : 500px) {

    .cartSummaryFull .basketSummaryLineOptions {    float: right;       margin-right: 0%;       width: 38%;     }
    .cartSummaryFull .basketSummaryLineImage{max-width:20%; float: left; margin-right: 1%;}
    .cartSummaryFull .basketSummaryLineDetails{width:38%; float: left; margin-right: 1%;}
    .cartSummaryFull .basketSummaryLineItemOptionsEditable {}

}
@media (max-width : 500px) {
    .cartSummary {font-size: 12pt;}
    .basketSummaryLineLeft{width:80%; float: left; }
    .basketSummaryLineRight{width:20%; float: right; text-align: right; }
    .basketSummaryLineItems .basketSummaryLineRight{font-size: 80%; }
    .cartSummaryFull .basketSummaryLineImage{max-width:20%;  float: left;  margin-right: 2%;}
    .cartSummaryFull .basketSummaryLineDetails,
    .cartSummaryFull .basketSummaryLineOptions { width:70%; margin-left: 2%; font-size: 80%; float: right; }
    .basketSummaryLineRight{ text-align: right; }
    .checkoutsubmitorder {font-size: 130%;}
    .checkoutConfirmBottomButtons input{margin-bottom:2%;}
}

.cartSummaryNarrow .basketSummaryLineLeft {width:65%; float: left;}
.cartSummaryNarrow .basketSummaryLineRight {width:35%; float: right; max-width:33%; overflow: visible;}
.cartSummaryNarrow .basketSummaryLineItemIcons { display: inline; float: right; }

table.vieworderstable tr.headerrow td , table.vieworderstable tr.viewOrderLine td{
  border-bottom: 1px solid #ccc;
}


.cmsShoppingCartTemplateLinks {
padding: 5px;
}
.cmsShoppingCartTemplateLinks a {
text-decoration: none;
}






@keyframes animScarcity {

  from {
    opacity: 0;
    transform: translate3d(-800%, 0, 0);
  }

  12% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  38% {
    transform: scale3d(1, 1, 1);
  }

  42% {
    transform: scale3d(1.25, 0.75, 1);
  }

  46% {
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    transform: scale3d(1.15, 0.85, 1);
  }

  54% {
    transform: scale3d(0.95, 1.05, 1);
  }

  58% {
    transform: scale3d(1.05, 0.95, 1);
  }

  62% {
    transform: scale3d(1, 1, 1);
  }

  88% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d( 700%, 0, 0);
  display:none;
  }
}



.cmsScarcityMessages {
    padding: 10px;
    position: fixed;
    bottom: 10px;
    border-radius: 4px;
    right: 40%;
    margin: auto;
    z-index: 99;
  font-size: 150%;
    animation-name: animScarcity;
    animation-delay: 1s;
    animation-duration: 8s;
    animation-fill-mode: both;
    color: white;
    background:#dd4938;
  box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5)  ;
}



.cmsForumStarRating { float: right; font-style: normal;}

/* on the product page, #cmsStarRating, they are bigger */
#cmsStarRating .stars {
  font-size: 170%;
}

/* generally, can be on category pages etc. using class, not ID */
.cmsStarRating .stars {
  color: #999;
  unicode-bidi: bidi-override;
}
.cmsStarRating .stars > span.star {
  display: inline-block;
  position: relative;
}

.cmsStarRating .stars .starOn:before
 {
   content: "\2605";
   position: absolute;
   color: #933;
}

.ratingSummary {
  color: #999;
 font-size: 70%;
}


/*
#cmsStarRating .stars {
  direction: rtl;
  text-align: left;

}

#cmsStarRating .stars .starOnMyRating:before,
#cmsStarRating .stars > span.star:hover:before,
#cmsStarRating .stars > span.star:hover ~ span.star:before {
   content: "\2605";
   color: #333;
   position: absolute;
}
*/

.buttonSet button {box-sizing: border-box; padding: 2%;}
button.activeOptionButton { background-color: black; color: white; }

ul.circleSwatches li { text-align: center; }
ul.circleSwatches li img {    border-radius: 50%; max-height: 70px;  border: 2px solid rgba(0,0,0,0); cursor:pointer;}
ul.circleSwatches li:hover img,
ul.circleSwatches li.optionSelected img { border: 2px solid #999 ; }
ul.circleSwatches li .ColorSwatchOption { text-align: center; width: 100%; }
ul.circleSwatches li input { display:none }
ul.noLabels  .ColorSwatchOption { display:none }
div.cmsOptionSwatches {text-align: center; width: 100%; flex: 100%;  }
div.cmsOptionSwatches span {  border-radius: 50%; background-position:center center; background-size: cover; height: 40px; width: 40px; display: inline-block; margin: 3px;}
div.cmsOptionSwatches img  {  border-radius: 50%; height: 40px; width: 40px; margin: 3px;}

.cmsOptionButtonSet button.optionSelected { border-style: inset; }

div.cmsItemPromoStamp {
    position: relative;
    left: 50%;
    margin-left: -45px;
    min-height: 20px;
    width: 90px;
    line-height: 20px;
    text-transform: uppercase;
    opacity: 0.90;
    text-align: center;
    background-color: rgb(144, 164, 174);
    color: #fff;
	font-size: 11pt;
}
.Product.hasImage div.cmsItemPromoStamp {
    position: absolute;
    top: 0px;
    z-index: 3;
}

.list-style-default div.cmsItemPromoStamp,
.list-style-bizcard div.cmsItemPromoStamp,
.ProductViewBizcard div.cmsItemPromoStamp{
  position: absolute;
	left:0px;
	margin-left:0;
}


.cmsItemListStockCount { font-size: 70% ; }


.cmsPageList, .CategoryList,.ProductList { clear: both; }



.Product .cmsPrdCategories a { font-size: 70%; padding-right: 10px; }
.cmsFormElementCategories .cmsPrdCategories a { padding-right: 10px; }

/* default bigger than normal, but assume default cmsMoreInfo styling otherwise */
#showMoreProducts>a.showMoreProducts {
	    padding: 15px 50px;
}

/*-----------------------------
Product Thumbs now have images dimensions set - override to fit responsive
------------------------------*/

.imageBlockThumbs .cmsThumb img{
  width:100%;
  height:auto;
}
/*-----------------------------
Product detail page Thumb block styling
Inline - scale full width via grid
------------------------------*/

.imageBlockThumbs .list-style-inline{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap:0.25rem;
}
.imageBlockThumbs .list-style-inline .cmsThumb{
	max-height:none;
	max-width:none;
  margin:0;
  min-height:0!important;
}

.imageBlockThumbs .list-style-inline .cmsThumb a{
  line-height:0;
  display: block;
}
.imageBlockThumbs .list-style-inline img{
    margin-top:0!important;
}

@media (max-width: 600px){
.imageBlockThumbs .list-style-inline  li {
  width: 100%;
	}
}

.productSortingDropdown,
.selectCurrency{
  margin-bottom:1rem;
}
/*-----------------------------
Product detail page Thumb Aligned Left
------------------------------*/
.thumbsLeft.imageBlock{
  display: flex;
  gap: 1rem;
}
.thumbsLeft .imageBlockThumbs {
    margin-top: 0;
}
.imageBlock.thumbsLeft .list-style-inline{
  display: flex;
  flex-direction:column;
  gap:0.5rem;
  list-style: none;
  padding-left: 0;
  margin:0;
  width:90px;
}
.thumbsLeft.imageBlock .productHeaderSummaryImage{
  order:2;
}
.thumbsLeft.imageBlock .cmsThumb {
    margin: 0;
    max-height: none;
    max-width: 90px;
}

@media (max-width: 600px) {
  .thumbsLeft.imageBlock {
    display: inline-block;
  }

  .thumbsLeft.imageBlock .imageBlockThumbs {
    margin-top: 5px;
  }

  .imageBlock.thumbsLeft .list-style-inline {
    display: grid;
    width: 100%;
    gap:5px;
  }

  .thumbsLeft.imageBlock .cmsThumb {
    width: 100%;
    max-width: none;
  }
}

/*-----------------------------
thumbslider fullwidth
------------------------------*/
.thumbSlider.imageAlignmentBlock .imageBlockThumbs {
    max-width: none;
}

/*-----------------------------
Flexible Grid Layout Page Type AJ Jan 22
Image of any aspect fits into an image box (6/4 aspect), centered, no JS positioning
------------------------------*/


.shopping-ulli-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    grid-gap: 2rem;
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0;
    clear: both;
    box-sizing: border-box;
}

  .list-style-3col.shopping-ulli-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }

.shopping-ulli-grid li,
.shopping-ulli-grid form{
      display: flex;
      flex:1;
      width: 100%;
}
.shopping-ulli-grid .cmsImage {
    text-align: center;
    margin-inline:auto;
    display:flex;
    align-items:center;
}
.shopping-ulli-grid .cmsImage a{ /*flex item*/
    max-width:none;
}
.shopping-ulli-grid img{
    margin:0;
    max-height:640px;
    max-width: 640px;
    width: 100%;
    height:100%;
    object-fit:contain;
    height:auto;
}

/*Grid Images within square .cmsAspectSquared
  Fallback to standard grid if older browser
  Category Grid Layout also default to within square to keep tidy
*/
@supports (aspect-ratio:1) {
.shopping-ulli-grid .cmsImage.cmsAspectSquared,
.shopping-ulli-grid .cmsAspectSquared a,
.CategoryList .shopping-ulli-grid .cmsImage,
.CategoryList .shopping-ulli-grid .CategoryItem a{
  width:100%;
}

.shopping-ulli-grid .cmsAspectSquared img,
.shopping-ulli-grid .cmsAspectSquared:not(:has(img)),
.CategoryList .shopping-ulli-grid img {
    aspect-ratio: 1;
  }
}


.shopping-ulli-grid:not(.list-style-3col) img{
    margin-top: 0 !important;
}

.shopping-ulli-grid .cmsItem{
    display: flex;
    flex-direction: column;
    flex:1;
    margin:0;
}

.list-style-3col.shopping-ulli-grid .cmsItem{
  display:block;
}

.shopping-ulli-grid .cmsImage,
.shopping-ulli-grid .cmsTitleAndText{
  flex:1;
}
.shopping-ulli-grid .cmsTitle{
    margin-top:16px;
}

.shopping-ulli-grid .cmsPriceAndEnquiry{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}



/*Defaults to 2col mobile centered text and price.
 reuben has disabled the 2 column layout, 
 as many templates exist that have the cmsEnquiry set to flex... 
 Because of that, it pushes the right column out of frame,.
 The default layout needs to be the simplist, single column
 And then custom design templates that bring it back to 2 columns, where all other settings considered... 
 I did not want to take the approach of forcing the qty+buy+wishlist + price into a stack, as not everyone wants that
 Some people just want the buy button only... or just the buy button and wish...  so should not force the stack
 flex-wrap looks bad..   maybe cetner could be forced... 
 but if forcing everything at this leve, breaks other layouts, 
 then surely it is safer to have single column by default, and force back to 2 columns in templates... 
*/
@media(max-width:560px){

	.list-style-3col.shopping-ulli-grid,
	.shopping-ulli-grid,
	.cmsShoppingAreaInner .shopping-ulli-grid {
		/* grid-template-columns: 1fr 1fr; */
		grid-template-columns: 1fr; 
		grid-gap: 1rem;
	}

	.shopping-ulli-grid .cmsItem .cmsPrice,
	.shopping-ulli-grid .cmsItem .cmsEnquiry {
		float: none;
		width: 100%;
		text-align: center;
	}

	
	.list-style-3col.shopping-ulli-grid .cmsItem {
		margin: 0;
	}

}


@media (min-width: 640px) {

	/* used for reorder stock and product reveal recipe only */

	.list-style-table .cmsItem > div {width: 20%; float:left; }
	.list-style-table .cmsItem div.cmsTitleAndText {width: 39%; margin-left: 1%;  }
	.list-style-table .cmsItem div.cmsImage {width: 15%; }
	.list-style-table .cmsItem div.cmsPrice {width: 15%; }
	.list-style-table .cmsItem div.cmsQuantity {width: 10%; }
	.list-style-table .cmsItem div.cmsEnquiry {width: 20%; }
	.list-style-table .cmsItem div.cmsImage {width: 15%; }
	.list-style-table .qtyCombo { width: 100%; display:block; }

}



.cmsQtyPlusMinus>* { border: 1px solid; border-radius: 0; }
.cmsQtyPlusMinus>.cmsDecreaseBtn { border-right: none; min-width: 25px;cursor:pointer;}
.cmsQtyPlusMinus>.cmsIncreaseBtn { border-left: none; min-width: 25px;cursor:pointer;}
.cmsQtyPlusMinus>input { border-left: none; border-right: none; text-align:center;}

.cmsQtyPlusMinus { display: inline-flex; }
@media(max-width:560px){
.cmsQtyPlusMinus{display:flex;}
}


/*==================================
CORE CHECKOUT FLEX UPDATE AUG 2022
Affects Order Summary Basket FORMATTING
==================================*/

.basketSummaryLine {
 display:flex;
}

.basketSummaryLineOptions .basketSummaryLineItemOptionsEditable > div{
    display:flex;
    flex-direction:column;
    margin-bottom:0.2rem;
}

.basketSummaryLineOptions .basketSummaryLineItemOptionsEditable > div:last-child {
    display:block;
}

.basketSummaryLineOptions .basketSummaryLineItemOptionsEditable > div:last-child{
    font-size:11px;
}

.basketSummaryLineOptions .basketSummaryLineItemOptionsEditable>.sectionAutoReveal { display:none; }


.basketSummaryLine input[type=checkbox]{display:inline-block;margin-right:5px}


.cartSummaryFull .basketSummaryLineOptions {
  width:max(38% , 150px);
}


@media(max-width:500px){
    .cartSummaryFull .basketSummaryLineOptions {
        width: 70%;
    }
}



.ProductList .cmsItemProductReview { border: 1px solid #b8ebff; border-radius: 10px; background: #edfaff; color: #333; padding: 5px; font-style: italic; margin-top: 5px; font-size:13px;}
.ProductList .cmsTitle:has(+.cmsStarRating) {min-height: 2.5em;}
.ProductList .productReviewDate { font-size:  70%; color: #999; }
.ProductList .productReviewTitle { font-weight: 700; }

.forumMessageTitle{font-weight:700;}


.shopsearch .formDIVColour  { border: 0; background-color: inherit; }

/* fastBasketForm ... */
  .fastBasketForm input,
  .fastBasketForm select { width: 100%; min-width: 60px; }
  .fastBasketForm.InStock {  }
  .fastBasketForm.OutOfStock { border-bottom: 2px solid red; }
  .fastBasketForm.AvailabilityBackOrder { border-bottom: 2px solid orange; }
  .fastBasketForm.LowStock { border-bottom: 2px solid yellow; }

.ajaxAddCartMessageTopRight {position: fixed; z-index: 99999; width:auto; right:0; top:0; padding: 20px; background: green; color: white ; text-decoration: none; }

/* priceTableDiv should stay right of the image, but under all else..  */
  @media (min-width: 800px) {
    div.cmsVariantTableDiv {clear: right; float:right; }
    .list-style-default .cmsVariantTableDiv {width: 75%;}
    .list-style-bizcard .cmsVariantTableDiv {width: 65%;}
  }
  @media (max-width: 800px) {
    div.cmsVariantTableDiv {clear: both;  }
  }

  .cmsVariantTableDiv .cmsVariantTable { background: none; width: 100%; }
  .cmsVariantTable td { width: 20%; }

/* give a scroll bar if required on wide inverted tables */
  .cmsVariantTableDiv { overflow: auto; }


/*once the table is inverted, add some more display logic  */

    .invertedTable { width: auto !important;  }
    .invertedTable td { text-align: center; width: auto !important; }
    .invertedTable td.stock {font-size: 80%; }
    .invertedTable td.code {font-size: 80%; }





/* Chrome, Safari, Edge, Opera */
input.hideUpDownButton::-webkit-outer-spin-button,
input.hideUpDownButton::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number].hideUpDownButton {
  -moz-appearance: textfield;
}

/* now that we have image dimensions, default height to auto, and override as required... */

.imageAlignmentBlock img,
.cmsProductSummary img {
  height: auto;
}


@media(min-width:600px) {
 .popupCartAddedChanges .cmsModal {
	position: fixed;
	width:90%;
	right:5%;
	top:5%;
	height: auto !important;
	max-width: 400px !important;
 }
}




.preDiscount { font-size: 80%; text-decoration: line-through; color:red }
.productRrp .productRrpPrice { text-decoration: line-through; color:red }
.productPriceSavingsPrice {color:red  }
.mainPrice .value { font-weight: bolder;}
.productPrice .value { font-weight: bolder;}
.otherTaxPrice { font-size: 80%; }
.ccySymbol { margin-right: 3px; }