/* WeightLossPrice additions on top of the shared design system */
.dtabs{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}
.dtab{font:600 14px/20px var(--f);padding:6px 14px;border:1px solid var(--border);border-radius:2em;background:var(--canvas);color:var(--fg);cursor:pointer}
.dtab:hover{background:var(--subtle)}
.dtab[aria-selected="true"]{background:var(--fg);border-color:var(--fg);color:#fff}
.dose-panel+.dose-panel{margin-top:16px}
.js .dose-panel[hidden]{display:none}
.best{display:inline-block;margin-left:6px;font-size:11px;font-weight:600;color:var(--green);background:var(--green-bg);border:1px solid var(--green-bd);border-radius:2em;padding:0 6px;line-height:16px;vertical-align:1px}
.addcode{font-size:12px;color:var(--muted);text-decoration:underline dotted;text-underline-offset:3px}
.addcode:hover{color:var(--accent)}
.code{font-family:var(--fm);font-size:13px;border:1px dashed var(--green);border-radius:6px;padding:2px 8px;background:var(--green-bg);color:var(--green)}
table.mini{width:100%;border-collapse:collapse;font-size:13px}
.mini th,.mini td{padding:7px 16px;text-align:left;border-top:1px solid var(--border2)}
.mini thead th{font-size:12px;color:var(--muted);font-weight:600;background:var(--subtle);border-top:0}
.mini .sub{display:block}
table.mini2{width:100%}
.matrix{overflow-x:auto}
table.mtx th,table.mtx td{white-space:nowrap}
table.mtx th[scope=row]{white-space:normal;min-width:220px}
@media (max-width:768px){
  .cmp.wl td[data-label="Price per pen"]{grid-column:1/-1;background:var(--subtle);border:1px solid var(--border2);border-radius:var(--r);padding:8px 10px}
  .cmp.wl td[data-label="Price per pen"] .num{font-size:18px}
  .cmp.mtx tbody th{grid-column:1/-1}
  .matrix{overflow:visible}
  table.mtx th[scope=row]{min-width:0}
  .mini th,.mini td{padding:7px 12px}
}
.codes-note{font-size:13px;color:var(--muted);margin:0 0 12px}
/* interactive price list */
.pl-bar{position:sticky;top:62px;z-index:4;background:var(--canvas);padding:10px 0;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;border-bottom:1px solid var(--border2);margin-bottom:12px}
.seg{display:inline-flex;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--subtle)}
.segb{font:500 13px/20px var(--f);padding:5px 12px;border:0;background:none;color:var(--fg);cursor:pointer;border-right:1px solid var(--border)}
.segb:last-child{border-right:0}
.segb[aria-checked="true"]{background:var(--canvas);font-weight:600;box-shadow:inset 0 -2px 0 var(--green-btn)}
.dchips{display:flex;gap:6px;flex-wrap:wrap}
.dchip{font:600 13px/18px var(--f);padding:5px 11px;border:1px solid var(--border);border-radius:2em;background:var(--canvas);color:var(--fg);cursor:pointer}
.dchip[aria-pressed="true"]{background:var(--fg);border-color:var(--fg);color:#fff}
.pl-tools{display:flex;gap:12px;align-items:center;margin-left:auto}
.pl-tools input[type=search]{font:inherit;font-size:14px;padding:5px 10px;border:1px solid var(--border);border-radius:var(--r);min-width:180px}
.pl-tools .count{margin:0;padding:0}
.matrix{position:relative;overflow-x:auto;border:1px solid var(--border);border-radius:var(--r)}
.matrix.more{box-shadow:inset -18px 0 14px -14px rgba(31,35,40,.25)}
table.mtx{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;background:var(--canvas)}
.mtx-cap{margin:0 0 8px;font-size:12px;color:var(--muted)}
.mtx th,.mtx td{padding:10px 12px;border-bottom:1px solid var(--border2);text-align:left;vertical-align:top;background:var(--canvas)}
.mtx thead th{background:var(--subtle);font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;border-bottom:1px solid var(--border)}
.mtx .pcol{position:sticky;left:0;z-index:2;min-width:210px;border-right:1px solid var(--border2)}
.mtx thead .pcol{z-index:3}
.mtx .pcol .chip{display:inline-flex;margin-top:4px}
.mtx .pcol .cn{display:block}
.mtx td.pc{white-space:nowrap;min-width:84px}
.mtx td.pc.na .pv-v{color:var(--muted);font-size:12px;white-space:normal}
.mtx td.pc.low{background:var(--green-bg)}
.mtx td.pc.low .pv-v{color:var(--green);font-weight:600}
.mtx td.pc.low .pv-v::after{content:"Lowest";display:block;font:600 10px/1.4 var(--f);letter-spacing:.02em;color:var(--green)}
.mtx .dcol.sel{box-shadow:inset 0 0 0 9999px rgba(9,105,218,.04)}
.mtx thead .dcol.sel{color:var(--fg)}
.sortb{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.mtx .ocol{min-width:180px;font-size:13px}
.mtx tr:last-child>*{border-bottom:0}
@media (max-width:768px){
  .pl-bar{position:static;gap:8px}
  .seg{width:100%}.segb{flex:1;padding:6px 4px;font-size:12px}
  .pl-tools{margin-left:0;width:100%}.pl-tools input[type=search]{flex:1;min-width:0}
  .mtx .pcol{min-width:130px;max-width:150px}
  .mtx .pcol .lg{display:none}
  /* one dose selected: compact cards, nothing to scroll */
  table.mtx.one thead{display:none}
  table.mtx.one,table.mtx.one tbody{display:block}
  table.mtx.one tbody tr{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:12px 14px;border-bottom:1px solid var(--border2)}
  table.mtx.one tbody tr[hidden]{display:none}
  table.mtx.one th,table.mtx.one td{border:0;padding:0;position:static;min-width:0;max-width:none;background:none}
  table.mtx.one td.pc{display:none}
  table.mtx.one td.pc.sel{display:block;grid-column:2;grid-row:1;text-align:right;align-self:start}
  table.mtx.one td.pc.sel .pv-v{font-size:18px}
  table.mtx.one td.pc.low{background:none}
  table.mtx.one .pcol{grid-column:1;grid-row:1;border:0}
  table.mtx.one .pcol .lg{display:block}
  table.mtx.one .pcol .lg-ph{display:grid}
  table.mtx.one .dcol.sel{box-shadow:none}
  table.mtx.one .ocol{grid-column:1/-1;white-space:normal}
  table.mtx.one td.cta{grid-column:1/-1;text-align:left}
}