html{
      margin: 0;
      padding: 0;
      overflow-x: hidden;
      scroll-behavior: smooth;
    }

    body{
      margin:0;
      font-family:'Poppins', sans-serif;
      background:#FFF6E5;
      color:#2b1b1b;
      padding-bottom: 90px;
    }

    h1,h2,h3{
      font-family:'Playfair Display', serif;
    }

    /* HEADER */
    .premium-nav{
      position: sticky;
      top: 0;
      z-index: 1000;
      background: linear-gradient(145deg, #0b0b0b, #1a1206);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 20px;
      backdrop-filter: blur(8px);
      border-bottom: 1px solid rgba(212, 175, 55, 0.3);
      box-shadow: 0 6px 20px rgba(0,0,0,0.8);
    }

    .nav-left{
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .logo{
      width: 55px;
      height: 55px;
      border-radius: 12px;
      object-fit: cover;
      border: 2px solid #D4AF37;
      box-shadow: 0 4px 10px rgba(0,0,0,0.5);
      position: relative;
      overflow: hidden;
      background: linear-gradient(145deg, #a37e2c, #f7e7a6);
    }

    .logo::after{
      content: "";
      position: absolute;
      top: -80%;
      left: -80%;
      width: 200%;
      height: 200%;
      background: linear-gradient(120deg,transparent 40%, rgba(255, 215, 0, 0.6)50%, transparent 60%);
      animation: shine 3s infinite linear;
    }
    .logo:hover{
      filter: drop-shadow(0 0 15px #d4af37);
    }

    @keyframes shine {
      0% {
        transform: translateX(-100%);
      }
      100%{
        transform: translateX(100%);
      }
    }

    .nav-left:hover .logo{
      transform: scale(1.08);
      transition: 0.3s ease;
      box-shadow: 0 0 18px #D4AF37;
    }
    .brand-name h1{
      /*background: linear-gradient(45deg, #ffeaa7, #D4AF37);*/
      color: transparent;
      color: #f5e6c8;
      font-weight: 900;
      letter-spacing: 2px;
      opacity: 0.8;
    }
    .cart-icon{
      font-size: 22px;
      cursor: pointer;
      color: white;
    }
    #header-cart-count{
      background: #D4AF37;
      color: #2b0f0f;
      padding: 2px 8px;
      border-radius: 50%;
      font-size: 12px;
      margin-left: 5px;
      font-weight: bold;
    }


    header{
      background:#4B2E2E;
      color:#D4AF37;
      padding:20px 40px;
      display:flex;
      justify-content:space-between;
      align-items:center;
    }

    nav a{
      color:#FFF6E5;
      margin-left:20px;
      text-decoration:none;
      font-weight:500;
    }

    nav a:hover{
      color:#D4AF37;
    }

    /* HERO SECTION */
    .hero{
      background-image:url("images/Cover.jpg");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      height:80vh;
      display:flex;
      align-items:center;
      padding:0 10%;
      color:white;
      position:relative;
    }

    .hero::after{
      content:"";
      position:absolute;
      top:0;left:0;
      width:100%;height:100%;
      background:rgba(0,0,0,0.6);
    }

    .hero-text{
      position:relative;
      z-index:2;
      max-width:600px;
    }

    .hero h1{
      font-size:48px;
      margin-bottom:10px;
      color:#D4AF37;
    }

    .hero p{
      font-size:18px;
      margin-bottom:30px;
    }

    .btn{
      font-size: 18px;
      border: none;
      border-radius: 10%;
      background:linear-gradient(145deg, #e6c768, #b8932d);
      box-shadow: 
          3px 3px 6px rgba(0,0,0,0.2),
          -2px -2px 5px rgba(255, 255, 255, 0.4);
      color:#4B2E2E;
      cursor:pointer;
      font-weight:bold;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: 0.2s;
    }

    .btn:active{
      transform: scale(0.9);
      box-shadow: inset 0 0 4px rgba(0,0,0,0.8);
    }

    .btn:hover{
      background:#b8952d;
    }

    /* WHY SECTION */
    .why{
      padding:60px 10%;
      text-align:center;
    }

    .why-cards{
      display:flex;
      justify-content:space-between;
      margin-top:40px;
      flex-wrap:wrap;
      gap:25px;
    }

    .why-card{
      background:white;
      padding:30px;
      border-radius:15px;
      width:30%;
      min-width:250px;
      box-shadow:0 10px 20px rgba(0,0,0,0.05);
    }

    .why-card span{
      font-size:40px;
    }
    .price {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;/*20*/
      margin: 8px 0;
      background: rgba(0,0,0,0.4);
      padding: 6px 10px;
      border-radius: 10px;
      color: #f7e7a6;
      font-size: 14px;
    }

    .price span{
      flex: 1;
      gap:5px;
      font-size: 13px;
    }

    .price span[id^="qty"]{
    min-width: 20px;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    display: inline-block;
  }
    /* BEST SELLERS */
    .products{
      padding:60px 20px;
      background: linear-gradient(135deg, #4B2E2E,#8b5a2b);
      text-align:center;
    }

    .product-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
      gap:30px;
      padding: 25px;
      margin-top:40px;
    }
    .product-card{
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(12px);
      border-radius: 20px;
      padding: 20px;
      text-align: center;
      box-shadow: 0 8px 32px rgba(0,0,0,0.25);
      border: 1px solid rgba(212, 175, 65, 0.7);
      transition:all 0.4s ease;
     /* position: relative;*/
      overflow: hidden;
    }

    .product-card::before{
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 20px;
      background: linear-gradient(120deg, rgba(255, 255, 255, 0.15), transparent, rgba(212, 175, 55, 0.25));
      pointer-events: none;
    }

    .product-card:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 0px 40px rgba(212,175,55,0.7);
    }

     .product-card img{
      border: 2px solid rgba(212, 175, 55, 0.6);
      padding: 3px;
      background: #000;
      width:100%;
      height:200px;
      object-fit:cover;
      border-radius:16px;
      margin-bottom: 10px;
      box-shadow: 0 6px 14px rgba(0,0,0,0.6);
    }

    .price{
      color:#D4AF37;
      font-weight:bold;
      font-size:18px;
      border: 1px solid rgba(212, 175, 55, 0.3);
      background: rgba(0,0,0,0.7);
    }

    

    /* ABOUT */
    .about{
      padding:70px 15%;
      text-align:center;
      line-height:1.8;
    }

    /* FOOTER */
    footer{
      background:#4B2E2E;
      color:#FFF6E5;
      padding:40px 10%;
      text-align:center;
    }

    footer h3{
      color:#D4AF37;
    }

    footer a{
      color:#D4AF37;
      text-decoration:none;
      font-weight:500;
    }
    .cart-bar{
       position: fixed;
       bottom: 0;
       left: 0;
       width: 100%;
       padding: 15px;
       cursor: pointer;
       border-radius: 30px;
       background: #4B2E2E;
       color: gold;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       z-index: 9998;
       text-align: center;
      /* animation: glow 2s infinite alternate;*/
    }
   
    #cartPanel{
      position: fixed;
      bottom: -100;
      width: 100%;
      left:0;
      height: 70vh;
      background:#fff;
      box-shadow:  0 -5px 15px rgba(0,0,0,0.3);
      z-index: 9999;
      transition:right 0.4s ease;
      padding: 20px;
      overflow-y: auto;
    }

    #cartPanel button{
      font-size: 18px;
      border: none;
      border-radius: 10%;
      background:linear-gradient(145deg, #e6c768, #b8932d);
      box-shadow: 
          3px 3px 6px rgba(0,0,0,0.2),
          -2px -2px 5px rgba(255, 255, 255, 0.4);
      color:#4B2E2E;
      cursor:pointer;
      font-weight:bold;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: 0.2s;
    }
    /*Right- side buttons*/
    .cart-qty-box{
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .cart-qty-box button{
      font-size: 18px;
      border: none;
      border-radius: 10%;
      background:linear-gradient(145deg, #e6c768, #b8932d);
      box-shadow: 
          3px 3px 6px rgba(0,0,0,0.2),
          -2px -2px 5px rgba(255, 255, 255, 0.4);
      color:#4B2E2E;
      cursor:pointer;
      font-weight:bold;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: 0.2s;
    }

    .cart-qty{
      font-size: 18px;
      font-weight: bold;
      width: 32px;
      text-align: center;
    }

    #cartItems div button{
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: none;
      background: #d4af37;
      color: #4B2E2E;
      font-weight: bold;
      margin: 5px;
        
    }
    #emptyMsg{
      color: gray;
      margin-top: 10px;
    }
    #customerName, #customerPhone{
      width: 100%;
      padding: 10px;
      margin-top: 10px;
      border-radius: 5PX;
      border: 1px solid #ccc;
    }
    #customerAddress{
      width: 100%;
      padding: 10px;
      margin-top: 10px;
      border-radius: 5PX;
      border: 1px solid #ccc;
      height: 80px;
    }

    @keyframes glow{
      from {box-shadow: 0 0 10px #D4AF37;}
      to {box-shadow: 0 0 30px #ffcc00;}
    }