/* General body and container styling */
body, html {
    margin: 0;
    padding: 0;
    height: 100%; /* Full viewport height */
    font-family: Arial; /* Default font */
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

@font-face {
    font-family: 'LexendDeca';
    src: url('../img/lexend-deca/LexendDecaRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
.container {
    width: 100%; /* Full viewport width */
}

/* Individual sections */
.section {
    height: 100vh; /* Each section takes full viewport height */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    color: #fff; /* Default text color */
}

/* Header Styling with Slideshow */
.header {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Slideshow container */
.slideshow {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1; /* Place slideshow behind text */
    overflow: hidden;
}

/* Individual slides */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: cover; /* Ensures the image covers the full container */
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

/* Slides animations */
.slide:nth-child(1) {
    animation: slideFade 30s infinite 0s;
}

.slide:nth-child(2) {
    animation: slideFade 30s infinite 6s;
}

.slide:nth-child(3) {
    animation: slideFade 30s infinite 12s;
}

.slide:nth-child(4) {
    animation: slideFade 30s infinite 18s;
}

.slide:nth-child(5) {
    animation: slideFade 30s infinite 24s;
}


/* Keyframes for fade effect */
@keyframes slideFade {
    0% { opacity: 0; }           /* Invisible at the start */
    8.33%, 16.67% { opacity: 1; } /* Fully visible */
    25% { opacity: 0; }          /* Starts fading out */
    100% { opacity: 0; }         /* Invisible at the end */
}


/* Main Content Styling */




/* Section Heading */
.section h1, .section h2, .section h3 {
    margin: 0;
    font-size: 36px;
}

.section p {
    font-size: 18px;
    line-height: 1.6;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .section {
        padding: 15px; /* Adjust padding for smaller screens */
    }

    .section h1, .section h2, .section h3 {
        font-size: 28px;
    }

    .section p {
        font-size: 16px;
    }
}

/* Header Menu and Mobile Navigation */
.header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px; /* Height for the header area with logo and menu */
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    color: #fff;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

/* Header Logo */
.header-logo img {
    height: 150px;
    width: auto;
}

/* Desktop Navigation Menu */
.header-nav ul {
    list-style-type: none;
    display: flex;
    gap: 20px;
}

.header-nav ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    padding: 10px;
    transition: color 0.3s ease;
}

.header-nav ul li a:hover {
    color: #5BB74B; 
}

/* Hamburger Icon */
.hamburger-icon {
    display: none;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
}

/* Dropdown Menu for Mobile */
.dropdown-menu {
    list-style-type: none;
    display: none; 
    position: absolute;
    top: 120px;
    left: 0;
    width: 100%;
    color: #fff;
    background: rgba(0, 0, 0, 0.5); 
    padding: 10px;
    box-sizing: border-box;
    z-index: 1;
}

.dropdown-menu li {
    padding: 10px;
    text-align: center;
}

.dropdown-menu li a {
    color: #fff;
    font-size: 18px;
    text-decoration: none;
}

.dropdown-menu li a:hover {
    color: #3498db; /* Blue highlight on hover */
}

/* Show the dropdown menu when toggled */
.dropdown-menu.show {
    display: block;
}

/* Show/hide elements based on screen size */
@media (max-width: 768px) {
    /* Hide desktop menu on mobile */
    .header-nav ul {
        display: none;
    }

    /* Show the hamburger icon on mobile */
    .hamburger-icon {
        display: block;
    }

    /* Show the dropdown menu on mobile when toggled */
    .dropdown-menu.show {
        display: block;
    }
}

/* General body and container styling */
body, html {
    margin: 0;
    padding: 0;
    height: 100%; /* Full viewport height */
   
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

.container {
    width: 100%; /* Full viewport width */
}

/* Individual sections */
.section {
    height: 100vh; /* Each section takes full viewport height */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    color: #fff; /* Default text color */
}

/* Header Styling with Slideshow */
.header {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Slideshow container */
.slideshow {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1; /* Place slideshow behind text */
    overflow: hidden;
}

/* Individual slides */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: cover; /* Ensures the image covers the full container */
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

/* Header Overlay Styling with Gradient and Blur */
.header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px; /* Height of the header with overlay */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
    backdrop-filter: blur(10px); /* Apply blur effect to the background */
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    transition: background 0.3s ease-in-out; /* Smooth transition on scroll */
}

.header-logo img {
    height: 150px; /* Adjust logo size */
}

.header-nav ul {
    list-style-type: none;
    display: flex;
    gap: 20px;
}

.header-nav ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 18px;
    padding: 5px 15px;
    transition: color 0.35s ease;
}

.header-nav{
    padding-right: 20px;
}

.header-nav ul li a:hover {
    color: #5BB74B;
}

/* Main Content Styling */
.main-content {
    background-color: #EAEDED; /* Green */
    color: #000; /* Black text for readability */
}




/* Section Heading */
.section h1, .section h2, .section h3 {
    margin: 0;
    font-size: 36px;
}

.section p {
    font-size: 18px;
    line-height: 1.6;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .section {
        padding: 15px; /* Adjust padding for smaller screens */
    }

    .section h1, .section h2, .section h3 {
        font-size: 28px;
    }

    .section p {
        font-size: 16px;
    }
}




/* Hide desktop menu on smaller screens */
@media (max-width: 850px) {
    .header-nav ul {
        display: none;
    }
    .hamburger-icon {
        display: block; /* Show hamburger icon */
        font-size: 30px;
        color: #fff;
        cursor: pointer;
        padding-right: 35px;
    }
    .dropdown-menu {
        display: none; /* Hidden by default */
        position: absolute;
        top: 120px;
        left: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
        padding: 10px 0;
        box-sizing: border-box;
        z-index: 2;

    }

    .dropdown-menu li {
        padding: 10px;
        text-align: center;
    }
    .dropdown-menu li a {
        color: #fff;
        font-size: 18px;
        text-decoration: none;
    }
    .dropdown-menu li a:hover {
        color: #3498db; /* Blue highlight on hover */
    }
}
/* Show dropdown menu when toggled */
.dropdown-menu.show {
    display: block;
}

/* Dropdown menu (default hidden on all devices) */
.dropdown-menu {
    display: none; /* Completely hide the dropdown menu */
}

/* Show dropdown menu only when toggled (on mobile) */
.dropdown-menu.show {
    display: block; /* Display dropdown when 'show' class is added */
}


.dropdown-menu.show li {
margin-right: 10px;
}


/* On desktop screens, the hamburger menu and dropdown should remain hidden */
@media (min-width: 769px) {
    .dropdown-menu {
        display: none !important; /* Ensures dropdown is always hidden on desktops */
    }
}

@media (min-width: 769px) {
    .desktop-menu {
        display: flex; /* Show desktop menu */
        gap: 20px; /* Add spacing between menu items */
    }

    .hamburger-icon {
        display: none; /* Hide hamburger icon on desktop */
    }

    .dropdown-menu {
        display: none !important; /* Ensure the dropdown is hidden */
    }

}

.dropdown-menu{
    list-style-type: none;
    display: none; /* Hidden by default */
    position: absolute;
    top: 130px; /* Below the header */
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
    padding: 10px;
    box-sizing: border-box;
    z-index: 1;
    color: #fff;
    opacity: 100;
    border-radius: 5px; /* Optional: Add some rounded corners */
}

.header-texts {
    height: 70vh; /* Each section takes full viewport height */
    display: flex;
    position: absolute;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: flex-start; /* Center content horizontally */
    text-align: center;
    box-sizing: border-box;
    margin: 15px;

    
}




.text-overlay {
  background: rgba(0, 0, 0, 0.5);
  padding: 5px 10px;
  border-radius: 10px;
  backdrop-filter: blur(5px);
  font-family: LexendDeca;
  text-shadow: 
                2px 2px 4px rgba(0, 0, 0, 0.2),   /* Subtle shadow */
                -2px -2px 4px rgba(255, 255, 255, 0.5); /* Highlight effect */


}

.text-1{
    font-weight: bold;

}
.text-2{
    font-weight: 600;
}




@media(max-width:320px){

    .text-1{
    font-size: 15px;
    padding: 7px;
}

.text-2{
    font-weight: bold;
    font-size: 25px;
}

.text-3{
    font-size: 14px;
    padding-top:6px ;
}
}

@media(min-width:340px){

    .text-1{
    font-size: 18px;
    padding: 4px;
}

.text-2{
    font-weight: bold;
    font-size: 24px;
}
.text-3{
    font-size: 14px;
    padding-top:6px ;
}
}

@media(min-width:360px){

    .text-1{
    font-size: 18px;
    padding: 4px;
}

.text-2{
    font-weight: bold;
    font-size: 27px;
}
.text-3{
    font-size: 16px;
    padding-top:6px ;
}
}


@media(min-width:375px){

    .text-1{
    font-size: 18px;
    padding: 4px;
}

.text-2{
    font-weight: bold;
    font-size: 30px;
}
.text-3{
    font-size: 16px;
    padding-top:6px ;
}
}


@media(min-width:425px){

    .text-1{
    font-size: 20px;
    padding: 4px;
}

.text-2{
    font-weight: bold;
    font-size: 35px;
}
.text-3{
    font-size: 18px;
    padding-top:6px ;
}

    .header-logo{ 
        padding-left: 10px;
     }

    .header-nav{
       padding-right: 25px; 
    }
    .header-logo img {
   
}

}

@media(min-width:768px){

    .text-1{
    font-size: 25px;
    padding: 4px;
}

.text-2{
    font-weight: bold;
    font-size: 45px;
}
.text-3{
    font-size: 22px;
    padding-top:6px ;
}
    .header-logo{ 
        padding-left: 20px;
     }

    .header-nav{
       padding-right: 60px; 
    }
    .header-logo img {
   height: 160px;
}

}

@media(min-width:1024px){

    .text-1{
    font-size: 30px;
    padding: 4px;
}

.text-2{
    font-weight: bold;
    font-size: 45px;
}
.text-3{
    font-size: 25px;
    padding-top:6px ;
}
}

@media(min-width:1440px){

    .text-1{
    font-size: 35px;
    padding: 4px;
}

.text-2{
    font-weight: bold;
    font-size: 50px;
}
.text-3{
    font-size: 25px;
    padding-top:6px ;
}

    .header-logo{ 
        padding-left: 35px;
     }

    .header-nav{
       padding-right: 100px; 
    }
    .header-logo img {
   
}
}

@media(min-width:2560px){

    .text-1{
    font-size: 50px;
    padding: 4px;
}

.text-2{
    font-weight: bold;
    font-size: 65px;


}
.text-3{
    font-size: 30px;
    padding-top:6px ;
}

    .header-logo{ 
        padding-left: 300px;
     }

    .header-nav{
       padding-right: 400px; 
    }
    .header-logo img {
   height: 185px;
}
}

.text-navbar{
    font-family: LexendDeca;
  text-shadow: 
                2px 2px 4px rgba(0, 0, 0, 0.2),  
                -2px -2px 4px rgba(255, 255, 255, 0.5);

}

.shop-now-button {
    display: inline-block;
    padding: 15px 30px;
    background: rgba(0, 0, 0, 0.5); 
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    border: none;
    border-radius: 5px;
    cursor: pointer;
 transition: background-color 0.3s ease, transform 0.2s ease; 
    align-self: center; 
    margin-top: 20px; 
        font-family: LexendDeca;
  text-shadow: 
                2px 2px 4px rgba(0, 0, 0, 0.2), -2px -2px 4px rgba(255, 255, 255, 0.5); 
}




.shop-now-button:hover {
    background-color: #fff; 
    color:rgba(0, 0, 0, 0.5);
    transform: scale(1.05); 
    border-radius: 5px;
}

@media (min-width:2560px){
    .shop-now-button{
        padding: 20px 35px;
        font-size: 25px;
    }
    .text-3{

    }
}





/*.section-2 {
    height: 100vh;
    display: flex;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;

}

.main-content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 100vh;
    padding-top: 20px;
}



.text-p1 {
    top: 0; 
    left: 0; 
    font-family: LexendDeca;
    font-weight: 900;
    font-size: 40px;
    padding: 20px; 
    color: #010101; 
}
*/

a {
  text-decoration: none; /* Removes the underline */
  color: inherit; /* Inherits the color from its parent element */
}




.section-2 {
    height: 100vh; 
    display: flex;
    flex-direction: column; 
    align-items: stretch; 
    padding: 20px;
    box-sizing: border-box;
}

.main-content {
    display: flex;
    flex-direction: column; 
    justify-content: flex-start; 
    align-items: stretch; 
    height: 100vh;
    padding-top: 20px; 
}




.text-p1 {
    position: relative;
    font-family: LexendDeca;
    font-weight: 900;
    font-size: 40px;
    padding: 20px; 
    color: #010101;
    text-align: center;
}

.products {
    flex-grow: 1; 
    display: grid;

    grid-template-columns: repeat(1, 8fr); 
    margin: 0;
    padding: 16px; 
    box-sizing: border-box;
}

.products div {
    
    border: 1px solid #ccc; 
    padding: 16px;
    text-align: center; 
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
    font-family: LexendDeca;

}


.section-2 {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

.products {
    justify-self: center; /* Center within the parent container horizontally */
    align-self: center; /* Center within the parent container vertically */
}

@media(min-height:1024px){

    .products {
        grid-template-columns: repeat(4, 1fr); /* 4 boxes per row for PC */
        grid-template-rows: repeat(2, auto); /* Create two rows for 8 boxes */
    }

        @media(max-width:1024px){
            .products {
        grid-template-columns: repeat(2, 4fr); /* 4 boxes per row for PC */
        grid-template-rows: repeat(2, auto); /* Create two rows for 8 boxes */
    }
    }


}

@media(min-height:568px){
      .section-2{
        height: 400vh;
    }
    .main-content{
        height: 400vh;
    }


  
}

@media(min-height:600px){
        @media(min-width:1024px){
            .section-2{
        height: 250vh;
    }
    .main-content{
        height: 250vh;
    } 

    .products {

        grid-template-columns: repeat(2, 4fr);
        grid-template-rows: repeat(2, auto); 

        gap: 15px;
    }
    }
}

@media(min-height:640px){
    @media(max-width:400px){
        .section-2{
        height: 400vh;
    }
    .main-content{
        height: 400vh;
    } 
    }
}

@media(min-height:667px){
      .section-2{
        height:400vh;
    }
    .main-content{
        height: 400vh;
    }
  
}

@media(min-height:768px){
      .section-2{
        height: 180vh;
    }
    .main-content{
        height: 180vh;
    }

    .products{
        gap: 16px;
    }


  @media(max-width:550px){
          .section-2{
        height: 350vh;
    }
    .main-content{
        height: 350vh;
    }
  }
 
}

@media(min-height:812px){
      .section-2{
        height: 360vh;
    }
    .main-content{
        height: 360vh;
    } 


}

@media(min-height:834px){
      .section-2{
        height: 180vh;
    }
    .main-content{
        height: 180vh;
    } 

    @media(max-width:600px){
        .section-2{
        height: 310vh;
    }
    .main-content{
        height: 310vh;
    } 
}

}

@media(min-height:900px){
      .section-2{
        height: 160vh;
    }
    .main-content{
        height: 160vh;
    } 
     @media(max-width:430px){
        .section-2{
        height: 310vh;
    }
    .main-content{
        height: 310vh;
    } 
}


}

@media(min-height:926px){

 @media(max-width:600px){
        .section-2{
        height: 310vh;
    }
    .main-content{
        height: 310vh;
    } 
}


  
}


@media(min-height:1024px){
      .section-2{
        height: 140vh;
    }
    .main-content{
        height: 140vh;
    }

    .products{
        gap: 24px;
    }

        @media(max-width:600px){
        .section-2{
        height: 300vh;
    }
    .main-content{
        height: 300vh;
    }

            .products {
        grid-template-columns: repeat(1, 8fr); /* 4 boxes per row for PC */
        grid-template-rows: repeat(2, auto); /* Create two rows for 8 boxes */
    }
    }

}


@media(min-height:1080px){
    @media(min-width:1920px){
        .section-2{
        height: 100vh;
    }
    .main-content{
        height: 100vh;
    }

    .products{
        gap: 24px;
    }

     .products{  
        grid-template-columns: repeat(4, 2fr); 
        grid-template-rows: repeat(2, auto); 
    }
    }   

}



@media(min-height:1194px){
      .section-2{
        height: 120vh;
    }
    .main-content{
        height: 120vh;
    }

    .products{
        gap: 20px;
    }

        @media(min-width:1920px){
        .section-2{
        height: 70vh;
    }
    .main-content{
        height: 70vh;
    }

    .products{
        gap: 24px;
    }

     .products{  
        grid-template-columns: repeat(4, 2fr); 
        grid-template-rows: repeat(2, auto); 
    }
    }   

}

@media(min-height:1366px){
      .section-2{
        height: 110vh;
    }
    .main-content{
        height: 110vh;
    }



        @media(min-width:1025px){
        .products{  
        grid-template-columns: repeat(4, 2fr); 
        grid-template-rows: repeat(2, auto); 
   
        gap: 20px;
    }
}

}

@media(min-height:1440px){
      .section-2{
        height: 60vh;
    }
    .main-content{
        height: 60vh;
    }


    .products{
        gap: 40px;
    }

}

@media(min-width:320px){
    .products{
        justify-content: center;
        align-items: center;
    }
    .products div{
    min-width: 200px;
    max-width: 200px;
    min-height: 200px;
    max-height: 200px;
    }

}

@media(min-width:340px){
    .products div{
    min-width: 230px;
    max-width: 230px;
    min-height: 230px;
    max-height: 230px;
    }
}

@media(min-width:360px){
    .products div{
    min-width: 240px;
    max-width: 240px;
    min-height: 240px;
    max-height: 240px;
    }

}


@media(min-width:375px){
    .products div{
    min-width: 260px;
    max-width: 260px;
    min-height: 260px;
    max-height: 260px;
    }

}


@media(min-width:425px){

    .products div{
    min-width: 270px;
    max-width: 270px;
    min-height: 270px;
    max-height: 270px;
    }

}




.products-image {
    background-size: 100% 100%; /* Ensures the image stretches to match the div's size */
    background-position: center; /* Keeps the image centered */
    background-repeat: no-repeat; /* Prevents the image from repeating */
        display: flex; /* Enables Flexbox */
    align-items: center; /* Centers content vertically */
    justify-content: center; /* Centers content horizontally */
    color: white; /* Optional: adjust text color for visibility */
    font-size: 24px; /* Optional: adjust text size */
    font-weight: bold; /* Optional: make text bold */
}

.products-overlay{
    display: flex; /* Enables Flexbox */
    cursor: pointer;
    align-items: center; /* Centers content vertically */
    justify-content: center; /* Centers content horizontally */
    text-align: center; /* Aligns text for multiline content */
     background: rgba(0, 0, 0, 0.5); 
      text-shadow: 
                2px 2px 4px rgba(0, 0, 0, 0.2), -2px -2px 4px rgba(255, 255, 255, 0.5); 
}
.products-overlay:hover {
    background-color: rgba(0, 0, 0, 0.7); 
    transform: scale(1.05); 
    border-radius: 8px;
     transition: background-color 0.3s ease, transform 0.2s ease; 
 
}

.section-3.footer {
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 20px 20px; /* Adjusted padding to fit within 40vh */
    height: 50vh; /* Fixed height */
    font-family:LexendDeca;
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    justify-content: space-between; /* Space out content evenly */
    align-items: center;
}

.section-3.footer .footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    flex: 1; /* Allow footer content to expand within the available height */
    align-items: center; /* Center-align content vertically */
}

.section-3.footer .footer-column {
    flex: 1 1 200px;
    min-width: 150px;
    max-width: 300px;
}

.section-3.footer .footer-column h4 {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

.section-3.footer .footer-column p,
.section-3.footer .footer-column a {
    font-size: 14px;
    line-height: 1.6;
    color: #fff;
    text-decoration: none;
}

.section-3.footer .logo {
    margin: 10px 0; /* Adjust spacing to fit within 40vh */
}

.section-3.footer .logo img {
    max-width: 150px;
    height: auto;
}

.section-3.footer .copyright {
    font-size: 14px;
    color: #aaa;
    margin-top: 10px; /* Reduced margin for better spacing */
}

/* Media Query for Mobile Screens */
@media (max-width: 768px) {
    .section-3.footer {
        padding: 10px; /* Reduce padding for smaller screens */
    }

    .section-3.footer .footer-content {
        flex-direction: column; /* Stack columns vertically */
        align-items: center;
        gap: 10px; /* Reduce gap for compact layout */
    }

    .section-3.footer .footer-column {
        text-align: center;
        width: 100%;
        flex: 1 1 auto;
    }

    .section-3.footer .logo img {
        max-width: 120px;
    }

    .section-3.footer .copyright {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    /* Rules for small phones */

    .section-3.footer{
        height: 100vh;
    }
}

/* Small Devices (Phones, 480px and up) */
@media (min-width: 480px) {
        .section-3.footer{
        height: 80vh;
    }
}

/* Medium Devices (Tablets, 768px and up) */
@media (min-width: 768px) {
        .section-3.footer{
        height: 70vh;
    }
}

/* Large Devices (Small Laptops, 1024px and up) */
@media (min-width: 1024px) {
        .section-3.footer{
        height: 60vh;
    }
}

/* Extra Large Devices (Desktops, 1200px and up) */
@media (min-width: 1200px) {
        .section-3.footer{
        height: 60vh;
    }
}

/* Wide Screens (Large Desktops, 1600px and up) */
@media (min-width: 1600px) {
      .section-3.footer{
        height: 60vh;
    }
}

/* Ultra-Wide Screens (4K, 2560px and up) */
@media (min-width: 2560px) {
       .section-3.footer{
        height: 60vh;
    }
}

/* Orientation Queries */
/* Portrait Mode */


/* High-Resolution Screens (Retina) */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min--moz-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi),
       only screen and (min-resolution: 2dppx) {
    


}

@media screen and (max-height: 450px) and (orientation: landscape) {

      .section-2{
        height: 800vh;
    }
    .main-content{
        height: 800vh;
    }

}






/*#shop{
    height: 300vh;
    background-color: #FFFFFF;
}

@media (max-width:768px) {


}*/

#shop-nav{
      background: rgba(0, 0, 0,1); 
}










.story {
            width: 100%;
            margin-top: 150px;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 20px;
            box-sizing: border-box;
            color: #000000;
            font-family: LexendDeca;
        }
        .story-content {
            max-width: 800px;
            font-size: 1.5rem;
            line-height: 1.6;
        }





/*
 * RESPONSIVE CSS CODE FOR SECTIONS 1, 2, AND 3
 *
 * This code is designed to replace the existing responsive rules for the header,
 * main content (products), and footer sections in your style.css file.
 * It maintains your original design aesthetics while improving responsiveness,
 * fixing height issues, and organizing media queries.
 *
 * Ensure your non-responsive base styles (colors, backgrounds, text shadows,
 * transitions, etc.) are already present in your CSS file.
 */

/* ========================================================================== */
/* 1. GLOBAL / BASE RESPONSIVE SETTINGS (Mobile-First)                       */
/* These styles apply by default and are progressively enhanced for larger screens. */
/* ========================================================================== */

body, html {
    margin: 0;
    padding: 0;
    height: 100%; /* Full viewport height */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    /* Font-family is defined here to ensure it applies globally. */
    font-family: 'LexendDeca', Arial, sans-serif;
}

/* Custom font import - ensure the path is correct */
@font-face {
    font-family: 'LexendDeca';
    src: url('../img/lexend-deca/LexendDecaRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Improves font loading performance */
}

.container {
    width: 100%; /* Full viewport width */
}

/* Base styles for all sections */
.section {
    min-height: 100vh; /* Ensures section is at least full viewport height, but allows content to expand */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    color: #fff; /* Default text color */
}

/* ========================================================================== */
/* 2. HEADER SECTION RESPONSIVENESS (Section 1)                             */
/* ========================================================================== */

.header {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Slideshow container and individual slides - these are already responsive */
.slideshow {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    overflow: hidden;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

/* Header Overlay (Logo and Navigation) */
.header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px; /* Base height for header area */
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    backdrop-filter: blur(10px); /* Apply blur effect */
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    transition: background 0.3s ease-in-out;
}

.header-logo img {
    height: 150px; /* Base logo size */
    width: auto; /* Maintain aspect ratio */
}

/* Mobile Navigation (Default styles for smaller screens) */
.desktop-menu {
    display: none; /* Hidden by default on mobile */
}

.hamburger-icon {
    display: block; /* Shown by default on mobile */
    font-size: 30px;
    color: #fff;
    cursor: pointer;
    padding-right: 20px; /* Adjust spacing from right edge */
}

.dropdown-menu {
    list-style-type: none;
    display: none; /* Hidden by default, toggled by JavaScript */
    position: absolute;
    top: 120px; /* Position below the header overlay */
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
    padding: 10px 0;
    box-sizing: border-box;
    z-index: 1; /* Below header overlay, but above main content */
    color: #fff;
    border-radius: 0 0 5px 5px; /* Rounded corners at the bottom */
}

.dropdown-menu.show {
    display: block; /* JavaScript adds this class to show the menu */
}

.dropdown-menu li {
    padding: 10px;
    text-align: center;
}

.dropdown-menu li a {
    color: #fff;
    font-size: 18px;
    text-decoration: none;
    font-family: LexendDeca;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2), -2px -2px 4px rgba(255, 255, 255, 0.5);
}

.dropdown-menu li a:hover {
    color: #5BB74B;
}

/* Header Text Overlay and Shop Now Button */
.header-texts {
    height: 70vh; /* Adjust height for content positioning */
    display: flex;
    position: absolute;
    flex-direction: column;
    justify-content: center;

    box-sizing: border-box;
    margin: 15px; /* Base margin */
    
}

.text-overlay {
    background: rgba(0, 0, 0, 0.5);
    padding: 5px 10px;
    border-radius: 10px;
    backdrop-filter: blur(5px);
    font-family: LexendDeca;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2), -2px -2px 4px rgba(255, 255, 255, 0.5);
}

.text-1 { font-weight: bold; }
.text-2 { font-weight: 600; }

.shop-now-button {
    display: inline-block;
    padding: 15px 30px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;

   
    font-family: LexendDeca;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2), -2px -2px 4px rgba(255, 255, 255, 0.5);
}

.shop-now-button:hover {
    background-color: #fff;
    color: rgba(0, 0, 0, 0.5);
    transform: scale(1.05);
}

.mouse-down {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    cursor: pointer;
}

.mouse-down img {
    height: 100px;
    color: #fff; /* Note: color property won't affect image, only SVG or text */
}



/* Media Queries for Header Text and Navigation */
@media (min-width: 320px) { /* Smallest phones */
    .text-1 { font-size: 15px; padding: 7px; }
    .text-2 { font-size: 25px; }
    .text-3 { font-size: 14px; padding-top: 6px; }
    .shop-now-button { padding: 12px 25px; font-size: 14px; }
    .header-logo img { height: 120px; }
    .header-overlay { height: 100px; padding: 0 10px; }
    .dropdown-menu { top: 80px; }
}

@media (min-width: 375px) { /* iPhone SE, larger small phones */
    .text-1 { font-size: 18px; padding: 4px; }
    .text-2 { font-size: 30px; }
    .text-3 { font-size: 16px; padding-top: 6px; }
    .shop-now-button { padding: 15px 30px; font-size: 16px; }
}

@media (min-width: 425px) { /* Larger phones */
    .text-1 { font-size: 20px; padding: 4px; }
    .text-2 { font-size: 35px; }
    .text-3 { font-size: 18px; padding-top: 6px; }
    .header-logo { padding-left: 10px; }
    .hamburger-icon { padding-right: 25px; }
}

@media (min-width: 850px) { /* Tablets and larger - Desktop Navigation */
    .header-nav ul {
        display: flex; /* Show desktop menu */
        gap: 20px;
    }
    .hamburger-icon {
        display: none; /* Hide hamburger icon */
    }
    .dropdown-menu {
        display: none !important; /* Ensure dropdown is always hidden on desktops */
    }
    .text-1 { font-size: 25px; }
    .text-2 { font-size: 45px; }
    .text-3 { font-size: 22px; }
    .header-logo { padding-left: 20px; }
    .header-logo img { height: 160px; }
    .header-overlay { height: 150px; padding: 0 40px; } /* Adjust padding for desktop */
    .dropdown-menu { top: 150px; } /* Adjust dropdown position if it were to show */
    .shop-now-button { align-self: center; } /* Center button on desktop */
}

@media (min-width: 1024px) { /* Small laptops */
    .text-1 { font-size: 30px; }
    .text-2 { font-size: 45px; } /* Keeping same as 768px for consistency with original */
    .text-3 { font-size: 25px; }
}

@media (min-width: 1440px) { /* Large desktops */
    .text-1 { font-size: 35px; }
    .text-2 { font-size: 50px; }
    .text-3 { font-size: 25px; }
    .header-logo { padding-left: 35px; }
    .header-overlay { padding: 0 70px; }
}

@media (min-width: 2560px) { /* Ultra-wide screens */
    .text-1 { font-size: 50px; }
    .text-2 { font-size: 65px; }
    .text-3 { font-size: 30px; }
    .header-logo { padding-left: 300px; }
    .header-overlay { padding: 0 400px; }
    .header-logo img { height: 185px; }
    .shop-now-button { padding: 20px 35px; font-size: 25px; }
}

/* ========================================================================== */
/* 3. MAIN CONTENT / PRODUCTS SECTION RESPONSIVENESS (Section 2)            */
/* ========================================================================== */

.section-2 {
    background-color: #EAEDED;
    color: #000;
    min-height: 100vh; /* Ensures it's at least full height, allows content to expand */
    height: auto; /* Let content dictate height */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align content to the top */
    align-items: center; /* Center horizontally */
    padding: 20px;
    box-sizing: border-box;
}

.main-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 20px;
    flex-grow: 1; /* Allows it to take available space within section-2 */
    min-height: 100vh; /* Ensure it's at least full height */
    height: auto; /* Let content dictate height */
}

.text-p1 {
    font-family: LexendDeca;
    font-weight: 900;
    font-size: 40px; /* Base font size */
    padding: 20px;
    color: #010101;
    text-align: center;
}

.products {
    flex-grow: 1; /* Allow grid to take available space */
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* Default: 1 column for mobile */
    gap: 16px; /* Base gap */
    padding: 16px;
    box-sizing: border-box;
    justify-items: center; /* Center grid items */
    align-items: center; /* Center grid items vertically */
    width: 100%; /* Ensure grid takes full width */
    max-width: 1400px; /* Limit max width for very large screens */
}

.products-image {
    background-size: cover; /* Ensures the image covers the full container */
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    font-weight: bold;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-family: LexendDeca;
    overflow: hidden; /* Ensure overlay respects border-radius */
    cursor: pointer; /* Indicate clickability */
    /* Base size for mobile */
    min-width: 200px;
    max-width: 200px;
    min-height: 200px;
    max-height: 200px;
}

.products-overlay {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2), -2px -2px 4px rgba(255, 255, 255, 0.5);
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.products-overlay:hover {
    background-color: rgba(0, 0, 0, 0.7);
    transform: scale(1.05);
}

/* Media Queries for Products Grid and Item Sizing */
@media (min-width: 340px) {
    .products-image {
        min-width: 230px; max-width: 230px;
        min-height: 230px; max-height: 230px;
    }
}

@media (min-width: 360px) {
    .products-image {
        min-width: 240px; max-width: 240px;
        min-height: 240px; max-height: 240px;
    }
}

@media (min-width: 375px) {
    .products-image {
        min-width: 260px; max-width: 260px;
        min-height: 260px; max-height: 260px;
    }
}

@media (min-width: 425px) {
    .products-image {
        min-width: 270px; max-width: 270px;
        min-height: 270px; max-height: 270px;
    }
}

@media (min-width: 768px) { /* Tablets */
    .products {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
        gap: 20px;
    }
    .products-image {
        min-width: 300px; max-width: 300px; /* Adjust size for 2 columns */
        min-height: 300px; max-height: 300px;
    }
    .text-p1 { font-size: 50px; }
}

@media (min-width: 1024px) { /* Small Laptops */
    .products {
        grid-template-columns: repeat(3, 1fr); /* 3 columns */
        gap: 25px;
    }
    .products-image {
        min-width: 280px; max-width: 280px; /* Adjust size for 3 columns */
        min-height: 280px; max-height: 280px;
    }
}

@media (min-width: 1200px) { /* Desktops */
    .products {
        grid-template-columns: repeat(4, 1fr); /* 4 columns */
        gap: 30px;
    }
    .products-image {
        min-width: 250px; max-width: 250px; /* Adjust size for 4 columns */
        min-height: 250px; max-height: 250px;
    }
}

@media (min-width: 1440px) { /* Larger Desktops */
    .products-image {
        min-width: 280px; max-width: 280px;
        min-height: 280px; max-height: 280px;
    }
}

@media (min-width: 1920px) { /* Full HD and larger */
    .products-image {
        min-width: 300px; max-width: 300px;
        min-height: 300px; max-height: 300px;
    }
}

@media (min-width: 2560px) { /* 4K screens */
    .products-image {
        min-width: 350px; max-width: 350px;
        min-height: 350px; max-height: 350px;
    }
    .products {
        gap: 40px;
    }
}

/* Landscape orientation for very short screens (e.g., old phones in landscape) */
@media screen and (max-height: 450px) and (orientation: landscape) {
    .section-2, .main-content {
        min-height: auto; /* Allow content to dictate height */
        height: auto;
        padding-top: 100px; /* Add padding to account for header */
    }
    .products {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* More flexible grid */
        gap: 10px;
    }
    .products-image {
        min-width: 150px; max-width: 150px;
        min-height: 150px; max-height: 150px;
        font-size: 18px;
    }
    .text-p1 { font-size: 30px; padding: 10px; }
}


/* ========================================================================== */
/* 4. FOOTER SECTION RESPONSIVENESS (Section 3)                             */
/* ========================================================================== */

.section-3.footer {
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 20px; /* Base padding */
    min-height: 50vh; /* Ensure a minimum height, but allow to expand */
    height: auto; /* Let content dictate height */
    font-family: LexendDeca;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.section-3.footer .footer-content {
    display: flex;
    flex-wrap: wrap; /* Allows columns to wrap on smaller screens */
    justify-content: center;
    gap: 20px;
    flex: 1;
    align-items: center;
}

.section-3.footer .footer-column {
    flex: 1 1 200px; /* Allows columns to grow/shrink, min-width 200px */
    min-width: 150px;
    max-width: 300px;
}

.section-3.footer .footer-column h4 {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

.section-3.footer .footer-column p,
.section-3.footer .footer-column a {
    font-size: 14px;
    line-height: 1.6;
    color: #fff;
    text-decoration: none;
}

.section-3.footer .logo {
    margin: 10px 0;
}

.section-3.footer .logo img {
    max-width: 150px;
    height: auto;
}

.section-3.footer .copyright {
    font-size: 14px;
    color: #aaa;
    margin-top: 10px;
}

/* Media Queries for Footer */
@media (max-width: 768px) { /* Mobile and small tablets */
    .section-3.footer {
        padding: 10px;
        min-height: 80vh; /* Make footer taller on mobile to accommodate stacked columns */
    }
    .section-3.footer .footer-content {
        flex-direction: column; /* Stack columns vertically */
        align-items: center;
        gap: 10px;
    }
    .section-3.footer .footer-column {
        text-align: center;
        width: 100%;
        flex: 1 1 auto;
    }
    .section-3.footer .logo img {
        max-width: 120px;
    }
    .section-3.footer .copyright {
        font-size: 12px;
    }
}

@media (min-width: 480px) and (max-width: 767px) { /* Specific for larger phones in portrait */
    .section-3.footer {
        min-height: 60vh;
    }
}

@media (min-width: 768px) { /* Tablets and larger */
    .section-3.footer {
        min-height: 40vh; /* Adjust for larger screens */
    }
}

@media (min-width: 1024px) { /* Small Laptops */
    .section-3.footer {
        min-height: 30vh;
    }
}

@media (min-width: 1440px) { /* Large Desktops */
    .section-3.footer {
        min-height: 25vh;
    }
}

@media (min-width: 2560px) { /* Ultra-wide screens */
    .section-3.footer {
        min-height: 20vh;
    }
}

/* ========================================================================== */
/* 5. SPECIFIC PAGE STYLES (Shop, Story, etc.)                               */
/* These are included to ensure your other pages are also responsive.     */
/* ========================================================================== */


/* Universal link styling */
a {
    text-decoration: none; /* Removes the underline */
    color: inherit; /* Inherits the color from its parent element */
}




/*
 * SHOP.HTML PAGE SPECIFIC RESPONSIVENESS FIXES
 *
 * This CSS targets unique IDs found ONLY in shop.html to ensure:
 * - Header is visible and correctly sized.
 * - Main content (Weedmaps embed) is correctly positioned and scrollable.
 * - Footer is pushed down and visible.
 * - These styles do NOT affect other pages (index.html, area.html, etc.).
 * IMPORTANT: Ensure you have removed any old, conflicting CSS rules in your style.css
 * that target general `id="shop"`, `.wm-store`, or similar selectors
 * that were implicitly affecting the header or main content height on shop.html.
 * These new rules are specifically designed to work with your shop.html structure.
 */

/* 1. Header on the Shop Page (#shopPageHeader and #shopNavOverlay) */
/* This ensures the header is visible and doesn't take up too much vertical space. */
body#shopPageBody #shopPageHeader {
    min-height: auto; /* Ensure header doesn't force a minimum full viewport height */
    height: auto; /* Let content dictate height */
    padding: 0; /* Remove default section padding that might add unwanted space */
    /* If you want the header to be fixed at the top, add: */
    /* position: fixed; */
    /* top: 0; */
    /* width: 100%; */
    /* z-index: 1000; */
}

body#shopPageBody #shopNavOverlay {
    height: 120px; /* Explicitly set the height for desktop, consistent with index.html's header */
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    backdrop-filter: blur(10px); /* Apply blur effect */
    z-index: 2; /* Ensure it's above other content if not fixed */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    transition: background 0.3s ease-in-out;
}

/* 2. Main Content Wrapper for the Shop Embed (#shopMainContentWrapper) */
/* This is critical for positioning the embed correctly below the header and pushing the footer. */
body#shopPageBody #shopMainContentWrapper {
    background-color: #FFFFFF; /* Ensures a white background for the shop content area */
    width: 100%;
    box-sizing: border-box; /* Ensures padding/borders are included in total width/height */

    /* CRITICAL: Push this main content area down to avoid overlapping the header.
       This value must precisely match the height of your #shopNavOverlay on desktop. */
    margin-top: 120px; /* Matches #shopNavOverlay height */

    display: flex; /* Use flexbox to manage the embed container inside it */
    flex-direction: column;
    justify-content: flex-start; /* Aligns content to the top */
    align-items: stretch; /* Allows internal content to stretch horizontally */

    /* Ensures this main content area is at least the remaining viewport height,
       but crucially, allows it to grow much taller if the embed content requires it. */
    min-height: calc(100vh - 120px - 200px); /* vh - header_height - estimated_footer_height.
                                                Adjust '200px' to your footer's actual minimum height.
                                                This `min-height` ensures the page is never too short. */
}

