:root{
      --brown-900:#5D4037;
      --brown-800:#6D4C41;
      --brown-700:#795548;
      --brown-600:#8D6E63;
      --cream-50:#FFF8E1;
      --text:#3E2723;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      background: var(--cream-50);
      color: var(--text);
      line-height: 1.5;
    }
    /* Navbar */
    .logo{
      font-weight:800;
      font-size: 20px;
      letter-spacing: .5px;
      text-transform: uppercase;
    }
    .menu{
      list-style:none;
      display:flex;
      gap:20px;
      margin:0;
      padding:0;
    }
    .menu a{
      color:#fff;
      text-decoration:none;
      font-weight:600;
    }
    .menu a:hover{ text-decoration: underline; }

    /* Hero */
    .hero{
      max-width:1100px;
      margin: 28px auto 10px;
      padding: 0 20px;
      text-align:center;
    }
    .hero h1{
      margin:0 0 8px;
      color: var(--brown-900);
      font-size: 28px;
    }
    .hero p{ margin:0; color: #5a4a45; }

    /* Grid Produk */
    .container{
      max-width:1100px;
      margin: 20px auto 40px;
      padding: 0 20px;
    }
    .grid{
      display:grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 18px;
    }
    @media (min-width:640px){
      .grid{ grid-template-columns: repeat(2, 1fr); }
    }
    @media (min-width:960px){
      .grid{ grid-template-columns: repeat(5, 1fr); }
    }
    .card{
      background:#fff;
      border-radius:12px;
      box-shadow: 0 6px 16px rgba(0,0,0,.07);
      overflow:hidden;
      display:flex;
      flex-direction:column;
      transition: transform .15s ease, box-shadow .15s ease;
    }
    .card:hover{
      transform: translateY(-3px);
      box-shadow: 0 10px 20px rgba(0,0,0,.12);
    }
    .thumb{
      width:100%;
      aspect-ratio: 4/3;
      object-fit:cover;
      background:#eee;
      display:block;
    }
    .card-body{
      padding:12px 12px 16px;
      display:flex;
      flex-direction:column;
      gap:6px;
      flex:1;
    }
    .title{
      font-weight:700;
      color:#4E342E;
      font-size: 15px;
      min-height: 40px;
    }
    .price{
      color: var(--brown-700);
      font-weight:800;
      font-size: 16px;
    }
    .buy{
      margin-top:auto;
      display:inline-block;
      background: var(--brown-700);
      color:#fff;
      text-decoration:none;
      padding:10px 12px;
      border-radius:8px;
      text-align:center;
      font-weight:700;
    }
    .buy:hover{ background: var(--brown-900); }

    /* Sections */
    section{
      max-width:900px;
      margin: 0 auto 40px;
      padding: 0 20px;
    }
    section h2{
      color: var(--brown-900);
      margin-bottom:8px;
      font-size: 22px;
    }
    section p{ margin:0; color:#5a4a45; }

    footer{
      background:#3E2723;
      color:#FFF8E1;
      text-align:center;
      padding:22px 16px;
      font-size:14px;
    }