/* Website styles, worker c (client change list) */

/* ===== Price list (/price-list) ===== */
/* Wide screens: the table scrolls inside its own box and the product name is written once per product. */
.ms-pl-wrap{overflow-x:auto}
.ms-pl{min-width:720px}
.ms-pl td.dup>*{display:none}
.ms-pl td.o{vertical-align:middle}

/* Phones: every price row becomes a card (product, validity, prices and the buttons together), so nothing is off-screen
   and you always see which row you are buying. */
@media (max-width:760px){
  .ms-pl-wrap{overflow:visible}
  .ms-table.ms-pl{display:block;min-width:0;border:0;border-radius:0;background:transparent;overflow:visible}
  .ms-pl thead{display:none}
  .ms-pl tbody{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
  .ms-pl tr{display:flex;flex-wrap:wrap;gap:10px 12px;padding:14px;border:1px solid var(--ms-line);border-radius:14px;background:#fff;box-shadow:0 1px 2px rgb(6 34 29/.04)}
  .ms-pl tr:hover td{background:transparent}
  .ms-pl td{display:block;padding:0;border:0;min-width:0}
  .ms-pl td.dup>*{display:revert}
  .ms-pl td.n{flex:1 1 100%;font-size:15.5px;line-height:1.3;padding-bottom:10px;border-bottom:1px solid var(--ms-line)}
  .ms-pl td[data-label]{flex:1 1 80px;text-align:left;white-space:normal}
  .ms-pl td[data-label]::before{content:attr(data-label);display:block;margin-bottom:2px;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#6b7a76}
  .ms-pl td[data-label] b{font-size:17px}
  .ms-pl td.o{flex:1 1 100%;text-align:left}
  .ms-pl .ms-plf{justify-content:stretch;gap:8px}
  .ms-pl .ms-plf .ms-pct{justify-content:flex-start;font-size:14px;margin:0 0 2px}
  .ms-pl .ms-plf .ms-btn{flex:1 1 0;min-width:0;height:44px;font-size:14.5px}
}