/* 3. The specific container for the Weedmaps embed itself (#weedmapsEmbedContainer) */
/* This div directly holds the <script> tag for the embed. */
body#shopPageBody #weedmapsEmbedContainer {
    width: 100%;
    height: auto; /* CRITICAL: Allow this div to grow vertically based on the embed's content */
    flex-grow: 1; /* Allows it to take up all available vertical space within #shopMainContentWrapper */

    /* Provides a robust minimum height for the embed content area */
    min-height: 80vh;

    box-sizing: border-box;
    padding: 0 10px; /* Optional: Add slight horizontal padding around the embed */
    overflow: hidden; /* Ensure content doesn't break out of this div */
}

/* 4. Targeting the actual embed content (likely an iframe) within #weedmapsEmbedContainer */
/* This is often necessary because embed scripts set inline styles that need to be overridden. */
body#shopPageBody #weedmapsEmbedContainer > * {
    width: 100% !important; /* Force full width, overriding any inline styles from the embed */
    height: 100% !important; /* CRITICAL: Force the embed content (iframe) to fill its parent's height.
                                  This works when #weedmapsEmbedContainer has height:auto. */

    /* If the embed remains unscrollable, UNCOMMENT these: */
    /* max-height: 100%; */ /* Ensure it doesn't overflow its parent if parent has a max height */
    overflow-y: auto !important; /* FORCES VERTICAL SCROLLING WITHIN THE EMBED/IFRAME if its content overflows */

    min-height: 600px; /* A robust minimum height for the embed content itself, always visible */
    display: block; /* Ensures it behaves like a block element for layout */
    border: none; /* Removes any default iframe borders */
}

