/* ===================== Product card: the name first and clear, the price easy to find ===================== */
/* grid cards: name on top in the heading face, the code and group as a quiet line under it */
.shop-grid:not(.list) .pc .nm{order:-1;font-family:Jost,system-ui,sans-serif;font-size:1.08rem;font-weight:600;line-height:1.28;color:var(--darkest);letter-spacing:.005em;min-height:2.56em;margin-bottom:2px}
.shop-grid:not(.list) .pc .bd{padding-top:14px;gap:4px}
.pc .nm:hover{color:var(--deep);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.pc .code{font-size:11px}
/* list view keeps its row layout, only the weight changes */
.shop-grid.list .pc .nm{font-family:Jost,system-ui,sans-serif;font-size:1.02rem;font-weight:600;color:var(--darkest)}
/* price */
.pc .pr{padding-top:10px;gap:6px 8px}
.pc .pr b{font-size:1.28rem;font-weight:700;letter-spacing:-.005em}
.pc .pr s{font-size:.84rem}
.pc .pr .u{font-size:.74rem}
.pc .pr .req{font-size:.92rem}
@media(max-width:600px){.shop-grid:not(.list) .pc .nm{font-size:1rem}.pc .pr b{font-size:1.15rem}}
/*chart-in-body*/ .shop-grid:not(.list) .pc .bd .pc-chart{border:1px solid var(--ice);border-radius:8px;padding:5px 8px;margin:4px 0 2px;line-height:0;cursor:pointer}
.shop-grid:not(.list) .pc .bd .pc-chart img{height:44px}
/* one general delivery line instead of a stock status per product */
.stk.gen{color:var(--deeper);align-items:flex-start;line-height:1.35;font-size:11.5px;cursor:help}
.stk.gen i{background:var(--tq);margin-top:4px}
.fopt:has(input[onclick*="'stock'"]){display:none}