/*============================================================================================================================================================*/
/*  MARK: LAYR55 WEBSITE CSS                                                                                                                                 */
/*============================================================================================================================================================*/



/*============================================================================================================================================================*/
/* MARK: BASE STYLING                                                                                                                                         */
/*============================================================================================================================================================*/
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    overflow-x: hidden !important;
    scroll-behavior: smooth;
    background-color: black;
    height: 100lvh;
    height: 100dvh;
}

/*============================================================================================================================================================*/
/* MARK: OVERLAY SECTION                                                                                                                                      */
/*============================================================================================================================================================*/
.Overlay-Section {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100lvh;
  height: 100dvh;
  z-index: 2000;
  pointer-events: none;
}

.colour-overlay {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  z-index: 9999;
  pointer-events: auto;
}

.color-swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.red { background-color: #ff4d4d; }
.white { background-color: #f5f5f5; }
.grey { background-color: #555; }
.black { background-color: #111; }

.color-swatch:hover {
  transform: scale(1.1);
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.2);
}
.color-swatch.active {
  border: 3px solid rgba(255, 255, 255, 1);
  transform: scale(1.1);
}
.color-swatch.white.active,
.color-swatch.red.active {
    border: 3px solid rgba(0, 0, 0, 1);
    transform: scale(1.1);
}

/*============================================================================================================================================================*/
/*MARK: SCROLL CONTAINER                                                                                                                                      */
/*============================================================================================================================================================*/
.scroll-container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: -webkit-fill-available;
  scroll-behavior: smooth;
}

/*============================================================================================================================================================*/
/*MARK: HERO SECTION                                                                                                                                          */
/*============================================================================================================================================================*/
.Hero-Section {
  position: relative;
  width: 100%;
  height: 100lvh;
  height: 100dvh;
  z-index: 1;
  background-color: black;
  background: url('your-image.jpg') center center / cover no-repeat;

  /* Fill behind notch and home bar */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  scroll-snap-align: start;
}

#Hero-Container {
  width: 100%;               /* Container stretches full width */
  height: 100%;              /* Container stretches full height of its parent (.Hero-Section) */
  z-index: 0;                /* Ensures it stays behind any layered elements with higher z-index */
}

#Hero-Image {
  display: block;
}

/*============================================================================================================================================================*/
/*MARK: COMPANY NAME                                                                                                                                          */
/*============================================================================================================================================================*/

.Company-Hero-Name {
  position: absolute;              /* Positions the name relative to the nearest positioned ancestor (Hero-Section) */
  top: 50%;                        /* Moves the element down to the middle of the container */
  left: 50%;                       /* Moves the element right to the middle of the container */
  transform: translate(-50%, -50%);/* Centers the element exactly (shifts back by half its own width/height) */
  
  font-family: 'Anton', sans-serif;/* Uses Anton font, with sans-serif fallback */
  font-size: 16vw;                 /* Sets font size relative to viewport width (scales with screen size) */
  font-weight: 1200;               /* Makes text very bold (note: most browsers cap at 900, so 1200 = extra bold) */
  color: white;                    /* White text color */
  
  display: flex;                   /* Allows flexbox layout for alignment */
  flex-direction: column;          /* Stacks letters vertically */
  align-items: center;             /* Horizontally centers content inside flex container */
  justify-content: center;         /* Vertically centers content inside flex container */
  
  z-index: 1;                      /* Ensures text is above background elements */
  line-height: 1;                  /* Tightens spacing between lines */
  
  writing-mode: vertical-lr;       /* Rotates text layout vertically, flowing top-to-bottom left-to-right */
  text-orientation: upright;       /* Ensures individual letters remain upright instead of rotated */
}

.letter {
/*  -webkit-text-stroke: 2px rgba(0,0,0,0.5); /*
  color: white; /* fills the letter */
  display: inline-block;
  opacity: 0;
  transform: rotateX(90deg);
  animation: unfold 0.6s ease-out forwards;
}

@keyframes unfold {
  0% {
    transform: rotateX(90deg);     /* Starts folded away (flat) */
    opacity: 0;                    /* Invisible at start */
  }
  100% {
    transform: rotateX(0deg);      /* Ends upright (fully visible) */
    opacity: 1;                    /* Fully visible at end */
  }
}

/*============================================================================================================================================================*/
/*MARK: NAVIGATION DYNAMIC ISLAND                                                                                                                             */
/*============================================================================================================================================================*/
.Navigation-Island {
  position: fixed;                        /* Stays fixed at the top of the screen when scrolling */
  top: 20px;                              /* Pushes it 20px down from the top */
  left: 50%;                              /* Centers horizontally */
  transform: translateX(-50%);            /* Perfect centering (shifts left by 50% of its own width) */
  
  width: 40%;                             /* Scales relative to viewport */
  max-width: 550px;                       /* Prevents it from growing too wide */
  min-width: 280px;                       /* Ensures readability on small screens */
  height: 50px;                           /* Fixed height */
  
  background: linear-gradient(180deg,
    rgba(255,255,255,0.035) 0%,
    rgba(255,255,255,0.020) 40%,
    rgba(20,30,40,0.06) 100%);
  
  border: 1px solid rgba(255,255,255,0.05);   /* Thin translucent border */
  border-radius: 18px;                        /* Rounded corners */
  
  backdrop-filter: blur(18px) saturate(130%); /* Blurred + slightly saturated background (glass effect) */
  -webkit-backdrop-filter: blur(18px) saturate(130%); /* Safari support */
  
  box-shadow:                               /* Outer + inner subtle shadows */
    0 10px 30px -8px rgba(0,0,0,0.18),       /* Drop shadow */
    inset 0 1px 0 rgba(255,255,255,0.02);    /* Subtle inner highlight */
  
  color: white;                              /* Default text color */
  z-index: 1000;                             /* Keeps it above main content */
  
  display: flex;                             /* Flex container */
  flex-direction: column;                    /* Content stacks vertically */
  align-items: center;                       /* Center horizontally */
  
  padding: 0;                                /* Reset padding */
  overflow: hidden;                          /* Hides anything overflowing the box */
  
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth scaling/shadow animations */
  border: 1px solid rgba(255, 255, 255, 0.05);
  
}

/* Highlight shimmer layer */
.Navigation-Island::before {
  content: "";
  position: absolute;
  left: -20%;                   /* Extends beyond bounds for effect */
  top: -30%;
  width: 140%;
  height: 80%;
  pointer-events: none;          /* Prevents blocking clicks */
  
  background:
    radial-gradient(60% 40% at 20% 20%,       /* Subtle highlight glow */
      rgba(255,255,255,0.18) 0%,
      rgba(255,255,255,0.06) 10%,
      rgba(255,255,255,0.00) 35%),
    linear-gradient(180deg,                   /* Vertical soft fade */
      rgba(255,255,255,0.03),
      rgba(255,255,255,0.00));
  
  transform: rotate(-8deg);       /* Tilted highlight angle */
  filter: blur(6px);              /* Softens highlight */
  mix-blend-mode: screen;         /* Brightens underlying background */
}