/* 5. Responsive Adjustments for Mobile (targeting specific IDs on shop.html) */
@media (max-width: 768px) {
    body#shopPageBody #shopNavOverlay {
        height: 100px; /* Adjust header height for mobile */
    }

    body#shopPageBody #shopMainContentWrapper {
        margin-top: 100px; /* Adjust margin for smaller mobile header height */
        min-height: calc(100vh - 100px - 150px); /* Adjust min-height for mobile: vh - header_h - est_footer_h */
    }
    body#shopPageBody #weedmapsEmbedContainer {
        min-height: 50vh; /* Smaller minimum height for embed container on mobile */
    }
    body#shopPageBody #weedmapsEmbedContainer > * {
        min-height: 400px; /* Smaller minimum height for embed content on mobile */
    }
}

#shopPageHeader{
    min-height: 150px !important;
    max-height: 150px !important;
}

@media(max-width: 768px){
    #shopPageHeader{
    min-height: 100px !important;
    max-height: 100px !important;
}
}
/* 6. Footer on the Shop Page (#shopPageFooter) */
/* No specific changes to #shopPageFooter needed here.
   Since #shopMainContentWrapper is designed to grow, the footer will naturally
   be pushed down correctly, following the full height of the embed. */




body#shopPageBody .dropdown-menu {
    position: absolute; /* This positions it relative to the nearest positioned ancestor, or the body/viewport */
    top: 150px; /* Pushes it exactly 150px down from the top (below your header) */
    height: calc(100vh - 150px); /* Makes it fill the remaining viewport height */
    width: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Gives it a solid background to cover content */
    z-index: 100; /* Ensures it appears above other page content */
    overflow-y: auto; /* Allows scrolling if the menu items are too many */
    left: 0;
    /* ... other styles ... */
}

