@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700&display=swap');

:root{
   --main-color:#000000;
   --orange:#f39c12;
   --red:#e74c3c;
   --black:#333;
   --white:#fff;
   --light-color:#666;
   --light-bg:#eee;
   --border:.2rem solid var(--black);
   --box-shadow:0 .5rem 1rem rgba(0,0,0,.1);
}
*{
font-family: 'Nunito', sans-serif;
   margin:0; padding:0;
   box-sizing: border-box;
   outline: none; border:none;
   text-decoration: none;
}

*::selection{
   background-color: var(--main-color);
   color:var(--white);
}

::-webkit-scrollbar{
   height: .5rem;
   width: 1rem;
}

::-webkit-scrollbar-track{
   background-color: transparent;
}

::-webkit-scrollbar-thumb{
   background-color: var(--main-color);
}

html{
   font-size: 62.5%;
   overflow-x: hidden;
}

body{
   background-color: var(--light-bg);
}

section{
   padding:2rem;
   max-width: 1200px;
   margin:0 auto;
}

.heading{
   font-size: 4rem;
   color:var(--black);
   margin-bottom: 2rem;
   text-align: center;
   text-transform: uppercase;
}

.btn,
.delete-btn,
.option-btn{
   display: block;
   width: 100%;
   margin-top: 1rem;
   border-radius: .5rem;
   padding:1rem 3rem;
   font-size: 1.7rem;
   text-transform: capitalize;
   color:var(--white);
   cursor: pointer;
   text-align: center;
}

.btn:hover,
.delete-btn:hover,
.option-btn:hover{
   background-color: var(--black);
}

.btn{
   background-color: var(--main-color);
}

.option-btn{
   background-color: var(--orange);
}

.delete-btn{
   background-color: var(--red);
}

.flex-btn{
   display: flex;
   gap:1rem;
}

.message{
   text-align: center;
   position: sticky;
   top:0;
   max-width: 2000px;
   margin:0 auto;
   background-color: var(--light-bg);
   padding:2rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap:1.5rem;
   z-index: 1100;
}

.message span{
   font-size: 2rem;
   color:var(--black);
}

.message i{
   cursor: pointer;
   color:var(--red);
   font-size: 2.5rem;
}

.message i:hover{
   color:var(--black);
}

.empty{
   padding:1.5rem;
   background-color: var(--white);
   border: var(--border);
   box-shadow: var(--box-shadow);
   text-align: center;
   color:var(--red);
   border-radius: .5rem;
   font-size: 2rem;
   text-transform: capitalize;
}

.disabled{
   pointer-events: none;
   user-select: none;
   opacity: .5;
}

@keyframes fadeIn{
   0%{
      transform: translateY(1rem);
   }
}

.header{
    
   position: sticky;
   top:0; left:0; right:0;
   background-color: #000000;
   box-shadow: var(--box-shadow);
   z-index: 1000;
}

.header .flex{
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: relative;
}

.header .flex .logo{
   font-size: 2.5rem;
   color:var(--black);
}

.header .flex .logo span{
   color:var(--main-color);
}

.header .flex .navbar a{
   margin:0 1rem;
   font-size: 2rem;
   color:var(--black);
}

.header .flex .navbar a:hover{
   color:var(--main-color);
   text-decoration: underline;
}


.header .flex .icons > *{
   margin-left: 1rem;
   font-size: 2.5rem;
   cursor: pointer;
   color:var(--black);
}

.header .flex .icons > *:hover{
   color:var(--main-color);
}

.header .flex .icons a span{
   font-size: 2rem;
}

.header .flex .profile{
   position: absolute;
   top:120%; right:2rem;
   background-color: var(--white);
   border-radius: .5rem;
   box-shadow: var(--box-shadow);
   border:var(--border);
   padding:2rem;
   width: 30rem;
   padding-top: 1.2rem;
   display: none;
   animation:fadeIn .2s linear;
}

.header .flex .profile.active{
   display: inline-block;
}

.header .flex .profile p{
   text-align: center;
   color:var(--black);
   font-size: 2rem;
   margin-bottom: 1rem;
}

#menu-btn{
   display: none;
}

.home-bg {
    background: url("../images/home-bg.png") center / cover no-repeat;
    height: 80vh; /* big hero on desktop */
}

.home,
.swiper,
.swiper-wrapper {
    height: 100%;
}

.home-bg .home .slide {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    width: 100%;
    padding: 0 2rem;
    box-sizing: border-box;
    height: 100%;
}

.home-bg .home .slide .image,
.home-bg .home .slide .content {
    transform: translateY(-130px);
    flex: 1 1 40%;
    max-height: 100%;
}