/* Subtle shadow layer */
.Navigation-Island::after {
  content: "";
  position: absolute;
  inset: 0;                      /* Fills container */
  pointer-events: none;
  
  background:
    radial-gradient(60% 40% at 90% 85%,      /* Bottom-right shadow */
      rgba(10,12,18,0.28) 0%,
      rgba(10,12,18,0.10) 35%,
      rgba(255,255,255,0.00) 60%);
  
  mix-blend-mode: multiply;       /* Darkens underlying background */
  opacity: 0.55;                  /* Keeps it subtle */
}

/* Grainy texture overlay */
.Navigation-Island .grain {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  
  background-image:              /* Adds subtle noise/grain effect */
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.03) 0.5px, transparent 0.5px),
    radial-gradient(circle at 80% 80%, rgba(0,0,0,0.03) 0.6px, transparent 0.6px);
  background-size: 6px 6px, 8px 8px; /* Grain pattern repetition */
  
  mix-blend-mode: overlay;       /* Blends with content for natural texture */
  opacity: 0.9;                  /* Strong but not overwhelming */
  z-index: 3;                    /* On top of other pseudo-elements */
}

/*==============================*/
/* Responsive Navigation Island */
/*==============================*/

/* Base (desktop default) */
.Navigation-Island {
  width: 40%;
  max-width: 550px;
  min-width: 280px;
  height: 50px;
}

/* Mobile (portrait phones) */
@media (max-width: 600px) {
  .Navigation-Island {
    width: 70%;              /* wider on small screens */
    height: 50px;            /* slightly shorter */
    top: 10px;               /* closer to top */
    border-radius: 14px;
  }
}

/* Tablet (landscape phones & tablets) */
@media (min-width: 601px) and (max-width: 1024px) {
  .Navigation-Island {
    width: 60%;
    height: 50px;
    top: 15px;
  }
}

/* Desktop (normal monitors & laptops) */
@media (min-width: 1025px) and (max-width: 1600px) {
  .Navigation-Island {
    width: 40%;
    height: 50px;            /* give it more presence */
    top: 20px;
  }
}

/* Ultra-wide monitors (big displays, 2K–4K) */
@media (min-width: 1601px) {
  .Navigation-Island {
    width: 30%;              /* tighter proportion */
    max-width: 700px;        /* allow slightly larger */
    height: 50px;            /* give it more visual weight */
    top: 25px;
  }
}


/* === Open state === */
.Navigation-Island.show-menu {
  height: 85vh; /* full screen minus top/bottom padding */
  padding: 20px 0px;
}

.Navigation-Island.show-menu .Island-Menu {
  opacity: 1;
  display: flex;
}

/* Mobile (portrait phones) */
@media (max-width: 600px) {
  .Navigation-Island.show-menu {
      height: calc(100vh - 100px); /* full screen minus top/bottom padding */
      padding: 20px 0px;
  }
}

/* Tablet (landscape phones & tablets) */
@media (min-width: 601px) and (max-width: 1024px) {
    .Navigation-Island.show-menu {
        height: calc(100vh - 100px); /* full screen minus top/bottom padding */
        padding: 20px 0px;
    }
}





/*============================================================================================================================================================*/
/*MARK: NAVIGATION DYNAMIC ISLAND ITEMS                                                                                                                       */
/*============================================================================================================================================================*/

/*=====================================*/
/*   Dynamic Isalnd Capsule Contanor   */
/*=====================================*/
.Island-Top {
  position: absolute;            /* Positioned relative to Navigation-Island */
  top: 0;                        /* Aligns to top of island */
  left: 0;                       /* Aligns to left of island */
  width: 100%;                   /* Full width of island */
  height: 50px;                  /* Same height as island */
  
  display: flex;                 /* Flex layout for top row items */
  justify-content: space-between;/* Space items evenly across row */
  align-items: center;           /* Center items vertically */
  flex-shrink: 0;                /* Prevent shrinking */
  z-index: 2;                    /* Above base island but below overlays */
}

/* Show menu when island has .show-menu class */
.Navigation-Island.show-menu .Island-Menu {
  display: flex;
}

/*=====================================*/
/*   Hamburger Menu Button             */
/*=====================================*/
.Menu-Button {
  position: relative;                 /* Needed for pseudo-elements (::before, ::after) to position relative to button */
  display: flex;                      /* Flex layout for vertical stacking of lines */
  flex-direction: column;             /* Stack lines vertically */
  justify-content: center;            /* Center lines vertically inside button */
  align-items: center;                /* Center lines horizontally */
  
  width: 40px;                        /* Button width */
  height: 40px;                       /* Button height */
  border-radius: 50%;                 /* Make button circular */
  cursor: pointer;                    /* Show pointer on hover */
  pointer-events: auto;               /* Ensure button responds to clicks */
  overflow: hidden;                   /* Clip any overflowing pseudo-elements */
  
  background: none;                   /* Transparent default background */
  border: none;                       /* No border initially */
  box-shadow: none;                   /* No shadow initially */
  margin-left: 15px;                  /* Space from left edge or adjacent elements */
  
  /* Smooth transitions for hover effects */
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border 0.3s ease;
}

/* Hamburger lines inside the button */
.Menu-Button span {
  display: block;                     /* Make each line a block element */
  width: 28px;                         /* Line width */
  height: 2px;                         /* Line thickness */
  background: white;                   /* Line color */
  border-radius: 1px;                  /* Rounded edges for smooth look */
  margin: 2px 0;                       /* Vertical spacing between lines */
}

/* Hover effect – glassy look, scale, and lift */
.Menu-Button:hover {
  background: linear-gradient(180deg,
    rgba(255,255,255,0.05) 0%,        /* Slight highlight at top */
    rgba(255,255,255,0.02) 40%,       /* Subtle middle shading */
    rgba(20,30,40,0.06) 100%);        /* Slight darker bottom shade */
  border: 1px solid rgba(255,255,255,0.05); /* Thin subtle border */
  backdrop-filter: blur(14px) saturate(130%);           /* Glass effect: blur background behind button */
  -webkit-backdrop-filter: blur(14px) saturate(130%);  /* Safari support */
  box-shadow:
    0 10px 25px rgba(0,0,0,0.35),    /* Outer shadow for depth */
    inset 0 1px 0 rgba(255,255,255,0.15); /* Inner highlight for 3D feel */
  transform: translateY(-1px) scale(1.08); /* Lift and slightly enlarge button */
}

/* Hover shine effect using pseudo-element ::before */
.Menu-Button:hover::before {
  content: "";                         /* Required for pseudo-element */
  position: absolute;                  /* Position relative to button */
  top: -30%;                           /* Start above button */
  left: -30%;                          /* Start left of button */
  width: 160%;                          /* Cover button diagonally */
  height: 70%;                          /* Partial height for shine effect */
  background: radial-gradient(circle at 30% 30%,
    rgba(255,255,255,0.25) 0%,         /* Bright center of shine */
    rgba(255,255,255,0.08) 25%,        /* Fade out */
    rgba(255,255,255,0) 60%);          /* Transparent edges */
  filter: blur(8px);                   /* Soften shine */
  mix-blend-mode: screen;              /* Blend with background for brightening */
  pointer-events: none;                /* Don’t block clicks */
}

