<style>
    * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

    :root {
      color-scheme: light;
    }

    .force-white {
      background-color: #ffffff !important;
      color: #000000 !important;
      -webkit-text-fill-color: #000000;
    }

    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      overflow-x: hidden;
    }

    body {
      font-family: 'Inter', sans-serif;
      background: #ffffff;
      color: #1a1a1a;
      display: flex;
      justify-content: center;
      flex-direction: column; 
      align-items: center;
    }

    /* ---------- HEADER ---------- */
    .site-wrapper {
      max-width: 1000px;
      width: 100%;
      background: #ffffff;
    }

    header {
      background: #ffffff;
      padding: 28px 80px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #e5e5e5;
    }

    .logo {
      font-family: 'Playfair Display', serif;
      font-size: 28px;
      font-weight: 400;
      letter-spacing: -1px;
    }

    nav a {
      margin-left: 32px;
      text-decoration: none;
      color: #777;
      font-size: 14px;
    }

    /* ---------- HERO ---------- */
    .hero {
      background: #ffffff;
      padding: 120px 80px 100px;
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 80px;
      align-items: center;
      position: relative; /* ADD THIS */
    }

    .hero-text {
      padding-top: 30px; /* reserves space so text doesn’t move */
    }
   .hero-text img.icon {
      width: 24px;          /* icon size */
      height: 24px;
      margin-right: 6px;
      vertical-align: middle;
    }

    .hero-logo-absolute {
      position: absolute;
      top: 50px;
      left: -120px;

    }

    .hero-logo-absolute img {
      width: 740px;   /* increase freely */
      height: auto;
      left: 0;
    }

    .hero-text h1 {
      font-family: 'Playfair Display', serif;
      font-size: 72px;
      font-weight: 400;
      line-height: 1;
      margin-bottom: 24px;
    }

    .hero-text p {
      color: #777;
      max-width: 420px;
      margin-bottom: 32px;
    }

    .hero-text .btn {
      display: inline-block;
      padding: 10px 24px;
      border: 1px solid #000;
      text-decoration: none;
      color: #000;
      font-size: 14px;
      border-radius: 20px;
      z-index: 10;
      cursor: pointer;
      position: relative;
      margin-top: 10px;
    }

    .hero-image {
      display: flex;
      justify-content: flex-start; /* force left */
      align-items: flex-start;
    }

    .hero-image img {
      display: block;
      width: 100%;
      max-width: 100%;
    }

    /* ---------- PRODUCTS ---------- */
    .products {
      background: #ffffff;
      padding: 0;
    }

    .products-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr); /* 4 items per row */
      gap: 20px;
    }

    .product-card {
      padding: 12px;
      max-width: 200px; /* adjust as needed */
      background: #fff;
      text-align: center;
    }

    .product-card img {
      width: 100%;
      max-width: 150px;
      margin-bottom: 12px;
      border-radius: 8px;
      background: #eaeaea;
    }

   .shipping-banner {
      position: relative;
      width: 100%;
      height: auto;              /* 🔑 prevents full height */
      min-height: unset;
      max-height: unset;

      display: block;            /* 🔑 avoid flex inheritance */
      background-color: #f7efe9;
      color: #3a2f2f;

      text-align: center;
      padding: 10px 16px;

      font-family: 'Inter', sans-serif;
      font-size: 14px;
      font-weight: 500;
      line-height: 1.4;
    }

    /* Optional: make it slightly smaller on mobile */
    @media (max-width: 768px) {
      .shipping-banner {
        font-size: 13px;
        padding: 8px 12px;
      }
    }

    @media (max-width: 1200px) {
      .products-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 items on smaller screens */
      }
    }

    @media (max-width: 900px) {
      .products-grid {
        grid-template-columns: repeat(3, 1fr); /* 2 items on tablet */
      }
    }

    .product-card h3 {
      font-weight: 400;
      margin-bottom: 4px;
    }
    .product-card h5 {
      margin-top: 10px;
    }

    .product-card span {
      font-size: 14px;
      color: #777;
    }

    .product-section {
      max-width: 1000px;
      margin: 10px auto;
      padding: 0 20px;
    }
    .product-section h1 {
      font-family: 'Playfair Display', serif;
      font-size: 36px;
      font-weight: 400;
      margin-bottom: 30px; /* spacing below heading */
      text-align: left;
    }

   .product-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap; /* stack on small screens */
     margin-bottom: 20px;
   }
   
   .product-header h1 {
     margin: 0;
     font-size: 36px;
     font-family: 'Playfair Display', serif;
   }
   
   .product-filters {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-top: 10px; /* for mobile spacing */
   }

   .filter-select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;

      padding: 8px 14px 8px 36px; /* ⬅ left padding increased */
      font-size: 14px;
      border-radius: 20px;
      border: 1px solid #ccc;
      background-color: #fff;

      background-image: url("filter.svg");
      background-repeat: no-repeat;
      background-position: left 12px center; /* ⬅ icon moved left */
      background-size: 16px;

      cursor: pointer;
    }


    /* ---------- FOOTER ---------- */
    footer {
      background: #ffffff;
      padding: 80px;
      border-top: 1px solid #e5e5e5;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr); /* 3 equal columns */
      gap: 40px; /* smaller, consistent gap */
      padding-bottom: 20px;
    }

    footer {
      background: #ffffff;
      padding: 40px 80px;
      border-top: 1px solid #e5e5e5;
      text-align: left;
    }

    footer h4 {
      font-size: 12px;
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-bottom: 16px;
    }

    footer a {
      display: block;
      font-size: 14px;
      text-decoration: none;
      color: #777;
      margin-bottom: 6px;
    }

    footer .copyright {
      text-align: center;
      font-size: 14px;
      color: #aaa;
      margin-top: 20px;
    }

    @media (max-width: 900px) {
      header, .hero, section.products, footer {
        padding: 40px 20px;
      }
      .hero {
        grid-template-columns: 1fr;
      }
    }
    .hero-logo img {
      width: 560px;   /* adjust as needed */
      height: auto;
      margin-bottom: 24px;
      z-index: -10
    }
    .order-btn {
      display: inline-block;
      align-items: center;   /* vertically centers icon + text */
      justify-content: center;
      margin-top: 10px;
      text-decoration: none;
      color: #000;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
      line-height: 1;        /* ensure text doesn't shift */
    }

    .order-btn:hover {
      transform: scale(0.95);
    }

    .order-btn img.icon, 
    .order-btn svg {
      width: 24px;          /* icon size */
      height: 24px;
      margin-right: 6px;
      margin-top: 6px;
      vertical-align: middle; /* key fix for alignment */
    }

    .share-design {
      background: #f7f7f7;   /* light background */
      text-align: center;
      padding: 40px 20px;
      margin-top: 30px;
    }

    .share-design p {
      font-size: 18px;
      margin-bottom: 20px;
      color: #333;
    }

    .whatsapp-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 12px 24px;
      background: linear-gradient(135deg, #8B7765, #6B8E23); /* brownish-green */
      color: #fff;
      text-decoration: none;
      border-radius: 30px;
      font-size: 16px;
      transition: background 0.3s;
    }

    .whatsapp-btn:hover {
      background: linear-gradient(135deg, #7A654F, #556B2F);
    }

    .whatsapp-btn img.icon {
      width: 20px;
      height: 20px;
      margin-right: 10px;
      vertical-align: middle;
      display: inline-block;
    }

    .instagram-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 12px 24px;
      background: linear-gradient(
        135deg,
        #833AB4,
        #FD1D1D,
        #FCAF45
      );
      color: #fff;
      text-decoration: none;
      border-radius: 30px;
      font-size: 16px;
      transition: background 0.3s;
    }

    .instagram-btn:hover {
      background: linear-gradient(
        135deg,
        #6f2dbd,
        #e11d48,
        #f59e0b
      );
    }

    .instagram-btn img.icon {
      width: 20px;
      height: 20px;
      margin-right: 10px;
      vertical-align: middle;
      display: inline-block;
      filter: brightness(0) invert(1);
    }



    .about-us {
      display: grid;
      grid-template-columns: 1fr 1fr; /* 2 columns: image + text */
      gap: 60px;
      align-items: center;
      padding: 10px 20px;
      background: #ffffff;
    }

    .about-us .about-image img {
      width: 100%;
      max-width: 500px;
      height: auto;
      border-radius: 12px;
    }

    .about-us .about-text h2 {
      font-family: 'Playfair Display', serif;
      font-size: 36px;
      margin-bottom: 24px;
    }

    .about-us .about-text p {
      font-size: 16px;
      line-height: 1.6;
      color: #555;
      margin-bottom: 16px;
    }

    /* Responsive */
    @media (max-width: 900px) {
      .about-us {
        grid-template-columns: 1fr; /* stack image + text */
        text-align: center;
      }

      .about-us .about-text h2 {
        font-size: 28px;
      }

      .about-us .about-image img {
        max-width: 100%;
        margin: 0 auto;
      }
    }
    .faq {
      max-width: 1000px;
      margin: 50px auto;
      padding: 0 20px;
    }

    .faq h2 {
      font-family: 'Playfair Display', serif;
      font-size: 36px;
      margin-bottom: 30px;
      text-align: left;
    }

    .faq-item {
      margin-bottom: 10px;
      border-bottom: 1px solid #ddd;
    }

    .faq-item:nth-child(odd) {
      background: #f7f7f7; /* light grey for odd items */
      padding: 10px 15px;
      border-radius: 8px;
    }

    .faq-item:nth-child(even) {
      background: #ffffff; /* white for even items */
      padding: 10px 15px;
      border-radius: 8px;
    }

    /* Keep existing styles for question and answer */
    .faq-question {
      background: none;
      border: none;
      width: 100%;
      text-align: left;
      font-size: 16px;
      padding: 12px 0;
      cursor: pointer;
      outline: none;
      font-weight: 500;
      transition: color 0.3s;
    }

    .faq-question:hover {
      color: #6B8E23; /* brownish-green highlight */
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
      font-size: 14px;
      color: #555;
      padding-bottom: 0;
    }

    .faq-answer p {
      margin: 8px 0;
    }

    .craft-process {
      background: #ffffff;
      padding: 80px 20px;
    }

    .craft-container {
      display: grid;
      grid-template-columns: 1fr 2fr 1fr; /* left image, center text, right image */
      align-items: center;
      gap: 40px;
    }

    .craft-image img {
      width: 100%;
      border-radius: 12px;
      height: auto;
    }

    .craft-text {
      text-align: center;
    }

    .craft-text h2 {
      font-family: 'Playfair Display', serif;
      font-size: 36px;
      margin-bottom: 24px;
    }

    .craft-text p {
      font-size: 16px;
      line-height: 1.6;
      color: #555;
      margin-bottom: 16px;
    }

    /* Responsive for tablets */
    @media (max-width: 900px) {
      .craft-container {
        grid-template-columns: 1fr;
        text-align: center;
      }

      .craft-image {
        margin-bottom: 24px;
      }

      .craft-text h2 {
        font-size: 28px;
      }
    }

    header nav .order-now-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 16px;
      margin-left: 24px; /* space from other links */
      background: linear-gradient(135deg, #5c4033, #2e1f1c); /* dark brown gradient */
      color: #fff;
      text-decoration: none;
      border-radius: 20px;
      font-size: 14px;
      transition: background 0.3s;
    }

    header nav .order-now-btn:hover {
      background: linear-gradient(135deg, #3e2c21, #1a110d);
    }

    header nav .instagram-order-now-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 16px;
      margin-left: 24px; /* space from other links */
      background: linear-gradient(
        135deg,
        #833AB4,
        #FD1D1D,
        #FCAF45
      );       
      color: #fff;
      text-decoration: none;
      border-radius: 20px;
      font-size: 14px;
      transition: background 0.3s;
    }

    header nav .instagram-order-now-btn:hover {
      background: linear-gradient(
        135deg,
        #6f2dbd,
        #e11d48,
        #f59e0b
      );
    }

    header nav .order-now-btn img.icon,
    .instagram-order-now-btn img.icon {
      width: 16px;
      height: 16px;
      margin-right: 6px;
      vertical-align: middle;
      display: inline-block;
    }

    header nav .order-now-btn img {
      filter: brightness(0) invert(1);
    }

   .instagram-order-now-btn img.icon 
    {
      filter: brightness(0) invert(1);
    }

    .follow-us .social-link {
      display: flex;
      align-items: center; /* vertical alignment */
      gap: 8px;           /* space between icon and text */
      margin-top: 7px;
    }

    .follow-us .social-link img.icon {
      width: 20px;
      height: 20px;
      display: block;      /* removes inline spacing issues */
    }
    .social-link-whatsapp img.icon {
      width: 24px;  /* smaller width */
      height: 24px; /* smaller height */
      display: block; /* ensures proper alignment */
    }

    /* =======================
   MOBILE FIXES
======================= */

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    padding: 60px 20px;
    gap: 30px;
  }
  .hero-logo-absolute {
    position: relative;
    top: 0;
    left: 0;
    margin-bottom: 20px;
    text-align: center;
  }

  .hero-logo-absolute img {
    width: 100%;
    max-width: 320px;
    margin: 0 auto -120px; 
  }
  .hero-text {
    padding-top: 0;
    text-align: center;
  }

  .hero-text p {
    max-width: 100%;
  }

  .hero-image img {
    max-width: 100%;
  }
}
@media (max-width: 768px) {

  body {
    justify-content: flex-start;
  }

  /* HEADER */
    header {
      padding: 20px;
      display: flex;
      align-items: center;
  }

  .logo {
    font-size: 22px;
  }

  nav {
     display: flex;
     flex-direction: column;
     gap: 2px;
  }

  nav .order-now-btn, .instagram-order-now-btn  {
    padding: 6px 12px;
    font-size: 13px;
  }

  /* HERO */
  .hero {
    grid-template-columns: 1fr;
    padding: 60px 20px;
    gap: 30px;
  }

  .hero-logo-absolute {
    position: relative;
    top: 0;
    left: 0;
    margin-bottom: 20px;
    text-align: center;
  }

  .hero-logo-absolute img {
    width: 100%;
    max-width: 320px;
    margin: 0 auto -120px; 
  }

  .hero-text {
    padding-top: 0;
    text-align: center;
  }

  .hero-text p {
    max-width: 100%;
  }

  .hero-image img {
    max-width: 100%;
  }

  /* ABOUT US */
  .about-us {
    grid-template-columns: 1fr;
    padding: 40px 20px;
    text-align: center;
  }

  /* PRODUCTS */
  .product-section {
    padding: 10px 10px;
  }

  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    justify-items: center;
  }

  .product-header {
    flex-direction: column;      /* stack heading & filter vertically */
    align-items: center;         /* center horizontally */
    gap: 12px;                   /* spacing between heading & filter */
    text-align: center;           /* optional for heading */
  }

  .product-header h1 {
    margin: 0;                   /* remove default margins */
  }

  .product-filters {
    justify-content: center;     /* center the dropdown */
    width: 100%;                 /* optional: make dropdown responsive */
    max-width: 200px;            /* optional: limit width */
  }

  .product-card {
    width: 100%;
    max-width: none;
    text-align: center;
  }

  .product-card .img {
    width: 100%;
    max-width: 150px;
    height: auto;
  }

  /* SHARE DESIGN */

  .share-design {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px; /* 👈 space between WhatsApp & Instagram */
  }

  .share-design p {
    font-size: 16px;
  }

  /* CRAFT PROCESS */
  .craft-container {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .craft-text {
    text-align: center;
  }

  /* FAQ */
  .faq {
    padding: 40px 20px;
  }

  /* FOOTER */
  footer {
    padding: 40px 20px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  footer h4 {
    margin-bottom: 10px;
  }

  footer .copyright {
    font-size: 13px;
  }
}
.product-id {
  display: block;
  font-size: 12px;
  color: #777;
  margin: 4px 0;
}

.product-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
  overflow-y: auto; 
  padding: 20px 0;  
}

.product-modal.active {
  display: flex;
}

.modal-content {
  background: #fff;
  width: 90%;
  max-width: 900px;
  border-radius: 14px;
  padding: 20px;
  position: relative;
  max-height: 90vh;     /* ✅ KEY FIX */
  overflow: hidden;    /* prevents double scroll */
}

.modal-close {
  position: absolute;
  right: 20px;
  top: 12px;
  font-size: 28px;
  cursor: pointer;
}

.modal-body {
  display: flex;
  gap: 30px;
  overflow-y: auto; 
  max-height: calc(90vh - 10px);
}

.modal-left img {
  width: 300px;
  border-radius: 10px;
}

.color-options {
  margin-top: 15px;
  display: flex;
  gap: 10px;
}

.color-options span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #ccc;
}

.modal-right .price {
  font-size: 20px;
  margin: 10px 0;
}

.modal-actions {
  margin-top: 20px;
  display: flex;
  gap: 12px;
}

/* Mobile */
@media (max-width: 768px) {
  .modal-content {
    width: 95%;
    max-height: 92vh;
  }

  .modal-body {
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }

  .modal-left img {
    width: 100%;
    max-width: 280px;
  }

  .modal-actions {
    margin-top: 2px;
    display: flex;
  }

}