.home-bg .home .slide .image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-bg .home .slide .image img {
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
}

.home-bg .home .slide .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.home-bg .home .slide .content h3 {
    font-size: clamp(2rem, 5vw, 4rem);
    margin-top: 1rem;
    text-transform: uppercase;
}

.home-bg .home .slide .content span {
    font-size: clamp(1rem, 2vw, 2rem);
}

.home-bg .home .slide .content .btn {
    display: inline-block;
    
}



@media (max-width: 991px) {
    .home-bg {
        height: 65vh;
    }
}



@media (max-width: 600px) {

  .home-bg {
      height: 100vh;
      padding: 1.5rem;
  }

  .home,
  .swiper,
  .home-slider,
  .swiper-wrapper {
      height: 100%;
  }

  .home-bg .home .slide {
      min-height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;   /* vertical centering */
      align-items: center;       /* horizontal centering */
      text-align: center;
      gap: 1rem;
  }

  /* IMAGE */
  .home-bg .home .slide .image {
      
      order: 1;
      width: 100%;
      display: flex;
      justify-content: center;
      transform: translateY(-60px);
  }

  .home-bg .home .slide .image img {
      
      max-height: 220px;
      width: auto;
      height: auto;
  }

  /* TEXT */
  .home-bg .home .slide .content {
      margin-left: 6rem;
      order: 2;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transform: translateY(0);
      margin-left: -42rem;
  }

  .home-bg .home .slide .content .btn {
      width: 100%;
      max-width: 260px;
  }
  

}

/* Removed duplicate universal selector */

.container{
   width: 100%;
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.4);
   display: flex;
   align-items: center;
   justify-content: center;
}

.content{
   position: relative;
   width: 100vw;
   min-height: 100vh;
   text-align: center;
   box-sizing: border-box;
   overflow: hidden; /* 🔥 crops the video */

}

.content h1{
   display: block;
   cursor: default;
   font-size: clamp(4rem, 14vw, 14rem);
   white-space: nowrap;
   color: #fff;
   margin-bottom: 20px;

}

.content h2 {
  color: #fff;
  font-size: 1.4em;          /* SAME size as JAGfam */
  letter-spacing: 3em;
  margin-left: 2em;     /* compensates letter-spacing centering */
  margin-top: -40px;
  margin-bottom: 0em;
}


.video-container {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover; /* Ensure the video covers the container */
}