@media (max-width: 768px) {
    body#shopPageBody .dropdown-menu {
        top: 100px; /* Adjust for mobile header height */
        height: calc(100vh - 100px); /* Adjust for mobile header height */
    }
}


#area {
    min-height: 800px !important;
    max-height: 800px !important;
}








/* ====== CONFIG: color + radius ====== */
#agegate-overlay {
  --ag-primary: #16a34a;         /* change to harmonize with your palette */
  --ag-primary-contrast: #ffffff;
  --ag-bg: rgba(10, 10, 10, 0.72);
  --ag-panel: #0f172a;           /* modal background */
  --ag-text: #e5e7eb;            /* body text */
  --ag-muted: #9ca3af;           /* secondary text */
  --ag-radius: 18px;
  --ag-maxw: 520px;
  --ag-blur-strength: 6px;       /* background blur amount */
  --ag-shadow: 0 20px 50px rgba(0,0,0,0.35);
}

/* ====== Background blur toggled by JS on #site-root ====== */
#site-root.agegate-blur {
  filter: blur(var(--ag-blur-strength));
  transition: filter 200ms ease;
}

/* ====== Overlay layer ====== */
#agegate-overlay {
  position: fixed;
  inset: 0;
  display: none;                 /* JS toggles to flex when active */
  align-items: center;
  justify-content: center;
  background: var(--ag-bg);
  z-index: 999999;               /* above everything */
  padding: 24px;
}

