/* Contoh Paket Custom: halaman pesan dengan keranjang.
   Basis warna dan font tetap dari ../kopi.css. */
.app{display:grid;gap:var(--s6)}
@media (min-width:960px){.app{grid-template-columns:1.35fr .65fr;gap:var(--s8);align-items:start}}

.cat-title{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);padding-bottom:var(--s3);border-bottom:2px solid var(--ink);margin-bottom:var(--s4)}
.cat-title h2{font-size:24px}
.cat-title span{font:700 12px/1.4 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-70)}

.items{display:grid;gap:0;border-top:1px solid var(--line)}
.item{display:grid;grid-template-columns:1fr;gap:var(--s2);padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.item .head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3)}
.item h3{font-size:20px}
.item .pr{font:700 16px/1.3 var(--f-body);white-space:nowrap}
.item p{font-size:15px;color:var(--ink-70)}
.item .acts{display:flex;align-items:center;gap:var(--s3);margin-top:6px;flex-wrap:wrap}

/* pengatur jumlah: satu-satunya kontrol yang menyimpan keadaan */
.qty{display:inline-flex;align-items:center;border:2px solid var(--ink)}
.qty button{width:44px;height:44px;background:transparent;border:0;cursor:pointer;font:700 20px/1 var(--f-body);color:var(--ink);display:grid;place-items:center}
.qty button:hover:not(:disabled){background:var(--paper-2)}
.qty button:disabled{color:#6f6250;cursor:not-allowed}
.qty output{min-width:40px;text-align:center;font:700 16px/1 var(--f-body);border-left:2px solid var(--ink);border-right:2px solid var(--ink);padding:0 4px;align-self:stretch;display:grid;place-items:center}
.item .add{min-height:44px;padding:0 16px;font:700 15px/1 var(--f-body);background:transparent;border:2px solid var(--ink);cursor:pointer;color:var(--ink)}
.item .add:hover{background:var(--ink);color:var(--paper)}

/* keranjang */
.cart{background:var(--paper-2);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--paper-3);padding:var(--s5);display:grid;gap:var(--s4)}
@media (min-width:960px){.cart{position:sticky;top:88px}}
.cart h2{font-size:22px;display:flex;align-items:center;gap:var(--s2)}
.cart h2 .n{font:700 12px/1 var(--f-body);letter-spacing:.1em;color:var(--paper);background:var(--terra);padding:5px 8px}
.cart-empty{display:grid;gap:var(--s2);padding:var(--s4) 0;border-top:1px solid var(--line-strong)}
.cart-empty b{font:600 18px/1.3 var(--f-display)}
.cart-empty p{font-size:14px;color:var(--ink-70)}
.lines{list-style:none;display:grid;gap:0;border-top:1px solid var(--line-strong)}
.lines li{display:grid;grid-template-columns:1fr auto auto;gap:var(--s2) var(--s3);align-items:center;padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.lines .nm{font-weight:700;font-size:15px}
.lines .sub{grid-column:1;font-size:13px;color:var(--ink-70)}
.lines .q{font:700 15px/1 var(--f-body)}
.lines .rm{width:44px;height:44px;display:grid;place-items:center;background:transparent;border:1px solid var(--line-strong);cursor:pointer;color:var(--ink-70);font:700 16px/1 var(--f-body)}
.lines .rm:hover{border-color:#8f370c;color:#8f370c}
.total{display:flex;justify-content:space-between;align-items:baseline;padding-top:var(--s2);border-top:2px solid var(--ink)}
.total .k{font:700 12px/1.4 var(--f-body);letter-spacing:.14em;text-transform:uppercase}
.total .v{font:600 22px/1 var(--f-display)}
.cart .note{font-size:13px;color:var(--ink-70)}
.cart .btn{width:100%}

/* formulir pesanan di dalam keranjang */
.order{display:grid;gap:var(--s3);border-top:1px solid var(--line-strong);padding-top:var(--s4)}
.order .row{display:grid;gap:5px}
.order label{font:700 11px/1.4 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-70)}
.order input,.order select,.order textarea{font:400 16px/1.5 var(--f-body);color:var(--ink);background:var(--paper);border:2px solid var(--line-strong);padding:10px 12px;min-height:46px;width:100%}
.order textarea{min-height:74px;resize:vertical}
.order input:focus,.order select:focus,.order textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(168,65,15,.18)}
.order .err{display:none;font-size:13px;font-weight:700;color:#8f370c}
.order .bad .err{display:block}
.order .bad input,.order .bad select{border-color:#8f370c}
.sent{display:grid;gap:var(--s2);padding:var(--s4);border:2px solid var(--moss);background:#eef2e6}
.sent b{font:600 18px/1.3 var(--f-display);color:var(--moss)}
.sent p{font-size:14px}
.sent a{min-height:44px;display:inline-flex;align-items:center;font-weight:700}
.sent button{justify-self:start;min-height:44px;padding:0 14px;border:2px solid var(--moss);background:transparent;color:var(--moss);font:700 14px/1 var(--f-body);cursor:pointer}

/* keterangan cara kerja, di bawah daftar */
.howto{display:grid;gap:var(--s3);margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line-strong)}
.howto h2{font-size:20px}
.howto ol{list-style:none;display:grid;gap:var(--s2);counter-reset:h}
.howto li{counter-increment:h;display:grid;grid-template-columns:28px 1fr;gap:var(--s2);font-size:15px;color:var(--ink-70)}
.howto li::before{content:counter(h);font:700 13px/1.4 var(--f-body);color:var(--terra)}