/* Hover depth shadow using pseudo-element ::after */
.Menu-Button:hover::after {
  content: "";                         /* Required for pseudo-element */
  position: absolute;                  /* Cover the button */
  inset: 0;                            /* Fill entire button area */
  background: radial-gradient(circle at 70% 80%,
    rgba(0,0,0,0.3) 0%,                /* Dark shadow center */
    rgba(0,0,0,0.1) 40%,               /* Fade out */
    transparent 70%);                   /* Transparent edges */
  mix-blend-mode: multiply;            /* Darken underlying layers */
  opacity: 0.4;                        /* Semi-transparent */
  pointer-events: none;                /* Don’t block clicks */
}

/*=====================================*/
/*   Dynamic Menu Title                */
/*=====================================*/
.Menu-Title {
  text-align: center;           /* Center the content horizontally */
  flex-grow: 1;                 /* Expand this element to fill available space between other flex items (like buttons) */
}

/* Styles for the heading inside the menu title */
.Menu-Title h3 {
  font-family: 'Anton', sans-serif; /* Set the font family to Anton, with sans-serif as fallback */
  font-weight: 100;                 /* Set the font weight to light */
  font-size: 1.2rem;                /* Set font size to 1.2 rem units */
  letter-spacing: 8px;              /* Add extra spacing between letters for a stylized look */
  margin: 0 15px;                   /* Remove top/bottom margin, add 15px left/right spacing */
}

/* Dynamic title element for transitions */
#Dynamic-Title {
  display: inline-block;            /* Treat as inline element but allow width/height/margin/padding */
  transition: opacity 0.3s ease;    /* Smoothly transition opacity changes over 0.3 seconds with easing */
}

/* Class to fade out the dynamic title */
.fade-out {
  opacity: 0;                       /* Make element invisible */
}

/* Class to fade in the dynamic title */
.fade-in  {
  opacity: 1;                       /* Make element fully visible */
}


/*=====================================*/
/*   Open Cart Button                       */
/*=====================================*/

/* Base styles for the cart button */
.Cart-Button {
  position: relative;                  /* Needed for pseudo-elements (::before, ::after) to position relative to this button */
  display: flex;                       /* Use flexbox for easy centering */
  flex-direction: column;              /* Stack any children vertically */
  justify-content: center;             /* Center children vertically */
  align-items: center;                 /* Center children horizontally */
  
  width: 40px;                         /* Button width */
  height: 40px;                        /* Button height */
  font-size: 1.2rem;                   /* Icon or text size inside button */
  
  border-radius: 50%;                  /* Make button circular */
  cursor: pointer;                     /* Show pointer on hover */
  pointer-events: auto;                /* Ensure button responds to clicks */
  overflow: hidden;                    /* Hide anything overflowing button bounds */
  
  background: none;                    /* No background initially */
  border: none;                        /* No border initially */
  box-shadow: none;                     /* No shadow initially */
  margin-right: 15px;                  /* Space from adjacent elements */
  
  /* Smooth transitions for hover effects */
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border 0.3s ease;
}
.Cart-Button svg {
  width: 22px;
  height: 22px;
  fill: white;            /* makes the handbag icon solid white */
  transition: fill 0.3s ease;
}

/* Hover effect for cart button: glassy, lifted look */
.Cart-Button:hover {
  background: linear-gradient(180deg,
    rgba(255,255,255,0.05) 0%,      /* Slight top highlight */
    rgba(255,255,255,0.02) 40%,     /* Subtle middle shading */
    rgba(20,30,40,0.06) 100%);      /* Darker bottom shade */
  border: 1px solid rgba(255,255,255,0.05); /* Thin subtle border */
  backdrop-filter: blur(14px) saturate(130%);          /* Blur background behind button for glass effect */
  -webkit-backdrop-filter: blur(14px) saturate(130%); /* Safari support */
  box-shadow:
    0 10px 25px rgba(0,0,0,0.35),   /* Outer shadow for depth */
    inset 0 1px 0 rgba(255,255,255,0.15); /* Inner highlight for 3D feel */
  transform: translateY(-1px) scale(1.08); /* Lift and slightly enlarge button on hover */
}

/* Shine effect using pseudo-element ::before */
.Cart-Button:hover::before {
  content: "";                        /* Required for pseudo-element to appear */
  position: absolute;                 /* Position relative to .Cart-Button */
  top: -30%;                          /* Start above button */
  left: -30%;                         /* Start left of button */
  width: 160%;                         /* Cover entire button diagonally */
  height: 70%;                         /* Partial height for shine effect */
  background: radial-gradient(circle at 30% 30%,
    rgba(255,255,255,0.25) 0%,        /* Bright center of shine */
    rgba(255,255,255,0.08) 25%,       /* Fading out */
    rgba(255,255,255,0) 60%);         /* Fully transparent at edges */
  filter: blur(8px);                  /* Soften the shine */
  mix-blend-mode: screen;             /* Blend with background for brightening effect */
  pointer-events: none;               /* Don’t block clicks */
}

/* Shadow/depth effect using pseudo-element ::after */
.Cart-Button:hover::after {
  content: "";                        /* Required for pseudo-element */
  position: absolute;                 /* Cover button */
  inset: 0;                           /* Fill entire button area */
  background: radial-gradient(circle at 70% 80%,
    rgba(0,0,0,0.3) 0%,               /* Dark shadow center */
    rgba(0,0,0,0.1) 40%,              /* Fade out */
    transparent 70%);                  /* Transparent edges */
  mix-blend-mode: multiply;           /* Darken underlying elements */
  opacity: 0.4;                       /* Semi-transparent */
  pointer-events: none;               /* Don’t block clicks */
}

.cart-count {
  position: absolute;
  top: 4px;
  right: 4px;
  background: red;
  color: white;
  font-size: 0.7rem;
  font-weight: bold;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  transition: transform 0.2s ease;
}

.cart-count.hidden {
  display: none;
}

/*============================================================================================================================================================*/
/*MARK: Navigation Island Menu View                                                                                                                           */
/*============================================================================================================================================================*/

/*============================*/
/*   Menu container           */
/*============================*/
.Island-Menu {
  flex: 1; /* take all remaining space */
  display: none;
  flex-direction: column;
  justify-content: center; /* vertical centering */
  align-items: center;
  gap: 20px;
  opacity: 0;
  width: 100%;
  transition: opacity 0.3s ease;
  padding: 0 10px 70px 0; /* top space for header, bottom reserved for sub-menu */
  overflow-y: auto;
  position: relative;
}

