/* FONT */

@font-face {
  font-family: "Helvetica";
  font-style: normal;
  font-weight: normal;
  src: local("Helvetica"), url("Fonts/Helvetica.woff") format("woff");
}

@font-face {
  font-family: "Helvetica Light";
  font-style: normal;
  font-weight: normal;
  src: local("Helvetica Light"),
      url("Fonts/helvetica-light-587ebe5a59211.woff") format("woff");
}

/* TYPOGRAPHY */

a {
  text-decoration: none;
  color: black;
}

p {
  font-size: 10px;
}

body {
  font-family: "Helvetica", sans-serif; /* Applies Helvetica to the body */
}

li {
  font-family: "Helvetica Light", sans-serif; /* Applies Helvetica Light to h1 elements */
}

/* BUTTON REPLACE WITH SHOPIFY BUTTON  */

.btn {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0px;
  color: #ffffff;
  font-size: 20px;
  background: #000000;
  padding: 5px 60px 5px 60px;
  width: 100%;
  text-decoration: none;
  font-size: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
}

/* LOGO */

.logo-container {
  display: flex;
  justify-content: center; /* Horizontally centers the logo */
  align-items: center; /* Vertically centers the logo */
  height: ;
}

.logo-container img {
  max-width: 8%; /* Ensures the logo scales down to fit the container */
  height: auto; /* Maintains aspect ratio of the logo */
}

/* MAIN BODY CONTAINTER WITH COLUMNS*/

.container {
  display: flex; /* Enables flexbox layout */
  width: 100%; /* Full width of the container */
}

.left-column {
  width: 20%;
  padding: 50px;
}

.left-column-Product {
  width: 20%;
  padding: 50px;
  height: auto;
  margin-right: 20px;
}

.right-column {
  width: 80%;
  padding: 10px;
}

.right-column-L {
  width: 30%;
  padding: 0px;
  margin-top: 30px;
  background-color: #F2F2F2;
}

.right-column-L-Product {
  width: 30%;
  padding: 0px;
  margin-top: 30px;
  background-color: #F2F2F2;


  height: 100vh; /* Full viewport height */
  overflow-y: auto; /* Enable vertical scrolling */
  padding: 20px; /* Optional: Add padding for better appearance */
  box-sizing: border-box; /* Ensures padding doesn’t affect width */
  width: 80%; /* Or any appropriate width for the right column */



}


.right-column-R {
  width: 30%;
  padding: 0px;
  margin-top: 30px;
  background-color: #F2F2F2;
}

.right-column-R-Product {
  width: 30%;
  padding: 0px;
  margin-top: 30px;
  background-color: #F2F2F2;
  height: auto;
}

.right-column-Description {
  width: 30%;
  margin-top: 30px;
  padding: 50px;
  text-align: center;
}

.right-column-Description-Product {
  width: 30%;
  margin-top: 30px;
  padding: 50px;
  text-align: center;
  height: auto;
}

.far-right-column {
  width: 20%;
  padding: 50px;
}

/* GALLERY CONTAINTER  */

div.scroll-container {
  background-color: ;
  overflow: auto;
  white-space: nowrap;
  padding: 10px;
}

::-webkit-scrollbar {
  width: 0px;
  background: transparent; /* make scrollbar transparent */
}

div.scroll-container {
  padding: 10px 10px 0px 10px;
}

.logo-img {
  padding: 10px;
}

.gallery-img {
  height: 600px;
  width: auto;
  padding: 10px;
}

.shop-img {
  height: auto;
  width: 100%;
}

/* LEFT HAND MENU */

ul,
#myUL {
  list-style-type: none;
}

#myUL {
  margin: 0;
  padding: 0;
}

.nested {
  display: none;
  text-align: left;
  padding-left: 100px;
}

.active {
  display: block;
  text-align: left;
}

/* Menu interactions and spacing */
#myUL .nested > li,
#myUL .nested > a {
  display: block;
  margin: 10px 0; /* increased vertical spacing */
  line-height: 1.4;
  transition: color 120ms ease, font-weight 120ms ease, text-decoration-color 120ms ease;
}

#myUL .nested > a:hover,
#myUL .nested > li:hover {
  text-decoration: underline;
  font-weight: 600; /* slight bolding */
}

/* DESCRIPTION TEXT */

.description-container {
  position: relative;
  text-align: left;
  color: black;
  font-size: 8px;
}

.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}



/* PRODUCT PAGE SIDE NAVIGATION */

.sidenav {
  height: 100%;
  width: 0%;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0; /* Changed from 'left' to 'right' */
  background-color: #fff;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 32px 8px 8px; /* Adjusted padding */
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  left: 25px; /* Changed from 'right' to 'left' */
  font-size: 20px;
  margin-right: ; 
}

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}