@charset "UTF-8";
/*
CSS Flexbox Mobile Friendly Responsive Grid
for Ecommerce Templates - Categories and Products pages
Breakpoints inherited from Foundation for Sites, https://get.foundation/sites/docs/
Current 30 August 2022 by Gary Flack, I.T.ZAP Website Design Works, https://itzap.com.au/
*/

/* FLEX GRID parent outer container for categories.php and products.php */
div.categories,
div.products,
div.csproducts {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -ms-flex-line-pack: start;
      align-content: flex-start;
  padding: 0;
  margin: 0;
}

/* FLEX GRID child container responsive ROWS for categories and products, AUTO-EQUAL-HEIGHT */
div.categories > div.category,
div.products > div.product,
div.csproducts > div.csproduct {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 94%;
          flex: 0 0 94%;
  max-width: 500px;
  width: auto;
  text-align: center;
    border-top: 1px solid #cacaca;
  border-left: 1px solid #cacaca;
  -webkit-box-shadow: 2px 2px 2px rgba(207, 67, 67, 0.4);
          box-shadow: 2px 2px 2px rgba(8, 224, 134, 0.4);
  padding: 0;
  margin: 0.5rem 0;
}
@media print, screen and (min-width: 40em) {
  div.categories > div.category,
  div.products > div.product,
  div.csproducts > div.csproduct {
    /*
    -webkit-box-flex: 0;
        -ms-flex: 0 0 47%;
            flex: 0 0 47%;
    -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
            box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
    margin: 0.5rem 0; */
  }
}
@media screen and (min-width: 75em) {
  div.categories > div.category,
  div.products > div.product,
  div.csproducts > div.csproduct {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 31%;
            flex: 0 0 31%;
    margin: 0.75rem 0;
  }
}
@media screen and (min-width: 90em) {
  div.categories > div.category,
  div.products > div.product,
  div.csproducts > div.csproduct {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 23%;
            flex: 0 0 23%;
    -webkit-box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.4);
            box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.4);
  }
}

/* Overide ectcart.css */
div.category {
  border: none;
  margin: 0;
  padding: 0;
}

/* FIX MAX-WIDTH of IMAGES, edit small screen max-width: 400px; as you like */
div.catimage,
div.prodimage {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  height: auto;
}
@media print, screen and (min-width: 40em) {
  div.catimage,
  div.prodimage {
    max-width: 400px;
    margin: 0 auto;
  }
}

/* For 4x3 ratio images, 400x300px the ideal small image size */
div.catimage a.ectlink,
div.prodimage.allprodimages a.ectlink,
div.csprodimage.allprodimages a.ectlink {
  display: block;
  width: 100%;
  position: relative;
  height: 0;
  padding: 75% 0 0 0;
  /* padding: 56.25% 0 0 0; (<= is for 16x9 ratio) */
  overflow: hidden;
}

