/* Presentation is independent of the number, cadence and window of points. */
.store-card-pinnable {
  --profit-chart-positive: #168f55;
  --profit-chart-negative: #f1107e;
  --profit-chart-line-width: 2;
  --profit-chart-area-opacity: .09;
}
.store-card-link.has-store-profit {
  grid-template-rows: 18px minmax(0, 1fr) auto;
  row-gap: 12px;
}
.store-card-top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.store-card-top .store-card-title { min-width: 0; width: fit-content; max-width: 100%; margin: 0; border-radius: 20px; }
.store-card-footer.has-profit-chart {
  grid-row: auto;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
}
.store-profit-chart { display: block; width: 100%; height: auto; overflow: visible; }
.store-profit-chart-positive { color: var(--profit-chart-positive); }
.store-profit-chart-negative { color: var(--profit-chart-negative); }
.store-profit-chart-line { fill: none; stroke: currentColor; stroke-width: var(--profit-chart-line-width); stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.store-profit-chart-area { fill: currentColor; opacity: var(--profit-chart-area-opacity); }
.store-profit-chart-zero { stroke: #d9dde4; stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.store-profit-chart-dot { fill: currentColor; }
.store-profit-chart-hit { fill: transparent; cursor: help; }
.store-profit-chart-point:hover .store-profit-chart-dot { stroke: currentColor; stroke-width: 2; }
@media (min-width: 901px) and (max-width: 1400px) {
  .store-grid-with-profit-history { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .store-card-link.has-store-profit {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 18px auto auto auto auto;
    grid-template-areas: "status" "title" "client" "chart" "profit";
  }
  .has-store-profit .store-card-top,
  .has-store-profit .store-card-footer { display: contents; }
  .has-store-profit > .status-dot { grid-area: status; }
  .has-store-profit .store-card-title { grid-area: title; }
  .has-store-profit .store-card-client-id { grid-area: client; }
  .has-store-profit .store-profit-chart { grid-area: chart; }
  .has-store-profit .store-card-profit { grid-area: profit; }
}