/*============================*/
/*   Menu buttons             */
/*============================*/
.Island-Menu button {
  background: none;
  border: none;
  color: #D8D7D7;
  font-family: 'Anton', sans-serif;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 8px;
  padding: 5px 20px;
  width: 80%;
  cursor: pointer;
  transition: background 0.2s ease;
  pointer-events: auto;
}

.Island-Menu button:hover {
  background: linear-gradient(180deg,
    rgba(255,255,255,0.05) 0%,
    rgba(255,255,255,0.02) 40%,
    rgba(20,30,40,0.06) 100%);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 15px;
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow:
    0 10px 25px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.15);
  transform: translateY(-1px) scale(1.08);
}

/* Hover shine layer */
.Island-Menu button:hover::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -30%;
  width: 160%;
  height: 70%;
  background: radial-gradient(circle at 30% 30%,
    rgba(255,255,255,0.05) 0%,
    rgba(255,255,255,0.02) 25%,
    rgba(255,255,255,0) 60%);
  filter: blur(8px);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Hover depth shadow */
.Island-Menu button:hover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 80%,
    rgba(0,0,0,0.3) 0%,
    rgba(0,0,0,0.1) 40%,
    transparent 70%);
  mix-blend-mode: multiply;
  opacity: 0.4;
  pointer-events: none;
}

/* Mobile (portrait phones) */
@media (max-width: 600px) {
  .Island-Menu button {
      font-size: 1.5rem;
      font-weight: 300;
      letter-spacing: 5px;
      padding: 3px 12px;
  }
  .Island-Menu button:hover {
    background: linear-gradient(180deg,
      rgba(255,255,255,0.05) 0%,
      rgba(255,255,255,0.02) 40%,
      rgba(20,30,40,0.06) 100%);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    box-shadow:
      0 10px 25px rgba(0,0,0,0.35),
      inset 0 1px 0 rgba(255,255,255,0.15);
    transform: translateY(-1px) scale(1.08);
  }
}

/* Tablet (landscape phones & tablets) */
@media (min-width: 601px) and (max-width: 1024px) {
  .Island-Menu button {
      font-size: 1.8rem;
      font-weight: 300;
      letter-spacing: 6px;
      padding: 4px 15px;
  }
  .Island-Menu button:hover {
    background: linear-gradient(180deg,
      rgba(255,255,255,0.05) 0%,
      rgba(255,255,255,0.02) 40%,
      rgba(20,30,40,0.06) 100%);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    box-shadow:
      0 10px 25px rgba(0,0,0,0.35),
      inset 0 1px 0 rgba(255,255,255,0.15);
    transform: translateY(-1px) scale(1.08);
  }
}




/*============================================================================================================================================================*/
/*MARK:                                                                         Navigation Island Cart View                                                   */
/*============================================================================================================================================================*/


/*============================*/
/*   Cart container           */
/*============================*/
.Island-Cart {
    display: none;
    flex-direction: column;
    justify-content: space-between; /* Push button to bottom */
    align-items: center;            /* Center items horizontally */
    gap: 10px;
    padding: 20px 0;                /* padding at top/bottom */
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
  }

.Navigation-Island.show-cart {
    height: 85vh;
  padding: 20px 0;
}

.Navigation-Island.show-cart .Island-Cart {
  display: flex;
}


/*=====================================*/
/*   Cart empty title                  */
/*=====================================*/

/* h5 stays centered vertically */
.Island-Cart h3 {
    font-family: 'Anton', sans-serif;
    font-weight: 300;
    font-size: 1.5rem;
    letter-spacing: 3px;
    color: white;
    opacity: 1;
    margin: 0;
    text-shadow: 0 1px 1px rgba(1, 1, 0, 0.2);
}




/*===================================================*/
/*   Cart Item Container                             */
/*===================================================*/
.cart-Items {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
  box-sizing: border-box;
  overflow-y: auto;
}

/* Cart Item */
.cart-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
  width: 90%;
  margin: 10px auto;
  padding: 10px;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,0.05);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.1);
  color: white;
  font-family: 'Anton', sans-serif;
  position: relative;
  overflow: hidden;
}

.cart-item-left {
  flex-shrink: 0;
}

.cart-item-img {
  width: 160px;
  height: 160px;
  border-radius: 12px;
  object-fit: cover;
}

.cart-item-details {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 6px;
}

.cart-item-title {
  font-size: 1.3rem;
  margin: 0 0 5px 0;
}

.cart-item-subtitle {
  font-size: 1rem;
  margin: 0 0 5px 0;
}

.cart-item-price {
  font-size: 0.9rem;
  margin: 0;
}
/*===================================================*/
/*   Remove Button (Glassy Style)                    */
/*===================================================*/
.remove-button {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  z-index: 2;

  background: linear-gradient(180deg,
    rgba(255,255,255,0.06) 0%,
    rgba(255,255,255,0.03) 40%,
    rgba(20,30,40,0.08) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow:
    0 6px 18px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.remove-button::before {
  content: "−";
  position: relative;
  top: -1px;
}

.remove-button:hover {
  transform: translateY(-3px) scale(1.08);
  box-shadow:
    0 12px 28px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.15);
}



/*=====================================*/
/*   Cart checkout/continue button     */
/*=====================================*/

/* Button stays at bottom using flexbox instead of absolute */
.Island-Cart button {
    align-self: center; /* center horizontally */
    margin-top: auto;   /* push to bottom of flex container */
    background: none;
    border: none;
    color: white;
    font-family: 'Anton', sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 8px;
    padding: 10px 20px;
    width: 75%;
    cursor: pointer;
    transition: background 0.2s ease;
    pointer-events: auto;
    border-radius: 15px;
    /* Background / Frosted glass effect */
    background: linear-gradient(180deg,
    rgba(255,255,255,0.05) 0%,
    rgba(255,255,255,0.02) 40%,
    rgba(20,30,40,0.06) 100%);
    border: 1px solid rgba(255,255,255,0.05);
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    box-shadow:
    0 6px 18px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.1);
    
/*    color: white;*/
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

/* Subtle shadow depth */
.Island-Cart::before {
    content: "";
    position: absolute;
    left: -20%;
    top: -30%;
    width: 140%;
    height: 80%;
    pointer-events: none;
    background:
    radial-gradient(60% 40% at 20% 20%,
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0.06) 10%,
    rgba(255,255,255,0.00) 35%),
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.00));
    transform: rotate(-8deg);
    filter: blur(6px);
    mix-blend-mode: screen;
}

/* Subtle shadow depth at bottom */
.Island-Cart::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 40% at 90% 85%,
      rgba(10,12,18,0.28) 0%,
      rgba(10,12,18,0.10) 35%,
      rgba(255,255,255,0.00) 60%);
  mix-blend-mode: multiply;
  opacity: 0.55;
}

.Island-Cart .grain {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.03) 0.5px, transparent 0.5px),
    radial-gradient(circle at 80% 80%, rgba(0,0,0,0.03) 0.6px, transparent 0.6px);
  background-size: 6px 6px, 8px 8px;
  mix-blend-mode: overlay;
  opacity: 0.9;
  pointer-events: none;
  z-index: 2;
}