.video-container video {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.content a{
   cursor: default;
   font-size: clamp(0.8rem, 2.5vw, 4rem);
   white-space: nowrap;
   display: inline-block;
   padding: 0.6em 1.2em;
   border: 2px solid #fff;
   border-radius: 999px;
   color: #fff;
   text-decoration: none;
   margin-top: 30px;

}

.content a:hover{
   background-color: #fff;
   color: #000;
}

.background-clip{
   position: absolute;
   right: 0;
   bottom: 0;
   z-index: -1;
}




@media (min-aspect-ratio:16/9) {
   .background-clip{
       width: 100%;
       height: auto;
   }
   
   .content h1{

      font-size: 200px;


    } 
    
    .content h2{
      
      font-size: 3em; /* relative again */
    }
    
   .content a{

      font-size: 30px;

    }
   
   .content a:hover{
      background-color: #fff;
      color: #000;
    }
}

@media (max-aspect-ratio:16/9) {
   .background-clip{
       width: auto;
       height: 100%;
   }
   

}



.swiper-pagination-bullet-active{
   background-color: var(--main-color);
}

.category .slide {
   overflow: hidden;
   cursor: grab;
   margin-bottom: 5rem;
   box-shadow: var(--box-shadow);
   border: var(--border);
   text-align: center;
   padding: 2rem;
   background: var(--white);
   border-radius: .5rem;
}

.category .slide:hover {
   background-color: var(--black);
}

.category .slide:hover img {
   filter: invert();
}

.category .slide:hover h3 {
   color: var(--white);
}

.category .slide img {
   height: 9.5rem;
   width: 110px;
   object-fit: contain;
   margin-bottom: 1rem;
   user-select: none;
}

.category .slide h3 {
   font-size: 2rem;
   color: var(--black);
   user-select: none;
}

.home-products .slide{
   position: relative;
   padding:2rem;
   border-radius: .5rem;
   border:var(--border);
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   margin-bottom: 5rem;
   overflow: hidden;
   user-select: none;
}

.home-products .slide img{
   width: 100%;
   height: 20rem;
   object-fit: contain;
   margin-bottom: 2rem;
}

.home-products .slide .name{
   font-size: 2rem;
   color:var(--black);
}

.home-products .slide .flex{
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap:1rem;
}

.home-products .slide .flex .qty{
   width: 7rem;
   padding:1rem;
   border:var(--border);
   font-size: 1.8rem;
   color:var(--black);
   border-radius: .5rem;
}

.home-products .slide .flex .price{
   margin:1rem 0;
   font-size: 2rem;
   color:var(--red);
}

.home-products .slide .fa-heart,
.home-products .slide .fa-eye{
   position: absolute;
   top:1rem;
   height: 4.5rem;
   width: 4.5rem;
   line-height: 4.2rem;
   font-size: 2rem;
   background-color: var(--white);
   border:var(--border);
   border-radius: .5rem;
   text-align: center;
   color:var(--black);
   cursor: pointer;
   transition: .2s linear;
}

.home-products .slide .fa-heart{
   right: -6rem;
}

.home-products .slide .fa-eye{
   left: -6rem;
}

.home-products .slide .fa-heart:hover,
.home-products .slide .fa-eye:hover{
   background-color: var(--black);
   color:var(--white);
}

.home-products .slide:hover .fa-heart{
   right: 1rem;
}

.home-products .slide:hover .fa-eye{
   left: 1rem;
}


.quick-view form{
   padding:2rem;
   border-radius: .5rem;
   border:var(--border);
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   margin-top: 1rem;
}

.quick-view form .row{
   display: flex;
   align-items: center;
   gap:1.5rem;
   flex-wrap: wrap;
}

.quick-view form .row .image-container{
   margin-bottom: 2rem;
   flex:1 1 40rem;
}

.quick-view form .row .image-container .main-image img{
   height: 30rem;
   width: 100%;
   object-fit: contain;
}

.quick-view form .row .image-container .sub-image{
   display: flex;
   gap:1.5rem;
   justify-content: center;
   margin-top: 2rem;
}

.quick-view form .row .image-container .sub-image img{
   height: 7rem;
   width: 10rem;
   object-fit: contain;
   padding:.5rem;
   border:var(--border);
   cursor: pointer;
   transition: .2s linear;
}

.quick-view form .flex .image-container .sub-image img:hover{
   transform: scale(1.1);
}

.quick-view form img{
   width: 100%;
   height: 20rem;
   object-fit: contain;
   margin-bottom: 2rem;
}

.quick-view form .row .content{
   flex:1 1 40rem;
}

.quick-view form .row .content .name{
   font-size: 2rem;
   color:var(--black);
}

.quick-view form .row .flex{
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap:1rem;
   margin:1rem 0;
}

.quick-view form .row .flex .qty{
   width: 7rem;
   padding:1rem;
   border:var(--border);
   font-size: 1.8rem;
   color:var(--black);
   border-radius: .5rem;
}

.quick-view form .row .flex .price{
   font-size: 2rem;
   color:var(--red);
}

.quick-view form .row .content .details{
   font-size: 1.6rem;
   color:var(--light-color);
   line-height: 2;
}  

.products .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, 33rem);
   gap:1.5rem;
   justify-content: center;
   align-items: flex-start;
}

.products .box-container .box{
   position: relative;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: .5rem;
   border:var(--border);
   padding:2rem;
   overflow: hidden;
}

.products .box-container .box img{
   height: 20rem;
   width: 100%;
   object-fit: contain;
   margin-bottom: 1rem;
}

.products .box-container .box .fa-heart,
.products .box-container .box .fa-eye{
   position: absolute;
   top:1rem;
   height: 4.5rem;
   width: 4.5rem;
   line-height: 4.2rem;
   font-size: 2rem;
   background-color: var(--white);
   border:var(--border);
   border-radius: .5rem;
   text-align: center;
   color:var(--black);
   cursor: pointer;
   transition: .2s linear;
}

.products .box-container .box .fa-heart{
   right: -6rem;
}

.products .box-container .box .fa-eye{
   left: -6rem;
}

.products .box-container .box .fa-heart:hover,
.products .box-container .box .fa-eye:hover{
   background-color: var(--black);
   color:var(--white);
}

.products .box-container .box:hover .fa-heart{
   right:1rem;
}

.products .box-container .box:hover .fa-eye{
   left:1rem;
}

.products .box-container .box .name{
   font-size: 2rem;
   color:var(--black);
}

.products .box-container .box .flex{
   display: flex;
   align-items: center;
   gap:1rem;
}

.products .box-container .box .flex .qty{
   width: 7rem;
   padding:1rem;
   border:var(--border);
   font-size: 1.8rem;
   color:var(--black);
   border-radius: .5rem;
}

