body {
  overflow-x: hidden;
  background: linear-gradient(-225deg, #2baeed, #36a952, #3753a2, #ec008c);
  background-size: 1400%;
  animation: gradient 70s ease infinite;
  margin: 0;
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.mainbody {
  margin: 15px;
  background: linear-gradient(-45deg,#ec008c, #2baeed, #36a952, #3753a2);
  background-size: 700%;
  animation: gradient 70s ease infinite;
  padding: 15px;
  align-items: center;
}
.navbar{
  width: 100%;
  text-align: center;
  padding-bottom: 10px;
  padding-left: 0;
    max-width: 1111px;
  margin-left: auto;
  margin-right: auto;

}
.navbar img {

  margin-right: 10px;
  margin-top: 20px;
  height: 8vw;
  max-height: 60px;
}
.logo {
  font-size: min(9vw, 90px);
  line-height: min(10vw, 90px);
  animation: color 30s infinite;
  letter-spacing: 0.01em;
font-family: "Futura", sans-serif;
font-weight: 800; /* For Extra Bold */
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: black;
  text-decoration: none;
  text-shadow: 
  0 01px black,
  01px 0 black,
  01px 02px black,
  02px 01px black,
  02px 03px black,
  03px 02px black,
  03px 04px black,
  04px 03px black,
  04px 05px black,
  05px 04px black,
  05px 06px black,
  06px 05px black,
  06px 07px black,
  07px 06px black,
  07px 08px black,
  08px 07px black,
  08px 09px black,
  09px 08px black,
  09px 10px black,
  10px 09px black,
  10px 11px black;
  paint-order: stroke fill;
  text-transform: uppercase;
  margin: 0;
  color: #ED0E58;
}
.cart-toggle-btn {
  background: white;

  text-transform: uppercase;
  position: absolute;

}

.part1 {
  text-align: center;
  font-family: "Roboto Mono", monospace;
  margin-top: 10px;
  border-top: 1.5px solid black;
  border-bottom: 1.5px solid black;
  padding: 2px;
  font-weight: 400;
  font-size: 15px;
  max-width: 1111px;
  margin-left: auto;
  margin-right: auto;

}
.part2 {
  position: relative; /* REQUIRED for positioning children absolutely */
  width: calc(100% - 30px);
  margin-top: 15px;
  font-family: "Roboto Mono", monospace;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  padding: 15px;
  background: linear-gradient(-45deg, #ec008c, #2baeed, #36a952, #3753a2);
  background-size: 400%;
  animation: gradient 70s ease infinite;
  border: 1.5px solid black;
  -webkit-font-smoothing: antialiased;
  box-shadow: 5px 5px #2baeed, 5px 5px 0 1.5px black;
  text-transform: uppercase;
  font-weight: 800;
  text-align: justify;
  font-size: 30px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  z-index: 100;
}

.part2p {
  position: relative; /* ensure it's layered above the image */
  z-index: 10;
  margin: 0;
}
.part2p h1{
  margin: 0;
font-family: "Futura", sans-serif;
font-weight: 800; /* For Extra Bold */
  display: inline;

  font-size: min(9vw, 90px);
}

.part2 img {
  display: inline;
  position: relative;
  top: 0;
  left: 0;
  width: calc(100% + 30px);
  height: auto;
  margin: 0;
  margin-left: -15px;
  margin-top: -40px;
  margin-bottom: -30px;
  z-index: 0;
  pointer-events: none; /* so the image doesn't block clicks */
}

.part3-slider {
  overflow: hidden;
  width: 100%;
  max-width: 1111px;
  position: relative;
  padding: 3px 0;
  white-space: nowrap;
  margin-top: 15px;
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(-45deg, #5d79c8,  #5fcc7a, #72c9f3, #ff3aaf);
  background-size: 400%;
  animation: gradient 70s ease infinite;
  border: 1.5px solid black;
}

.slider-track {
  display: inline-flex;
  animation: scroll-left 20s linear infinite;
}

.slider-track p {
  margin: 0 30px;
  color: black;
  font-size: 24px;
  flex-shrink: 0; /* prevents flex items from shrinking */
  font-family: "Roboto Mono", monospace;
}


@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}


/* CUSTOMISE MENU */
.custommenu {
  display: flex;
  margin-top:15px;
  flex-direction: column;
  box-sizing: border-box;
  line-height: 15px;
  max-width: 600px;
  max-height: none;
  min-height: 0px;
  background-color:
  rgba(255, 255, 255, 0.1);
  border: 1.5px solid black;
  -webkit-font-smoothing: antialiased;
  box-shadow: 5px 5px #2baeed, 5px 5px 0 1.5px black;
}
/* ###RESPOND TO MOBILE### */
@media (min-width: 628px) {
  .custommenu {
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
  }
}
.menutitle{
  text-align: center;
  padding: 14px;
  font-family: "Roboto Mono", monospace;
}
.menutitle h1 {
  text-transform: uppercase;
  font-size: min(9vw, 90px);
  line-height: min(9vw, 90px);
  line-height: auto;
  -webkit-text-fill-color: black;
font-family: "Futura", sans-serif;
font-weight: 800; /* For Extra Bold */
  margin: 0;
}
.menutitle h2{
  text-transform: uppercase;
  font-size: min(6vw, 40px);
  line-height: min(6vw, 40px);
  height: 100%;
  -webkit-text-fill-color: black;
  font-family: "Roboto Mono", monospace;
  font-weight: 700;
  padding-top: 40px;
  margin: 0;

}
.menutitle p{
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-size: 15px;
  font-size-adjust: none;
  font-stretch: 100%;
  font-style: normal;
  font-variant-alternates: normal;
  font-variant-caps: normal;
  font-variant-east-asian: normal;
  font-variant-ligatures: normal;
  font-variant-numeric: normal;
  font-variant-position: normal;
  font-variation-settings: normal;
  font-weight: 400;
}
.selecttitle{
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-size: 15px;
  font-size-adjust: none;
  font-stretch: 100%;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  padding: 10px;
}
.colour.selected, .design.selected {
  outline: 3px solid black;
}
.size.selected{
  background-color: #2baeed;
  
}
.info-box {
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  padding: 0 12px; /* Initially, only left-right padding */
  line-height: 14px;
  opacity: 0; /* Start with the box invisible */
  max-height: 0; /* Start with the box collapsed */
  overflow: hidden; /* Hide content when the box is collapsed */
  transition: opacity 1s ease, max-height 1s ease; /* Smooth transitions */
}
.info-box.visible {
  opacity: 1; /* Make the box fully visible */
  max-height: 1000px; /* Set to a large value to ensure content fits */
  padding: 12px; /* Add padding when visible */
}
.info-box h1, .info-box h2 {
  margin: 0;
  padding: 0;
}
.info-box h1 {
  font-size: 11px;
  opacity: 0.6;
}
.info-box h2 {
  font-size: 13px;
  font-weight: 400;
}
.sizes {
  display: flex;
  justify-content: space-evenly;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
  color: rgb(0, 0, 0);
  column-gap: 8px;
  padding: 14px;
  row-gap: 8px;
  top: 14px;
  -webkit-font-smoothing: antialiased;
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-size: 15px;
  font-size-adjust: none;
  font-stretch: 100%;
  font-style: normal;
  font-variant-alternates: normal;
  font-variant-caps: normal;
  font-variant-east-asian: normal;
  font-variant-ligatures: normal;
  font-variant-numeric: normal;
  font-variant-position: normal;
  font-variation-settings: normal;
  font-weight: 400;
}
.size {
  outline: 1.5px solid black;
  align-items: center;
  box-sizing: border-box;
  column-gap: 14px;
  cursor: pointer;
  display: inline-flex;
  flex-basis: 0%;
  flex-grow: 1;
  flex-shrink: 1;
  height: 35px;
  justify-content: center;
  letter-spacing: normal;
  line-height: 30px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  outline-color: rgb(0, 0, 0);
  padding-bottom: 0px;
  padding-left: 14px;
  padding-right: 14px;
  padding-top: 0px;
  position: relative;
  row-gap: 14px;
  text-align: center;
  text-decoration: none;
  text-decoration-line: none;
  text-indent: 0px;
  text-shadow: none;
  text-transform: uppercase;
  white-space: nowrap;
  word-spacing: 0px;
  writing-mode: horizontal-tb;
  -webkit-font-smoothing: antialiased;
  transition: 0.3s;
  background-color: rgba(255, 255, 255, 0.2);
}
.size:hover {
  cursor: pointer;
  background-color: transparent;
  transition: 0.3s;
}
.colours{
  display: flex;
  justify-content: space-evenly;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
  color: rgb(0, 0, 0);
  column-gap: 8px;
  padding: 14px;
  row-gap: 8px;
  top: 14px;
  -webkit-font-smoothing: antialiased;
}
.colour{
  cursor: pointer;
  width: 35px;
  height: 35px;
  border-radius: 17.5px;
  outline: 1.5px solid black;
  outline-offset: -0.5px;
}
.designs {
  box-sizing: border-box;
  color: rgb(0, 0, 0);
  column-gap: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  left: 0px;
  padding-bottom: 14px;
  padding-left: 14px;
  padding-right: 14px;
  padding-top: 14px;
  position: relative;
  row-gap: 14px;
  width: 100%;
  -webkit-font-smoothing: antialiased;
}
.design{
  background-color: white; /* This background is what you're seeing */
  appearance: none;
  color: rgb(0, 0, 0);
  cursor: pointer;
  display: block;
  letter-spacing: normal;
  order: 1;
  outline: 1.5px solid black;
  overflow: hidden;
  position: relative;
  text-align: center;
  text-indent: 0px;
  text-shadow: none;
  text-transform: none;
  transition: border-color 0.3s ease, outline-color 0.3s ease;
  word-spacing: 0px;
  writing-mode: horizontal-tb;
  -webkit-font-smoothing: antialiased;
  padding: 10px;
  aspect-ratio: 1 / 1;
  /* Ensure no residual font-size/line-height affects image placement */
  font-size: 0; /* Set font-size to 0 to eliminate potential line-height space */
  line-height: 0;
}
.design img{
  background-color: lightgray; /* This background is for the image itself */
  color: rgb(0, 0, 0);
  cursor: pointer;
  display: block; /* Important for width/height to work reliably */
  height: calc(100% - 20px);
  width: calc(100% - 20px);
  object-fit: contain;
  margin: 0;
  letter-spacing: normal;
  outline-color: rgb(0, 0, 0);
  outline-offset: 3px;
  outline-style: none;
  outline-width: 0px;
  white-space: normal;
  writing-mode: horizontal-tb;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease-in-out;
  vertical-align: top;
  position: absolute; /* Re-introduce absolute positioning */
  top: 10px; /* Start at the top of the padding edge (10px from parent's content box) */
  left: 10px; /* Start at the left of the padding edge */
  right: 10px; /* End at the right of the padding edge */
  bottom: 10px; /* End at the bottom of the padding edge */
}
.bindings {
  display: flex;
  justify-content: space-evenly;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
  color: rgb(0, 0, 0);
  column-gap: 14px;
  padding: 14px;
  top: 14px;
  -webkit-font-smoothing: antialiased;
}
.binding {
  outline: 1.5px solid black;
  align-items: center;
  box-sizing: border-box;
  column-gap: 14px;
  cursor: pointer;
  display: inline-flex;
  flex-basis: 0%;
  flex-grow: 1;
  flex-shrink: 1;
  height: 35px;
  justify-content: center;
  letter-spacing: normal;
  line-height: 30px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  outline-color: rgb(0, 0, 0);
  padding-bottom: 0px;
  padding-left: 14px;
  padding-right: 14px;
  padding-top: 0px;
  position: relative;
  row-gap: 14px;
  text-align: center;
  text-decoration: none;
  text-decoration-line: none;
  text-indent: 0px;
  text-shadow: none;
  text-transform: uppercase;
  white-space: nowrap;
  word-spacing: 0px;
  writing-mode: horizontal-tb;
  -webkit-font-smoothing: antialiased;
  transition: 0.3s;
}
.binding h4{
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-size: 15px;
  font-size-adjust: none;
  font-stretch: 100%;
  font-style: normal;
  font-variant-alternates: normal;
  font-variant-caps: normal;
  font-variant-east-asian: normal;
  font-variant-ligatures: normal;
  font-variant-numeric: normal;
  font-variant-position: normal;
  font-variation-settings: normal;
  font-weight: 400;
}
.binding p{
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  top: -10px;
  font-size: 10px;
  font-size-adjust: none;
  font-stretch: 100%;
  font-style: normal;
  font-variant-alternates: normal;
  font-variant-caps: normal;
  font-variant-east-asian: normal;
  font-variant-ligatures: normal;
  font-variant-numeric: normal;
  font-variant-position: normal;
  font-variation-settings: normal;
  font-weight: 400;
}
.binding:hover {
  cursor: pointer;
  background-color: #36a952;
  transition: 0.3s;
}
.binding.selected{
  background-color: #36a952;

}
.pages {
  display: flex;
  justify-content: space-evenly;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
  color: rgb(0, 0, 0);
  column-gap: 14px;
  padding: 14px;
  row-gap: 14px;
  top: 14px;
  -webkit-font-smoothing: antialiased;
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-size: 15px;
  font-size-adjust: none;
  font-stretch: 100%;
  font-style: normal;
  font-variant-alternates: normal;
  font-variant-caps: normal;
  font-variant-east-asian: normal;
  font-variant-ligatures: normal;
  font-variant-numeric: normal;
  font-variant-position: normal;
  font-variation-settings: normal;
  font-weight: 400;
}
.page {
  outline: 1.5px solid black;
  align-items: center;
  box-sizing: border-box;
  column-gap: 14px;
  cursor: pointer;
  display: inline-flex;
  flex-basis: 0%;
  flex-grow: 1;
  flex-shrink: 1;
  height: 35px;
  justify-content: center;
  letter-spacing: normal;
  line-height: 30px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  outline-color: rgb(0, 0, 0);
  padding-bottom: 0px;
  padding-left: 14px;
  padding-right: 14px;
  padding-top: 0px;
  position: relative;
  row-gap: 14px;
  text-align: center;
  text-decoration: none;
  text-decoration-line: none;
  text-indent: 0px;
  text-shadow: none;
  text-transform: uppercase;
  white-space: nowrap;
  word-spacing: 0px;
  writing-mode: horizontal-tb;
  -webkit-font-smoothing: antialiased;
  transition: 0.3s;
}
.page h4{
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-size: 15px;
  font-size-adjust: none;
  font-stretch: 100%;
  font-style: normal;
  font-variant-alternates: normal;
  font-variant-caps: normal;
  font-variant-east-asian: normal;
  font-variant-ligatures: normal;
  font-variant-numeric: normal;
  font-variant-position: normal;
  font-variation-settings: normal;
  font-weight: 400;
}
.page p{
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-size: 10px;
  font-size-adjust: none;
  font-stretch: 100%;
  font-style: normal;
  font-variant-alternates: normal;
  font-variant-caps: normal;
  font-variant-east-asian: normal;
  font-variant-ligatures: normal;
  font-variant-numeric: normal;
  font-variant-position: normal;
  font-variation-settings: normal;
  font-weight: 400;
}
.page:hover {
  background-color: #ec008c;
  transition: 0.3s;
}
.page.selected {
  background-color: #ec008c;
}
.product-preview {
  margin-top: 20px;
  padding: 20px;
  border-top: 1.5px solid black;
}

.product-container {
  display: flex;
  flex-direction: column; /* Stack image on top of details */
  align-items: center;
  gap: 20px;
  padding: 15px;
  width: 100%;
  box-sizing: border-box;
}

.previewimage {
  width: 100%;
  display: flex;
  justify-content: center;
}

.previewimage img {
  width: 66%; /* 2/3 of the container */
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border: 1.5px solid black;
}

.product-details {
  width: 100%;
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}

.detail-row {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
}

.detail-cell {
  flex: 1;
  min-width: 120px; /* Helps control wrap on small screens */
}

.product-details h1 {
  font-size: 11px;
  opacity: 0.6;
  margin: 0;
}

.product-details h2 {
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  margin: 0 0 8px 0;
}
.previewtitle{
  text-align: center;
  padding: 14px;
  font-family: "Roboto Mono", monospace;
}
.previewtitle h1 {
  text-transform: uppercase;
  font-size: min(11.5vw, 90px);
  line-height: min(12.5vw, 90px);
  line-height: auto;
  -webkit-text-fill-color: black;
font-family: "Futura", sans-serif;
font-weight: 800; /* For Extra Bold */
  margin: 0;
}
.previewtitle h2{
  text-transform: uppercase;
  font-size: min(6vw, 40px);
  line-height: min(6vw, 40px);
  height: 100%;
  -webkit-text-fill-color: black;
  font-family: "Roboto Mono", monospace;
  font-weight: 700;
  padding-top: 10px;
  margin: 0;

}
#add-to-cart-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
backdrop-filter: blur(20px) saturate(70%) brightness(1);;
  color: black; /* Text color */
  padding: 20px;
  cursor: pointer;
  border-top: 1.5px solid black;
  z-index:2000;
}
#add-to-cart-content {
  display: flex;
  justify-content: space-between;
  width: calc(100% - 40px);
}
#add-to-cart-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
#add-to-cart-text {
  font-weight: 800;
  text-transform: uppercase;
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-size: 15px;
}
#product-name {
  font-weight: 400;
  text-transform: uppercase;
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-size: 10px;
}
#add-to-cart-right {
  font-weight: 800;
  text-transform: uppercase;
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-size: 15px;
  margin-top: auto;
  margin-bottom: auto;
}
#add-to-cart-right #product-price {
  color: black;

}
#add-to-cart-container:hover {
  background-color: #0056b3; /* Darker blue when hovered */
}
.footer-copyright {
  flex-basis: 100%;
  text-align: center;
  padding-top: 15px;
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
}