/* ====== Modal panel ====== */
#agegate-modal {
  width: 100%;
  max-width: var(--ag-maxw);
  background: var(--ag-panel);
  color: var(--ag-text);
  border-radius: var(--ag-radius);
  box-shadow: var(--ag-shadow);
  padding: 28px 24px;
  text-align: center;
}



#agegate-logo-area {
  margin: 0 auto 12px;
}

#agegate-logo-area img {
  width: clamp(100px, 18vmin, 220px);
  height: auto;
  display: block;
  margin: 0 auto;
}




#agegate-title {
  margin: 10px 0 6px;
  font-size: 1.35rem;
  line-height: 1.25;
  font-weight: 700;
}

#agegate-desc,
#agegate-note {
  margin: 0.25rem 0 0.75rem;
  color: var(--ag-muted);
  font-size: 0.95rem;
}

#agegate-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0 6px;
}

#agegate-yes,
#agegate-no {
  appearance: none;
  border: 0;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* Primary action */
#agegate-yes {
  background: var(--ag-primary);
  color: var(--ag-primary-contrast);
}

#agegate-yes:hover { filter: brightness(1.05); }
#agegate-yes:active { transform: translateY(1px); }

/* Secondary action */
#agegate-no {
  background: #111827;
  color: var(--ag-text);
  border: 1px solid #1f2937;
}

