.page-head{max-width:72ch;}
.page-head h1{font-size:clamp(24px,3.2vw,32px);margin-top:8px;}
.page-head p{color:var(--ink-soft);margin-top:10px;font-size:15px;}

/* product picker */
.search-box{position:relative;max-width:420px;margin-top:32px;}
.search-box svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink-faint);pointer-events:none;}
.search-box input{width:100%;padding:10px 14px 10px 38px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--ink);font-size:14px;}
.search-box input::placeholder{color:var(--ink-faint);}

.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:16px;}
.product-card{
  text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px;
  cursor:pointer;display:flex;flex-direction:column;gap:8px;transition:border-color .15s,background .15s;
}
.product-card:hover{border-color:var(--primary-soft);}
.product-card.active{border-color:var(--primary);background:var(--primary-wash);}
.product-card .nm{font-size:15px;font-weight:700;}
.product-card .lot{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-faint);}

/* product detail */
.detail{margin-top:36px;}
.cert-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px 28px;}
.cert-top{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-start;}
.cert-top h2{font-size:22px;}
.cert-top .kat{font-size:13px;color:var(--ink-faint);margin-top:4px;}
.cert-meta{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:16px;font-size:13px;color:var(--ink-soft);}
.cert-meta b{display:block;font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);font-weight:600;margin-bottom:2px;}
.cert-meta span.v{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600;}
.overall-badge{display:flex;align-items:center;gap:10px;padding:8px 16px;border-radius:12px;font-size:13.5px;font-weight:700;}
.overall-badge svg{width:18px;height:18px;flex-shrink:0;}
.overall-verified{background:var(--success-wash);color:var(--success);}
.overall-broken{background:var(--critical-wash);color:var(--critical);}
.overall-flagged{background:var(--warning-wash);color:var(--warning);}

/* stepper */
.stepper{position:relative;display:flex;justify-content:space-between;gap:6px;margin-top:28px;}
.stepper::before{content:"";position:absolute;top:23px;left:23px;right:23px;height:2px;background:var(--border);z-index:0;}
.step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;min-width:0;}
.step .dot{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid var(--border);background:var(--surface);color:var(--ink-faint);flex-shrink:0;}
.step .dot svg{width:20px;height:20px;}
.step label{font-size:11px;font-weight:600;color:var(--ink-soft);text-align:center;line-height:1.25;}
.step.st-ok .dot{border-color:var(--success);color:var(--success);background:var(--success-wash);}
.step.st-tinjauan .dot{border-color:var(--warning);color:var(--warning);background:var(--warning-wash);}
.step.st-pelanggaran .dot{border-color:var(--critical);color:var(--critical);background:var(--critical-wash);}
.step.st-ditahan .dot{border-style:dashed;color:var(--ink-faint);}
@media (max-width:640px){
  .stepper{flex-direction:column;align-items:flex-start;gap:16px;}
  .stepper::before{top:0;bottom:0;left:23px;right:auto;width:2px;height:auto;}
  .step{flex-direction:row;align-items:center;}
  .step label{text-align:left;}
}

/* timeline */
.timeline{position:relative;display:flex;flex-direction:column;gap:0;margin-top:36px;}
.t-row{position:relative;display:grid;grid-template-columns:44px 1fr;gap:18px;padding-bottom:26px;}
.t-row:last-child{padding-bottom:0;}
.t-row::before{content:"";position:absolute;left:21px;top:44px;bottom:0;width:2px;background:var(--border);}
.t-row:last-child::before{display:none;}
.t-icon{position:relative;z-index:1;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--surface-alt);color:var(--primary);flex-shrink:0;}
.t-icon svg{width:20px;height:20px;}
.t-row.st-pelanggaran .t-icon{background:var(--critical-wash);color:var(--critical);}
.t-row.st-ditahan .t-icon{background:var(--neutral-pill);color:var(--ink-faint);}
.t-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px;}
.t-card .top{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start;}
.t-card h3{font-size:15px;font-family:var(--font-body);font-weight:700;}
.t-card .vendor{font-size:13.5px;color:var(--ink-soft);margin-top:3px;}
.t-card .meta{font-size:12px;color:var(--ink-faint);margin-top:2px;font-variant-numeric:tabular-nums;}
.t-card .note{font-size:13px;color:var(--ink-soft);margin-top:10px;padding-top:10px;border-top:1px solid var(--border);}
.t-row.st-ditahan .t-card{opacity:0.65;}