/* Tambahan untuk contoh Paket UMKM: katalog, kategori, dan label produk.
   Basis warna, font, dan tombol tetap dari ../kopi.css. */
.cat-nav{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.cat-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:2px solid var(--line-strong);text-decoration:none;font-weight:700;font-size:15px}
.cat-nav a:hover{border-color:var(--ink);background:var(--paper)}

.products{display:grid;gap:0;border-top:1px solid var(--line-strong)}
@media (min-width:760px){.products{grid-template-columns:repeat(2,1fr);column-gap:var(--s7)}}
.product{padding:var(--s5) 0;border-bottom:1px solid var(--line);display:grid;gap:var(--s2);align-content:start}
.product .top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3)}
.product h3{font-size:21px}
.product .pr{font:700 17px/1.3 var(--f-body);white-space:nowrap}
.product p{font-size:15px;color:var(--ink-70)}
.product .spec{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:2px}
.product .spec span{font:700 11px/1.5 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-70);border-bottom:1px solid var(--line-strong);padding-bottom:1px}
.product a.ask{justify-self:start;margin-top:6px}

/* tingkat sangrai: tiga titik, diisi sesuai tingkat. Bukan hiasan: pembeli kopi
   memang memilih berdasarkan tingkat sangrai. */
.roast{display:inline-flex;align-items:center;gap:5px}
.roast i{width:8px;height:8px;border:1.5px solid var(--ink);display:block}
.roast i.on{background:var(--terra);border-color:var(--terra)}
.roast b{font:700 11px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-70);margin-left:4px}

/* tiga sorotan di beranda */
.points{display:grid;gap:0;border-top:1px solid var(--line-strong)}
@media (min-width:760px){.points{grid-template-columns:repeat(3,1fr);column-gap:var(--s6)}}
.point{padding:var(--s5) 0;border-bottom:1px solid var(--line)}
@media (min-width:760px){.point{border-bottom:none}}
.point h3{margin-bottom:var(--s2)}
.point p{font-size:15px;color:var(--ink-70)}
.point .n{font:700 12px/1 var(--f-body);letter-spacing:.16em;color:var(--terra);display:block;margin-bottom:var(--s3)}

/* langkah proses: lima langkah nyata, bukan tiga langkah template */
.steps{display:grid;gap:0;counter-reset:st;border-top:1px solid var(--line-strong)}
.step{padding:var(--s5) 0;border-bottom:1px solid var(--line);counter-increment:st;display:grid;gap:4px}
@media (min-width:760px){.step{grid-template-columns:56px 1fr;gap:var(--s4);align-items:baseline}}
.step::before{content:counter(st);font:600 22px/1 var(--f-display);color:var(--terra)}
.step b{font:600 19px/1.3 var(--f-display);display:block}
.step span{color:var(--ink-70);font-size:15px}

/* dua kolom teks + papan info */
.split{display:grid;gap:var(--s6)}
@media (min-width:860px){.split{grid-template-columns:1.15fr .85fr;gap:var(--s8);align-items:start}}
.board{border:2px solid var(--ink);padding:var(--s5);background:var(--paper-2);box-shadow:6px 6px 0 var(--paper-3)}
.board h3{font-size:18px;margin-bottom:var(--s3)}
.board ul{list-style:none;display:grid;gap:var(--s2);font-size:15px}
.board li{display:grid;grid-template-columns:16px 1fr;gap:10px;align-items:start}
.board li::before{content:"";width:9px;height:9px;background:var(--terra);margin-top:6px}

/* formulir kontak: label di atas, pesan galat di dekat kolom */
.form{display:grid;gap:var(--s4);max-width:560px}
.form .row{display:grid;gap:6px}
.form label{font:700 12px/1.4 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-70)}
.form input,.form select,.form textarea{font:400 16px/1.5 var(--f-body);color:var(--ink);background:var(--paper);border:2px solid var(--line-strong);padding:12px 14px;min-height:48px;width:100%}
.form textarea{min-height:110px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(168,65,15,.18)}
.form .hint{font-size:13px;color:var(--ink-70)}
.form .err{font-size:14px;font-weight:700;color:#8f370c;display:none}
.form .row.bad .err{display:block}
.form .row.bad input{border-color:#8f370c}
.form .note{font-size:13px;color:var(--ink-70);max-width:46ch}