.Island-Cart .continue-button:hover {
    background: #000000;
    transform: scale(1.1);
}

.Island-Cart .checkout-button:hover{
  background: white;
  color: black;
  transform: scale(1.1);
}

/* Mobile (portrait phones) */
@media (max-width: 600px) {
    .Island-Cart button {
      font-size: 1.2rem;
  }
}

/* Tablet (landscape phones & tablets) */
@media (min-width: 601px) and (max-width: 1024px) {
    .Island-Cart button {
        font-size: 1.5rem;
    }
}


/*============================================================================================================================================================*/
/* MARK:                                                            Social Buttons                                                                            */
/*============================================================================================================================================================*/

/* Container for all social buttons */
.social-Button-Container {
  position: fixed;                    /* Keep buttons fixed on screen while scrolling */
  bottom: 15px;                       /* Position 15px from the bottom of the viewport */
  left: 50%;                           /* Horizontally center the container */
  transform: translateX(-50%);        /* Correct centering using transform */
  display: flex;                       /* Arrange buttons in a horizontal row */
  gap: 50px;                           /* Space of 50px between each button */
  z-index: 900;                        /* Ensure container is above other content */
  pointer-events: auto;                /* Enable clicks/interactions */
}

/* Individual social button */
.social-button {
  position: relative;                  /* Needed for pseudo-elements (::before, ::after) to position relative to button */
  display: flex;                       /* Flex layout for centering icon */
  align-items: center;                 /* Center icon vertically */
  justify-content: center;             /* Center icon horizontally */
  width: 50px;                         /* Button width */
  height: 50px;                        /* Button height */
  border-radius: 50%;                  /* Make button circular */

  /* Base glass effect */
  background: linear-gradient(180deg,
    rgba(255,255,255,0.05) 0%,        /* Slight highlight at top */
    rgba(255,255,255,0.02) 40%,       /* Slight middle shading */
    rgba(20,30,40,0.06) 100%);        /* Slightly darker bottom */
  border: 1px solid rgba(255,255,255,0.05);  /* Thin translucent border */
  backdrop-filter: blur(14px) saturate(130%);        /* Glassy blur effect behind button */
  -webkit-backdrop-filter: blur(14px) saturate(130%); /* Safari support */
  box-shadow:
    0 6px 18px rgba(0,0,0,0.25),      /* Outer shadow for depth */
    inset 0 1px 0 rgba(255,255,255,0.1); /* Inner highlight for 3D feel */

  color: white;                        /* Icon/text color inside button */
  cursor: pointer;                     /* Show pointer on hover */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover animation */
  overflow: hidden;                    /* Hide any overflow from pseudo-elements */
}

/* Hover lift and shadow enhancement */
.social-button:hover {
  transform: translateY(-4px) scale(1.08); /* Lift up and slightly enlarge button */
  box-shadow:
    0 10px 25px rgba(0,0,0,0.35),         /* Stronger outer shadow */
    inset 0 1px 0 rgba(255,255,255,0.15); /* Stronger inner highlight */
}

/* Shine effect on hover using ::before pseudo-element */
.social-button::before {
  content: "";                         /* Required for pseudo-element to render */
  position: absolute;                  /* Position relative to the button */
  top: -30%;                           /* Start above button */
  left: -30%;                          /* Start left of button */
  width: 160%;                         /* Cover the button diagonally */
  height: 70%;                         /* Partial height for subtle shine */
  background: radial-gradient(circle at 30% 30%,
    rgba(255,255,255,0.25) 0%,         /* Brightest point of shine */
    rgba(255,255,255,0.08) 25%,        /* Fade out */
    rgba(255,255,255,0) 60%);          /* Fully transparent at edges */
  filter: blur(8px);                   /* Soften the shine */
  mix-blend-mode: screen;              /* Blend mode to make it look bright over background */
  pointer-events: none;                /* Don’t block clicks */
}

/* Depth / shadow effect using ::after pseudo-element */
.social-button::after {
  content: "";                         /* Required for pseudo-element */
  position: absolute;                  /* Position relative to button */
  inset: 0;                            /* Fill entire button */
  background: radial-gradient(circle at 70% 80%,
    rgba(0,0,0,0.3) 0%,                /* Dark shadow center */
    rgba(0,0,0,0.1) 40%,               /* Fade outward */
    transparent 70%);                   /* Fully transparent at edges */
  mix-blend-mode: multiply;            /* Darken background beneath */
  opacity: 0.4;                        /* Make it semi-transparent */
  pointer-events: none;                /* Don’t block clicks */
}

/* Grain texture for realism */
.social-button .grain {
  content: "";                         /* Pseudo-element content for overlay */
  position: absolute;
  inset: 0;                            /* Cover entire button */
  background-image:                     /* Tiny radial dots for grain effect */
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.03) 0.5px, transparent 0.5px),
    radial-gradient(circle at 80% 80%, rgba(0,0,0,0.03) 0.6px, transparent 0.6px);
  background-size: 6px 6px, 8px 8px;
  mix-blend-mode: overlay;             /* Blend grain with button */
  opacity: 0.9;                        /* Visible but subtle */
  pointer-events: none;
  z-index: 2;                          /* Layer above background but below icon */
}

/* Hover color changes for each platform */

/* Instagram hover effect */
.social-button.instagram:hover {
  background: #E1306C; /* Instagram pink */
  transform: scale(1.1); /* Slightly larger */
}

/* WhatsApp hover effect */
.social-button.whatsapp:hover {
  background: #25D366; /* WhatsApp green */
  transform: scale(1.1);
}

/* Twitter / X hover effect */
.social-button.twitter:hover {
  background: #000000; /* Black */
  transform: scale(1.1);
}

/* SVG icon inside buttons */
.social-button svg {
  width: 24px;                       /* SVG width */
  height: 24px;                      /* SVG height */
  fill: white;                        /* Make icon white */
  transition: fill 0.3s;              /* Smooth transition if icon color changes */
}






/*============================================================================================================================================================*/
/*MARK:                                                                         Product Section                                                               */
/*============================================================================================================================================================*/


.Product-Section {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical centering */
  align-items: center;
  padding: 0px;
  box-sizing: border-box;
  background-color: black;
  scroll-snap-align: center;
}


.section-header {
  text-align: center;
  margin-bottom: 0px;
}

.section-header h1 {
  font-family: 'Anton', sans-serif;
  font-weight: 600;
  font-size: 4rem;
  letter-spacing: 3px;
  color: white;
  padding-top: 30px;
}

.product-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 90%;
  height: 60%;
  gap: 30px;
  padding-bottom: 120px;
}


.product-card {
  position: relative;
  overflow: hidden;
  border-radius: 25px;
  display: flex;
  flex-direction: column;
  background-color: clear;
}

