/* masonry grid */
.masonry {
  transition: .5s ease;
  column-gap: 10px;
  column-fill: initial;
  padding: 10px;
  padding: 0 80px;
}

/* Masonry item */
.masonry .brick {
  position: relative;
  margin-bottom: 10px;
  display: inline-block; /* Fix the misalignment of items */
  vertical-align: top; /* Keep the item on the very top */
  padding: 0; /* Remove padding to match the image size */
  width: 100%; /* Ensure the brick matches the image width */
  height: auto; /* Allow the height to adjust based on the image */
}

/* Masonry image effects */
.masonry .brick img {
  width: 100%; /* Make the image fill the width of the div */
  height: 100%; /* Make the image fill the height of the div */
  object-fit: cover; /* Ensure the image covers the div without distortion */
  -webkit-filter: brightness(100%);
  filter: brightness(100%);
  transition: .3s ease;
  backface-visibility: hidden; /* Remove Image flickering on hover */
}

 /* .masonry .brick:hover img {
  -webkit-filter: blur(1px);
  filter: blur(1px);
  transition: .2s ease;
} */

.producttext_layer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%; /* Covers approximately 1/5 of the image */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); /* Black gradient */
  color: #fff;
  visibility: hidden;
  opacity: 0;
  display: flex;
  align-items: flex-end; /* Align content to the bottom */
  padding: 10px; /* Add padding for text spacing */
  transition: opacity .2s, visibility .2s;
}

.brick:hover .producttext_layer {
  visibility: visible;
  opacity: 1;
}

.producttext {
  transition: .2s;
  transform: translateY(1em);
  text-align: left; /* Align text to the left */
  font-size: 30px;
  margin-bottom: 0px;
  font-family: Special Gothic Expanded One, sans-serif;
}

.productprice {
  transition: .2s;
  transform: translateY(1em);
  text-align: left; /* Align text to the left */
  font-size: 18px;
  margin-bottom: 0px;
  font-family: Montserrat, sans-serif;
}

.brick:hover .producttext {
  transform: translateY(0);
}

.brick:hover .productprice {
  transform: translateY(0);
}

/* Masonry on tablets */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .masonry {
    column-count: 2;
  }
}

/* Masonry on big screens */
@media only screen and (min-width: 1024px) {
  .masonry {
    column-count: 3;
  }
}

/* <------------------------------------------------> */

.logoimg {
	max-height: 60px;
  height: 60px;
  /* margin: 10px 20px 0px 10px; */
		
}

.cartimg {
  max-height: 26px;
  height: 26px;
  margin-right: 25px;
  margin-top: 17px;
  float: right;
  vertical-align: middle;

}

.menuimg {
  max-height: 26px;
  height: 26px;
  margin-right: 35px;
  margin-top: 17px;
  float: right;

}


body{
  background-color: #f7f7f7;
}


@view-transition {
  navigation: auto;
}

.vertical-footer {
  position: fixed;
  top: 50%;
  left: 0; /* Ensure the footer is aligned to the left side */
  right: auto; /* Reset the right alignment */
  transform: translateY(-50%);
  color: #333; /* Change text color to match the design */
  padding: 0; /* Remove padding */
  z-index: 1000;
}

.vertical-footer ul {
  list-style: none;
  margin:5px;
  padding: 0;
  writing-mode: sideways-lr;
  text-orientation: mixed;
  font-family: Montserrat, sans-serif;
}

.vertical-footer ul li {
  margin: 0; /* Remove margin between items */
}

.vertical-footer ul li a {
  margin-bottom: 10px; /* Add 10px space between each <a> element */
  display: inline-block; /* Ensure spacing applies correctly */
  text-decoration: underline; /* Underline text by default */
  color: black; /* Set text color to black in all states */
  font-size: 14px;
}

.vertical-footer ul li a:hover {
  text-decoration: none; /* Remove underline on hover */
  color: black; /* Maintain black color on hover */
}