/* Google Fonts Import Link */
@import url('https://fonts.googleapis.com/css2?family=Chela+One&family=Poppins:ital,wght@0,400;0,500;0,700;0,900;1,300&display=swap');
:root{
  --input-min-height: 29px!important;
  --btn-color: black!important;
  --radius: none!important;
    --c1 : #000;
    --input-border-color: gray!important;
    --bshadow: 0 1px 3px 0 rgba(60, 64, 67, 0.302), 0 4px 8px 3px rgba(60, 64, 67, 0.149) !important;
    --boxshadow: -1px 3px 15px 1px rgb(163, 163, 163);
    --h6: calc(1.45rem + .7vw);
    --white: #fff;
    --margin:0.15em!important;
    /*--margin: 0.9em!important;*/
}
/*----------------------------------------- Global -----------------------------------------*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

.mdi-24px.mdi-set, .mdi-24px.mdi:before  {
  margin-left: .2em;
}
.pad-tb {
  padding: 15em 1em;
}

.pad-tb-1 {
  padding: 6em 0em;
}

.pad-tb-prod {padding: 15em 0em;}

.pad-b-5 {
  padding-bottom: 1em!important;
}
.ts-title-margin-b {
  margin: 3em 0 2em 0;
}
.c1-gradient {
  background: var(--c1-gradient);
}

.c1-text {
  color: var(--c1) !important;
  font-size: 1.5em;
  font-weight: 400!important;
}

.ts-deco-bean {
  height: 5em;
  width: auto;
  position: absolute;
  top: -2.5em;
  /* right: -4em; */
  display: grid;
  left: calc(50% - 4em);
  /* opacity: 70%; */
  transform: rotate(-45deg);
}

/* ++++++++++++++++++++++++++++++++++++++ Global END ++++++++++++++++++++++++++++++++++++++*/

/*----------------------------------------- Header -----------------------------------------*/
/*
header {
  border: none !important;
    color: #000;
  padding: 0.5em 0 !important;
}

.topbar {
  background-color: var(--white);
  color: var(--c1) !important;
  border-bottom: 0.25px solid var(--c1);
  position: fixed;
  width: 100vw;
  z-index: 2;
  
}

.topbar .search-box-container {
  animation: slideInDown 0.3s;
  background: var(--c3);
  color: inherit;
  display: grid;
  justify-items: center;
  align-items: center;
  height: 100%;
  top: 0px;
  position: absolute;
  right: 0;
  left: 0;
  z-index: 1;
}

.topbar #search_box {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  border-radius: 0px;
  
}

.topbar #search_box input::placeholder {
  color: var(--c1);
  opacity: 0.6; 
}

.topbar #search_box input {
  border: none;
  background: transparent;
  font-size: 1.5em;
  padding: 0.5em;
  outline: none;
  color: var(--c1);
  min-width: 40vw;
  text-align: center;
  width: calc(100vw - 200px) !important;
}

.topbar form i {
  cursor: pointer;
}

.topbar form .mdi::before {
  cursor: pointer;
  font-size: 2em;
}

.topbar form .mdi-close:hover {
  color: var(--white);
}

.topbar form .input-field {
  border: none !important;
  background: #fff;
  border-radius: 0.5em !important;
  width: 50%;
}

nav a {
  font-weight: 600;
  color: var(--c1) !important;
  font-size: 1.1em;
  text-transform: uppercase;
  transition: all 0.3s;
}

nav a:hover {
  
}
*/
/* ++++++++++++++++++++++++++++++++++++++++ Header END ++++++++++++++++++++++++++++++++++++++++*/

.slider.initialised {
  /* height: 70vh !important; */
}
.slider.initialised {
  top: 100px;
  margin-bottom:5em;
}

.slider:hover .slider-controls .slider-prev, .slider:hover .slider-controls .slider-next {
  opacity: 0!important;
}

.slider-track > div {
  cursor: auto!important;
  opacity: 100!important;
}
/*----------------------------------------- section -----------------------------------------*/

.ts-section-title {
  font-size: 3em;
  font-weight: 500;
  margin-bottom: 1.7em;
}

.ts-section-title-add{
  font-size: 3em;
  font-weight: 500;
  /*margin-bottom: 2em;*/
}

.address-2{
  margin-bottom: 2em;
}
.ts-section-title-2 {
  font-size: 2.3em;
  font-weight: 500;
  margin-bottom: 2em;
}

.ts-section-title-3 {
  font-size: 2.3em;
  font-weight: 500;
  margin-bottom: 2em;
}

.ts-filter div {
  border: 1px solid #ddd;
  height: 2.5em;
  padding: 0.5em 0.9em;
  border-radius: 10em;

  transition: all 0.3s;

  cursor: pointer;
  margin-bottom: 4.5em;
}