#agegate-no:hover { filter: brightness(1.05); }
#agegate-no:active { transform: translateY(1px); }

/* Show overlay when JS adds .is-open */
#agegate-overlay.is-open {
  display: flex;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  #site-root.agegate-blur { transition: none; }
  #agegate-yes:active, #agegate-no:active { transform: none; }
}

/* ===== Brands page (ID-scoped) ===== */
#brands-page {
  padding: 24px 16px;
}

#brands-title {
  margin: 0 0 16px;
  font-size: clamp(24px, 3.5svw, 36px);
  line-height: 1.15;
  text-align: center;
}

#brands-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  max-width: 1200px;
  margin: 0 auto;
}

#brands-grid .brand-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 200px;                /* adjust if you prefer */
  border-radius: 14px;
  background-size: contain;
  background-position: center;
  text-decoration: none;
  overflow: hidden;
}

#brands-grid .brand-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0.05));
}


#brands-grid .brand-name {
  position: relative;
  z-index: 1;
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  padding: 10px 12px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}



/* Hover focus feedback */
#brands-grid .brand-card:focus, 
#brands-grid .brand-card:hover {
  outline: none;
  filter: brightness(1.03);
}


/* ===== Preorder Gate (ID-scoped) ===== */
/* ===== Preorder Gate (RESPONSIVE FIXED) ===== */
#gw-preorder-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;                 /* toggled by .open */
}

