@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: 400px;
  width: auto;
  text-align: center;
  background-color: #FFFFFF;
  border-top: 1px solid #cacaca;
  border-left: 1px solid #cacaca;
  -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
          box-shadow: 2px 2px 2px rgba(0, 0, 0, 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.2rem;
  font-weight: 700;
  /* color: #003366; */
  padding: 0.3em 0.2em;
  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;
    margin-top: 1rem;
  }
}

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;
    color: #f90000;
  }
}
@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: #f71616;
  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;
    margin-top:20px;
  }
}
@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;
}





/* --- SANKUE PRODUCT GRID LAYOUT (3-COLUMN DESIGN) --- */

/* Grid container */
.products {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;                /* space between cards */
  padding: 30px 10px;
  box-sizing: border-box;
}

/* Each product card */
.products > div.allproducts {
  flex: 1 1 calc(33.33% - 30px);   /* 3 columns on desktop */
  max-width: 400px;
  min-width: 280px;
  background: #fff;
  border-radius: 15px;
  border: 1px solid #ddd;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Hover animation */
.products > div.allproducts:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Images & videos */
.prodimage.allprodimages, 
.prodimage.allprodimages iframe {
  width: 100%;
  height: auto;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}

/* Product title */
.prodname {
  text-align: center;
  padding: 10px 5px 0;
}
.prodname a {
  font-size: 1.2rem;
  font-weight: 600;
  color: #1e2149;
  text-transform: capitalize;
  text-decoration: none;
}

/* Price styling */
.prodprice {
  text-align: center;
  margin: 10px 0 0;
  color: #ff3a46;
  font-size: 1.3rem;
  font-weight: 700;
}

/* Description */
.proddescription {
  font-size: 0.9rem;
  color: #555;
  text-align: center;
  padding: 0 10px 10px;
  line-height: 1.5;
}

/* Buttons */
.products .ectbutton {
  display: block;
  width: 80%;
  margin: 6px auto;
  border-radius: 6px;
  font-weight: 600;
  background: #1e2149;
  color: #fff;
  transition: background 0.25s;
}
.products .ectbutton:hover {
  background: #f0bf79;
  color: #000;
}

/* --- Responsive adjustments --- */
@media (max-width: 991px) {
  .products > div.allproducts {
    flex: 1 1 calc(45% - 20px);   /* 2 columns on tablets */
  }
}

@media (max-width: 600px) {
  .products > div.allproducts {
    flex: 1 1 100%;               /* 1 column on phones */
  }
}





/* === FINAL SANKEU FIX — FULL WIDTH, 3 COLUMN GRID === */

div.products {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 30px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 20px 0 !important;
  box-sizing: border-box !important;
}

/* Each product card */
div.products > div.product {
  float: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  flex: 1 1 calc(33.333% - 30px) !important;
  max-width: calc(33.333% - 30px) !important;
  box-sizing: border-box !important;
}

/* Force disable old grid at 90em */
@media screen and (min-width: 90em) {
  div.products > div.product {
    flex: 1 1 calc(33.333% - 30px) !important;
    max-width: calc(33.333% - 30px) !important;
  }
}

/* Tablet (2-column) */
@media (max-width: 991px) {
  div.products > div.product {
    flex: 1 1 calc(50% - 20px) !important;
    max-width: calc(50% - 20px) !important;
  }
}

/* Mobile (1-column) */
@media (max-width: 600px) {
  div.products > div.product {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}

/* Remove padding from parent containers */
.container,
div.container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}



/* === MOBILE ALIGNMENT FIX === */
@media (max-width: 600px) {
  div.products {
    justify-content: center !important;
    padding: 10px !important;
  }

  div.products > div.product {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    margin: 0 auto 15px auto !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}


/* css for the product card elements */

/* === FULL-WIDTH IMAGE + CENTERED CARD PADDING (SANKUE STUDIO) === */

/* === FIXED FULL-WIDTH IMAGE + CENTERED CARD PADDING === */

div.products > div.product {
  background: #fff !important;
  border-radius: 15px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  padding: 1% !important;      /* 10% side padding inside each card */
  text-align: center !important;
  box-sizing: border-box !important;
}

/* Image fills the whole card width */
div.prodimage {
  width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  border-radius: 10px !important;
}

div.prodimage img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 10px !important;
}

/* Center titles, prices, and description */
div.prodname,
div.prodprice,
div.proddescription {
  text-align: center !important;
}

div.products .ectbutton {
  margin: 8px auto !important;
  width: 80% !important;
}


/* === Reduce white space between image and video === */

/* Remove bottom margin on image container */
div.prodimage {
  margin-bottom: 5px !important;     /* reduce space below image */
  padding-bottom: 0 !important;
}

/* Remove extra spacing above embedded videos */
div.proddescription iframe,
div.product iframe {
  margin-top: 5px !important;        /* small breathing room */
  display: block !important;
}

/* Optional: make both align visually tighter */
div.proddescription {
  margin-top: 0px !important;
  padding-top: 0 !important;
  text-align: left;
}



/* === RESTORE 4-COLUMN PRODUCT GRID === */
div.products {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 20px !important;
  padding: 20px 0 !important;
  box-sizing: border-box !important;
}

/* Each product card width (4 across) */
div.products > div.product {
  flex: 1 1 calc(25% - 20px) !important;   /* 4 columns */
  max-width: calc(25% - 20px) !important;
  float: none !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

/* Tablet – 2 columns */
@media (max-width: 991px) {
  div.products > div.product {
    flex: 1 1 calc(50% - 20px) !important;
    max-width: calc(50% - 20px) !important;
  }
}

/* Mobile – 1 column */
@media (max-width: 600px) {
  div.products > div.product {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}


/* === Remove green background from product name === */
div.prodname {
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
}

/* Optional: clean modern title look */
div.prodname a {
  display: inline-block;
  background: none !important;
  color: #1e2149 !important;
  font-weight: 600;
  font-size: 1.2rem;
  text-decoration: none;
}

div.prodname a:hover {
  color: #f0bf79 !important;
}



#custom-html-8l div.proddescription {

    color: #222;
    font-size: 1rem;
    line-height: 1.5;
    border-bottom: 1px solid #e9e9e9;
    min-height: 60px;
    margin-top: 1.5;

    text-align: left;
}