.ts-filter div:hover,
.ts-filter div.active {
  background: var(--c1-gradient);
  /*color: var(--white);*/
  border: 1px solid var(--white);
}

.ts-wonder-section {
  background-image: url("../img/background-pattern.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: overlay;
}

.ts-wonder-grid .mdi {
  background: var(--c1-gradient);
  color: var(--white);
  width: 7em;
  height: 7em;
  display: grid;
  align-items: center;
  justify-items: center;
  border-radius: 50em;
}

.ts-wonder-text {
  font-weight: 600;
  margin-top: 1em;
  color: var(--c1);
}

/*----------------------------------------- products-list -----------------------------------------*/
.ts-product {
  position: relative;
}

.card {
  box-shadow: none !important;
  border: none !important;
}

.ts-card {
  background-color: var(--white);
  /*border-radius: 1em !important;*/
   
   cursor: pointer;
}

.ts-card:hover .ts-prod-btn {
  transform: translateY(0) !important;
   /*margin: 1em 1em 0 1em !important; */
}
.ts-card:hover .ts-product-img img {
  transform:scale(1.1); transition:.5s all;
}

.ts-card .ts-product-img img {
  width: 100%!important;
 height: 100%!important;
  object-fit: cover;
transform:scale(1); 
transition:.5s all;
  
}
.ts-card .ts-product-img {overflow: hidden; height: 500px;}

.ts-text-container {
  padding: 1em;
}

.ts-product-title {
  font-weight: 500;
  color: var(--c2);
}

.ts-product-price {
  font-weight: 500;
  color: var(--c2);
}

/* ++++++++++++++++++++++++++++++++++++++ products-list END ++++++++++++++++++++++++++++++++++++++*/

/*----------------------------------------- buttons -----------------------------------------*/
.ts-prod-btn {
  /* display: none !important; */
  position: absolute;
  transform: translateY(5em);
  font-weight: 500 !important;
  background: var(--c1-gradient);
  padding: 0.9em 0 !important;
  cursor: pointer;
  display: grid;
  text-align: center!important;
  justify-content: center!important;
  /* border-radius: 0.5em !important; */
}

.btn {
  margin: 0 !important;
  /* border-radius: none !important; */
  background: black;
  font-weight: 500 !important;
}

.btn:hover {
  background: #282828;
  color: white;
  /* color: var(--c1); */
}

.btn:hover:after{
    background: none!important;
}

.btn-solid {
  border-radius: 0.5em !important;
}
/* ------------------------------------- footer ----------------------------------- */

/*footer {
   position: fixed; 
  background: var(--c1);
  width: 100%;
  bottom: 0;
  left: 0;
}*/

/*footer .content {
  max-width: 1250px;
  margin: auto;
  padding: 30px 40px 40px 40px;
}

footer .content .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5em;
  padding-bottom: 1em;
  border-bottom: 0.1px solid #ddd;
}

.content .top .logo-details {
  color: #fff;
  font-size: 30px;
}*/

/*.content .top .media-icons {
  display: flex;
}

.content .top .media-icons a {
  height: 40px;
  width: 40px;
  margin: 0 8px;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  color: #000;
  background-color: #fff;
  font-size: 17px;
  text-decoration: none;
  transition: all 0.4s ease;
}

footer .content {
  width: 100%;
}*/

/* footer .content .box {
  width: calc(100% / 5 - 10px);
} */

/*.box .link_name {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 0.7em;
  position: relative;
}*/

/* .box .link_name::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 35px;
  background: #fff;
} */

/*.content .box li {
  margin: 6px 0;
  list-style: none;
}*/

/*.content .box li a {
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  opacity: 0.8;
  transition: all 0.4s ease;
}

.content .box li a:hover {
  opacity: 1;
  text-decoration: underline;
}

.content .input-box {
  margin-right: 55px;
}

.input-box input {
  height: 40px;
  width: calc(100% + 55px);
  outline: none;
  border: 2px solid #afafb6;
  background: #140b5c;
  border-radius: 4px;
  padding: 0 15px;
  font-size: 15px;
  color: #fff;
  margin-top: 5px;
}
*/
/*.input-box input::placeholder {
  color: #afafb6;
  font-size: 16px;
}

.input-box input[type="button"] {
  background: #fff;
  color: #140b5c;
  border: none;
  font-size: 18px;
  font-weight: 500;
  margin: 4px 0;
  opacity: 0.8;
  cursor: pointer;
  transition: all 0.4s ease;
}*/

/*.input-box input[type="button"]:hover {
  opacity: 1;
}

footer .bottom-details {
  width: 100%;
  background: #000000;
}

footer .bottom-details .bottom_text {
  max-width: 1250px;
  margin: auto;
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
}

.content .top .logo-details .footer-logo {
  height: 3em !important;
  width: auto;
}

.bottom-details .bottom_text span,
.bottom-details .bottom_text a {
  font-size: 14px;
  font-weight: 300;
  color: #fff;
  opacity: 0.8;
  text-decoration: none;
}*/
/*
.bottom-details .bottom_text a:hover {
  opacity: 1;
  text-decoration: underline;
}

.bottom-details .bottom_text a {
  margin-right: 10px;
}

@media (max-width: 900px) {
  footer .content {
    flex-wrap: wrap;
  }

  footer .content .input-box {
    /* width: 40%; 
    margin-top: 10px;
  }
}
*/*/
/*@media (max-width: 800px) {
  .link_name.last {
    margin-top: 1em;
  }
}

@media (max-width: 700px) {
  footer {
    position: relative;
  }

  .content .top .logo-details .footer-logo {
    height: 3em !important;
    width: auto;
  }*/

 /* .content .top  a {
    height: 35px;
    width: 35px;
    font-size: 14px;
    line-height: 35px;
  }

  .bottom-details .bottom_text span,
  .bottom-details .bottom_text a {
    font-size: 12px;
  }
}

@media (max-width: 520px) {
  footer::before {
    top: 145px;
  }

  footer .content .top {
    flex-direction: column;
  }

  .content .top .media-icons {
    margin-top: 16px;
  }

  footer .content .box {
    /* width: calc(100% / 2 - 10px); */
 /* }

  footer .content .input-box {
    width: 100%;
  }
}

footer ul {
  list-style: none;
}*/
*/
/* ------------------------------------- footer end ----------------------------------- */

/* --------------------------------------- scroll --------------------------------------- */
.scroll {
  display: grid;
  grid-auto-flow: column;
  overflow: hidden;
  overflow-x: auto;
  max-width: 100vw;
}

.scroll > div {
  max-width: 42vw;
  min-width: 330px;
}

/*--------------------------------------- imp ---------------------------------------*/

/*.input-field input {
  border-radius: none !important;
  -webkit-border-radius: none !important;
  -moz-border-radius: none !important;
  -ms-border-radius: none !important;
  -o-border-radius: none !important;
}

.input-field input:placeholder-shown {
  color: rgb(80, 80, 80) !important;
}

.input-field {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  -ms-border-radius: 0 !important;
  -o-border-radius: 0 !important;
}

@media screen and (max-width: 800px) {
  nav.active:not(.social)::before {
    color: #fff !important;
    font-size: 1em !important;
  }

  nav.active:not(.social) {
    animation: slideInDown 0.5s !important;
*/
    /* background: rgb(0, 0, 0) !important; 
    color: rgb(255, 255, 255) !important;*/
  }

  /*nav.active:not(.social) {*/
    /* background: rgba(0, 0, 0, 0.9); */
 /*   color: rgba(255, 255, 255, 0.7);
    align-items: end !important;
    align-content: end !important;
    justify-content: right !important;
    padding-bottom: 2em;
  }

  nav.active:not(.social) a {
    font-size: 0.7em !important;
    text-align: right;
    width: 100vw;
    padding: 1em 2em;
    letter-spacing: 0.2em;

    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;

    bottom: 0;
  }

  nav.active:not(.social) a:hover {
    background-color: #fff !important;
    color: #000 !important;
    padding: 1em 2em;
  }

  header nav {
    grid-gap: 0.2em !important;
  }
}

.tb-pad {
  padding-top: 7.5em !important;
  padding-bottom: 7.5em !important;
}

@media screen and (max-width: 800px) {
  .tb-pad {
    padding-top: 3.5em !important;
    padding-bottom: 3.5em !important;
  }
}
*/
/* --------------------------------------- Ecom --------------------------------------- */