.image-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.image-wrapper canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* makes it fill the canvas like old img */
  display: block;
  transition: transform 0.4s ease;
}

.product-card:hover canvas {
  transform: scale(1.1);
}

/*============================================================================================================================================================*/
/* MARK: Product Section MOBILE                                                                                                                               */
/*============================================================================================================================================================*/
@media (max-width: 600px) {
    .section-header h1 {
      font-family: 'Anton', sans-serif;
      font-weight: 500;
      font-size: 2rem;
      letter-spacing: 3px;
      padding-top: 40px;
    }
    .product-grid {
        display: grid;
        grid-template-columns: 1fr; /* stack vertically */
        width: 90%;
        gap: 20px;
        padding: 110px 0;
        padding-top: 0;
      }
    .product-card {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* ensures child positions are consistent */
        overflow: hidden;
      }
}

/*============================================================================================================================================================*/
/* MARK: Product Section IPad                                                                                                                                 */
/*============================================================================================================================================================*/
@media (min-width: 601px) and (max-width: 1024px) {
    .section-header h1 {
      font-family: 'Anton', sans-serif;
      font-weight: 500;
      font-size: 2.8rem;
      letter-spacing: 3px;
    }
    .product-grid {
        display: grid;
        grid-template-columns: 1fr; /* stack vertically */
        width: 90%;
        gap: 20px;
        padding: 110px 0;
        padding-top: 0;
      }
    .product-card {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* ensures child positions are consistent */
        overflow: hidden;
      }
}



/*============================================================================================================================================================*/
/*MARK:                                                                         Product Cart Items                                                            */
/*============================================================================================================================================================*/
.product-card h3 {
    opacity: 0;
    font-family: 'Anton', sans-serif;
    font-weight: 300;
    font-size: 2.5rem;
    letter-spacing: 3px;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    text-align: center;
    transition: opacity 0.3s ease;
}

.product-card:hover h3 {
    opacity: 1;
}

/* Mobile (portrait phones) */
@media (max-width: 600px) {
    .product-card {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* ensures child positions are consistent */
        overflow: hidden;
      }

      .product-card h3 {
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        text-align: center;
        width: 90%;           /* prevent text overflow */
        z-index: 10;          /* make sure it sits above the image */
        opacity: 1 !important;
      }
}
@media (min-width: 601px) and (max-width: 1024px) {
    .product-card {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* ensures child positions are consistent */
        overflow: hidden;
      }

      .product-card h3 {
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        text-align: center;
        width: 90%;           /* prevent text overflow */
        z-index: 10;          /* make sure it sits above the image */
        opacity: 1 !important;
      }
}


/*========================*/
/*  Make it Yours Button  */
/*========================*/
/* Base button styling — locked to bottom center */
/* Base button styling — hidden by default using opacity */
.product-card button {
  opacity: 0;            /* invisible */
  pointer-events: none;  /* cannot be clicked */
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: none;
  border: none;
  color: white;
  font-family: 'Anton', sans-serif;
  font-size: 1.2vw;
  font-weight: 400;
  letter-spacing: 8px;
  padding: 8px 20px;
  width: 75%;
  border-radius: 15px;
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, background 0.2s ease;
  overflow: hidden;

  /* Frosted glass effect */
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.05) 0%,
    rgba(255,255,255,0.02) 40%,
    rgba(20,30,40,0.06) 100%
  );
  border: 1px solid rgba(255,255,255,0.05);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow:
    0 6px 18px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.1);
}

/* Show the button on hover */
.product-card:hover button {
  opacity: 1;
  pointer-events: auto;
}


/* Hover interaction remains the same */
.product-card button:hover {
  transform: translateX(-50%) translateY(-2px) scale(1.03);
  box-shadow:
    0 10px 25px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.15);
  background: black;
}

/* Highlight (shine) */
.product-card button:hover:before {
  content: "";
  position: absolute;
  top: -30%;
  left: -30%;
  width: 160%;
  height: 70%;
  background: radial-gradient(circle at 30% 30%,
    rgba(255,255,255,0.25) 0%,
    rgba(255,255,255,0.08) 25%,
    rgba(255,255,255,0) 60%);
  filter: blur(8px);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Subtle shadow depth */
.product-card button:hover:after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 80%,
    rgba(0,0,0,0.3) 0%,
    rgba(0,0,0,0.1) 40%,
    transparent 70%);
  mix-blend-mode: multiply;
  opacity: 0.4;
  pointer-events: none;
}


/* Mobile (portrait phones) */
@media (max-width: 600px) {
    .product-card button {
        font-size: 2.5vw;
        font-weight: 300;
        letter-spacing: 3;
        width: 75%;
        border-radius: 12px;
        bottom: 10%;
    }
}
@media (min-width: 601px) and (max-width: 1024px) {
    .product-card button {
        font-size: 2.5vw;
        font-weight: 300;
        letter-spacing: 3;
        width: 75%;
        border-radius: 12px;
        bottom: 10%;
    }
}





/*===============================================================================*/
/*                                  Info Button                                  */
/*===============================================================================*/
/*======================*/
/*  Info Button Closed  */
/*======================*/
.product-card .info-button {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 10;
    color: white;
    font-size: 1.5rem;
    z-index: 100;

    border-radius: 50%;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.035) 0%,
        rgba(255,255,255,0.020) 40%,
        rgba(20,30,40,0.06) 100%
    );
    border: 1px solid rgba(255,255,255,0.05);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    box-shadow:
        0 10px 30px -8px rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.02);

    cursor: pointer;
    transition: all 0.2s ease;
    transform-origin: top right;

    opacity: 0;            /* hidden by default */
    pointer-events: none;  /* ignore clicks when hidden */
}

/* Show info-tile only on card hover */
.product-card:hover .info-button {
    opacity: 1;
    pointer-events: auto;
}

/* Show normally */
.info-button .info-icon {
  transition: opacity 0.2s ease;
}
/* Hide when expanded */
.info-button.expanded .info-icon {
  opacity: 0;
}
/* Hover effect (only when not expanded) */
 .info-button:not(.expanded):hover {
    transform: translateY(-4px) scale(1.08);
    box-shadow:
        0 10px 25px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.15);
    background: black;
}

/* Mobile (portrait phones) */
@media (max-width: 600px) {
    .product-card .info-button {
        top: 10px;
        right: 10px;
        width: 30px;
        height: 30px;
    }
}
@media (min-width: 601px) and (max-width: 1024px) {
    .product-card .info-button {
        top: 10px;
        right: 10px;
        width: 30px;
        height: 30px;
    }
}