.products .box-container .box .flex .price{
   font-size: 2rem;
   color:var(--red);
   margin-right: auto;
}

.form-container form{
   background-color: var(--white);
   padding:2rem;
   border-radius: .5rem;
   border:var(--border);
   box-shadow: var(--box-shadow);
   text-align: center;
   margin:0 auto;
   max-width: 50rem;
}

.form-container form h3{
   font-size: 2.5rem;
   text-transform: uppercase;
   color:var(--black);
}

.form-container form p{
   font-size: 2rem;
   color:var(--light-color);
   margin:1.5rem 0;
}

.form-container form .box{
   margin:1rem 0;
   background-color: var(--light-bg);
   padding:1.4rem;
   font-size: 1.8rem;
   color:var(--black);  
   width: 100%;
   border-radius: .5rem;
}

.about {
    width: 100%;
    min-height: auto;
    display: flex;
    align-items: center;      /* slides fill container vertically */
    justify-content: center;   /* center slides horizontally */
    padding: 2rem 0;
    box-sizing: border-box;
}

.about-header {
    text-align: center;
    padding-top: 2rem;
    margin-bottom: 2rem; /* space between header and slider */
}

.about-header .heading {
    font-size: 6.5rem;
    color: var(--black);
}

/* Slider container */
.about-slider {
    width: 100%;
    padding: 2rem 0;
    box-sizing: border-box;
}

/* Each slide */
.about-slider .swiper-slide {
    height: auto;
    min-height: auto;
    padding: clamp(1.5rem, 4vw, 6rem);
    display: flex;
    gap: 2rem;
    background-color: var(--white);
    border-radius: 0.5rem;
    box-shadow: var(--box-shadow);
    box-sizing: border-box;
    overflow: visible;
    align-items: center;       
    justify-content: space-between; 
}

/* Image and content stretch */
.about-slider .swiper-slide .image {
    order: -1;
    flex: 1 1 45%;               /* roughly half the width */
    max-width: 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 100%;            /* do not exceed slide height */
}
.about-slider .swiper-slide .content {
    order: 1;
    padding-top: 0;
    flex: 1 1 50%;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;     /* center vertically */
    overflow: hidden;            /* keep text inside box */
    max-height: 100%;            /* do not exceed slide height */
}

/* Image */
.about-slider .swiper-slide .image img {
    max-width: 100%;
    max-height: 100%;            /* contain image inside box */
    object-fit: contain;
}

/* Content */

.about-slider .swiper-slide .content L1 {
    align-items: flex-end;
    font-size: 6rem;
    margin-bottom: 1rem;
    color: var(--black);
}
.about-slider .swiper-slide .content L2 {
    align-items: flex-end;
    text-align: center;
    font-size: 1rem;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;    /* optional: clip long text */
    color: var(--light-color);

}
.about-slider .swiper-slide .content h3 {
    font-size: 6vh;
    margin-bottom: 1rem;
    color: var(--black);
}
.about-slider .swiper-slide .content p {
    text-align: center;
    font-size: 500px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;    /* optional: clip long text */
    color: var(--light-color);

}
.about-slider .swiper-slide .content .btn {

    margin-top: 1rem;
}

/* Navigation & pagination */
.swiper-button-next, .swiper-button-prev {
    color: var(--black);
}
.swiper-pagination-bullet-active {
    background-color: var(--black);
}

/* Responsive */
@media (max-width: 768px) {
    .about {
        min-height: auto;
        padding: 1rem;
    }

    .about-slider .swiper-slide {
        flex-direction: column;
        height: auto;
        padding: 1.5rem;      
        gap: 1.5rem;
        align-items: center;
    }

    .about-slider .swiper-slide .content {
        padding-top: 0;      
        max-height: none;
    }

    .about-slider .swiper-slide .image {
        max-height: 250px;   
    }

    .about-header .heading {
        font-size: 3rem;    
    }

    .about-slider .swiper-slide .content h3 {
        font-size: 5vh;
    }
}
.reviews .slide{
   padding:2rem;
   text-align: center;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: .5rem;
   border:var(--border);
   margin-bottom: 5rem;
   user-select: none;
}

.reviews .slide img{
   height: 10rem;
   width: 10rem;
   border-radius: 50%;
   margin-bottom: .5rem;
}

.reviews .slide p{
   padding:1rem 0;
   line-height: 2;
   font-size: 1.5rem;
   color:var(--light-color);
}

.reviews .slide .stars{
   display: inline-block;
   margin-bottom: 1rem;
   background-color: var(--light-bg);
   padding:1rem 1.5rem;
   border-radius: .5rem;
}