/* Whatever img appear in here (width larger or smaller than 400px) will be auto-scaled to fit inside the container */
img.catimage,
img.prodimage.allprodimages,
img.csprodimage.allprodimages {
  position: absolute;
  display: block;
  max-width: 100%;
  max-height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

/* << 1 of x >> small preview image arrows on products.php (display: none; RECOMMENDED, but optional) */
div.prodimage div.imagenavigator, div.csprodimage div.csimagenavigator {
  display: none;
}

/* NAME of Menu Category, Product, Article */
div.catname,
div.prodname,
div.csprodname {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
/*  width: 100%;
  height: auto;
  line-height: 1.2;
  margin: 0; */
}
div.prodname a,
div.csprodname a,
div.catname a {
  display: block;
  /* font-family: "Comic Neue", cursive; */
  font-size: 1.6rem;
  font-weight: 700;
  /* color: #003366; */
  padding: 0 ;
  margin: 0;
}

@media print, screen and (min-width: 64em) {
  div.prodname a,
  div.csprodname a,
  div.catname a {
    font-size: 1.3rem;
  }
}

@media screen and (min-width: 75em) {
  div.prodname a,
  div.csprodname a,
  div.catname a {
    font-size: 1.4rem;
  }
}
/* ZOOM on Hover Effects */
div.categories > div.category:hover,
div.products > div.product:hover,
div.csproducts > div.csproduct:hover {
  /* NOTE: transform: scale interferes with Quick Buy pop-up window, IF you use that feature */
  /* -webkit-transform: scale(1.015); */
  /* transform: scale(1.015); */
 /*  border-top: 1px solid #8a8a8a;
  border-left: 1px solid #8a8a8a;
  -webkit-box-shadow: 6px 6px 3px rgba(0, 0, 0, 0.6);
          box-shadow: 6px 6px 3px rgba(0, 0, 0, 0.6); */
}
img.catimage:hover,
img.prodimage.allprodimages:hover,
img.csprodimage.allprodimages:hover {
  opacity: 1.0;
}
div.catname a:hover,
div.prodname a:hover,
div.csprodname a:hover {
  color: #FFFFFF;
  background-color: #1c75bc;
  text-decoration: none;
}

/* TO HIDE proddescription on products.php page add this entry to includes.php : $shortdescriptionlimit=0; */
div.catdesc,
div.proddescription,
div.csproddescription {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 0.8rem;
  text-align: left;
  line-height: 1.4;
  padding: 0.5em;
  margin: 0;

}
@media print, screen and (min-width: 40em) {
  div.catdesc,
  div.proddescription,
  div.csproddescription {
    font-size: 0.85rem;
  }
}
@media screen and (min-width: 75em) {
  div.catdesc,
  div.proddescription,
  div.csproddescription {
    font-size: 0.9rem;
  }
}

div.catdesc p,
div.proddescription p,
div.csproddescription p {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: inherit;
  text-align: left;
  line-height: 1.4;
  padding: 0 0 0.25em 0;
  margin: 0;
}
@media print, screen and (min-width: 40em) {
  div.catdesc p,
  div.proddescription p,
  div.csproddescription p {
    font-size: inherit;
  }
}

/* This product does not qualify for Discount / Free Shipping */
div.proddiscountexempt, div.freeshippingexempt {
  font-size: 0.9rem;
}

/* DO NOT NEED label "Price :"" */
span.prodpricelabel {
  display: none;
}

/* The Product Price $xx.xx */
div.csprodprice,
div.prodprice {
  /* font-family: "Lexend", "Helvetica Neue", Helvetica, Arial, sans-serif; */
  line-height: 1.2;
  font-size: 1.1rem;
  font-weight: 400;
  color: #000000;
  margin: 0 0 0.5em 0;
}
div.prodcurrency{
  /* font-family: "Lexend", "Helvetica Neue", Helvetica, Arial, sans-serif; */
  line-height: 1.2;
  font-size: 0.9rem;
  color: #000000;
  margin: 0 0 0.5em 0;
}
@media print, screen and (min-width: 40em) {
  div.csprodprice,
  div.prodprice {
    font-size: 1.2rem;
  }
}
@media print, screen and (min-width: 64em) {
  div.csprodprice,
  div.prodprice {
    font-size: 1.25rem;
  }
}

/* Hide zero price message for Articles (and Contact Us page) */
div.prodarticle div.csprodprice,
div.prodarticle div.prodprice,
div.contact div.csprodprice,
div.contact div.prodprice {
  display: none;
}
/* Hide discount message for Articles (and Contact Us page) */
div.prodarticle div.proddiscounts.eachproddiscount {
  display: none;
}

/* LIST PRICE, Was $xx.xx SAVE $xx.xx, and DISCOUNTS */
div.listprice,
div.cslistprice,
div.proddiscounts,
div.csproddiscounts {
  /* font-family: "Lexend", "Helvetica Neue", Helvetica, Arial, sans-serif; */
  text-align: center;
  line-height: 1.6;
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0;
}
@media print, screen and (min-width: 40em) {
  div.listprice,
  div.cslistprice,
  div.proddiscounts,
  div.csproddiscounts {
    font-size: 0.95rem;
  }
}
@media print, screen and (min-width: 64em) {
  div.listprice,
  div.cslistprice,
  div.proddiscounts,
  div.csproddiscounts {
    font-size: 1rem;
  }
}

div.listprice > div.wasprice,
div.cslistprice > div.wasprice {
  display: inline-block;
  font-weight: 400;
  color: #666666;
  text-decoration: line-through;
  background-color: transparent;
  padding: 0 0.5em;
  margin: 0;
}
div.listprice > div.saveprice,
div.cslistprice > div.saveprice {
  display: inline-block;
  text-decoration: none;
  font-weight: 400;
  color: #f90000;
  background-color: transparent;
  padding: 0 0.5em;
  margin: 0;
}

/* Discount Messages */
div.proddiscounts,
div.csproddiscounts,
div.discountsapply,
div.discountsapply.allproddiscounts,
div.proddiscounts.allproddiscounts,
div.discountsapply.allcatdiscounts,
div.adiscount,
div.catdiscounts.allcatdiscounts,
div.catdiscounts.eachcatdiscount,
div.detaildiscounts {
  width: 100%;
  /* font-family: "Comic Neue", cursive; */
  font-weight: 700;
  text-align: center;
  font-size: 0.95rem;
  color: #b00000;
  background-color: transparent;
  padding: 0;
  margin: 0;
}
@media print, screen and (min-width: 40em) {
  div.proddiscounts,
  div.csproddiscounts,
  div.discountsapply,
  div.discountsapply.allproddiscounts,
  div.proddiscounts.allproddiscounts,
  div.discountsapply.allcatdiscounts,
  div.adiscount,
  div.catdiscounts.allcatdiscounts,
  div.catdiscounts.eachcatdiscount,
  div.detaildiscounts {
    font-size: 1rem;
  }
}
@media print, screen and (min-width: 64em) {
  div.proddiscounts,
  div.csproddiscounts,
  div.discountsapply,
  div.discountsapply.allproddiscounts,
  div.proddiscounts.allproddiscounts,
  div.discountsapply.allcatdiscounts,
  div.adiscount,
  div.catdiscounts.allcatdiscounts,
  div.catdiscounts.eachcatdiscount,
  div.detaildiscounts {
    font-size: 1.1rem;
  }
}

/* HIDE the following discounts apply in all these categories. The following discounts apply to all these products. */
div.discountsapply.allcatdiscounts,
div.eachcatdiscountsapply.eachcatdiscount,
span.eachcatdiscountsapply.eachcatdiscount,
div.discountsapply.allproddiscounts,
div.eachproddiscountsapply.eachproddiscount {
  display: none;
}

div.catdiscounts.allcatdiscounts,
div.catdiscounts.eachcatdiscount {
  color: #b00000;
}

/* HIDE Pesky Line Breaks in code */
div.catdiscounts.allcatdiscounts br,
div.product br {
  display: none;
}

/* Out Of Stock on products.php page */
div.outofstock {
  width: 100%;
  clear: both;
  text-align: center;
  line-height: 1.1;
  font-weight: 700;
  font-style: normal;
  padding: 0.5em 0;
  color: #cc4b37;
  font-size: 0.9rem;
}
@media print, screen and (min-width: 64em) {
  div.outofstock {
    font-size: 1rem;
  }
}

div.outofstock br {
  display: initial;
}

/* Ratings on products.php page, Related and Recommended */
div.prodrating,
div.csprodrating {
  line-height: 1;
  font-weight: 700;
  margin: 0 0 0.4rem 0;
}

span.prodratingtext,
div.prodratingtext,
div.csprodratingtext {
  display: inline-block;
  line-height: 1;
  padding: 0 0 0 0.5em;
  vertical-align: middle;
}

/* RECOMMENDED PRODUCTS CROSS SELL ITEMS */
p.cstitle {
  /* font-family: "Comic Neue", cursive; */
  /* color: #003366; */
  font-size: 1.1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  margin: 0.5em 0;
}
@media print, screen and (min-width: 40em) {
  p.cstitle {
    font-size: 1.2rem;
  }
}
@media screen and (min-width: 75em) {
  p.cstitle {
    font-size: 1.4rem;
  }
}

/* detaillink, addtocart, quick buy buttons on products.php */
div.detaillink,
div.csdetaillink,
div.addtocart,
div.qbuybutton,
div.csaddtocart,
div.csbuybutton,
div.csqbuybutton {
  width: 100%;
  text-align: center;
  font-size: 0.8rem;
  padding: 0;
  margin:5px 0 0 0;
}
@media print, screen and (min-width: 40em) {
  div.detaillink,
  div.csdetaillink,
  div.addtocart,
  div.qbuybutton,
  div.csaddtocart,
  div.csbuybutton,
  div.csqbuybutton {
    font-size: 0.85rem;
  }
}
@media print, screen and (min-width: 64em) {
  div.detaillink,
  div.csdetaillink,
  div.addtocart,
  div.qbuybutton,
  div.csaddtocart,
  div.csbuybutton,
  div.csqbuybutton {
    font-size: 0.9rem;
  }
}

/* If Article or Contact Us page, HIDE detaillink, addtocart, quick buy buttons on products.php (New v7.4.5, November 2021) */
div.prodarticle div.addtocart,
div.prodarticle div.qbuybutton,
div.prodarticle div.csaddtocart,
div.prodarticle div.csqbuybutton,
div.contact div.addtocart,
div.contact div.qbuybutton,
div.contact div.csaddtocart,
div.contact div.csqbuybutton {
  display: none;
}

/* Light Blue button, View Page, Select Options, Quick Buy */
div.addtocart button.configbutton,
div.qbuybutton input[type="button"].qbuybutton,
div.csaddtocart button.configbutton,
div.proddetaillink input[type="button"].detaillink,
input[type="button"].csdetaillink,input[type="button"].csqbuybutton{
	vertical-align: middle;
	padding: 0.85em 1em;
	border: 1px solid transparent;
	-webkit-transition: background-color 0.25s ease-out, color 0.25s ease-out;
	transition: background-color 0.25s ease-out, color 0.25s ease-out;
	/* font-family: "FontAwesome", "Lexend", "Helvetica Neue", Helvetica, Arial, sans-serif; */
	/* font-size: 0.9rem; */
	-webkit-appearance: none;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	display: block;
	width: 100%;
	font-size: inherit;
	border-radius: 0;
	margin: 0;
}

[data-whatinput='mouse'] div.addtocart button.configbutton, [data-whatinput='mouse']
div.qbuybutton input.qbuybutton, [data-whatinput='mouse']
div.csaddtocart button.configbutton, [data-whatinput='mouse']
input[type="button"].detaillink, [data-whatinput='mouse']
input.csdetaillink, [data-whatinput='mouse']
input.csqbuybutton {
  outline: 0;
}

/* Light Green button, Add to Cart */
div.prodaddtocart button.buybutton{
  vertical-align: middle;
  padding: 0.85em 1em;
  border: 1px solid transparent;
  -webkit-transition: background-color 0.25s ease-out, color 0.25s ease-out;
  transition: background-color 0.25s ease-out, color 0.25s ease-out;
  /* font-family: "FontAwesome", "Lexend", "Helvetica Neue", Helvetica, Arial, sans-serif; */
  /* font-size: 0.9rem; */
  -webkit-appearance: none;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  display: block;
  width: 100%;
  font-size: inherit;
  border-radius: 0;
  margin: 0;
}

[data-whatinput='mouse'] div.addtocart button.buybutton, [data-whatinput='mouse']
div.csaddtocart button.buybutton {
  outline: 0;
}

/* Grey button, SOLD OUT */
div.addtocart input.prodoutofstock,
div.csaddtocart input.prodoutofstock {
  width: 100%;
  font-size: inherit;
  border-radius: 0;
  color: #222222 !important;
  background: #DDDDDD !important;
  margin: 0;
}