/*======================*/
/*  Info Button Open  */
/*======================*/
.product-card:hover .info-button.expanded {
    width: 95%;
    height: 95%;
    top: 2.5%;
    right: 2.5%;
    border-radius: 20px;
    transform: scale(1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    background: black;
    cursor: default;
    opacity: 1;
    pointer-events: auto;
    display: auto;
}
/* ======== Info Button Open Container ======= */
.info-button.expanded .info-content {
    display: auto;
    flex-direction: column;
    justify-content: top;
    align-items: center;
    opacity: 1;
    width: 100%;
    height: 100%;
    padding: 20px;
    text-align: center;
    transition: opacity 0.3s ease;
}


/* ======== Title ======= */
.info-button.expanded .info-content h2 {
    font-family: 'Anton', sans-serif;
    font-weight: 50;
    font-size: 1rem;
    letter-spacing: 4px;
    color: white;
    margin: 0;
    text-align: left;
    padding: 30px;
}

/* Hide by default */
.info-button:not(expanded) .info-content h2 {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease 0.5s;
}

.info-button.expanded .info-content h2 {
    display: block;
    opacity: 1;
}


/* ======== Paragraph ======= */
.info-button.expanded .info-content p {
    font-family: 'popins', sans-serif;
    font-weight: 100;
    font-size: 0.7rem;
    letter-spacing: 3px;
    color: white;
    top: 0%;
    left: 20%;
    margin: 0;
    text-align: left;
}

/* Hide by default */
.info-button:not(expanded) .info-content p {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease 0.5s;
}

.info-button.expanded .info-content p {
    display: block;
    opacity: 1;
}

/* Show all interactive elements by default on mobile */
@media (max-width: 600px) {
  /* Product title always visible */
  .product-card h3 {
    opacity: 1 !important;
  }

  /* Main button always visible and clickable */
  .product-card button {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Info button always visible */
  .product-card .info-button {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  
  
  .info-button.expanded .info-content h2 {
      padding-top: 5;
      padding: 0px;
  }
  .info-button.expanded .info-content p {
      font-size: 0.5rem;
      letter-spacing: 1px;
      padding: 8px;
  }
}
@media (min-width: 601px) and (max-width: 1024px) {
    /* Product title always visible */
    .product-card h3 {
      opacity: 1 !important;
    }

    /* Main button always visible and clickable */
    .product-card button {
      opacity: 1 !important;
      pointer-events: auto !important;
    }

    /* Info button always visible */
    .product-card .info-button {
      opacity: 1 !important;
      pointer-events: auto !important;
    }
    
    
    .info-button.expanded .info-content h2 {
        padding-top: 5;
        padding: 0px;
    }
    .info-button.expanded .info-content p {
        font-size: 0.5rem;
        letter-spacing: 1px;
        padding: 8px;
    }
}










/*============================================================================================================================================================*/
/*MARK: Creation Section                                                                                                                                     */
/*============================================================================================================================================================*/

.Creation-Section {
    position: relative;
    width: 100%;
    height: 100vh;
    scroll-snap-align: center;
    background-color: black;
    overflow: hidden;
}

.Hero-Container2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.Hero-Image2 {
    display: block;
    width: 100%;
    height: 100%;
}

.Creation-Section-Container {
    height: 100vh;
    width: 100%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center; /* vertical centering */
    align-items: center;
    padding: 0px;
    box-sizing: border-box;
    background-color: black;
    scroll-snap-align: center;
}

.section-header {
  text-align: center;
  margin-bottom: 0px;
}

.section-header h1 {
  font-family: 'Anton', sans-serif;
  font-weight: 600;
  font-size: 4rem;
  letter-spacing: 3px;
  color: white;
  padding-top: 30px;
}

.Video-Grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 90%;
    height: 60%;
    gap: 30px;
    padding-bottom: 120px;
}
.Video-card {
    position: relative;
    overflow: hidden;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    background-color: clear;
}

.video-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.video-wrapper:hover video {
    transform: scale(1.1);
}



/*============================================================================================================================================================*/
/* MARK: Creation Section MOBILE                                                                                                                              */
/*============================================================================================================================================================*/
@media (max-width: 600px) {
    .section-header h1 {
      font-family: 'Anton', sans-serif;
      font-weight: 500;
      font-size: 2rem;
      letter-spacing: 3px;
      padding-top: 40px;
    }
    .Video-Grid {
        display: grid;
        grid-template-columns: 1fr; /* stack vertically */
        width: 90%;
        gap: 20px;
        padding: 110px 0;
        padding-top: 0;
      }
    .Video-card {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* ensures child positions are consistent */
        overflow: hidden;
      }
}







/*============================================================================================================================================================*/
/*MARK: Creation Section IPAD                                                                                                                                 */
/*============================================================================================================================================================*/

@media (min-width: 601px) and (max-width: 1024px) {
    .section-header h1 {
      font-family: 'Anton', sans-serif;
      font-weight: 500;
      font-size: 2.5rem;
      letter-spacing: 3px;
      padding-top: 40px;
    }
    .Video-Grid {
        display: grid;
        grid-template-columns: 1fr; /* stack vertically */
        width: 90%;
        gap: 20px;
        padding: 110px 0;
        padding-top: 0;
      }
    .Video-card {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* ensures child positions are consistent */
        overflow: hidden;
      }
}










/*============================================================================================================================================================*/
/* MARK: Contact Section                                                                                                                                      */
/*============================================================================================================================================================*/
.Contect-Section {
    position: relative;
    width: 100%;
    height: 100vh;
    z-index: 1;
    scroll-snap-align: center;
    background-color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.section-header {
    text-align: center;
    margin-top: 40px;
    z-index: 2; /* ✅ visible above canvas */
    position: relative;
}

.section-header h1 {
    font-family: 'Anton', sans-serif;
    font-weight: 600;
    font-size: 4rem;
    letter-spacing: 3px;
    color: white;
    padding-top: 30px;
}

.Contact-Form-Container {
    position: relative;
  width: 80%;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}


.Contact-Form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.Contact-Form input,
.Contact-Form textarea {
  width: 100%;
  padding: 15px;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  color: white;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  outline: none;
  resize: none;
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

.Contact-Form input:focus,
.Contact-Form textarea:focus {
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 0 10px rgba(255,255,255,0.1);
}

.Contact-Button {
    align-self: center; /* center horizontally */
    margin-top: auto;   /* push to bottom of flex container */
  background: none;
  border: none;
  color: white;
  font-family: 'Anton', sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 8px;
  padding: 10px 20px;
  width: 75%;
  cursor: pointer;
  transition: background 0.2s ease;
  pointer-events: auto;
  border-radius: 15px;
  /* Background / Frosted glass effect */
  background: linear-gradient(180deg,
    rgba(255,255,255,0.05) 0%,
    rgba(255,255,255,0.02) 40%,
    rgba(20,30,40,0.06) 100%);
  border: 1px solid rgba(255,255,255,0.05);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow:
    0 6px 18px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.1);

  color: white;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}
/* Subtle shadow depth */
.Contact-Button::before {
  content: "";
  position: absolute;
  left: -20%;
  top: -30%;
  width: 140%;
  height: 80%;
  pointer-events: none;
  background:
    radial-gradient(60% 40% at 20% 20%,
      rgba(255,255,255,0.18) 0%,
      rgba(255,255,255,0.06) 10%,
      rgba(255,255,255,0.00) 35%),
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.00));
  transform: rotate(-8deg);
  filter: blur(6px);
  mix-blend-mode: screen;
}

/* Subtle shadow depth at bottom */
.Contact-Button::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 40% at 90% 85%,
      rgba(10,12,18,0.28) 0%,
      rgba(10,12,18,0.10) 35%,
      rgba(255,255,255,0.00) 60%);
  mix-blend-mode: multiply;
  opacity: 0.55;
}
.Island-Cart .grain {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.03) 0.5px, transparent 0.5px),
    radial-gradient(circle at 80% 80%, rgba(0,0,0,0.03) 0.6px, transparent 0.6px);
  background-size: 6px 6px, 8px 8px;
  mix-blend-mode: overlay;
  opacity: 0.9;
  pointer-events: none;
  z-index: 2;
}