.reviews .slide .stars i{
   margin:0 .3rem;
   font-size: 1.7rem;
   color:var(--orange);
}

.reviews .slide h3{
   font-size: 2rem;
   color:var(--black);
}

.contact form{
   padding:2rem;
   text-align: center;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: .5rem;
   border:var(--border);
   max-width: 50rem;
   margin:0 auto;
}

.contact form h3{
   margin-bottom: 1rem;
   text-transform: capitalize;
   font-size: 2.5rem;
   color:var(--black);
}

.contact form .box{
   margin:1rem 0;
   width: 100%;
   background-color: var(--light-bg);
   padding:1.4rem;
   font-size: 1.8rem;
   color:var(--black);
   border-radius: .5rem;
}

.contact form textarea{
   height: 15rem;
   resize: none;
}

.search-form form{
   display: flex;
   gap:1rem;
}

.search-form form input{
   width: 100%;
   border:var(--border);
   border-radius: .5rem;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   padding:1.4rem;
   font-size: 1.8rem;
   color:var(--black);
}

.search-form form button{
   font-size: 2.5rem;
   height: 5.5rem;
   line-height: 5.5rem;
   background-color: var(--main-color);
   cursor: pointer;
   color:var(--white);
   border-radius: .5rem;
   width: 6rem;
   text-align: center;
}

.search-form form button:hover{
   background-color: var(--black);
}

.password-group {
    display: flex;
    flex-direction: column;
}

.input-group .box:focus + .password-rules {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}


.password-rules {
    position: relative;
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.password-rules p {
    position: relative;
    color: #e74c3c !important;
    margin: 0.3rem 0;
    padding-left: 2rem;
    font-size: 1.4rem;
    transition: color 0.3s ease;
    line-height: 1.4;
}

.password-rules p::before {
    position: absolute;
    left: 0;
    font-weight: bold;
    font-size: 1.2rem;
    color: inherit;
    transition: content 0.2s ease;
}

/* Default invalid state */
.password-rules p:not(.valid)::before {
    content: "✖";
}

/* Valid state */
.password-rules p.valid {
    color: #27ae60 !important;
}

.password-rules p.valid::before {
    content: "✔";
}

/* Responsive */
@media (max-width: 768px) {
    .password-rules p {
        padding-left: 1.6rem;
        font-size: 1.3rem;
    }
}




.wishlist-total{
   max-width: 50rem;
   margin:0 auto;
   margin-top: 3rem;
   background-color: var(--white);
   border:var(--border);
   border-radius: .5rem;;
   padding:2rem;
   text-align: center;
}

.wishlist-total p{
   font-size: 2.5rem;
   color:var(--black);
   margin-bottom: 2rem;
}

.wishlist-total p span{
   color:var(--red);
}

.shopping-cart .fa-edit{
   height: 4.5rem;
   border-radius: .5rem;
   background-color: var(--orange);
   width: 5rem;
   font-size: 2rem;
   color:var(--white);
   cursor: pointer;
}

.shopping-cart .fa-edit:hover{
   background-color: var(--black);
}

.shopping-cart .sub-total{
   margin:2rem 0;
   font-size: 2rem;
   color:var(--light-color);
}

.shopping-cart .sub-total span{
   color:var(--red);
}

.cart-total{
   max-width: 50rem;
   margin:0 auto;
   margin-top: 3rem;
   background-color: var(--white);
   border:var(--border);
   border-radius: .5rem;;
   padding:2rem;
   text-align: center;
}

.cart-total p{
   font-size: 2.5rem;
   color:var(--black);
   margin-bottom: 2rem;
}

.cart-total p span{
   color:var(--red);
}

.display-orders{
   text-align: center;
   padding-bottom: 0;
}

.display-orders p{
   display: inline-block;
   padding:1rem 2rem;
   margin:1rem .5rem;
   font-size: 2rem;
   text-align: center;
   border:var(--border);
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: .5rem;
}

.display-orders p span{
   color:var(--red);
}

.display-orders .grand-total{
   margin-top: 1.5rem;
   margin-bottom: 2.5rem;
   font-size: 2.5rem;
   color:var(--light-color);
}

.display-orders .grand-total span{
   color:var(--red);
}

.checkout-orders form{
   padding:2rem;
   border:var(--border);
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: .5rem;
}

.checkout-orders form h3{
   border-radius: .5rem;
   background-color: var(--black);
   color:var(--white);
   padding:1.5rem 1rem;
   text-align: center;
   text-transform: uppercase;
   margin-bottom: 2rem;
   font-size: 2.5rem;
}

.checkout-orders form .flex{
   display: flex;
   flex-wrap: wrap;
   gap:1.5rem;
   justify-content: space-between;
}

.checkout-orders form .flex .inputBox{
   width: 49%;
}

.checkout-orders form .flex .inputBox .box{
   width: 100%;
   border:var(--border);
   border-radius: .5rem;
   font-size: 1.8rem;
   color:var(--black);
   padding:1.2rem 1.4rem;
   margin:1rem 0;
   background-color: var(--light-bg);
}

.checkout-orders form .flex .inputBox span{
   font-size: 1.8rem;
   color:var(--light-color);
}
.orders .box-container {
   display: flex;
   flex-wrap: wrap;
   gap: 1.5rem;
   align-items: flex-start;
   justify-content: center; /* Add this line to center the boxes horizontally */
   text-align: center;
 }
 
 .orders .box-container {
   display: flex;
   flex-wrap: wrap;
   gap: 1.5rem;
   align-items: center; /* changed from flex-start to center */
   justify-content: center;
   text-align: center;
 }
 
 .orders .box-container .box {
   padding: 1rem 2rem;
   flex: 1 1 40rem;
   border: var(--border);
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: 0.5rem;
   text-align: center;
   display: flex; /* added to enable flexbox layout within each box */
   flex-direction: column; /* stack the content vertically */
   justify-content: center; /* center vertically */
   align-items: center; /* center horizontally */
 }
 
 .orders .box-container .box p {
   margin: 0.5rem 0;
   line-height: 1.8;
   font-size: 2rem;
   color: var(--light-color);
   text-align: center;
 }
 
 .orders .box-container .box p span {
   color: var(--main-color);
   text-align: center;
 }
 
 

.footer{
   background-color: var(--white);
   /* padding-bottom: 7rem; */
}

.footer .grid{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr));
   gap:1.5rem;
   align-items: flex-start;
}