#gw-preorder-gate.open { display: block; }

/* Use a flex centering layer so we can add safe padding around dialog */
#gw-preorder-gate__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(6px);
}

/* A centering wrapper to prevent the dialog from touching edges */
#gw-preorder-gate::after {
  content: "";
  position: absolute;
  inset: 0;
  /* padding to keep dialog away from edges (phones & laptops) */
  pointer-events: none;
}

/* Dialog */
#gw-preorder-gate__dialog {
  position: relative;
  z-index: 1;
  width: min(560px, calc(100vw - 24px));
  /* Max height so buttons never go below fold; content scrolls inside */
  max-height: min(92svh, 680px);
  margin: 6svh auto;
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
  overflow: auto;                /* internal scroll when tall */
  -webkit-overflow-scrolling: touch;
}

#gw-preorder-gate__logo img {
  width: clamp(90px, 21vmin, 160px);
  height: auto;
  display: block;
  margin: 0 auto 8px;
}

#gw-preorder-title {
  margin: 6px 0 4px;
  text-align: center;
  font-size: clamp(18px, 3.5svw, 24px);
  line-height: 1.2;
}
#gw-preorder-sub { text-align: center; margin: 0 0 12px; opacity: 0.85; }

/* Form layout */
#gw-preorder-form {
  --ctl-h: 44px;                 /* unified control height */
  max-width: 480px;
  margin: 0 auto;
}