.Contact-Button:hover {
    background: #000000;
    transform: scale(1.1);
}



/* Popup Styles */
.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: clear;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
  z-index: 1000;
}

.popup.show {
  display: block;
}

.popup-content {
  background: white;
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  max-width: 350px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  animation: popupIn 0.3s ease;
}

.popup-content h2 {
  margin-bottom: 0.5rem;
  color: #333;
  font-family: "Poppins", sans-serif;
}

.popup-content p {
  color: #555;
  margin-bottom: 1.5rem;
}

#close-popup {
  background: #000;
  color: #fff;
  border: none;
  padding: 0.6rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
}

#close-popup:hover {
  background: #333;
}

@keyframes popupIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}


/*============================================================================================================================================================*/
/* MARK: Contact Section MOBILE                                                                                                                               */
/*============================================================================================================================================================*/
@media (max-width: 600px) {
    .section-header h1 {
      font-family: 'Anton', sans-serif;
      font-weight: 500;
      font-size: 2rem;
      letter-spacing: 3px;
      padding-top: 20px;
    }
      
  .Contact-Form-Container {
    align-items: center; /* makes sure children are centered */
  }

  .Contact-Form {
      width: 100%;          /* take full width of container */
      max-width: 400px;     /* optional: keeps it from stretching too wide */
      margin: 0 auto;       /* centers it horizontally */
      padding: 0;           /* reset any extra padding */
  }
  
  .Contact-Button {
      width: 100%;
      max-width: 400px;
  }
}

    /*============================================================================================================================================================*/
    /* MARK: Contact Section IPAD                                                                                                                                 */
    /*============================================================================================================================================================*/

/* Tablet (landscape phones & tablets) */
@media (min-width: 601px) and (max-width: 1024px) {
    .Contact-Form-Container {
        align-items: center; /* makes sure children are centered */
    }
    
    .Contact-Form {
        width: 100%;          /* take full width of container */
        max-width: 400px;     /* optional: keeps it from stretching too wide */
        margin: 0 auto;       /* centers it horizontally */
        padding: 0;           /* reset any extra padding */
    }
    
    .Contact-Button {
        width: 100%;
        max-width: 400px;
    }
    
    
}


/*============================================================================================================================================================*/
/* MARK:                                                                        SideMap Section                                                                    */
/*============================================================================================================================================================*/


.Sidemap-Section {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 15px;
  box-sizing: border-box;
  background-color: black;
  scroll-snap-align: center;
}

.Footer-Buttons {
    flex: 1; /* take all remaining space */
    display: flex;
    flex-direction: column;
    justify-content: center; /* vertical centering */
    align-items: center;
    gap: 10px;
    opacity: 1;
    transition: opacity 0.3s ease;
    padding: 70px 0 70px 0; /* top space for header, bottom reserved for sub-menu */
    overflow-y: auto;
    position: relative;
    width: 100%;
}

.Footer-Buttons button {
  background: none;
  border: none;
  color: #D8D7D7;
  font-family: 'Anton', sans-serif;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 8px;
  padding: 5px 20px;
  width: 30%;
  cursor: pointer;
  transition: background 0.2s ease;
  pointer-events: auto;
}

.Footer-Buttons button:hover {
  background: linear-gradient(180deg,
    rgba(255,255,255,0.05) 0%,
    rgba(255,255,255,0.02) 40%,
    rgba(20,30,40,0.06) 100%);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 15px;
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow:
    0 10px 25px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.15);
  transform: translateY(-1px) scale(1.08);
}

/* Hover shine layer */
.Footer-Buttons button:hover::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -30%;
  width: 160%;
  height: 70%;
  background: radial-gradient(circle at 30% 30%,
    rgba(255,255,255,0.05) 0%,
    rgba(255,255,255,0.02) 25%,
    rgba(255,255,255,0) 60%);
  filter: blur(8px);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Hover depth shadow */
.Footer-Buttons button:hover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 80%,
    rgba(0,0,0,0.3) 0%,
    rgba(0,0,0,0.1) 40%,
    transparent 70%);
  mix-blend-mode: multiply;
  opacity: 0.4;
  pointer-events: none;
}


Footer-Container {
    flex: 1; /* take all remaining space */
    display: flex;
    flex-direction: row;
    justify-content: row; /* horizontal centering */
    align-items: center;
    gap: 10px;
    opacity: 1;
    transition: opacity 0.3s ease;
    padding: 70px 0 70px 0; /* top space for header, bottom reserved for sub-menu */
    overflow-y: auto;
    position: relative;
    width: 100%;
    bottom: 10%;
}

Left-Footer-Buttons {
    
}

Left-Footer-Buttons button {
    
}

Right-Footer-Buttons {
    
}

Right-Footer-Buttons button {
    
}


/* Mobile (portrait phones) */
@media (max-width: 600px) {
  .Footer-Buttons button{
      font-size: 1.5rem;
      font-weight: 300;
      letter-spacing: 4px;
      padding: 3px 12px;
      width: 80%;
  }
  .Footer-Buttons button:hover {
    background: linear-gradient(180deg,
      rgba(255,255,255,0.05) 0%,
      rgba(255,255,255,0.02) 40%,
      rgba(20,30,40,0.06) 100%);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    box-shadow:
      0 10px 25px rgba(0,0,0,0.35),
      inset 0 1px 0 rgba(255,255,255,0.15);
    transform: translateY(-1px) scale(1.08);
  }
}

/* Tablet (landscape phones & tablets) */
@media (min-width: 601px) and (max-width: 1024px) {
    .Footer-Buttons button {
      font-size: 1.8rem;
      font-weight: 300;
      letter-spacing: 6px;
      padding: 4px 15px;
      width: 70%;
  }
    .Footer-Buttons button:hover {
    background: linear-gradient(180deg,
      rgba(255,255,255,0.05) 0%,
      rgba(255,255,255,0.02) 40%,
      rgba(20,30,40,0.06) 100%);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    box-shadow:
      0 10px 25px rgba(0,0,0,0.35),
      inset 0 1px 0 rgba(255,255,255,0.15);
    transform: translateY(-1px) scale(1.08);
  }
}