.footer .grid .box h3{
   font-size: 2rem;
   color:var(--black);
   margin-bottom: 2rem;
   text-transform: capitalize;
}

.footer .grid .box a{
   display: block;
   margin:1.5rem 0;
   font-size: 1.7rem;
   color:var(--light-color);
}

.footer .grid .box a i{
   padding-right: 1rem;
   color:var(--main-color);
   transition: .2s linear;
}

.footer .grid .box a:hover{
   color:var(--main-color);
}

.footer .grid .box a:hover i{
   padding-right: 2rem;
}

.footer .credit{
   text-align: center;
   padding: .5rem .5rem;
   border-top: var(--border);
   font-size: 1rem;
   color:var(--black);
}

.footer .credit span{
   color:var(--main-color);
}


.row {
   background-image: url("images/about-bg.jpg");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
 }



@media (max-width:991px){

   html{
      font-size: 55%;
   }

}

@media (max-width:768px){

   #menu-btn{
      display: inline-block;
   }

   .header .flex .navbar{
      position: absolute;
      top:99%; left:0; right:0;
      border-top: var(--border);
      border-bottom: var(--border);
      background-color: rgb(255, 255, 255);
      transition: .2s linear;
      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
   }

   .header .flex .navbar.active{
      background-color: rgb(0, 0, 0);
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
   }

   .header .flex .navbar a{
      display: block;
      margin:2rem;
   }

   .home-bg .home .slide .content{
      text-align: center;
   }

   .home-bg .home .slide .content h3{
      font-size: 3rem;
   }

}

@media (max-width:450px){

   html{
      font-size: 50%;
   }

   .heading{
      font-size: 3rem;
   }

   .flex-btn{
      flex-flow: column;
      gap:0;
   }

   .quick-view form .row .image-container .sub-image img{
      width: 8rem;
   }

   .checkout-orders form .flex .inputBox{
      width: 100%;
   }

}





.container {
   display: flex;
   justify-content: space-between; /* Adjusts spacing between elements */
   align-items: flex-start; /* Aligns vertically */
   gap: 2rem;
   flex-wrap: wrap;

 }
 
 .content {
   flex-grow: 1; /* Takes up most of the space */
   padding-top: 235px; /* Adds some padding for readability */
   

 }
 
 .google-map {
   display: flex;
   align-items: flex-end;
   position: relative;
   padding-bottom: 60%; /* Aspect ratio for smaller map */
   height: 0;
   width: 70%; /* Adjusts width of the map */
   margin: 20px;
 }
 
 .google-map iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100% !important;
   height: 100% !important;
 }
 
 /* Optional: Adjust for smaller screens */
 @media (max-width: 768px) {
   .container {
     flex-direction: column; /* Stacks elements vertically on smaller screens */
   }
   
   .google-map {
     width: 100%; /* Takes full width on smaller screens */
     padding-bottom: 300px; /* Adjusts aspect ratio for portrait orientation */
   }
 }
 