.product-page {
  /* display: grid;
  grid-template-columns: 3fr 2fr; */
}

.product-page_desc {
  line-height: 2em;
}

.product-page_desc ul li:before {
  content: "- ";
}
.product-page_desc ul li {
  /* text-indent: 20px; */
  list-style: none;
}

.product-imgs .cover img {
  width: 100%;
  height: 22em !important;
  object-fit: cover;
  border-radius: 1em;
}

div.ts-prod-desc-container {
  /* position: -webkit-sticky;
  position: sticky; */
  /* top: 0; */
}

.ts-prod-desc-title {
  font-weight: 800;
  color: var(--c2);
}

.sticky {
  position: sticky;
  top: 0;
  /* width: 100%; */
}

/* ------------------------------------- input number ------------------------------------- */
form.ts-form-input-number {
  grid-gap: 0em !important;
}
.ts-form-input-number {
  width: 8em;
  text-align: center;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.ts-form-input-number.form {
  display: block !important;
  grid-gap: 0em !important;
}

.ts-form-input-number .input-field {
  /* background: #ddd; */

  border: none !important;
  position: relative;
  padding: 0em;
  border-radius: var(--radius);
  transition: 0.2s all;
  display: block !important;
  align-items: center;
  margin: 0em !important;
}

.ts-form-input-number-cart .input-field input {
  min-height: 0 !important;
  height: 2em !important;
}

.value-button {
  border: 1px solid var(--c1);
  color: var(--c1);
  margin: 0px;
  text-align: center;
  vertical-align: middle;
  display: grid;
  align-items: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  transition: all 0.3s;
}

.value-button-cart {
  height: 2em;
  border: 1px solid var(--c3);
}

.value-button:hover {
  cursor: pointer;
  background: var(--c1);
  color: white;
  border: none;
}

.ts-form-input-number #decrease {
  border-radius: 0.5em 0 0 0.5em;
}

