/* Sample box orders (/admin/orders). Built on admin.css (.adm, .adm-top, .kpi, .dkv, .adm-modal ...) and the site tokens in site.css. */
.so .adm-bottom{grid-template-columns:repeat(3,1fr)}
.so-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
@container main (max-width:720px){.so-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.so .badge.b-pending{background:var(--lemon);color:#7a5200}
.so .badge.b-paid{background:var(--sky);color:#1d4f8f}
.so .badge.b-shipped{background:var(--mint);color:#146b45}
.so .badge.b-cancelled{background:#eeefec;color:var(--ink2)}
.so .badge.b-refunded{background:var(--peach);color:#8a4a12}

/* list: a table on wide screens, cards below 760px of list width */
.so-list{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.so-row{display:grid;grid-template-columns:112px 132px minmax(0,1.5fr) minmax(0,.8fr) minmax(0,1.1fr) 80px 76px;gap:12px;align-items:center;width:100%;padding:11px 14px;border-top:1px solid var(--line);font-size:13px;text-align:start;cursor:pointer;min-width:0;transition:background-color .15s}
.so-row:first-child{border-top:0}
.so-row:hover{background:#fafaf8}
.so-row.sel{background:var(--accent-soft)}
.so-row>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.so-head{cursor:default;font-size:11.5px;font-weight:800;color:var(--ink3);background:var(--soft2)}
.so-head:hover{background:var(--soft2)}
.so-ref{font-weight:800;font-size:12.5px}
.so-who b{display:block;font-weight:800;overflow:hidden;text-overflow:ellipsis}
.so-who small,.so-picks small{display:block;font-size:12px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis}
.so-amt{font-weight:800;font-variant-numeric:tabular-nums;text-align:end}
.so-time{font-size:12px;color:var(--ink3);text-align:end}
.so-meta{display:none}
@container main (max-width:760px){
  .so-head,.so-ref,.so-cty,.so-picks{display:none}
  .so-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who st" "who amt" "meta time";gap:3px 12px;padding:12px 14px}
  .so-who{grid-area:who}.so-st{grid-area:st;justify-self:end}.so-amt{grid-area:amt}.so-time{grid-area:time}
  .so-meta{grid-area:meta;display:block;font-size:12px;color:var(--ink2)}
}
.so-empty{background:var(--panel);border:1px dashed var(--line2);border-radius:14px}

/* detail */
.so-box{background:var(--soft2);border-radius:12px;padding:12px 14px;font-size:13.5px;line-height:1.6;font-weight:600;white-space:pre-line;overflow-wrap:anywhere}
.so-box.plain{font-weight:500;white-space:pre-wrap}
.so-sec-h{display:flex;align-items:center;gap:8px}
.so-sec-h .btn-xs{margin-left:auto}
.so-picklist{list-style:none;display:grid;gap:10px}
.so-picklist li{display:flex;align-items:center;gap:10px;min-width:0}
.so-picklist img{flex:none;width:38px;height:38px;border-radius:9px;object-fit:cover;background:#eceef5}
.so-picklist b{display:block;font-size:13.5px}
.so-picklist small{display:block;font-size:12.5px;color:var(--ink2);overflow-wrap:anywhere}
.so-picklist small.none{color:var(--ink3)}
.so-picklist li:has(.so-brief){align-items:flex-start}
.so-brief{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;margin:4px 0 2px;font-size:12.5px;line-height:1.45}
.so-brief dt{color:var(--ink3);font-weight:600;white-space:nowrap}
.so-brief dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.so-tl{list-style:none;display:grid;gap:10px}
.so-tl li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;font-size:13px}
.so-tl time{font-size:12px;color:var(--ink3);font-weight:600;padding-top:1px}
.so-tl b{font-weight:800}
.so-tl span{color:var(--ink2);overflow-wrap:anywhere}
.so-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;letter-spacing:.01em}
.so-others{list-style:none;display:grid;gap:6px}
.so-others button{display:flex;gap:8px;align-items:center;width:100%;font-size:13px;text-align:start}
.so-others button b{font-weight:800}
.so-others button:hover b{text-decoration:underline}

/* PayPal notification log */
.so-ipn{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.so-ipn details{border-top:1px solid var(--line)}
.so-ipn details:first-child{border-top:0}
.so-ipn summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:104px minmax(0,1.3fr) 110px 110px minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:center;padding:11px 14px;font-size:13px}
.so-ipn summary::-webkit-details-marker{display:none}
.so-ipn summary:hover{background:#fafaf8}
.so-ipn summary>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.so-ipn .hot{color:var(--accent-dark);font-weight:800}
.so-ipn .dim{color:var(--ink3)}
.so-ipn .so-ipn-h{cursor:default;font-size:11.5px;font-weight:800;color:var(--ink3);background:var(--soft2)}
.so-raw{margin:0 14px 14px;background:var(--soft2);border-radius:10px;padding:10px 12px;display:grid;grid-template-columns:minmax(120px,auto) minmax(0,1fr);gap:3px 14px;font-size:12px;max-height:340px;overflow:auto}
.so-raw dt{color:var(--ink3);font-weight:600}
.so-raw dd{overflow-wrap:anywhere}
@container main (max-width:760px){
  .so-ipn .so-ipn-h{display:none}
  .so-ipn summary{grid-template-columns:minmax(0,1fr) auto;gap:3px 10px}
  .so-ipn summary .c-inv,.so-ipn summary .c-payer{display:none}
}