/* A plan of the price list (the «price-row» of today's site) with the same layout at every width and nothing on top of
   anything: «Σύγκριση», how the price moved in a box of fixed width («+2,1%», «−1,5%», «0%», «—» for a new plan), and
   «Αλλαγή σε 1′» as a round cart. */
.price-row{grid-template-columns:150px minmax(180px,1.15fr) minmax(130px,.85fr) 100px 120px auto}
.price-row>*{min-width:0}
.price-actions{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:10px}
.price-actions .compare-check{margin-right:0}
.price-actions .change{display:inline-flex;flex:0 0 64px;width:64px;height:30px;align-items:center;justify-content:center;padding:0;border:1px solid #d6e2ec;border-radius:8px;background:#f5f8fb;color:#4c5d72;font-size:.78rem;font-weight:800;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.price-actions .change--up{border-color:#f2c4c0;background:#fdf1f0}
.price-actions .change--down{border-color:#b9dfc8;background:#eef9f2}
.price-actions .change--new{color:#7d8a9a;cursor:default}

/* Between a phone and a computer: the logo on the left over two lines, the name across, then price, fee, cost, actions. */
@media(min-width:681px) and (max-width:1180px){
  .price-row{grid-template-columns:96px repeat(3,minmax(0,1fr)) auto}
}

/* A phone, upright or sideways: logo, name, price and fee side by side, the cost, and one line of actions. */
@media(max-width:680px){
  .price-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .price-provider,.price-program,.price-estimate,.price-actions{grid-column:1/-1}
  .price-actions{justify-content:flex-start;border-top:1px solid var(--line);padding-top:12px}
  .price-actions .compare-check{margin-right:auto}
}
@media(max-width:390px){
  .price-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .price-provider,.price-program,.price-estimate,.price-actions{grid-column:1/-1}
}

/* «Φθηνότερες τιμές» above the price list: the same round cart, beside the price. */



/* The clean logos (no empty margins): a tall one (nrg) gets the height it needs; the wide ones stay within their width. */
.price-row .price-provider img{max-height:46px}