/* ===================================================
   Global Reset & Variables
   =================================================== */
   *,
   *::before,
   *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
   }
   
   :root {
     --color-dark:   #333;
     --color-light:  #fff;
     --color-cream:  #fffefa;
     --color-accent: #b08b4f;
     --color-border: #eee;
     --font-base:    16px;
   }
   
   /* Base */
   html {
     font-size: var(--font-base);
     line-height: 1.5;
   }
   body {
     font-family: sans-serif;
     color: var(--color-dark);
     background-color: var(--color-light);
     display: flex;
     flex-direction: column;
     min-height: 100vh;
   }
   main {
     flex: 1;
   }
   
   /* Utility */
   .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 1rem;
   }
   
   /* Buttons */
   .btn {
     display: inline-block;
     text-decoration: none;
     text-align: center;
     border: none;
     cursor: pointer;
     border-radius: 4px;
     transition: opacity 0.2s ease;
   }
   .btn-primary {
     background-color: var(--color-accent);
     color: var(--color-light);
     padding: 0.75rem 1.5rem;
   }
   .btn-primary:hover {
     opacity: 0.9;
   }
   .btn-secondary {
     background-color: var(--color-dark);
     color: var(--color-light);
     padding: 0.5rem 1rem;
   }
   .btn-secondary:hover {
     opacity: 0.9;
   }
   
   /* ===================================================
      Hero Section
      =================================================== */
   .hero {
     background: url('../asset/test.png') center/cover no-repeat;
     color: var(--color-dark);
     text-align: center;
     padding: 12rem 1rem;
   }
   .hero h2 {
     font-size: 2.5rem;
     margin-bottom: 1rem;
   }
   .hero p {
     font-size: 1.125rem;
     margin-bottom: 2rem;
   }
   .hero .btn-primary {
     font-size: 1rem;
   }
   
   /* ===================================================
      About / Brands / Categories / Newsletter Sections
      =================================================== */
   .about-us,
   .brands,
   .categories,
   .newsletter {
     background-color: var(--color-cream);
     padding: 4rem 1rem;
   }
   .about-us h3,
   .brands h3,
   .categories h3,
   .newsletter h3 {
     font-size: 1.75rem;
     margin-bottom: 1rem;
     text-align: center;
   }
   
   /* Brands Logos */
   .brand-logos {
     display: flex;
     flex-wrap: wrap;
     gap: 2rem;
     justify-content: center;
     align-items: center;
     margin-top: 2rem;
   }
   .brand-logos img {
     max-height: 60px;
     object-fit: contain;
   }
   
   /* Categories Grid */
   .category-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 1.5rem;
     margin-top: 2rem;
   }
   .category-card {
     background-color: var(--color-light);
     border: 1px solid var(--color-border);
     border-radius: 8px;
     overflow: hidden;
     text-align: center;
   }
   .category-card img {
     width: 100%;
     height: auto;
     display: block;
   }
   .category-card h4 {
     padding: 0.75rem 0;
     font-size: 1.125rem;
   }
   
   /* Newsletter Form */
   .newsletter-form {
     display: flex;
     gap: 0.5rem;
     max-width: 400px;
     margin: 1rem auto 0;
   }
   .newsletter-form input {
     flex: 1;
     padding: 0.75rem;
     border: 1px solid var(--color-border);
     border-radius: 4px;
   }
   .newsletter-form .btn-secondary {
     flex-shrink: 0;
   }
   
   /* Newsletter Section */
.newsletter {
  background-color: var(--color-cream);
  padding: 4rem 1rem;
  text-align: center;    /* ← add this */
}

.newsletter h3 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
}

.newsletter p {
  font-size: 1rem;
  margin-bottom: 2rem;
}

/* rest of your newsletter-form styles… */


   /* ===================================================
      Product List (if you re-enable it later)
      =================================================== */
   .product-list {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 1rem;
     padding: 1rem;
   }
   .product-card {
     background-color: var(--color-light);
     border: 1px solid var(--color-border);
     padding: 0.5rem;
     text-align: center;
   }
   .product-card img {
     max-width: 100%;
     height: auto;
     display: block;
     margin-bottom: 0.5rem;
   }
   .product-card h2 {
     font-size: 1.125rem;
     margin-bottom: 0.5rem;
   }
   .product-card p {
     font-size: 1rem;
     color: var(--color-accent);
   }
   

   /* ===================================================
      Responsive Breakpoints
      =================================================== */
   /* Large tablets / small desktops */
   @media (max-width: 1024px) {
     .category-grid {
       grid-template-columns: repeat(2, 1fr);
     }
     .product-list {
       grid-template-columns: repeat(2, 1fr);
     }
   }
   
   /* Tablets */
   @media (max-width: 768px) {
     .hero {
       padding: 4rem 1rem;
     }
     .hero h2 {
       font-size: 2rem;
     }
     .hero p {
       font-size: 1rem;
     }
     .brands,
     .categories,
     .about-us,
     .newsletter {
       padding: 3rem 1rem;
     }
   }
   
   /* Mobile */
   @media (max-width: 600px) {
     .hero {
       padding: 3rem 1rem;
     }
     .hero h2 {
       font-size: 1.75rem;
     }
     .hero p {
       font-size: 0.9rem;
     }
     .brand-logos {
       gap: 1rem;
     }
     .category-grid {
       grid-template-columns: 1fr;
     }
     .newsletter-form {
       flex-direction: column;
     }
     .newsletter-form .btn-secondary {
       width: 100%;
     }
   }