/* finance and till section tabs on tablets and phones: wrap into a grid instead of scrolling sideways */
@media (max-width: 1000px) {
  #mainContent .finance-tabbar,
  #mainContent #tillContent .till-section-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
    overflow: visible;
  }

  #mainContent .finance-tabbar .finance-tab-item,
  #mainContent #tillContent .till-section-tabs .finance-tab-item {
    flex: none;
    min-width: 0;
    min-height: 60px;
    margin: 0;
    padding: 10px;
    justify-content: flex-start;
    gap: 10px;
    border: 1px solid var(--ui-stroke);
    border-radius: 14px;
    background: color-mix(in srgb, var(--ui-surface-strong, #fff) 55%, transparent);
  }

  #mainContent .finance-tabbar .finance-tab-item:is(:last-child, :nth-child(3)) {
    border-inline-end: 1px solid var(--ui-stroke);
  }

  #mainContent .finance-tabbar .finance-tab-item .finance-card-title {
    overflow: visible;
    white-space: normal;
    font-size: 13px;
    line-height: 1.4;
  }

  #mainContent .finance-tabbar .finance-tab-item .finance-card-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
  }

  #mainContent .finance-tabbar .finance-tab-item.active {
    border-color: color-mix(in srgb, var(--finance-tab-tone) 45%, transparent);
  }
}

@media (max-width: 620px) {
  #mainContent .finance-tabbar,
  #mainContent #tillContent .till-section-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 6px;
  }

  #mainContent .finance-tabbar .finance-tab-item,
  #mainContent #tillContent .till-section-tabs .finance-tab-item {
    min-height: 54px;
    padding: 8px;
    gap: 8px;
  }

  #mainContent .finance-tabbar .finance-tab-item .finance-card-title {
    font-size: 12.5px;
  }
}