.ts-form-input-number #increase {
  border-radius: 0 8px 8px 0;
}

.ts-form-input-number #input-wrap {
  margin: 0px;
  padding: 0px;
}

.ts-input-number#number {
  text-align: center;
  border: none;
  border-top: 1px solid var(--c1);
  border-bottom: 1px solid var(--c1);
  margin: 0px;
}

.ts-input-number-cart#number {
  border-top: 1px solid var(--c3) !important;
  border-bottom: 1px solid var(--c3) !important;
}

.ts-input-number[type="number"]::-webkit-inner-spin-button,
.ts-input-number[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/***************************************** input number End **************************************** */

.ts-customer-review {
  /* border-top: 0.5px solid var(--c1); */
  border-bottom: 0.5px solid var(--c1);
  padding: 1.5em 0;
}

.ts-review-circle {
  background: var(--c1-gradient);
  color: #fff;
  height: 3em;
  width: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5em;
  font-weight: 600;
}

.ts-review-cname {
  font-weight: 600;
}

.ts-review-form {
  /* background: var(--c3); */
  box-shadow: var(--bshadow);
  padding: 1em 1em;
  border-radius: 0.5em;
  margin-top: 3em;
  margin-bottom: 1.5em;
}

/*------------------------------------ Cart End ------------------------------------ */
body {
  position: relative;
}

.ts-cart-container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 20;
  transition: all 0.5s;
}

.overlay {
  background-color: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 10;
  transition: all 0.5s;
}

.display_none {
  transform: translateX(100vw);
  transition: all 0.5s;
}

#cart_close {
  width: 3em;
  height: 3em;
  border-radius: 50%;
  transition: all 0.3s ease;
}

#cart_close:hover {
  background: white;
  color: black;
  transform: scale(.9);
}

.ts-cart {
  position: fixed;
  width: 35vw;
  height: 101vh;
  right: 0 !important;
  top: 0;
  bottom: 0;
  background: var(--white);

  box-shadow: var(--bshadow);
}

@media (max-width: 1030px) {
  .ts-cart {
    width: 100vw;
  }
}

.ts-cart-top {
  background: black;
  /* color: var(--white); */
  /* background: var(--white);*/
  color: white;

  padding: 0.7em 1.5em;
  font-weight: 600;
  /* border-bottom: 0.25px solid var(--c1); */
}

.ts-cart-top .mdi-close {
  /* background-color: var(--white); */
  color: white;
  /* width: 2.5em;
  height: 2.5em; */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding-right: 5px;
}

.ts-cart-single-product {
  padding: 1.5em;
  transition: all 0.3s;
}

.ts-cart-single-product:hover {
  /* background: #eeebdd; */
  box-shadow: var(--bshadow);
}

.ts-cart-products {
  height: 100vh;
  overflow: hidden;
  overflow-y: scroll;
  background-color: white;
  padding-bottom: 250px;
}

.ts-cart-products-btn {
  background-color: var(--white) !important;
  position: absolute;
  padding: 1em 1.5em;
  bottom: 0;
  right: 0;
  left: 0;
}