.hint{
   text-align: left;
   font-size: 13px;
   color: #333;
}




.error {
   color: red;
   background-color: #f0b8bc;
   padding: 10px;
   border: 1px solid #b7797d;
}



.products .box-container {
   display: flex;
   gap: 2rem;
   padding: 2rem;
   max-width: 1400px;
   margin: 0 auto;
}

.products .box-container .sidebar {
   width: 250px;
   min-width: 250px;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: .5rem;
   padding: 2rem;
   position: sticky;
   top: 100px;
   height: fit-content;
}

.products .box-container .sidebar h3 {
   font-size: 2.2rem;
   color: var(--black);
   margin-bottom: 2rem;
   text-transform: capitalize;
   border-bottom: 2px solid var(--light-bg);
   padding-bottom: 1rem;
}

.products .box-container .sidebar .category-list li a {
   display: block;
   font-size: 1.6rem;
   color: var(--light-color);
   padding: 1rem;
   margin-bottom: 0.5rem;
   border-radius: 0.3rem;
   transition: all 0.3s ease;
}

.products .box-container .sidebar .category-list li a:hover,
.products .box-container .sidebar .category-list li a.active {
   background-color: var(--light-bg);
   color: var(--main-color);
   padding-left: 1.5rem;
}

.products .box-container .products-container {
   flex: 1;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   gap: 2rem;
   align-items: start;
}








/* This CSS should be added to your existing style.css file */

.products .box-container {
   display: flex;
   gap: 2rem;
   padding: 2rem;
   max-width: 1400px;
   margin: 0 auto;
}

/* Sidebar styles */
.products .box-container .sidebar {
   width: 250px;
   min-width: 250px;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: .5rem;
   padding: 2rem;
   position: sticky;
   top: 100px;
   height: fit-content;
}

.products .box-container .sidebar h3 {
   font-size: 1.8rem;
   color: var(--black);
   margin-bottom: 1.5rem;
   border-bottom: 1px solid var(--light-bg);
   padding-bottom: 1rem;
}

/* Filter styles */
.filter-header {
   display: flex;
   align-items: center;
   margin-bottom: 1.5rem;
   font-size: 1.8rem;
   font-weight: bold;
}

.filter-header i {
   margin-right: 1rem;
}

.filter-section {
   margin-bottom: 2rem;
}

.filter-title {
   font-size: 1.6rem;
   margin-bottom: 1rem;
   font-weight: bold;
}

.filter-options label {
   display: flex;
   align-items: center;
   margin-bottom: 0.8rem;
   font-size: 1.4rem;
   cursor: pointer;
}

.filter-options input[type="checkbox"] {
   margin-right: 1rem;
   width: 1.6rem;
   height: 1.6rem;
}

.filter-count {
   color: #888;
   font-size: 1.3rem;
   margin-left: 0.5rem;
}

/* Color options */
.color-option {
   display: inline-block;
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 50%;
   margin-right: 0.8rem;
   cursor: pointer;
   border: 1px solid #ddd;
   transition: transform 0.2s;
}

.color-option:hover {
   transform: scale(1.1);
}