#gw-preorder-form .gwpf-row {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

/* Unified controls: equal width, no overflow on phones */
#gw-preorder-form input[type="text"],
#gw-preorder-form input[type="tel"],
#gw-preorder-form select,
#gw-preorder-form textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 16px;
}

/* Equal heights for inputs & select */
#gw-preorder-form input[type="text"],
#gw-preorder-form input[type="tel"],
#gw-preorder-form select {
  height: var(--ctl-h);
  line-height: calc(var(--ctl-h) - 2px);
}

/* Textarea: controlled height but resizable if needed */
#gw-preorder-form textarea {
  min-height: calc(var(--ctl-h) * 2);
  resize: vertical;
}

#gwpf-legal { font-size: 0.9rem; opacity: 0.8; margin: 6px 0 10px; text-align: center; }

/* Actions */
.gwpf-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}

#gwpf-submit, #gwpf-cancel {
  height: var(--ctl-h);
  padding: 0 12px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}

#gwpf-submit {
  border: none;
  background: #0a8f3f;
  color: #fff;
}
#gwpf-cancel {
  border: 1px solid #ddd;
  background: #fff;
}

/* Laptop/tablet tweaks: slightly smaller margins on short viewports */
@media (max-height: 750px) {
  #gw-preorder-gate__dialog {
    margin: 4svh auto;
    max-height: min(90svh, 620px);
  }
}

/* Phones */
/* Phones */
@media (max-width: 480px) {
  #gw-preorder-gate__dialog {
    /* leave some margin on both sides */
    width: auto;
    margin: 4svh 20px;   /* 20px left & right space */
    padding: 14px;
    max-height: 88svh;
  }
  .gwpf-actions { grid-template-columns: 1fr; }
}