.ts-cart-single-product .ts-cart-single-product-remove {
  width: 3em;
  height: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transform: translateX(4em) scale(0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  padding-right: 5px;
}

.ts-cart-single-product:hover .ts-cart-single-product-remove {
  transform: translateX(0);
}

.ts-cart-single-product-remove:hover {
  background: var(--c1);
  color: white;
  transform: scale(1.3);
}

.ts-cart-product-image {
  width: 6em;
  height: 6em;
  object-fit: cover;
  border-radius: 0.7em;
}

.ts-cart-product-title {
  font-weight: 700;
  color: var(--c2);
}

.ts-cart-product-weight {
  color: rgb(165, 164, 164);
  font-weight: 600;
}

.ts-cart-product-price {
  font-weight: 700;
  color: rgb(39, 39, 39);
}

.displaynone {
  display: none !important;
}

.ts-cont-shopping-btn:hover {
  color: var(--c1);
  font-weight: 500;
}
/***************************************** Cart End **************************************** */

/*------------------------------------ Login Start------------------------------------ */
.ts-login-container {
  min-height: 100vh;
  min-width: 100vw;
  display: grid;
  align-items: center;
  justify-content: center;
  position: relative;
}

.ts-login-container .ts-login-form {
  width: 100%;
}

.ts-login-form-box {
  min-width: 30em;
  padding: 0em 2em 4em 2em;
  border-radius: 0.5em;
}

@media (max-width: 500px) {
  .ts-login-form-box {
    min-width: 23em;
  }
}

.ts-login-form-box h5 {
  font-weight: 700;
  color: var(--c1);
}

.ts-login-btn-box {
  padding: 0 0.3em;
}

.ts-login-btn-box a {
  font-weight: 600;
  color: var(--c1);
}

.ts-login-form .input-field {
  border: none !important;
  border-bottom: 1px solid rgb(179, 179, 179) !important;
  background-color: var(--c4) !important;
  border-radius: 0.3em !important;
  transition: 0.3s all !important;
}

.ts-login-form .input-field:focus {
  background: var(--c4);
}

.ts-login-etc-links {
  display: grid;
  align-items: center;
  justify-content: center;
}

.ts-login-etc-links a {
  font-weight: 500;
  color: var(--c1);
}

.ts-password {
  position: relative;
}

.ts-password .mdi {
  position: absolute;
  top: 0.3em;
  right: 1em;
}
/***************************************** Login End **************************************** */

/*------------------------------------ Product Images Gallery ------------------------------------ */
.wrapper {
  margin: 0 auto;
  width: 80%;
  text-align: center;
}

.image-gallery {
  margin: 0 auto;
  display: table;
}

.primary,
.thumbnails {
  display: table-cell;
}

.thumbnails {
  width: 300px;
}

.primary {
  width: 600px;
  height: 400px;
  background-color: #cccccc;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.thumbnail:hover .thumbnail-image,
.selected .thumbnail-image {
  border: 4px solid red;
}

.thumbnail-image {
  width: 100px;
  height: 100px;
  margin: 20px auto;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border: 4px solid transparent;
}

/***************************************** Product Images Gallery **************************************** */

/*------------------------------------ Profile Start ------------------------------------ */
.ts-profile-container {
  min-height: 100vh;
  /* display: grid;
  align-items: center;
  justify-content: center; */
}

.ts-profile h6 {
  /* background-color: #ddd; */
  font-weight: 700;
  color: var(--c2);
}

.profile {padding-left: 0em;}

.btn-container {margin-top: 2em;}

.ts-delivery-status img {
  height: 7.5em;
  width: auto;
  object-fit: cover;
  border-radius: 0.5em;
}

.ts-delivery-status {
  transition: all 0.3s;
  padding: 0.5em;
  border-radius: 1em;
  height: 6em;
  border: 1px solid var(--c4);
}

.ts-delivery-status:hover {
  box-shadow: var(--bshadow);
}

.ts-delivery-status:hover .mdi {
  opacity: 100%;
  animation: slideInLeft 0.3s;
}

.ts-delivery-status .mdi {
  opacity: 0;
  color: var(--c1);
}

.ts-order-status-title {
  font-weight: 500;
}

.ts-order-status-value {
  font-weight: 700;
}

.ts-product-order-details {
  transition: all 0.3s;
  /*padding: 2em;*/
  border-radius: 1em;
  border: 1px solid var(--c4);
}
/***************************************** Profile End **************************************** */


.ts-prod-page {
  padding-top: 7em;
  padding-bottom: 7em;
  background: var(--bg);
  font-family: 'Poppins', sans-serif;
}
/* 
.ts-prod-page .container-m {
  position: relative;
} */

.ts-prod-desc {
  background: #fff;
  /* box-shadow: var(--ts-shadow); */
  border-radius: 0.5em;
  padding: 3em;
  font-family: 'Poppins', sans-serif;
  /* width: 70%; */
}

.ts-prod-img img {
  width: 100%;
  object-fit: cover;
}

.ts-prod-sticky {
  position: -webkit-sticky;
  position: sticky;
  height: fit-content;
  width: 25vw;
  background: #fff;
  right: 0;
  top: 110px;
   box-shadow: var(--ts-shadow); 
  border-radius: 0.5em;
  padding: 2em 1em;
  z-index: 1;
}

.ts-prod-sticky .btn {
  margin-top: 1em !important;
}
.ts-prod-sticky strong {
  margin-top: 0.5em !important;
}

@media (max-width: 1025px) {
  .ts-prod-sticky {
     position: absolute; 
    top: 95px;
    width: 100%;
  }

  .ts-prod-sticky .img-box {
    display: grid;
    align-items: center;
    justify-items: center !important;
    width: 100%;
  }

  .ts-prod-sticky img {
    max-width: 100%;
    align-items: center;
  }
  .ts-prod-desc {
  }
}

.ts-prod-sticky img {
  width: 100%;
}

.ts-prod-page-title {
  font-weight: 700;
  color: var(--c1);
  margin-top: 1em;
  margin-bottom: 0.1em;
  font-family: 'Poppins', sans-serif;
}

.ts-prod-page .container-l {
  position: relative;
}

.ts-prod-desc p {
  margin-top: 1em;
  font-size: 1.1em;
}

.input-field {
  margin: 0px !important;
  transition: 0.3s all !important;
}


.prod_content img { width:100%; object-fit: contain; object-position: center; }

.ts-prod-page-img-box {
  display: grid;
  justify-items: center;
/*  align-content: center;*/
  padding: 1em;
  grid-gap: 1.5em;

}


.ts-prod-page-img-box img {
  width: 100%;
  max-width: 100px;
  object-fit: contain;
}



.ts-how {
  display: grid;
  align-content: flex-start;
}

.ts-how strong {
  font-weight: 800;
}

.collapse-header {
  font-size: 0.8rem;
  background: none !important;
  border: none !important;
  padding: 0.5em 1em;
  display: grid;
  grid-auto-flow: row !important;
  grid-template-columns: 1fr auto;
  align-content: center;
  cursor: pointer;
}


/* // */
.tt-card > div { background:var(--c3-grad); }
.tt-card::before { content:""; min-height:200px; }
.tt-card h6 { font-weight:700; font-size:1.5em; }

.tt-card { transition:.5s all; box-shadow:var(--ts-shadow); }
.tt-card:hover { box-shadow:0px 10px 10px 0px rgba(0,0,0,.1); border-radius: var(--radius); }


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

.ts-prod-sticky strong.tsize-3 { font-weight:400; }

/*
.selectbox-option div { position: relative; font-weight: bold; padding:1em 2em; display: grid; gap:1em; align-content: center;  border:1px solid rgba(0,0,0,0.1); border-radius: var(--radius); transition:0s all;}
.selectbox-option div:hover,.selectbox-option div.active { border-color:var(--c1); background:var(--c1); color:white }

.selectbox-option div small { color:var(--c1); transition:.3s all;  }
.selectbox-option div:hover small,.selectbox-option div.active small { color:var(--c4); animation:fadeInUp .3s; }

.selectbox-option div input { position: absolute; top:1em; left:1em; }

.selectbox-option div input { width:calc(100% - 1em); height:calc(100% - 2em); opacity:0;  cursor: pointer; }

*/
.selectbox-option span { position: relative; font-weight: bold; padding:1em 2em; display: grid; gap:1em; align-content: center;  border:1px solid rgba(0,0,0,0.1); border-radius: var(--radius); transition:0s all;}
  .selectbox-option span:hover,.selectbox-option span.active { border-color:var(--c1); background: #282828 ; color:white }

.selectbox-option span small { color:var(--c1); transition:.3s all;  }
.selectbox-option span:hover small,.selectbox-option span.active small { color:var(--c4); animation:fadeInUp .3s; }

.selectbox-option span input { position: absolute; top:1em; left:1em; }

.selectbox-option span input { width:calc(100% - 1em); height:calc(100% - 2em); opacity:0;  cursor: pointer; }



#cart-nav { position: relative; }
#cart-nav .cartno:not(:empty) { animation: tada .5s; font-weight: bold; background:var(--c1); color:white; width:20px; height:20px; display: grid; justify-items: center; align-items: center; text-align: center; border-radius:100%; font-size:.4em; position: absolute; top:20%; right:-19px; }




#reglogin.modal::before {  
  content: " ";
  background: linear-gradient(138deg, rgba(255,255,255,1) 0%, rgba(222,222,222,1) 100%);
  /*background-image: var(--c1-gradient);*/
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

/* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(8px);

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}

.status-ordered { color:var(--c1); }
.status-shipped { color:orange; }
.status-delivered { color:green; }
.status-cancelled { color:orangered; }
.status-refunded { color:green; }
.status-returned { color:black; }


.badge.big { border-radius: var(--radius); margin-bottom:5em; background-color: var(--c4); }
/*.ts-prod-sticky .ssheading { display: none; }
*/
/* = Loading =  */

body.loading::after {  content:""; background-color:rgba(255,255,255,.99); 
  animation:loadingpage 3s; background-image:url('../img/logo.png'); background-size:150px; background-repeat:no-repeat; background-position: center;
  color:rgba(0,0,0,.7); position:fixed; top:0; left:0; right:0; bottom:0; z-index:99; width:100%; height:100%; }


@keyframes loadingpage {
  0%  { background-size:80px;  opacity:1; }
  90% { background-size:150px;  opacity:1; }
  100% { background-size:180px;  opacity:0; }
}



/*****  New WhyHebrews **********/
.hbc-text h3 {font-size: 2.3em; font-weight: 500!important;}
.hbc-text h2 {font-weight: 500;}
.main-icons {width: 130px; height: 130px; display: grid; justify-content: center; align-items: center; background-color: black; color: white; border-radius: 100%}
.main-img img {width: 100%}
.enjoy span {font-size: 1.4em; font-weight: 500;}
.main-icons span {font-size: 2.7em;}
.links > a {color: #C5C5C5;}
.join-btn {display: grid; justify-content: start;}
/* ==  */

/******* New Header ***************/

header  { border: none!important;}
header nav {grid-gap: 3em!important;}
.brand img {min-height: 110px;}
.hc-header {
    position: sticky;
    top: 0px;
    z-index: 9;
    background-color: white;
    width: calc(100%)!important;
    padding-left: 4.5em;
    padding-right: 5em;
    transition: .5s all; 
}
.btn.small {padding: 0.5em 1.5em!important;}

@media (max-width: 820px){
  /*.link1 {display: grid; grid-template-columns: 1fr auto }*/
  nav .autocol {grid-auto-flow: row!important; display: grid; align-items: center; justify-content: center;}
  nav.active:not(.social) {font-size: 1.1em!important;}
  .div > h2 {padding: .2em; text-align: center;}
  .div1 .autocol {grid-auto-flow: row;}
  .div1 h3 { text-align: center;}
  .div2 > div {display: none;}
  .foot  span {display: grid; align-items:  center; justify-content: center;}
  .foot2 >span {/*padding-right: 1em!important;*/ padding: none; font-size: 2em!important; grid-gap: 1em!important; margin: }
  .main {display: grid; align-items: center;justify-content: center;}
  .slider-track > div img {padding-top: 20px!important;}
  .ts-card .ts-product-img img {width: 100%!important;}
  .brand img {min-height: 91px; max-width: 91px; /*padding-left: 5em;*/ }
  .foot3 {/*padding-right: 18.5em*/; display: grid; text-align: center;}
  .foot4 {display: grid; text-align: center; /*margin-right: 13em*/;}
  .hc-header {
    grid-template-columns: 2fr 1fr auto!important;
    position: sticky;
    top: 0px;
    z-index: 3;
    background-color: white;
    width: calc(100%)!important;
    transition: .5s all;  
    padding-left: 10px!important;
    padding-right: 10px!important;  
}
header nav {grid-gap: 2em!important;}
.foot5 {display: grid; text-align: center; justify-content: center; /*margin-right: 13em;*/}
.join-btn .btn.small {padding: .5em 5.5em!important;}
.foot-icons {/*padding-right: 5.2em!important;*/ display: grid; align-items: center; justify-content: center;}
.footlinks {grid-gap: 4em;}
.input-field input {font-size: 1.3em;}
.ts-prod-btn {display: none!important;}
.ts-card:hover .ts-prod-btn {display: none;}
.head1 {padding-top: 5.5em!important; padding-bottom: 5.5em!important;}
.card {margin: 0.9em!important;}
.card-2 {padding: 0.9em!important;}
.size h6 {font-size: 1.8em!important;}
.topbar .search-box-container {
  animation: slideInDown 0.5s;
  background: var(black);
  color: white;
  display: grid;
  justify-items: center;
  align-items: center;
  height: 100%;
  top: 0px;
  position: relative;
  right: 0;
  left: 0;
  z-index: 10!important;
}
.ts-filter {display: none;}
.hbc-text h3 {font-size: 2em; font-weight: 500!important;}
.hbc-text h2 {font-weight: 500;}
.main-icons {width: 115px; height: 115px; display: grid; justify-content: center; align-items: center;
 background-color: black; color: white; border-radius: 100%}
 .enjoy .text {font-size: 1.2em; font-weight: 500;}
.hbc-text h2 {font-weight: 500; font-size: 2.2em;}
.footcopy span{ font-size: .95em!important; }
.media-icons span {font-size: 2.3em!important;}
/*header::after {padding-right: 5em!important;}*/
.hc-header {grid-gap: .1em!important;}
.links span {font-size: 1.41em!important;}
.links a {font-size: .98em!important;}
.foot-img img{width: 170px; height: 170px;}
.foot-img {/*padding-right: 13em!important;*/}
.foot5 .new {font-size: 1.41em!important;}
.footlinks {padding-bottom: 2em!important;}
.topbar .search i {padding-right: 3em;}
.topbar .search span {padding-left: 2em;}
nav.active:not(.social)::before {color: #fff!important;}
.ts-section-title {font-size: 2em; display: grid; grid-template-columns: 1fr!important; padding-left}
.hbc-text h3 {text-align: center;}
.pad-tb-1 {padding: 6em 1em;}
.profile {padding-left: 0em!important;}
.green-text {font-size: 1.5em; color: black;}
.ts-prod-desc {padding: 2em!important;} 
.address  {margin-right: 9em!important;}
.ts-address-form {margin-top: 2em!important;}
.ts-login-etc-links span {margin-top: 3em!important;}
.ts-section-title-add {font-size: 2.5em; margin-bottom: 1em;}
.ts-order-status-value {font-size: .7em;}
.foot-c {display: grid; justify-content: center!important; text-align: center!important;}
.ggap-4.gap {grid-gap:4em!important;}
.join-btn {display: grid; justify-content: stretch;}
}

@media (max-width: 820px){
  header::after {
    padding-right: 0.79em!important;
}
header {padding-left: 0.88em!important;}
}

@media (max-width: 480px) {
.join-btn .btn.small {
    padding: 0.5em 5.5em!important;
}
.join-btn .btn.small {width: 100%!important; margin: 0 auto;}
}

@media (max-width: 320px) {
.join-btn .btn.small {
    padding: 0.5em 5.5em!important;
}
}

/************  New footer ********/

.footcopy span {font-size: 1em; font-weight: 400;}
.join-btn span {font-weight: 500;}
.media-icons span {font-size: 1.9em;}
/*.footlinks {padding-left: 4em!important; padding-right: 5em!important;}*/


/*************** New searchbar ********/

/*search bar*/

.topbar {
  background-color: var(--c1);
  color: var(--c1) !important;
  /*border-bottom: 0.25px solid var(--c1);*/
  position: fixed;
  width: 100vw;
  z-index: 10;
}

.topbar .search-box-container {
  animation: slideInDown 0.5s;
  background: var(black);
  color: white;
  display: grid;
  justify-items: center;
  align-items: center;
  height: 100%;
  top: 0px;
  position: relative;
  right: 0;
  left: 0;
  z-index: 1;
}

.topbar #search_box {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  border-radius: 0px;
  
}

.topbar #search_box input::placeholder {
  color: white;
  opacity: 0.6; 
}

.topbar #search_box input {
  border: none;
  background: black;
  font-size: 1.5em;
  padding: 0.5em;
  outline: none;
  color: white;
  min-width: 40vw;
  text-align: center;
  width: calc(100vw - 200px) !important;
  min-height: 105px;
}

.topbar form i {
  cursor: pointer;
}

.topbar form .mdi::before {
  cursor: pointer;
  font-size: 2em;
}

.topbar form .mdi-close:hover {
  color: gray;
}

.topbar form .input-field {
  border: none !important;
  background: #fff;
  border-radius: 0.5em !important;
  width: 50%;
}

.displaynone { display: none; }
.search-box-container { display:grid; }
.search-box-container.displaynone { display: none!important; }

@media (max-width: 820px)
{
.ts-prod-sticky {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-gap: 1em;
  padding: 1em;
  box-shadow: var(--boxshadow);
}
.ts-prod-sticky img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--radius);
}
.ssheading h6 {font-size: 1.30em;}
}

.ssheading1 {
  font-size: 1em;

}

  @media (max-width: 1085px)
{
  .ts-prod-sticky {
  /*position: absolute;*/
  top: 95px;
  width: 100%;
}
.ts-prod-sticky {
  position: -webkit-sticky;
  position: sticky;
  height: fit-content;
  /*width: 25vw;*/
  background: #fff;
  right: 0;
  /*top: 110px;*/
  /*box-shadow: var(--ts-shadow);*/
  border-radius: 0.5em;
  /*padding: 2em 1em;*/
  z-index: 1;
}