.color-blue { background-color: blue; }
.color-brown { background-color: #8B4513; }
.color-black { background-color: black; }

/* Product grid */
.products-container {
   flex: 1;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   gap: 2rem;
}

/* Product cards */
.products .box-container .box {
   position: relative;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: .5rem;
   padding: 2rem;
   overflow: hidden;
   transition: transform 0.3s;
}

.products .box-container .box:hover {
   transform: translateY(-5px);
}

/* Product title */
.product-title {
   font-size: 1.6rem;
   margin: 1rem 0;
   color: var(--black);
}

/* Product badges */
.product-badges {
   position: absolute;
   bottom: 0;
   left: 0;
   display: flex;
   gap: 0.5rem;
   padding: 1rem;
}

.badge {
   padding: 0.5rem 1rem;
   font-size: 1.2rem;
   color: white;
   text-transform: uppercase;
   font-weight: bold;
}

.badge-new {
   background-color: #8B7846;
}

.badge-exclusive {
   background-color: black;
}

.badge-bestseller {
   background-color: #8B7846;
}

/* Product status */
.product-status {
   font-size: 1.4rem;
   color: #e74c3c;
   margin-top: 0.5rem;
}

/* Product price */
.product-price {
   font-size: 1.6rem;
   color: #333;
   font-weight: bold;
   margin-top: 0.5rem;
}

/* Sort dropdown */
.sort-container {
   display: flex;
   justify-content: flex-end;
   margin-bottom: 2rem;
   padding: 0 2rem;
}

.sort-dropdown {
   padding: 0.8rem 1.5rem;
   border: 1px solid #ddd;
   font-size: 1.4rem;
   cursor: pointer;
   background-color: white;
}

/* Main title */
.main-title {
   font-size: 2.8rem;
   color: #000;
   margin: 2rem;
   font-weight: bold;
}

/* Wishlist button */
.wishlist-btn {
   position: absolute;
   top: 1rem;
   right: 1rem;
   font-size: 2rem;
   color: var(--black);
   z-index: 10;
}

.wishlist-btn:hover {
   color: #e74c3c;
}

/* Responsive design */
@media (max-width: 992px) {
   .products .box-container {
      flex-direction: column;
   }
   
   .products .box-container .sidebar {
      width: 100%;
      min-width: auto;
      margin-bottom: 2rem;

      /* 🔥 disable sticky */
      position: static;
      top: auto;
   }

   .products-container {
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   }
}

@media (max-width: 576px) {
   .products-container {
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   }
   
   .product-badges {
      flex-direction: column;
   }
}







/* Filter Sidebar Styles */
.filters-container {
   width: 100%;
   max-width: 280px;
   font-family: 'Nunito', sans-serif;
 }
 
 .filters-title {
   display: flex;
   align-items: center;
   font-size: 1.8rem;
   font-weight: 600;
   color: #001a33;
   margin-bottom: 2rem;
   padding-bottom: 0.8rem;
   border-bottom: 1px solid #eee;
 }
 
 .filters-title i {
   margin-right: 0.8rem;
 }
 
 .filter-group {
   margin-bottom: 2.5rem;
 }
 
 .filter-group-title {
   font-size: 1.5rem;
   font-weight: 600;
   color: #333;
   margin-bottom: 1.2rem;
 }
 
 /* Checkbox styling */
 .filter-option {
   display: flex;
   align-items: center;
   margin-bottom: 0.8rem;
   cursor: pointer;
 }
 
 .filter-checkbox {
   appearance: none;
   width: 1.6rem;
   height: 1.6rem;
   border: 1px solid #ccc;
   background-color: #fff;
   border-radius: 2px;
   margin-right: 1rem;
   position: relative;
   cursor: pointer;
 }
 
 .filter-checkbox:checked {
   background-color: #000;
   border-color: #000;
 }
 
 .filter-checkbox:checked::after {
   content: '';
   position: absolute;
   width: 0.4rem;
   height: 0.8rem;
   border: solid white;
   border-width: 0 2px 2px 0;
   top: 0.2rem;
   left: 0.5rem;
   transform: rotate(45deg);
 }
 
 .filter-label {
   font-size: 1.4rem;
   color: #333;
 }
 
 .filter-count {
   margin-left: 0.5rem;
   font-size: 1.3rem;
   color: #777;
 }
 
 /* Color filter styling */
 .color-options {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 0.8rem;
   margin-top: 1rem;
 }
 
 .color-option {
   width: 2.8rem;
   height: 2.8rem;
   border-radius: 50%;
   cursor: pointer;
   transition: transform 0.2s ease;
 }
 
 .color-option:hover {
   transform: scale(1.1);
 }
 
 .color-option.selected {
   outline: 2px solid #000;
   outline-offset: 2px;
 }
 
 /* Color options */
 .color-brown { background-color: #8B4513; }
 .color-black { background-color: #000000; }
 .color-blue { background-color: #0000FF; }
 .color-purple { background-color: #663399; }
 .color-red { background-color: #FF0000; }
 .color-yellow { background-color: #FFFF00; }
 .color-beige { background-color: #D2B48C; }
 .color-green { background-color: #008000; }
 .color-pink { background-color: #FF69B4; }
 .color-white { background-color: #FFFFFF; border: 1px solid #ddd; }
 .color-gold { background-color: #B8860B; }
 .color-orange { background-color: #FFA500; }
 .color-lightblue { background-color: #ADD8E6; }
 .color-darkbrown { background-color: #5D4037; }
 .color-brightorange { background-color: #FF7F00; }
 .color-tan { background-color: #D2B48C; }
 .color-sand { background-color: #C2B280; }
 .color-olive { background-color: #808000; }
 .color-lighttan { background-color: #E6D2B5; }
 .color-darkbrown { background-color: #3E2723; }
 
 /* Price filter styling */
 .price-filter .filter-option {
   margin-bottom: 1rem;
 }