:root {
      --green: #3a6d21;
      --green-light: #4c8b2b;
      --bg: #f4f4f4;
      --card: #ffffff;
      --radius: 18px;
      --shadow: 0 8px 20px rgba(0,0,0,0.08);
    }
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 30px;
    }

    /* --- PRODUKT HEADER --- */
    .product-header {
      text-align: center;
      margin-bottom: 40px;
    }
    .product-header h1 {
      font-size: 32px;
      margin: 0;
      color: var(--green);
    }

    /* --- PRODUKT GRID --- */
    .product-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
    }

    /* --- GALLERY --- */
    .gallery {
      background: var(--card);
      padding: 20px;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }
    #mainImage {
      width: 100%;
      border-radius: var(--radius);
      height: 420px;
      object-fit: cover;
    }
    .thumb-row {
      display: flex;
      gap: 10px;
      margin-top: 10px;
    }
    .thumb-row img {
      width: 80px;
      height: 80px;
      border-radius: 12px;
      object-fit: cover;
      cursor: pointer;
      border: 2px solid transparent;
      transition: 0.2s;
    }
    .thumb-row img:hover {
      border-color: var(--green-light);
    }

    /* --- DETAILS --- */
    .details {
      background: var(--card);
      padding: 30px;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    h2 {
      margin-top: 0;
      color: var(--green);
    }

    select {
      width: 100%;
      padding: 12px;
      border-radius: 12px;
      margin-bottom: 20px;
      font-size: 16px;
      border: 1px solid #ccc;
    }

    .price-box {
      background: var(--green-light);
      padding: 15px;
      color: #fff;
      font-size: 24px;
      font-weight: bold;
      border-radius: var(--radius);
      text-align: center;
      margin-bottom: 20px;
    }

    .buy-button {
      background: var(--green);
      border: none;
      width: 100%;
      padding: 15px;
      font-size: 18px;
      color: #fff;
      border-radius: var(--radius);
      cursor: pointer;
      transition: 0.2s;
    }
    .buy-button:hover {
      background: #2f571a;
    }

    /* --- SECTIONS --- */
    .section {
      background: var(--card);
      padding: 30px;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      margin-top: 40px;
    }

    ul li {
      margin-bottom: 8px;
    }